A big mistake that people make when creating websites is that they separate the visual design efforts from the UX (User Experience) and content development. They see visual design as putting paint on a finished piece of pottery—something you do at the end to make it look pretty. This approach is missing the power that visual design has to engage users with a website’s narrative.
- Use white space to control the focus
White space is the visual space between objects and blocks of text. Websites used to try to cram everything onto the homepage “above the fold.” This antiquated approach forces users to do the work of finding your story—like a puzzle that they needed to put together themselves. Instead, we use progressive disclosure. This technique presents fewer choices at the beginning of the user journey and opens up to more varied options once the user provides input and proceeds down the path. White space plays a large part in doing this effectively.
By increasing white space and reducing visual distractions, we force the viewer to focus on one thing at a time. We can then control the order and pacing of information, avoiding choices that disrupt the flow of our narrative. When the user decides that they want more in depth information, we start reducing white space, creating more information dense pages, and providing a wider range of interactive options.
- Use visual hierarchy to keep the user on their path
Visual hierarchy is the art of controlling what a user looks at first, second, third, etc. When done well, the user will intuitively and effortlessly progress through the path we have set for them.
Users will generally look at the largest objects first. That said, there are many other ways to give text or objects prominence. For example:
- Warm colors (reds, oranges, and yellows) attract attention—they tend to “jump off” the page—whereas cool colors (blues and greens) tend to “stay back.”
- It’s human nature to focus on what’s different. If most of a webpage is text, even a small photo will draw our attention. If most of a webpage is black and grey, the one thing that is blue will get our attention.
- Images of people—especially of faces—always draws our eye.
- Shapes or patterns that point, even subtly, move our eye in that direction.
By using all of these techniques and others, in combination, we give the user a natural flow of how they should be absorbing the information on the page—leading them to a well-defined choice of digging deeper into the story or taking a specific action.
- Use “surprise and delight” to keep users engaged
From a UX perspective, consistency is king. Web designers generally provide a unified, predictable experience so that users don’t become frustrated or confused. However, as any good storyteller will tell you, throwing a few twists here and there will help keep your audience engaged. If the story goes exactly as they expect, users start to lose interest. So, as designers, we search for opportunities to inject “surprise and delight” into our narrative. For example, can an interactive element make the experience more customized or give the user a sense of control over the content? Will an infographic explain an important point better than words alone? Will a case study or testimonial add human interest? Will a video or animation tell a more dynamic story? When a user knows that the next click might bring something fun or unexpected, it creates more urgency in taking the next step.
The most effective websites are built with considerations for who the audience is and how to lead them towards specific actions. By using smart visual design techniques, you can create websites that are both beautiful and hard working.