Digital

Dipping into design – composition fundamentals

September 8, 2014 by Jono Ellis No Comments | Category Digital Public Services, mygov.scot

Design elements describe basic ideas around the practice of good visual design. These elements include colour, shape, texture and space. I’m going to dip into an aspect of this, exploring some fundamentals of composition, as this helps set the scene for the work we will be doing / have done so far.

We started with composition and typography – our fundamentals

As a design challenge, mygov.scot is not that complicated in comparison to some of the more complex web projects out there. The creative angle of this ever growing website is limited, as research so far has told us simplicity is a good thing for users. Initial thoughts point to things like photography and graphics causing more harm than good, most notably if we consider the speed at which they become outdated.

At the same time, because it is so simple, it is also actually very complicated – as you spend more time on more granular aspects. Our approach will likely require an element of math to be involved the closer we look. It’s not always the most obvious option that’s the best option for us to take. We can’t put a full screen photo of a little kitten to soften the user up, even though it might have the desired effect. We need to seek out fundamental rules around composition and typography, helping us to design content that feels natural and seamless.

Translating recommendations for English

How can something that is simpler actually be more complicated? The origin of modern print was credited to Johannes Gutenberg in Germany. People read a lot of great books about typography in English, however it is important to understand that most of them, the very best of them, were actually written in German and are thus based on usage of the German language. So, we actually need to translate these recommendations into something that is specific for English language users.

The average length of a word in English is 5.1 characters, compared to the German average of 6.26. A quick calculation thus tells us that German words are 23% longer than their English equivalents.

This gives us a consistent way of translating recommendations.

Translation of recommendations = 1.23 (100% + 23% extra = 123% = 1.23)

We can now use this to translate the English equivalent of German recommendations.

Working out the best length for a line of text

Let’s find out how long a line of text on our website should be so users can comfortably read it.

Josef Muller-Brockmann said, in his book ‘Grid systems in graphic design‘:

“There is a rule which states that a column is easy to read if it is wide enough to accommodate an average of 10 words per line”

To calculate the recommended average number of words per line in English, using our mentioned translation for recommendations, gives us 10 x 1.23 = 12.3 words. It should thus be fairly safe to say that, in practice, 10 to 14 words per line is our target.

Emil Ruder said, in his book ‘Typography‘:

“A line of more than 60 characters is hard to read’

According to Ruder’s rule, we are aiming to achieve no more then 60 x 1.23 = 73.8 characters per line of text in English.

We now need to double-check that both recommendations make sense when considered as one. If we divide the number of characters by the average word length, we should get a combined view of the maximum number of words recommended for one line. The calculation: 73.8 / 5.1 = 14.4, after rounding, gives us 14 words per line, which helps confirm our conclusions are correct.

This gives us our fundamentals to begin to explore things a little further. I’ll be writing a new post on setting up a grid system for mygov.scot, based on the above rule, in the coming weeks.

This is a post by Greg Kozakiewicz, our Head of UX, Design and Research.

We’ll be sharing updates on this, and much more on social, so follow the team via @mygovscot  on Twitter for more updates. Want to comment? Let us know below!

Tags: Design and User Experience, Standards & Guidelines

Comments