If a picture is worth a thousand words, how important must be the design of your webpage? Pictures, headlines, text, borders and logos; colors, shapes, lines and textures; all have to work in harmony to tell the site’s story to your visitors.
Great site design is about more than just looking pretty. It’s aesthetics with a mission, that will speak to your viewers and help them move through your site to find what they’re looking for.
So how do you make a site like this? It’s about defining your message, crafting a design that allows it to come through clearly, and harmonizing the different elements on each page to support that message.
Purpose and clarity: how to design a website with a strong message
A high-functioning website, a site that really gets a job done, is one that speaks directly to the needs of its visitors.
The first principle in designing a website is that you are designing it for someone.
This sounds obvious, but probably the most common mistake people make is to create a website for themselves – for people who have the same background and already know their message – rather than for their intended viewers. It’s only natural, since obviously your own perspective is the one you usually function from.
To create something that really speaks to your audience, however, you have to put your own experience and assumptions aside.
You have to clarify who will come to your site, what they are looking for, why they want it and how you will give it to them.
Once you have answers to these essential questions, every choice you make in your site design should refer back to them.
In order to convey a strong message, always go for clarity over noise. There’s no need to shout at your visitors with loud, busy design or dramatic text. A simple, elegant and considerate design will do the talking for you.
Half the WordPress themes available these days will advertise their “sleek, modern, minimalist style” or something along those lines. Minimalism is definitely what you should go for in most cases. Less is more and simplicity speaks, especially in today’s world where we’re all inundated with a constant barrage of noise, advertising and information overload.
A clear, clean page will give your viewers a better experience and make your message stand out.
If your website suffers from a lack of clarity, take a look at the big picture. What is your message? How does each part of your site, each element on the page, help convey it? Are there any elements that are drawing attention away from this message?
Remove any unnecessary elements, anything that is more distracting than helpful. Even small things can have a big impact in this respect.
A few ideas to start with:
- Choose a quiet background. You can’t go wrong with solid, complementary colors (or white). Minimalist patterns can also add depth and texture, but beware of colorful patterns and background photos.
- Remove any superfluous widgets.
- Trim down share buttons to only the ones your users will use the most.
- If you have WordPress Premium or Business, use custom CSS to hide unneeded elements.
A pared-down site will also load faster, which is extremely important both for keeping people on the site and for ranking well with search engines.
Applying 7 principles of design to your website design
Creating a website, like any form of graphic design, is an art form. A lot of the work has been done for you with pre-made templates and layouts, but as you shape your template into a unique website, it’s still your creative vision shining through.
Your website, as a visual object, will tell a story beyond what’s in the text. Follow these seven principles of design to make it convey your message in the clearest and most compelling way possible.
1. Contrast. Skillful use of contrast adds variety and interest to your design elements.
It creates brightness on the page, highlighting what’s important and making each element clearly visible.
To play with contrast, use complementary colors and fonts. (Complementary colors – like red and green, or blue and yellow – are across each other from the color wheel.) Vary your graphics, and break sections apart with color blocks.
In general, remember that consistency doesn’t mean uniformity. What’s more interesting, two voices singing unison or in harmony? Use harmonious differences in your visuals to give life to your page.
2. Emphasis shows the viewer what’s really important on your page. You can emphasize important elements by size, color or placement.
Knowing what to emphasize requires really understanding your message and the goal of your site. With any page, ask yourself, what are my visitors looking for here and how can I help them find it? If I had to pick just one element to convey my message, which would it be?
Once you’ve clarified this, you might choose a “hero” area that quickly lets the viewer know what the page is all about, and design everything else around that area.
3. How your elements are arranged provides structure and direction to the page. A balanced composition feels stable and complete, like the elements are working together, greater than the sum of the individual parts.
A page’s composition is a synergy of the visual weight of the elements – how each element attracts the eye of the viewer – and their visual direction – the perceived force of the elements, way we think they would move if it could.
Balance can be symmetrical, asymmetrical or radial (based on a circle). Lines, colors and shapes all contribute to the balance of a page.
Symmetrical design evokes elegance, stability and formality. However, it can feel static and boring.
Asymmetrical design is much more dynamic and interesting, but can be harder to design because the relationship between different elements is more complex.
Radial design is eye-catching but usually not so pragmatic for a webpage. It puts strong focus on whatever is at the center of the layout.
4. Unity/variety. All the elements of your website should work together to create harmonious whole, while containing enough variety to be interesting. This requires taking a big-picture look at your pages, seeing that all the sections are coordinated and offer a coherent message without too much overlap.
It’s important to decide on a style and color scheme to follow through the whole website. Pick images that flow well together, without becoming redundant. Consistent but not overbearing use of logos and branding can also help tie your site together.
5. Eyes and brains love patterns. Subtle repetitions in your design, as well as creating a sense of order and stability, will make your page more attractive to their viewer, drawing their attention in.
The trick is to do it without becoming actually repetitive.
Create patterns on a level visually below the elements themselves, so they aren’t immediately obvious. You can do this by echoing the logo in other elements. For example, if your logo is round, make other elements on your page circular.
6. Your site may just be text and images but there’s lots of movement in it. There is an implied motion in the elements of your site, which guides the way a visitor’s eye moves across the page, thus shaping the narrative of your site.
Lines, arrows or other explicit visual cues create strong implied motion. So can shapes and color gradients within images. Pictures of faces, moving cars and other familiar objects can easily draw attention to the direction they’re going, so be sure to position them to fit with your design.
If you want to check your page’s rhythm, let your eyes wander across it. Are you naturally following the right order across the page? Do you get “stuck” anywhere? Is a certain element sticking out?
Many eye tracking studies have found that people read websites in an “F” pattern. We like to read left to right and top to bottom, so the top left-hand corner of the screen is the most looked at, while the right side is often neglected.
Aligning with this tendency will make your site easier for visitors to flow through and find what they’re looking for. Place your information in order of importance, left to right and top to bottom.
7. White space, negative space, empty space: however you call it, it’s one of the most important aspects of design.
The area surrounding the elements on your page puts them in order and perspective. Space draws attention and excitement, and lends gravitas, to the image it frames. It allows the elements and composition to breathe, enabling movement and rhythm.
Make sure there’s enough space around your images, text, headlines, and other elements. Don’t be afraid of blank areas on your page – they might be exactly what your composition needs.
Using a grid-based layout can help you organize your page and make the best use of negative space.
Hopefully, this article gave you a good overview of the design principles that underlie any successful website.
Remember that design isn’t about beauty for beauty’s sake. Aesthetic principles are like a grammar of subconscious communication, allowing you to speak visually to your visitors. It’s a language that goes deeper than any text on the page, a language of first impressions and lasting impact.
As I mentioned earlier, less is more. It’s important to choose a WordPress theme that’s clean and minimalistic. It should have an elegant style that you won’t have to fiddle with too much, but without compromising the site’s functionality. Ocean Web Themes is a great source for themes like this.
When in doubt, go back to those questions from the beginning: who are your visitors? What are they looking for? Why are they on your page? How can you help them find what they want?
With this in mind, you can create a site that’s both beautiful and effective.