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:
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.
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.
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/
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 may not seem like a big deal, but means that 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 surprise through the act of the page turn.
What you have instead is a single sheet that has the potential to be infinitely tall. You also have the ability to show and hide content within the page using interactive elements such as tabbed areas, accordions and carousels.
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.
The post accompanying these sheets can be found here
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.
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.
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, or ‘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 size. 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.
Screen text size is measured in pixels, rather than points, as physical scale is dependent on screen resolution and so impossible to ascertain.
Text with a body height of less than 16 pixels can become difficult to read.
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:
Although this may be improved in the future, it is best avoided at present.
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.
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:
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.
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.
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 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.
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.
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.
Avoid figure/ground combinations that can cause difficulties for those with colour blindness, such as (but not limited to) green and blue.
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.
- Designing for the Web
(more detailed info)
- A Guide to Web Typography
(expands on areas covered in ‘Typography’ section of this page)
- Thinking With Type
(not specifically to do with web design, but a great resource none-the-less)
- Design and Code Your First Website In Easy To Understand Steps
(walkthrough tutorial for beginners)
- The Elements of Typographic Style Applied to the Web
(if you are familiar with CSS, this shows how it can be applied using Robert Bringhurst’s typography principles)