Design for Developers Part One: Basic Principles
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.
Page Elements
Aligning elements is more complicated, and can take time to get perfect. If the design uses columns, it’ll be much simpler as all you’ll need to do is align everything to the grid and ensure consistency across the design.
Designers tend to use grid systems to structure a page in a clear format. Grids regiment information, providing a simple and effective method of displaying lots of content. They’re efficient for the designer and developer as individual layout decisions don’t need to be made, and viewers can navigate content quickly and easily.
In this image you can see we’ve aligned two sections of information to the centre of the page. Each section is four columns wide and both are aligned at the top. Neither stretches past their four column width, and all elements in the section are consistently aligned rather than floating lost around the page.
Hopefully these tips and principles help explain some of the choices we make as designers, and help developers understand a few basic rules. All designs are different and these rules can be broken, but if you keep them in mind, your creations will be clearer, more user friendly, and better looking.
