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.

Are you just getting started with your first website build? A website builder will help simplify the process.

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.

“I’ve always been a real people person - I get on with anyone and everyone!" . Steve, who works as a warehouse operative for DHL at Gatwick, was “born and bred in Crawley” and started working at the airport last July after signing up to Gatwick’s One Destination Employability programme. The scheme helps to encourage unemployed people back into the workplace. . “I was ill for a while and, during my recovery, a woman at the Job Centre pointed me in the direction of the employability scheme - and the rest is history! Three of us from the scheme came to work at the DHL warehouse at Gatwick. I absolutely love it – working in this role offers stability that I’ve never really had in the past. . "Before this job, I worked on building sites as a labourer. When I speak to friends that still work in that environment, I describe this place as being just like a site too, mainly because I’m always all over the warehouse doing different little jobs. Thankfully it’s all indoors though, unlike on an actual building site! . "Day to day, I have to keep all of the goods moving through the building so that they can get to where they need to be on time. I work on everything in the warehouse: at the bays, with the lorry drivers, at the belts... you name it and I’m there. Each day absolutely flies by. . "I would say that my most memorable moment so far was winning the Employee of the Month award in October. I was so proud, and it came as such a shock. I wanted to buy trainers with the vouchers that I won, but my daughter warned me that it was going to start getting cold soon... so I bought thermals instead!” . Getting involved with Gatwick’s One Destination Employability programme was clearly a great decision by Steve – and his Employee of the Month award suggests he’s doing brilliantly in his new role at DHL Gatwick! Applications for the scheme are now open for 2019. Email community@gatwickairport.com for more information. . #Gatwick #HumansofGatwick #NewBeginnings #NewYearNewMe Gatwick Airport

A photo posted by @gatwickairport on Jan 10, 2019 at 2:58am PST

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 (a web hosting service will help with analytics of your audience's experience of your site).

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.

See more

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

The #ThomasBurberryMonogram August 2018 Burberry

A photo posted by @burberry on Aug 2, 2018 at 3:00am PDT

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. 

Got a new design system in the works? Decent cloud storage will keep your team consistent and connected.

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:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Aaron Griffiths is senior design director at Battenhall, the multi-award winning communications agency.