MightyMeta

web-design-principles21

Web Design Principles for Print Designers

| 5 Comments

Moving from designing printed materials to web pages involves taking on board a number of new concepts and leaving some other preconceptions behind. The two disciplines also have a lot in common, since they are both about communicating a series of ideas in a graphic form.

This post is a far from exhaustive list, but serves as a ‘way in’ to the subject. Suggestions for further reading are given at the end of the post.

1. Page Hierarchy

The following diagram demonstrates a typical web page hierarchy, in order of importance:

Page Hierarchy

1. Site Title or Logo
2. Header Area
3. Primary Navigation
4. Page Heading
5. Primary Content Area
6. Sidebar / Secondary Content Area
7. Footer Area

Eye-tracking tests performed by the Neilsen Norman Group show that users tend to view web pages in an ‘F’ shaped formation, starting approximately in the top left and then moving along and down, with attention dissipating as the page is traversed.

Nielsen Norman Eyetracking Study

This is why key elements such as banners, logos and menus tend to be positioned around the top left corner.

These viewing patterns can, of course, be subverted through the manipulation of formal devices such as colour, shape and scale, but it is useful to be aware of this behavioural tendency.

2. Layout

Non-determinate Page Dimensions and Ratio

Web ‘pages’ differ from a printed sheet in that they have no knowable width or height. A web page can be viewed on a high-resolution monitor measuring over 2000 pixels in width, or a phone that uses a mere 320 pixels. Physical pixel densities (the actual size of the pixels that make up the design) also vary widely.

Furthermore, a PC monitor will be landscape in orientation, whereas a smart phone will tend to be portrait. PC users can also adjust the size of their browser window, making it impossible to know what dimensions or ratio a page will be when it is viewed.

A solution is offered by modern web coding techniques, that can enable a layout to adapt in response to its display context. This is known as ‘Responsive Design’, a term coined in 2010 by Ethan Marcotte in his article for A List Apart: http://www.alistapart.com/articles/responsive-web-design/

A good example of this in action is John Hick’s design for his company’s website (resize the browser window to see how the layout changes) http://hicksdesign.co.uk/

Hicks Design Desktop

Hicks Design Mobile

Therefore, it becomes necessary when designing to consider a range of probable layout contexts, and produce a layout solution for each. As a starting point, how your design will fare under the following page widths could be considered:

  • 1000 pixels (Average resolution PC display, minus scrollbar)
  • 768 pixels (Tablet in portrait orientation)
  • 320 pixels (Web-capable Smart Phone)

Scrolling and ‘The Fold’

Web pages can contain larger amounts of content than would be possible when using the above dimensions by increasing the page height and allowing the user to scroll. However, when the page loads it is rendered from the top down, so (if on a PC) the user will at first be presented with the top 600 or so pixel rows only. Anything that requires scrolling before it can be viewed is considered below ‘the fold’, a term borrowed from the newspaper publishing industry. Items such as main navigation, calls to action and primary content should be displayed above the fold as these will be seen first. Items lower down in the content hierarchy can go below.

The concept of the fold in web design has existed since the late 90’s and there are many debates as to whether it is still relevant today. Those against cite the proliferation of varying device screen sizes (making the 600px rule meaningless) or a recent trend to create scrolling narratives that end with primary content placed at the bottom. A nice balanced view on the topic is available here.

No ‘Recto Verso’

This means that unlike a paginated publication there is no natural delineation running through the centre of your design, no ‘spread’ to run content across, and no option to create a sense of rhythm or contrast through the act of the page turn.

What you have instead is a single vertically scrollable sheet, that has the potential to be infinitely tall. So rhythm and contrast moves from a horizontally segmented experience to a fluid vertical one. With web pages you also have the additional ability to reveal and hide content within the page using interactive elements such as tabbed areas, accordions and carousels.

‘Chunk-ing’

Users tend to dislike reading large amounts of on-screen text in one go. Breaking large blocks of text into easier to manage ‘chunks’ and allocating these to different sections within a layout or even across several pages can alleviate the issue.

The interactive nature of the web means that users can be given control over the quantity of text they receive. If a page presents a summary first, with a link leading to secondary page that offers more detail, then users are given the power to delve deeper, but only if and when they choose to.

Printed magazines and newspapers will frequently span a mass of text across multiple columns to make it easier to digest. This does not work so well on screen, as the ability to scroll leads to the cropping of the top or bottom of each column, making reading between columns unworkable. Columns can be used to distinguish different areas within the page heirarchy however, and the use of ‘sidebars’ to hold secondary or tertiary content is common practice.

Use of Grids

All web page elements, regardless of their shape, are rendered within an invisible rectangular box. Therefore grid-based design is difficult to avoid! The following link will download some paper and Photoshop grids for web design purposes.

Download Sketch Sheets

The post accompanying these sheets can be found here

3. Typography

Choice of Typeface

Until recently, typography on the web was restricted by the number of typefaces you could use, known as ‘Web Safe Fonts’. This was due to end users needing to have a font installed on their computer in order for it to display within a design. If a user didn’t have the correct font installed, text would be displayed using a default typeface, usually Times New Roman. Since there are only about twelve font families that it can be assumed are installed on the majority of computers in the world, these were the only typefaces that it was ‘safe’ to design with.

More details on which fonts can be considered ‘web safe’, including a downloadable cheat sheet can be found here.

Workarounds for this limitation included the use of embedded images or Flash documents to represent text, or drawing text directly on to the page using JavaScript. All of these methods had significant drawbacks, and could only be used in moderation.

Recent developments in browser technologies and CSS, a stylesheet language for defining web page appearance, have introduced a new method that allows designers to temporarily install a font to an end user’s computer for use on a web page. This means that in theory, it is now possible to use any typeface that you like in a web page design.

In practice, this is not quite the case.

The first issue relates to licensing. From a legal perspective, if an end user installs a commercially licensed font to their computer, even on an unknowing and temporary basis, they need to own the license to do so. This means having to buy the font. Since it is far-fetched to expect an end user to purchase elements of the design of a page before they can be allowed to view it, using commercial fonts with this new technique would seem, at first, out of the question.

Services such as TypeKit https://typekit.com/, recently acquired by Adobe, seek to address this problem, by allowing designers to effectively ‘rent’ commercial typefaces for use on a web page through the use of a subscription model.

If you (or your client) can’t afford to do this, there is a growing pool of open-license fonts that can be used. The Font Squirrel website http://www.fontsquirrel.com/ provides a searchable catalogue of fonts that can be used freely and also provides a tool for converting fonts to the four main formats required by different browsers.

Google also provides a free font service http://www.google.com/webfonts but beware! Many of the typefaces available here have not been designed for the screen and become illegible at smaller sizes on systems running Windows XP, which does not smooth font edges by default and is installed on over 30% of all computers worldwide.

Aliased Google Font

Having a greater choice also means being more responsible as a designer. Just because you can use a range of different typefaces, doesn’t mean that you should. All the principles for selecting and combining typefaces that apply to print, apply equally to the web.

Line Height and Line Length

Line height, (type body height + leading) needs to be greater for the web than is typically used for print, for ease of readability. As a general rule, line height looks most comfortable when set between 140% — 180% of a type’s body height. This can be controlled using the line-height CSS property.

Traditionally, the suggested optimum line length for screen reading is around 50 – 75 characters http://baymard.com/blog/line-length-readability, although a quick Google search will reveal a range of opinions regarding this, with some suggesting that up to 100cpl is permissible and does not significantly impede readability.

Text Scale

Screen text size is measured using pixels, rather than points, as physical type scale is dependent on an end user’s display resolution and so is impossible to ascertain.

Text with a body height of less than 16 pixels can become difficult to read.

Text Direction

Screen based text that runs in any direction other than horizontal can be difficult to read.

Unlike with print, it is not possible to rotate a desktop/laptop computer monitor to read a line of text that runs at a non-horizontal angle. Even with a phone or tablet, the viewport will tend to keep the page level whilst the device itself is rotated.

Current browser rendering of text running at a non-perpendicular angle also generates baseline positioning errors:

Non-perpendicular text

…although this may be improved in the future.

So, use non-horizontal text with caution.

Figure/Ground Relationship

Contrast between text and its ground is important for readability, however too much contrast on screen can cause eye strain due to colour being generated with light rather than pigment.

It is best to avoid fully black text on a white ground or the reverse. A dark grey against a very light grey tends to be more readable. When working with colour, try to consider how the contrast may affect readability.

Be wary of placing text over a texture or photograph that contains large variations in tone. Print design rules apply equally to the web in this regard.

Dynamic Text

Different web browsers, such as Internet Explorer, Firefox, Chrome and Safari, will render text differently. The precise weight, size and hinting of characters will vary depending on which browser is used to view a page. The situation is much better than it used to be, but there are still discrepancies:

Typography Test

Users can also change the size of text on a page to make it more readable.

Furthermore, on many websites, text content may be generated dynamically, meaning that you may not know the exact copy that will appear in an aspect of your design.

It is also not possible to hyphenate web text without JavaScript workarounds.

These combined factors can often result in widows, orphans, rivers, overtly ragged edges to text blocks and other typographic misdemeanours.

At some stage you will have to accept that you do not have the same level of control over typography for the web that is available when designing for print. However, testing a design with a range of different placeholder texts can sometimes help.

4. Interactivity

Hyperlinks in Text

Hyperlinks contained within a body of text can be made easily discernible through the convention of underlining. Colour can also be used, but be wary of identifying hyperlinks by using a different typeface, weight or style to the rest of the body text, particularly during cursor hover effects.

Underlining text that isn’t a hyperlink will be confusing for the user.

Buttons

Buttons should be obviously clickable/pressable. They also need to communicate to the user what will happen when then button is pressed. Concise, clearly defined text can be used, or an unambiguous icon, or a combination of both.

Interactivity should be intuitive. If you need to give the user written instructions to perform an action, such as “Click here to go to the products page…” Then your design is not working as well as it should.

Navigation

When a user visits a page for the first time they will scan the layout for familiar objects in order to learn about how it might work.

Navigation methods such as menus, breadcrumb trails, ‘previous’ and ‘next’ buttons and pagination controls are key elements that users will seek to recognise and commit to memory.

Therefore, to aid usability, design of these elements should build upon cultural conventions, conjure up perceived affordances or at least not deviate from common understanding to the extent that they become difficult to recognise and interpret.

Navigation design, once established, should remain consistent throughout the site. For instance, the sequence of buttons within a main menu should not change from page to page as this will contradict the user’s memory of that element and will cause disorientation. Similarly, the position and overall appearance of navigation elements should not alter wildly from page to page.

5. Accessibility

Accessibility in terms of the web is the act of making “reasonable adjustments” to ensure that users are able to access information displayed on a page, regardless of any physical or cognitive disabilities that they possess. In the UK, the 2010 Equality Act states that any public information, including that displayed on websites should be made accessible. It is possible for legal action against organisations to be taken under this act if accessibility isn’t addressed appropriately on their websites. Similar legislation exists in many other countries.

Many adjustments are to do with how a site might function, and are dealt with at the programming stage. Below is a summary of the main considerations for designers. More detailed guidelines for ensuring web page accessibility can be found on this part of the W3C website

Ability to Alter Presentation of Content

Users should be able to alter elements of a page such as text size and contrast. Although this function is achieved at the programming stage, having an awareness of how this might affect the layout and appearance of your design is important. Considering how content containers might dynamically expand or reposition to accommodate larger blocks of text is a key factor of web design that is at first alien to the print designer.

Use of Colour

If something is communicated using colour, it should also be discernible without colour.

Traffic Light Finder Window Icons in Mac OS XTraffic Lights Desaturated

Avoid figure/ground combinations that can cause difficulties for those with colour blindness, such as (but not limited to) green and blue.

Animated Elements

Repeatedly flashing or blinking elements, when placed alongside text, can cause severe reading difficulties for users with dyslexia and related traits, and may also trigger epilepsy, so these should be avoided.

Further Online Reading

 

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.

5 Comments

  1. Hi there,

    Thanks for this Website, it is great! I will start teaching graphic design next year and the informations I found here are very helpful.

    Also, there is a spelling mistake in the first principle. Hierarchy is writing Heirarchy. Not a big deal, but it is always nice to know ;)

    Thanks again!
    Mx

    • Well spotted, now corrected, thanks.

      • I need an app built for Iphone and Android platforms.
        We have found a company to do it. I can offer an opportunity far greater than the price he is charging.…

        479–966-4416 office
        479–387-7660 Cell (best)

        Please call if you want to hear more
        Barry Gilbow

  2. Thanks for giving great post for me. Because now i am a beginner for website designing. So this post very useful for me.

  3. Very inspiring article for us Thanks for the great article. ….
    It’s definitely a good idea for me and my friends to learn
    the things that’ll expand their skill set Your ideas and presentation is very
    effactive and useful for all. I am loving all of the in turn you are
    sharing with each one!… Being a user i really like your visible information
    on this pageWebsite Designing

Leave a Reply

Required fields are marked *.


MightyMeta, 8 St Lawrence Lane, Ashburton, Devon, UK, TQ13 7DD

Powered by WordPress | Theme Derived From "Yoko" by by Elmastudio

Scroll To Top