Web Design for Graphic Designers

Download this white paper in Adobe PDF format

How modern web design differs from traditional print design and what you need to know when designing a web site

If you ask a web designer what their background is, they will usually reply, saying that they come from either IT or print design. Web design is a relatively new profession in comparison with other medias. This means that the rules and thought processes behind web design are still in the 'developing' period and change dramatically every year. W3C (The World Wide Web Consortium) are constantly pursuing its mission to standardise the web through creation of web standards and guidelines, releasing HTML standards in June 1993 and XHTML 1.0 standards

So what are the main differences with designing for this new media? This white paper will help explain the main issues to keep in mind when making the big step moving from print to web design.

1. Layout

First and foremost, you need to think about the layout of the web page you are about to design. Print gives you a lot of freedom in terms of layout and space. Print also allows you to set the mood using limitless visuals to create a colourful and creative composition. Although, this is still true for web, there are also a lot other things you need to consider.

1.1. Structure

The structure for both print and the web is typically the same; you have your header, where the main headline and most important information is; you then have the body, where the main information is placed; and then the footer.

One of the most important features of a webpage is its navigation. Without navigation, users are not able to find their way through the content on the website. Web designers intentionally place the navigation on the left hand side of the content or horizontally below the header, as users are conditioned to look there first. The navigation should be easy to find, and use.

A consistent approach to structure allows readers to adapt quickly to your design and to confidently predict the location of information and navigation across the pages of your website. Hierarchy is important to users as it makes it easier to scan through a lot of information in a short period as time. Placing content into 2 or 3 columns and using short paragraphs will help users with easier reading.

1.2. Logo positioning

The first thing you will often notice when surfing the web is a company or product logo. For the print realm, if you were to place the logo at the bottom right of a poster or brochure, making it the last thing people see, it is more likely that people will remember it. Conversely, for the web, as websites have many pages, logos are placed in the top left so they appear first on every page. Also, users may not scroll down to the bottom of the page as that specific page may not interest them. So bear in mind that if the rules are transferred from print, users may not see the logo at all.

1.3. Artwork sizing

In print everyone sees the same thing when they look at the finished product; the text will be the same size on that same size paper. For web however, everyone sees a web page differently depending on their monitor, resolution, browser and operating system. The resolution that web designer's use most frequently is 800 pixels wide by 600 pixels in length. This allows older computers with smaller monitors to view the page without having to horizontally scroll. Although designers are starting to challenge this as 800 x 600 pixels is now being used less, it is still best to stay with this format, as 14% of people still use this resolution.

Something new that you will discover is that you have choices with the size of your artwork. It is possible to give your webpage a width of 100%. This means that whatever size your browser is your website will stretch completely from the left to the right side of the page.

Graphics and styles used should expand and contract to give the same look and feel regardless of window height and width. For print designers this is a completely new way of working and takes some time to become familiar with.

1.4. Artwork space

“We’ve created this two-sided A4 brochure for a new promotion coming up and we want to put all the content into the ‘promotions’ page” said the graphic designer when handing over the brochure to the web design team. One of the first things you will notice when you insert the content from that brochure into your first layout is the amount of space you have to work with.  There is very little space available in comparison with print. When a lot of content is produced, web designers tend to split the pages up, using ‘next’ and ‘back’ buttons to link the pages, or using sub-menus in the navigation. Similarly, the same applies when designing a large brochure or a book, where the user clicks a next or forward button rather than turning the page.

2.   Typography

Typography has a lot of limitations with web design. Previously, designers created artwork by using new and funky fonts, which may never have been used before by outlining or embedding the font before sending it to press. The web has no native embedding tool which limits the choice of fonts drastically.

There are 12 common fonts which are considered ‘safe’ (shown in 2.1.). This means that most standard PCs & Macs have these fonts pre-installed in them. However, there is a simple way to resolve this if you must have that new and funky text that you have been using for print jobs.  The simple solution is to use an image. By using either a GIF image or JPG you will be able to get the same effect. Try to only convert text to an image when absolutely necessary. Here are some points to support this:

• Users are unable to highlight and copy the text
• Search engines will not be able to scan the text, resulting in lower page ranks
• Users will not be able to increase (or decrease) the size
• Images increase loading time, especially for users with low bandwidth
• Updating the page will take longer as you may need to recreate the graphic
• The text may not be available to screen readers and other accessibilitybrowsers

2.1. Safe fonts

These are the 12 fonts that are considered ‘safe’ (Source)

1. arial
2. arial black
3. comic sans ms
4. courier
5. courier new
6. georgia
7. helvetica
8. impact
9. palatino
10. times new roman
11. trebuchet ms
12. verdana

3. Colours

Standard monitors are rendered in RGB (Red, Green and Blue colour channels).  This makes life a great deal easier when attempting to get the colours right.  It can be a lengthy process getting the colours right for print work.  Printing and re-printing the artwork, then constantly referring back to the Pantone swatch to make sure the colours are correct; even though it still may look completely different once it is retuned from the press. When designing for the web, there is absolutely no need for CMYK as you will be designing for the screen which is an absolute colour reference.

3.1. RGB to Hexadecimal

You’re probably thinking “What the heck is a hexadecimal”, right?   Hexadecimal is a numeric system, primarily used in computing to represent a byte, with 256 possible values that are represented with only two digits (in base 16). These are written using the symbols 0-9 and A-F.

What on earth has this got to do with colour, or even design?

HTML and CSS uses hex triplets (3 x hexadecimals) to specify colours on web pages, with ‘#’ standing for hexadecimal. So a typical colour code used for the web would look like: #RRGGBB.  RR specifies the value of Red in RGB, GG specifies the Green value, and BB is the Blue value.

The image below displays the RGB colour values. See how each value can be a total value of 255, which will translate to equal 2 digits.

Example colour code: 00 00 255 = #0000FF = Blue

3.2. Web-safe colours

There are a set of colours which is commonly referred as the ‘web-safe’ palette. Web-safe colours consist of 216 colour values. These were developed at a time when many computer displays were only capable of displaying 256 colours (as mentioned above). One of reasons why 216 colours were chosen (rather than say, 240 colours) was because it allows exactly six shades each of red, green, and blue (6 x 6 x 6 = 216)

Photoshop has a function which allows you view only web-safe colours. In the colour picker window illustrated below, you will see on the bottom right that there is an option for ‘only web colours’.

3.3. No more spot colours

You guessed it, designing for the web means there is no more need for spot colours.

4.   The Code

Being able to code XHTML and CSS is essential to being a web designer. It will give you a clearer understanding on how you layout your page and the do’s & don’ts.  Coding is also a must for testing and fixing any bugs that you come across.

Here’s an example of a simple XHTML document:

A good starting point would be the check out the following link: HTML Basics

5.   Test Test Test!

Web sites need to be tested. This can be a lengthy process to complete as all browsers render content in a different way.  In print, when you look at the screen you know it’s just a ‘preview’. This also applies for web browsers. You will be totally unaware of many browsers and quite unprepared for the variations that will appear on many operating systems.

Ensure that you test in Firefox, IE6 & IE7 and not least Opera & Safari browsers.

You might also want to look into automated testing tools such as Selenium or Canoo.

Below are the statistics on the most widely used browsers.  The data is compiled by www.w3schools.com

6.   Conclusion

Web is a completely different medium from print, and designing for both takes very different skills. The hardest part from moving from print to web is leaving the mindset of designing for print behind. Although both professions are very creative; the thinking, structure and techniques used are quite different. 

Web designers not only need to design a ‘pretty’ looking site, they also need to think about the functionality, accessibility and usability of the site. Will visitors be able to find the information they’re looking for quickly? Is the content easy to read? Will it be accessible to everyone? Will it be designed for a content management system such as Cookie Jar? The list goes on. 

I hope this paper helped you realise the main differences between print and web.  Also, what is needed for designers who are moving from print design to web design.  Web design is an exciting field to be in; we hope you enjoy it as much as we do.

7.   Reference

www.w3schools.com

http://en.wikipedia.org/

http://www.grantasticdesigns.com/printweb1.html

http://www.wpdfd.com/editorial/wpd0804news.htm

http://www.blooberry.com/indexdot/history/html.htm

About Solid State Group

Solid State Group is a content management, web applications and services consultancy, who focus on making your online presence dynamic and easy to manage, at a reasonable price. Our primary goal is to complete innovative and robust websites for our clients whilst maintaining a service second to none.

Cookie Jar content management system
Solid State Group’s products allow you to completely control your company’s brand on the internet. Cookie Jar is a complete accessible content management system but it’s easier to think of it as the remote control for your website.

It is accessible - Cookie Jar produces WCAG level A, Double-A, and Triple-A websites.

It is flexible - Cookie Jar can work with any kind of website design.

It is multi-user - Cookie Jar enables teams to work securely and seamlessly on a site.

It is secure - Cookie Jar has been tested by Deloitte consulting for FSA accreditation.

It is sticky - Cookie Jar comes with interactive tools such as forums, polls, quizzes, etc.

It has management tools- Cookie Jar has real-time integrated web statistics.

It has marketing tools - OutReach is an email marketing plug-in for Cookie Jar.

It uses open standards - Cookie Jar uses open standards like XML, RSS, CSV and SOAP.

It is platform independent- Cookie Jar runs on Java with a web front end.

Bespoke build services
Solid State Group also offer bespoke systems design and development. Some websites need a little extra functionality that simply won’t be available out of the box from any product. We specialise in capturing the exact requirements and translating them into a working site with stylish design.

Our special offer
Solid State Group offer a free consultancy meeting to capture requirements and give a ‘no strings attached’ estimate for systems design and construction. If nothing else, you will at least gain a well documented specification of your requirements, so if you are interested in our services, please do get in touch.

Contact us

Call us on +44 (0)845 838 2163

Email us at info@solidstategroup.com

Visit our website at http://www.solidstategroup.com

Tagged in: White Paper