In this day and age, many of us spend our lives swiping and scrolling through our socials. And, in addition to being a constant source of information and entertainment, Instagram, Pinterest, TikTok and other social media sites can also provide an endless stream of inspiration.
Read on to find out how social media can positively influence the web design choices of marketers, designers, brands and businesses.
From photo-editing tools and filters to stickers and meme-generators, today, anyone armed with a smartphone can add striking visual elements to their posts. But social media can also provide a rich source of creative inspiration for even the most experienced web designer.
Remember, the things that are gaining likes, shares and interactions today are likely to trickle down into the web design trends of tomorrow, so now’s the time to start thinking about what you can learn from social media and how to incorporate it into your design thinking.
Read on to find out how social media can influence your web design project by:
- Adding authenticity
- Grabbing attention
- Boosting imagery
- Inviting interaction
- Embracing mobile
- Elevating UGC
1. Adding Authenticity
Online Email Template Builder
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Try FreeOther Products
Thanks to social media, we’re used to getting a glimpse into the lives of everyday people, and this kind of behind-the-scenes access is pushing the desire for more authenticity in web design. Think of ‘meet the team’ pages that profile employees and literally give brands such as Etsy a human face. Meanwhile, hovering the pointer over Atlassian’s page reveals graphical elements that communicate each person’s job function, and at UK-based gin distillery Sipsmith, professional-looking headshots give way to a lighthearted snapshot – establishing that the brand is all about business meets pleasure, if you will.
This quest for ‘realness’ has also inspired many brands to move away from stock images and posed shots and towards authentic photographs that are instantly recognisable and relatable. This can do wonders for establishing a brand’s credibility, and demonstrate that they understand their customers, the issues that are important to them and the things that make them tick.
Additionally, many fashion and beauty brands are now populating their product pages with user-generated content. Like beachwear label Andie, which invites customers to share images of themselves ‘modeling’ their purchases along with their measurements so online shoppers can get a more accurate idea of how each swimsuit fits – whatever their height, size or body shape.
2. Grabbing Attention
Everyday, the online world serves up more content than we could ever realistically consume in a lifetime, and so we’ve got into the habit of speed-reading and rapidly scanning sites for the information we require. Take inspiration from social media and use attention-grabbing visual elements to fight the battle against information overload. For example, the cute stickers that accompany news stories published by The Outline quickly convey the essence of each story, while the icons featured on Parade tell customers about the properties of each garment (for example, an ice lolly indicates cool touch ultra-light fabric) and the brand’s commitment to social and environmental issues.
Similarly, gifs and memes stand out on social media, so why shouldn’t web designers bring them into their projects? A picture paints a thousand words and, when done well, these static and moving images can quickly communicate key messages, tap into a current mood and instantly draw readers’ eyes to the most important parts of each page. Like Glossier’s simple but addictively watchable product gifs. Meanwhile, flavored sparkling water brand Recess takes an irreverent approach by turning its canned drinks into memes – like Peach Ginger, which pays tribute to Tiger King with the addition of a mullet and a moustache.
3. Boosting Imagery
We can also see Instagram’s love affair with filters playing out on brand websites – like perfume company Abel, where each fragrance is conveyed by a distinct color palette. Bottles of Pink Iris perfume feature crushed raspberries and rose petals, while accompanying lifestyle imagery has been edited to bring out delicate blush tones that combine to create a consistent aesthetic. As a result, the brand offers a valuable lesson in applying specific identities and emotions to individual pages, products or website elements.
Talking of visuals, think of the editing tools available on Instagram Stories that allow users to add captions, drawings and backgrounds to their photos in order to achieve a curated, collage effect – something we can see in Adidas’ player images, which features scribbles and silhouettes for a hand-drawn look and feel.
4. Inviting Interaction
Double-tapping to like, swiping up to shop, moving an emoji on a sliding scale to show interest – social media platforms invite communication and conversation. And websites are no different. Online forms, surveys and other interactive elements not only enable brands to collect valuable data about their customer’s likes and dislikes, they can also help point people towards the products and services they need – adding that extra element of personalisation that’s so sought after nowadays. Like the ‘questionnhaire’ that appears on the Bleach site, which poses a series of multiple-choice image-led questions to unite users with their ideal hair dye.
5. Mobile Optimization
Mobile-first is one of the most important web design rules. And, of course, social media offers a masterclass in content that’s easy to consume on-the-go. With less and less people browsing websites on their personal computers and laptops, web designers have spent the past few years optimizing for mobile and coming up with responsive pages in a bid to provide the best possible user experience.
Whether you’re planning to overhaul your website or make a few tweaks and changes to support speedy consumption, take a look at We Transfer’s editorial platform We Present. Thanks to the site’s modular build, text and images are given equal importance, with paragraphs and pull quotes interspersed by videos and images that entice the audience to keep on reading.
6. Elevating UGC
We know people love sharing on social media, and user-generated content (UGC) increasingly pops up on web pages via handles and hashtags. Like homeware retailer Made, which heroes customers’ Instagram posts throughout their site under the call-to-action ‘less than humble about your abode? Mention @madedotcom in your photos and we’ll feature the best pics’. Luggage company Horizn also keys into its customers’ wanderlust with the invitation to ‘show us how smart you travel by sharing your most inspiring snapshots. Use the hashtag #LetsGoFurther for your chance to be featured’. Suddenly, the websites become a part of these brands’ community-building efforts.
And while we’ve seen widgets and plugins being used to streamline the transition from site to social media for years, web design inspiration can also be found in the symbols and signals that people have grown accustomed to seeing on Twitter and Facebook. For example, we find Cult Beauty highlighting its ‘trending’ skincare and make-up items, as well as adding a tick against products whose claims have been verified by a third-party. In addition, Evolution of Smooth has integrated a hashtag into its web design, dedicating a whole landing page to products under the #eosflavorlab banner.
Source: Evolution of Smooth
As well as being inspired by social media, you can use platforms like Pinterest and Instagram – or creative networks like Behance – to inform your next web design project. Pose questions, conduct a poll and ask followers to vote for their favorite image or landing page design – you’ll soon get a sense of what people do and don’t like.
As social media continues to grow and dominate the digital space, we have no doubt it will continue to influence the evolution of web design. To learn more about web design, social media, graphic design, marketing, and more, don’t forget to check out the Envato Blog.