Information design:
in practice, an informed theory

InformForm is an international platform for information design, which celebrates and explores both practical and theoretical experimentation within the field of design. It prides itself on showcasing relevant examples of work by students, for students. Read More

InformForm #11 pictographic design considerations for the screen

By InformForm

Pictographic design considerations for the screen

When designing symbols for use in navigation systems, we must be conscious of existing conventions. If, for example, we are designing a website for a smartphone, we may wish to hide the navigation offscreen, to be shown at the user’s convenience. An established convention for revealing mobile site navigation is the ‘hamburger icon’. In this instance, usability is key to the success of our design; it follows that the less a user has to think to interact with the content, the more successful the design will be.

It is also important to be aware that conventions evolve. The introduction of the iPhone was a new experience for many of us, made less daunting by the bevelled icons, simulating the affordances offered by actual, tactile buttons. The ‘flat’ design introduced in iOS7 dispensed with these pseudo-3D elements, recognising that touch-screen interaction was now a learnt behaviour; many of these visual cues were discarded as superfluous.

The advent of high dpi screens has meant we can no longer serve images and symbols at one size to each user; our symbols must be scaleable, or tailored to device requirements. Scaleable symbols require either vectors in svg format, or a custom webfont (typically generated from individual svg files). Symbols embedded as custom fonts restrict you to one colour, whereas svg symbols offer the possibility of embedded CSS media queries, which enable you to optimise the display of your symbols for different output sizes.

For more useful references and resources please visit the Glossary section of this site. 

Recommended texts and websites:
Creating symbol fonts by Brian Suda

Posted in Articles
July 20, 2015
300 words & 2 images

Hamburger icon

Latest articles sorted by date title length