From constraints and rules to design
A web design example
Since I‘m focusing on designing apps I’m striving to rationalize my design process and try to minimize the impact of hasard* in my creation. I would like to share with you a bit of my method when I’m building interfaces from scratch.
*french for randomness
For me designing is about asking questions: what kind of people will use my interface? On which devices? What font size should I pick…? Each question leads to another and for each question there is often a rational answer.
Design principles
There are many design principle we can build on. Those rules are the heritage of century of architecture, graphic design and typography. You can find many of them gathered in these following books:
The Universal Principle of Design — Willian Lidwell, Kritina Holden, Jill Butler
The Elements Of Typographic Style — Robert Bringhurst
Ordering Disorder: Grid Principles for Web Design — Khoi Vinh
Ok, let’s try with an example.
Suppose we are asked to build an article template for a blog.
Vertical grid
At first, we need to build a vertical grid to fits-in our content. Grids are not the starting point of a design work, they are part of the process. You need to start with the constraints within your layout in order to establish a suitable grid system.
Before, let’s see what makes a vertical grid?
We can decompose a grid into various elements:
- Unit: The unit is the smallest part of your grid.
- Column: Columns are formed by the association of at least 2 units including the inner gutter.
- Region: Regions are groups of column.
- Field: Fields are made to integrate your content.
- Gutter: The gutter marks the separation between the elements of your grid. When you combine units all the inner gutter will be merge.
Creating ad-hoc grid
What matters most in an article is its content, so we are going to shape the grid according to the width of our text body.
Before choosing it we need to know: what kind of devices our page will be displayed on? To make it simple we will only consider modern desktop resolution (1280px). For a 1280px wide screen, we will use a grid of 1200px. With this kind of canvas, we are sure that our grid will have a sufficient amount of space on the side, while being easily divided by 6, 12, 16 units.
But before building the grid in Photoshop (or Sketch), we need to choose how many units we’re going to split our grid into. To make things clear let’s make a rough sketch of the page we want.
As we see on the sketch, we need a comfortable width to read but we have to manage room for additional information and/or a sidebar. So let’s set our body width a bit more than half of the grid (680px). To fits this block into our page, a good split will be 12 columns of 80px with 20px gutters. Then the article will use 7 columns.
At this time you should jump into Photoshop. And build the 12 units grid, I recommend using the GuideGuide plugin.
Once our grid is set, we are going to split it into regions with one centered region of 680px width.
Setting up the font
A quick reminder of what a font should perform:
- Invite the reader into the text.
- Reveal the tenor and meaning of the text.
- Clarify the structure and the order of the text.
- Link the text with other elements.
Here we’re not going to talk about font classification, history and stuff… What we only need is two good fonts, one for our Titles and one other for our text body, let’s see what google got for us:
Determining the body font-size
In order to choose our body font-size, we should consider our paragraph width (instead of picking it randomly). There is a rule wich can help us finding a font-size from a paragraph width, the 66-character line.
Anything from 45 to 75 characters is widely-regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.
— The Elements Of Typographic Style — Robert Bringhurst
Thanks to a little bit of math, it’s easy to retrieve the right font-size based on our paragraph width: Font-size = width/30
In our case we had 680px/30 = 22,6666 (22px).
Finding a Typographic Scale
The typographic scale has been used for centuries as a means of creating balanced and harmonious font sizing.
Because the typographic scale is a scale, it must obey the scaling property: if x is a size in the scale, then r * x must also be a size in the scale, where r is the ratio of the scale. This ratio is a defining property of the scale. We can use this property to extend the classic typographic scale to much larger font sizes.
Fortunately, Jeremy Church has made a tool which helps us to visualize and choose a typographic scale based on our basic font-size: http://type-scale.com/
Baseline Grid
The baseline grid is a repetition of horizontal guides on which your fonts must lay down. It provides you with guides and helps you add consistency from one type-set to another. It’s essential to create relation and harmony between all our fonts.
Personally, I like to use a 12px or 6px baseline grid.
To make sure that every font will lay down on our grid we need to set their line-space with a multiple of 12 or 6.
So now how do we define our paragraph line-space? The common rule is to take a line-spacing value of 1.5 time the size of the font.
In our case we had 1.5*22px = 33px
33px is not a multiple of 6 nor 12, so we are going to pick the closest one 30 or 36
*As the 66-character line, this rules applies only on text paragraph this might not be the best solution for displaying titles or short text.
Final result
All those rules are made to be transgressed, but it’s often a good start for people who don’t find instinctively the good relation and proportion between elements within their design.
Thanks,
