web design
 best practices
 & evolution
*disclaimer There is no such thing as “trends” when talking about what we tend to consider good design. Visual styles have moments of popularity which can occasionally reoccur years down the line—as it happens in fashion, but we usually recognise a piece of work as valuable because it sticks to specific rules and codes we have identified as valid, and we can say with certainty will be valid years or decades from now, or because it purposely challenges said rules in thought-provoking, controversial but well considered acts. Achieving the latter is a rather complex process which requires extensive knowledge and a good deal of confidence in order to be carried out effectively and with awareness of the risks taken, which makes observing said generally recognised rules a rather obvious, more manageable choice.
www.emotio.agency | 020 8385 5050
keeping up As we are obviously aware, our technology, the way we communicate and the way we react to and process information are in constant evolution; it is crucial for each discipline in the extremely diverse communication industry to adapt and gather input as to how its strategy needs to advance in order to remain relevant and perform effectively. This does not mean, however, that rules which we recognise as universal and valid are to be dismissed as not significant as time passes, but rather that as professionals working in ever-changing scenarios we aim at keeping our work consistent with our guidelines whilst finding new and suitable ways of communicating which consider and fulfil our audience’s needs.
www.emotio.agency | 020 8385 5050
what does this mean In practical terms, this means having at least a basic knowledge of what we sell or present to our clients, in order to offer a solution to their problem which can be considered relevant for a time and context and can also stick to principles and guidelines we use to classify a job as “well done”. Our clients will often not have the expertise to identify what constitutes effective communication—that is our expertise and it is therefore our responsibility as professionals to give them guidance in that direction whilst also remaining true to their business and their identity. This doesn’t mean always agreeing to their requests, as most people don’t like change and will fight against it; it means allowing them to realise themselves that at times change is inevitable, and can often be very rewarding, and using our own expertise to enhance theirs.
www.emotio.agency | 020 8385 5050
why would we do this To be confident in what we do and offer and to avoid having to take responsibility for the—wrong—decisions that some clients want to make in fields in which they are may not knowledgeable (often they would not be expected to be, as that’s Emotio’s job). Staying true to our expertise is the most crucial aspect of being able to deliver good results, and it is necessary to remember who we are addressing. As professionals we work for our clients’ clients. We know them, we know what they like, and what they respond to. We know how to reach them, often better than our clients do. If their clients are happy, our clients are happy, we are happy, and there is no way of achieving this without producing “good” work.
www.emotio.agency | 020 8385 5050
how to get there Following are examples of what constitutes “a general rule” and how they have been effectively applied in such a way to result relevant for a specific time and context, producing effective and impactful communication.
www.emotio.agency | 020 8385 5050
1 I’ll tell you a story Storytelling is one of the most important—if not the most important—aspects of effective and compelling communication. It allows audiences to instantly connect with a brand or company on a much deeper level than what we define as a the commercial level—a personal level. It’s what happens when someone is able to reach our emotional side somehow and generate a reaction which is not necessarily linked to what we are looking at in a logical and rational way. Let’s look at how this organisation found a new and engaging way to raise awareness about slavery and the implications of our day to day actions. Many charities and companies often tackle issues like these giving out too much information at once, or adopting a too-obvious way of communication which result in the message being overlooked by their target audience.
www.emotio.agency | 020 8385 5050
When presenting our audience with a simple, straightforward and in this case rather controversial question, we get their attention and we are able to direct them towards the rest of the content, as they’ll be intrigued. The engaging experience on the site will then ensure they’ll remain involved and alert during the navigation.
www.emotio.agency | 020 8385 5050
2 Microinteractions As everyone gets more and more accustomed to using websites or apps with unique and engaging functionalities, it is crucial to make the experience as compelling as possible for each user. This is achieved not with the use of too many elements, but rather focusing more attention to the details that already are an integral part of
 the navigation experience. What does a button do when clicked? What happens in between a change of state? How does my interaction with the website I am navigating right now make my experience engaging and unique to this specific website? Creating a code of iconography and microinteractions which is original and true to a company brand will help in developing a website in which every element will organically blend in and enhance the identity features.
www.emotio.agency | 020 8385 5050
Microinteractions allow the user to not only benefit from a more interesting and engaging navigation, but to also feel at the centre of the experience and to feel in control of what happens on their device. The attention to elements such as what we call “anxiety state”—what happens in between two opposite situations, e.g. what happens in between a download button and the completed download status—is one of the many ways any company can make its presence on the web or on any user devices original and unique to its own identity.
www.emotio.agency | 020 8385 5050
www.emotio.agency | 020 8385 5050
3 Giving subtle dimension Flat design has been a rather popular choice in the past 5 years or so, as Apple and Google have demonstrated with the gradual transformation of their icons and interfaces (more simplified iconography, for one). This meant for many designers leaving behind a treatment of colour and imagery which was quite typical of the 80s —abundance of shadows or gradients. Keeping in mind that trends tend to become less relevant in time and that we aim at maintaining a balance between universal rules and ever-evolving user needs, we can come to the conclusion that anything used to give dimension (e.g. shadows) has to be used carefully and in a subtle way, and only in specific situations—graphic elements or imagery can be enhanced by shadows, but text never is. If a shadow is needed to make a text visible, either the background or the text have to be changed.
www.emotio.agency | 020 8385 5050
We can see how in this interface shadows have been used carefully and intelligently to enrich the user experience, by giving subtle dimension to the elements involved in interactions, but how the visual results extremely essential and sophisticated, thanks to the use of simple shapes, good text/background contrasts and custom iconography.
www.emotio.agency | 020 8385 5050
4 Getting personal When it comes to photography and illustration, the more it is tailored around a client’s identity and website, the more personal and relevant it is to their specific brand and experience, the more engaging and effective the visual communication will result. It is—unfortunately—very common to rely on poor-quality, “cheesy” and most importantly impersonal stock photography which does a bad job at portraying a business and reaching potential customers. It becomes clear that, the same way people want to engage in stories and personal narratives, they naturally will be attracted by visuals which corroborate those stories in the most unique and original way possible.
www.emotio.agency | 020 8385 5050
Look at how much these two images lack any kind of personality and originality. How many times have we seen photos like these? For how many different businesses—Dentist? Property? Insurance? God knows. We can’t even tell or remember because we stopped paying attention to such obvious and impersonal communication.
www.emotio.agency | 020 8385 5050
Here are two examples of less cheesy photography. As there’s no excessively bleached teeth and the lighting, albeit dramatic, doesn’t really resemble that of a poorly executed ad, we can see how even the retouching plays a positive role in creating a unique and personal context to the story we’re telling.
www.emotio.agency | 020 8385 5050
5 Prioritise information It goes without saying that getting a message across in a way that prioritises the main points without overwhelming the user with information is not only effective in making sure our audience understands what we’re saying and are able to navigate our content, but can in fact increase our conversion rate. Now, it is easy to incur in a situation in which our clients not only are skeptical but flat-out refuse this approach and ask us instead to cram as much content as possible. It is our job in situation like these to help them understand that, in most cases, their main messages can be narrowed down to two or three relevant points, and as long as the further details are easy to access and find, the user will have a more pleasant experience this way. Following are practical examples of how we can implement this strategy.
www.emotio.agency | 020 8385 5050
The one thing everyone seem to want and, in most cases, everyone should avoid is a carousel. It shows poor decision making in terms of being able to prioritise the main points, and is almost never effective in showing information beyond the first slide. Unless it’s used with images for “eye candy”, it should be avoided. Here’s more reasons why…
www.emotio.agency | 020 8385 5050
Information is often lost. If you think users will take the time to scroll through all your 5 slides you couldn’t decide between, you’re in for disappointment (see image on the right). If something is important, it belongs on a prime position on the homepage, for example on the top of it or right below it. The rest can be placed in other accessible areas.
It increases loading time. Making your page slow and the experience frustrating for users. They also render poorly on mobile devices as they require two different movements to navigate content (horizontal and vertical).
It’s difficult for users to keep up with the content. Have you ever found yourself reading something on a banner, just for the content to slide away in front of your eyes and be replaced by something else? Virtually no one would say it’s an efficient way of communicating something.
They look like ads. Unless a carousel serves a purely visual purpose (e.g. a photographer’s portfolio slideshow) savvy users will associate them with ads, as they’re accustomed to this type of layouts, and nobody likes ads—let alone clicks on them.
www.emotio.agency | 020 8385 5050
Pretty much any company in the world can push its expertise in one single, compelling selling point. In advertising this is called “the elevator pitch”. Effective storytelling focuses on something unique to grab a user’s attention, and build the remaining communication strategy around that one idea or selling point. See above for a good example.
www.emotio.agency | 020 8385 5050
6 Don’t overcomplicate Following our point about prioritising information, it becomes logical to then talk about all the considerations we should be making in order to ensure for our users a pleasant, smooth and enjoyable navigation. Things like splash pages, autoplaying videos or sounds—especially sounds—are not only, in most situations, unnecessary, but also constitute an annoyance for anyone who is either trying to get to the content of your website, and now has to take an extra step to do so, or is trying to navigate said content and sees their effort interrupted by something playing in the background or in worse cases on top of it. If you want to embed sound, give users the possibility to play it or not at their discretion; if you want to use splash pages—don’t. Use instead something visually pleasing and consistent with your brand as a loading effect if you don’t want to show an empty page, as shown in the following slide.
www.emotio.agency | 020 8385 5050
We all know the agony of waiting for a page to load as we get less and less used to waiting for anything. One good way to approach this issue is to make the waiting time, also called “anxiety state”, into something which can actually be enjoyable and engaging. It’s an opportunity to create a broader brand experience as well as being an original and effective way to cut through our goldfish-like attention span.
www.emotio.agency | 020 8385 5050
7 Be illustrative Using illustrations has many advantages. For one, using graphics produced in softwares like Illustrator ensure a vector rendition which can be scaled with no limit, solving the problem of responsiveness between devices. Another consideration is that, similarly to what we find for photography, an original and interesting use of illustrations is a way to stand out amongst competitors and give a business a visual language which is unique and easily recognisable. Additionally, unlike photography, illustration is not limited (e.g. we can’t shoot inexistent subjects, but we can of course draw them). Finally, the use of illustration and bespoke graphics creates an application-like user experience which makes the navigation seamless between devices and gives users the chance to use websites in a familiar and practical way.
www.emotio.agency | 020 8385 5050
In this example we can see how the use of illustration creates a unique, quirky yet sophisticated visual layout for this company’s website. We can also observe how well the illustrated content performs on different devices, allowing the flat graphics and text content alike to display in a clear way due to the use of flat colours as opposite as the use of photography—which can at time cause unpredictable scenarios when switching devices.
www.emotio.agency | 020 8385 5050
8 Watch your type Type does, indeed, make design what it is: take type out of a website, a poster or any other piece of printed or digital artwork, and they’ll simply be art or photography, or to put it in a different way, just a series of images. Many people overlook the potential of typography and forget that in fact, type, more than any other element, delivers their message. It’s absolutely possible to produce incredibly compelling and interesting design using type alone. Another consideration to make is that type is, indeed, universal. Languages are not, but typography and its visual ways most definitely are. You might not understand a word but, you will most definitely understand what the type is trying to communicate. See next slides for example.
www.emotio.agency | 020 8385 5050
You wouldn’t be able to understand, perhaps, the two languages above, but you’ll sure be able to understand which word means “welcome” and which word means “stop”. Spanish & Finnish
In the same way, you’ll be able to understand which one of these two menus belongs in an informal, friendly coffee shop and which one belongs in a fine dining restaurant. So when thinking investing in a specific typeface for our business would be a waste of resources, let’s think twice and realise type has more potential at a lower cost than a lot of other elements when it comes to branding and web design.
www.emotio.agency | 020 8385 5050
As we can see from the example above, it’s definitely possible to make a webpage very appealing and engaging
 with the careful and considerate use of type. The same, of course, is valid for branding and printed artwork.
www.emotio.agency | 020 8385 5050
in conclusion Follow the rules; they’re rules for a reason. Stay true to your client’s identity and needs. Keep up with the natural evolution of industries. Remember you’re working for their clients as much as yours. Develop a taste for good design, as it’ll be your client’s guide. Be confident in saying “no” to unreasonable requests. Honour your expertise and knowledge… but …Never stop questioning and learning.
www.emotio.agency | 020 8385 5050
thank you
WILLIAM OLD CENTRE, DUCK'S HILL RD
 N O R T H WO O D H A 6 2 N P 020 8385 5050
www.emotio.co.uk | hello@emotio.co.uk