The amazing product you’re selling or the compelling content you’ve written for your website have no value if your visitors don’t stay longer than a few seconds.
Those first few seconds, after a new visitor reaches your website is where good web design does the heavy lifting to convince them to stay on.
Let’s take a look at 6 web design essentials that make sure your website is pleasing to the eye but also convinces visitors to stay on.
Good design invokes a minimalist approach to color. While we may be tempted to go all out and splash buckets of colour over the design, it pays to show a little restraint.
Spend time to decide on the few shades that strike the best chord with your content. Use your colors sparingly to keep the design classy.
Once a band of colors has been selected to represent the design, implementing them through every stage of the design process gives the product a streamlined look and feel.
A look at the UNICEF webpage shows us how the designers have incorporated the color blue throughout the website and achieved a unified design.
For a company that survives by getting people to trust them with their money, choosing a colour associated with trust, wisdom and expertise is hardly an accident.
People have culturally assigned meanings to certain colours which are now used to set the mood of our design.
While McDonald’s uses the stimulating and exciting colour red to get people to make haste decisions ( don’t think too much about the 500 calories in the Big Mac; just eat it!).
Subway uses green ( growth,harmony and freshness anyone?) to declare themselves masters of healthy eating.
Understanding the meaning people associate with different colours helps designers build a personality for their designs, thereby making the design more relatable to your audience.
This article by Steven Bradley gives us a good idea of how to use colours to enhance design.
- Select a few shades that convey the tone of your content.
- Implement the same colours throughout your website for a streamlined look and feel
The text on the design should be legible and fonts should be chosen which best represent the idea of our message.
A quirky and fun font like “Chalkduster” would look perfect on a website for kids toys, but a blog about the startup world will require something more professional like “Myriad Pro”.
Try out the variety of fonts that are easily available online to find out which would suit your message best.
Some pointers for good typography are:
Avoid rags, orphans and widows
Rags: In typography, “rag” refers to the irregular or uneven vertical margin of a block of text.
Uneven margins distracts the user from the content and is commonly avoided using justified alignment which creates a neat left and right edge.
Orphans: Orphan is a single word, part of a word or a small line that occurs at the beginning of a page or column
Widows: Widow is a small part of text, usually one word or part of a hyphenated word that occurs at the end of a paragraph or column
Avoid orphans and widows by tailoring content or increasing the column width.
Do not stretch text
Stretching or squeezing the type in the headlines is a strong “no”. It disrupts the aesthetics of the text also making them illegible.
Choose the font that strikes the best visual balance.
A font type such as “Future” has a predefined condensed version that can be used for tall while a font like “Arial Black” is ideal for long text.
Good spacing should strike the right visual balance with the audience. Spacing techniques commonly used to arrange text are leading, tracking and kerning.
Leading decides the spacing between lines of text, tracking decides the overall spacing of a block of text and kerning decides the space between any two characters.
A good rule of thumb to follow is that longer lines usually require more leading and vice versa for shorter lines.
For tracking, it’s better to go with a “loose” arrangement for longer lines and a “tight” arrangement for shorter lines.
Shorter lines will cause the reader to go back and forth many times disrupting the rhythm while longer lines make the reading process more tedious.
The optimal line length for copy should consist of 40-50 characters per line, including spaces.
Design for your audience
When undertaking a design, bear in mind the audience who will see the design.
A manufacturer of toys can use lively fonts and vibrant colours on their website while a software company could use a more toned down approach to colours and font.
First we identify our audience and only then do we start tailoring content.
The pictures below show us the font and color difference between two websites catering to different audiences.
EY uses toned down colors and a serious font like Myriad Pro while Mattel uses vibrant colors and a variety of fun fonts.
The size of elements on the page should depend on the dominance we want to assign to it.
Assigning a bigger scale to the primary content of a design will naturally attract more attention to it.
Avoid Color discord
Using unrelated colours which are widely separately on the colour wheel can cause disharmony between the content. These colours can be visually disturbing to the eye.
But don’t disregard it altogether; at the hands of an experienced designer, colour discord can also be a powerful tool to grab attention.
Raster vs Vector Images
While raster images are pixel based, vector images are made up of numerous paths which together make up the image.
Raster art : the magnified section of the raster image shows significant amount of pixelation at its edges
Raster images are preferred for use in digital publication with GIF, JPEG and PNG being the common formats seen across the web.
The tendency for pixelation makes raster images unsuited for print reproduction.
Vector art: Image quality is not affected by magnification
Vector images, on the other hand retain their quality over infinite tweaks, making them ideal for creating logos. Ai and eps are the common industry formats.
Read more about raster and vector images here.
Stick to a hierarchal layout for the design. By manipulating the font, colour and scale we can drive attention to the primary elements of the design.
In his article “6 principles of visual hierarchy for designers“, Alex Bigman gives us a good idea of how to use visual hierarchy to our benefit.
A grid alignment works best to set a distinction between various elements. When aligning elements, it’s important to make sure that the different elements complement each other.
“Incorporating space into a design helps reduce noise, increase readability, and create illusion. White space is an important part of your layout strategy.”
Says Alex White in his book, The Elements of Graphic Design,
Keep away from the tendency to fill up all the empty spaces in the design. Allowing for white space keeps the design coherent and uncluttered.
Comparing the old Google homepage and the new shows us how refreshing white space can be for the user experience.
A design succeeds when it is able to convey its message in the shortest time in the most pleasing way.
Keeping the design simple lets the viewer take in more information without cluttering the mind.
Let’s not go wild with those fancy special effects. Data elements, if any should be in their simplest form.
This means, it’s okay to skip those shadows and bevels on any graphs.
The readability of a design should not be compromised in the name of aesthetics.
Colours and text should be selected after considering the contrast they strike with nearby colours.
For example, a low contrast between the text and background may be pleasing to the eye, but if the viewer cannot identify the text at first glance, the design will have failed.
Stay true to these design essentials and hopefully, at the end of the day you’ll have a website that delivers the best possible experience to your audience.