Designers and developers aren’t always in sync. Each side sees creating websites and applications from a different perspective and choices made by the other are not always understood. This article is the first in a short series which aims to cover some basic principles of design, and how they translate to the development process.

Consistency

Consistency makes everyone’s life easier by making interfaces slick and user friendly. Ensure you keep these things consistent across a design:

Fonts

Colours

Text sizes

Spacing

Alignment

Button styles

Hover effects

Design elements (drop shadows, image styling, use of keylines etc.)

A good method is to define styles before beginning development. An html stylesheet containing these elements which you can refer back to throughout the development process can be helpful.

Hierarchy

Hierarchy is a basic design principle which helps the viewer focus on key information. A strong hierarchy will draw the viewer to a focal point before leading them through the design effortlessly.

When designing this wireframe, we have to consider the most important parts of the page, and place them first. Visitors will only stay on the page if something gets their attention, so this is the priority. Once you’ve drawn their interest, you can direct them to where you want them to be.

This hierarchy uses a large title to draw the visitor in, before using a large button to direct them to a key part of the site. Notice how all of this is done here without using any colour at all! Hierarchy can be established with something as simple and type size and style, although colour can also enhance the hierarchy.

White Space

White space is the empty areas of a page such as margins, the spaces above and below paragraphs, and the padding given to elements. It makes things easier on the eyes, improving the reading experience for the viewer, and draws attention to parts of the page. Using white space to surround elements in a close proximity establishes a relationship between one or more pieces of information, like in the image below.

Don’t be afraid to give things lots of space and make sure this is equal above and below any content. It’s a good idea to add some line height to make body copy clearer, ensure text areas aren’t too wide, and give button text plenty of padding.

Alignment

Text

With text, the overall design should tell you how it is meant to be aligned, but if not, a good rule of thumb is to left align the majority of body text. Centering headings and sub-headings can help them to stand out, but left alignment also works, like in the examples below. Avoid centre aligning large chunks of body text however, as the eye doesn’t have a consistent line beginning to return to, and therefore finds reading the text more difficult.