Design for Developers

A simple guide to quickly improve your designs

Design and development are sometimes thought of as two very opposite disciplines — one is creative and one is logical. Developers can get stuck in this trap, avoiding design because they ‘aren’t creative’ and getting paralysed when they inevitably have to make a minor design decision.

I wrote this blog to help demystify design for developers, so they can understand designers’ craft and motivations. I also wanted to show that logic and patterns that are just as fundamental to good design as creativity. There are systemic approaches we can take to improve our design work.

To give a concrete example we will work on improving the design for this recipe for Belgian waffles. Let’s say this is our first attempt at designing the screen:

To make our improvements we are going to learn about and apply each of the major design principles.

1. Contrast

2. Hierarchy

3. Balance

4. Alignment

5. Repetition

Contrast

the difference between two or more things

Creating points of difference in a design can help a viewer to break down information, or create a mood. In the image on the left there is contrast in the colour choice — black and white, the heading size and the ‘movement’ of the heading, compared with the strict grid layout of the other information.

If we compare the designs of the two books on the right ‘Resurrecting Jesus’ has a more direct and aggressive feel to it, while ‘Active Hope’ is more soothing. The contrast between the stripes and the background helps create this feeling.

Looking back at our design with contrast in mind we decide to colour the recipe instructions to help them stand out from the background. We also make our heading larger to create distinction between our heading and instructions.

Hierarchy

Arrangement of things in order of importance

Finance app, Plants app

Hierarchy is all about recognising the most important parts of a design and drawing attention to them. It is very important in web design as it helps the user decide how to interact with a page.

In the financial app on the left we know that the amount of money received, and whether the balance is trending up or down, are the most important due to their emphasis. In the store on the right the design draws us in by emphasising the photo of the wall planter. We know that the height, temperature and pot information is secondary.

We look at our design and put ourselves in our user’s shoes — which parts of the recipe are likely to be more important to them? We decide that the photo, and the information about prep time and servings is critical to help our user decide if they want to make this recipe, so we give them priority. We also move the bookmark button up the screen as it seems likely our user will want to save recipes for later

Balance

Having the right amount of something

There are two ways to create balance: symmetry and asymmetry

Flight Booking App

This Flight Booking App is using symmetry to help the user breakdown information. Arranging flight departure time symmetrically opposite the arrival time makes it easy to understand the interface. For this reason symmetry is popular in web design.

Bare Minimum Editorial, Made of Two Posters

Asymmetry can also be used to create more dramatic effects. The design on the left uses asymmetry to create a high-end feel, while the right has a sense of speed and movement.

Alignment

To arrange things in a straight line

Alignment is another useful principle to help you organise your designs.

Magazine template

Looking at this design, at first it may appear that things have been laid out randomly. In reality there is a strong grid system at play — each of the elements snaps to a column. Even the pull quotes and the page information at the bottom align with a column.

When I was learning to code my mentors would refuse to look at my code until I had the indentation correct. The grid system is the design equivalent of correcting your indentation — my design mentors would insist on seeing the grid guidelines, and checking whether your elements snapped to them before helping. If they didn’t you would either change the design, or you would modify your grid, adding and subtracting columns and rows.

Using a grid system can prevent you from just moving elements around on a page, trying to decide what looks good based on feel. It gives you a concrete system to follow.

If you aren’t sure where to start with grids I would suggest creating a few different ones — three columns by three rows, four by four and five by five for example. Snap your elements to your grid and see which works the best.

RAW — MAGAZINE by Ignacio Brito

To help our users easily understand the recipe we decide on a balance of symmetry and align our elements.

Repetition

Recurrence of two or more things

Duda

Repetition is useful for creating a brand identity. In the Duda design the thick line from the logo has been repeatedly used to create borders and create interest. Along with the colour palette this creates a cohesive brand style. The clock poster plays with repetition and contrast to create a striking image.

Web layout ideas

Repetition can also include context. For example, users expect the menu to be in the top corner of the page, and for a magnifying glass icon to allow them to search. These are common website interactions that users will expect your design to repeat.

With repetition in mind we move the back button to its ‘normal’ place in the top left corner. We make our icons and fonts a consistent size and style. We divide up the recipe instructions with numbers and lines.

Finally, we give our design a polish by going back over our principles. We decide the pink header isn’t adding anything and doesn’t deserve so much hierarchy. We add a background colour to create further contrast between the serving and prep time information and the instructions.

Our final design is much easier to understand and interact with, and more attractive than our original. Considering design principles is an easy way to level up your designs.

If you want to continue improving your design skills I would encourage you to start by noticing design around you. Don’t just think ‘that looks nice’, try to break down how the design principles are being used. When you start creating, don’t be afraid to copy. Obviously you can’t copy every element of another design, but you can combine a variety of influences to create something unique.

Happy designing!