Get your FREE 30-day trial.
Please complete all fields.
Most non-designers know when a design is aesthetically pleasing, but have a hard time explaining why. Non-designers often approve the final design of an app, website, or feature. Costly issues can occur when the decision maker cannot articulate the root problem behind a poor design. This usually results in the decision maker asking for many failed revisions.
Although there are many principles and elements that are employed to produce beautiful design, the root visual design issue can often be traced to bad typography and layout. Every decision maker should attempt to understand these concepts to have a constructive conversation with their designer.
Good typography results from much more than picking the right font. Poorly set type will produce a bad design no matter how beautiful the typeface. Typographic hierarchy and line-length and height are the two most overlooked concepts in Typography.
Typographic hierarchy is the structured relationship between elements of copy. Headlines, subheading, body copy, etc. should be differentiated by importance to aid legibility. This can be done in many ways including size, weight, value, and color.
Line-length and height are common unarticulated reasons behind people’s dislike of typography. Line-length is the width of each line of text. A good set length usually contains between 50 and 75 characters per line.
Line-height is another subtle part of typesetting that has a big impact on perception. Line-height is the vertical space between each line of text. A good set line-height is typically 1.5X of the font size.
The graphic above shows how hierarchy and line-length and height can improve legibility and visual appeal. The first block has limited hierarchy, whereas the block next to it has visual distinctions between its headline, sub-head, intro sentence, and body copy. The line length and height of the first block makes the copy hard to read because the lines are too close to each other and run too long. The reader will easily lose their place as they scan the paragraph.
The Layout of an app or website can make or break the experience. Layout guides viewers through a design and reinforces brand. A layout with jumbled elements communicates disorder and sloppiness, whereas a layout with a consistent grid structure, and appropriate use of whitespace communicates clarity and thoughtfulness.
Designers use grid structures to direct composition and give order to content. The column grid is by far the most used grid in digital design. This is because the width of a screen is finite, unlike the height, which can go on forever if the user has the ability to scroll.
Whitespace is the area between elements in a layout. Brands like Apple incorporate a lot of whitespace in their design to communicate minimalism and sophistication. It is tempting for non-designers to load a design full of content in order to better “communicate.” This usually leads to the wrong communication. It is better to let the content breath than to cram things into a fixed space.
The graphic above illustrates how a simple 4-column grid and whitespace can transform a design for the better.
Understanding typography and layout will help non-designers understand why they perceive certain design to be more appealing than others. More importantly, it will help them articulate why.
There are countless other principles and elements that contribute to visual design quality. It is important to work with a designer who understands these concepts to insure a great user experience.
Andrew Coyle is the Product Design Lead at Flexport, a global logistics platform for the modern enterprise. Andrew’s passions lay in the intersection of business decisions and design implementation. You can find him on Twitter at @CoyleAndrew.
Download the free Salesforce e-book to learn about the four trends that will shape app development in 2015:
