What web designers can learn from social media

It’s safe to say the simple days of web design are long gone. Designing for the internet used to be text and image working together to connect with the user. But with the growth of mobile and social media, as well as a younger generation of consumers, sites now have to suit new behaviours and expectations.

The biggest drivers of this shift have undoubtedly been Facebook, Twitter and Instagram, as over the last decade they’ve essentially changed how web traffic is funnelled, building entirely new user journeys. That’s ultimately a path we’re still on – as it continues to evolve around us now – but there are already some clear lessons that we, as web designers, can learn and factor into builds.

29 web design tools to speed up your workflow

01. Tailor your content to fit your audience

If you look at Instagram, the platform has typically attracted a younger audience, but today there’s an older demographic that’s getting involved. That has in turn had an impact on how we use it, as often now the image to copy ratio per post is tailored to each specific audience – younger versus older audiences.

For example, Gatwick Airport’s Humans of Gatwick series on Instagram has a very long caption aimed at a more mature audience who will read all of it, whereas Adidas focused more on the visual and less on the copy when releasing the new Solar Boost range, aimed at younger consumers.

The lesson here for web design is to tailor the image to text ratio of your design to each specific audience. Adapting and introducing this level of audience understanding helps smoothly transition a user from social media to when they arrive on the website, thus helping to set the site’s content hierarchy as a whole.

02. Keep your website's brand and social consistent

On Twitter, my design team often use a large font in images, so users don’t need to click to expand to be able to consume the message. This font is something that, when designing for web, we will connect to the first line of the website, so a user can in turn connect the two and not get lost from the initial interaction from social.

Continuity is key, so we would either follow on from or directly replicate it using the font and message so it has brand consistency across all channels, be it social or website. Font consistency builds brand awareness and helps to become an icon for the client or company. For a list of the best fonts to use online, see our post on web fonts.

03. Establish your online presence with a colour scheme

There is a single flat colour trend on social media at the moment that sees influencers and celebrities build and stick to a specific colour scheme for their profiles or a specific colour grading for their YouTube or Instagram Stories footage.

These seemingly subtle colour choices can connect with the target audience, and in turn make the overall theme synonymous with that content creator. It’s a brand guideline but not as we typically know it and there are lessons for web designers.

Taking this trend of subtle colour changes or consistent background colour to the front end of a website helps connect to the specific audience that is coming from social media. This system is perfect for a campaign, for example, as the colour theme enables a campaign to stand out on its own while still not straying too far from the core branding.

04. Use patterns to get recognised

Burberry recently had a huge brand design overhaul and used the same monogram pattern across all of its social media channels and on its website. As designers, it’s common to hide such patterns in the background and lower the opacity so that they’re nearly non-existent but Burberry did the complete opposite of this, featuring the patterns in its imagery and thus drawing the user’s attention to it.

It’s a fashion-focused way of using patterns on clothing and accessories, but this tactic instantly changed the way people recognised the pattern and proved that less isn’t always more. It’s an easy way to build brand recognition across social media, online and in physical spaces, which is something I’d expect to see more of moving forward.

05. Create social-specific landing pages

Most social media platforms have a mobile-first way of thinking, which means we design with mobile at the heart of a website. But it’s not always the case. Some clients have multiple campaigns across three different social channels, which means something that was once a one-size-fits-all website turns into three sizes then back into one.

In these cases, web designers should look at designing different landing pages or sub-pages that connect better with the audience or content from each social channel a user is being directed from.

This responsiveness, alongside repetition and consistency, are key design lessons from social media. However, if you wander too far from the tree, you risk losing the fresh pickings, so my advice would be to not get too hooked up on social media. Use the lessons here but don’t let them define your design.

This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 313 or subscribe.

Related articles: