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
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.