From the page to the screen

Today's designer has to have a multi-faceted skill set which allows them to transition freely between design for traditional media such as print, and design for screen based media such as websites, apps and user interfaces.

Design itself is no longer something which simply has to look good but also something that has to be functional and serve a defined purpose cleanly and efficiently. The internet has freed designers from the supposed constraints of print design but, on the web, design must be dictated by function.

Making the transition from print design to web design is not something that comes naturally to a lot of designers. Likewise, it shouldn't be thought of as something completely alien either and by following a few basic principles it doesn't have to be difficult:

1. Form follows function

Perhaps the single most important thing to remember when designing for the web is this: content first, design second. The biggest mistake a graphic designer can make when designing a site is to ignore this fact. It is a hard lesson to learn, but unlike print design, design on the web takes a secondary role to content & functionality. This is not to say the look and feel of a site is any less important than the information it is presenting but the content does dictate how the design will evolve.

2. Think in reverse

Another fundamental principle is that the visual design of a web site takes place in reverse when compared to designing for print. In print design a visual is usually the first thing produced to realise an idea or concept. The opposite is true in web design with the visual design being the last stage of the process. Designers need to think of their visuals as 'skins' that are applied to a framework. This framework is the content, the functionality and back-end technology with the visual design adding the finishing touch to an engaging user experience.

3. You are not alone

Working as a team is an old cliché which rings true in web design more than it does in designing for print. By and large, a print designer can lead a solitary existence and complete most of the project single-handedly. Very few, if any, designers can design and build a website in its entirety. As a designer you'll have to work with content creators, developers and back-end programmers to name but a few. Understanding the role each team member plays and how it impacts on the design process is vitally important.

4. Identity crisis

The term 'Graphic Designer' is no longer really applicable when referring to designing for the web. Simply 'Designer' is a more accurate term as a large part of the design work done for the web is not purely visual. Functionality and usability must be taken into account along with information architecture, use of screen real estate and information hierarchy. A designer must think as part graphic artist, part developer and part user when visualising how something should look. Site maps, wireframes and user journeys all need the input of the designer, and as a result the visual design is just part of the overall process.

5. Don't abandon print

Print designers don't need to forget everything they've learnt in order to design for the web. The basic fundamentals of good design still hold true on the screen as they do on the page. E-commerce, news, political websites and blogs commonly all use print inspired layouts to structure information. The use of an information hierarchy in print (headlines, sub-headings, body copy) is exactly how HTML should be used to present text content. By structuring visual designs in this way, information is presented in the most accessible and user-friendly approach possible.

6. Losing control

Graphic designers have an infinite amount of control over how a finished job will look. Printers can make mistakes that affect how a print will job will turn out and a designer can demand a job be reprinted if they are not happy with it. This amount of control gives the designer supreme confidence in their work. On the web however the designer must be prepared to relinquish some of this control and accept that the user has the final say in how the work will be displayed. Varying screen resolutions, browser plugins and mobile devices are just a few issues they have to contend with. A design must be adaptable, use graceful degradation where possible and take into account that the user may change it to some degree. These restrictions are forcing designers to explore the limitations of the medium and produce efficient, streamlined designs that meet and exceed user requirements.

7. Expand your skill set

It may be surprising to learn that many web developers started out as designers but the two roles are really not that different. Every designer should have at least a basic understanding of front end web technologies such as XHTML, CSS and Javascript. By taking the possibilities and limitations of these into account, designers can become more proficient and produce better work. This blurring of the lines between design and development brings about greater creativity and better end-user experiences.

8. Immerse yourself

Just as designers at college are encouraged to keep scrap books of visual reference for inspiration, the same is true for the web. The only difference is instead of physical references, the web designer collects hyperlinks, bookmarks to blogs, articles, tutorials and inspirational sites. In the fast changing world of web design the best way to stay informed is by exploring the web itself, searching for specific topics and following the latest trends and developments. Every designer should set some time aside regularly to do this. In doing so they will learn and adapt quickly to the ever changing nature of the web.

9. I'm a Mac and I'm a PC

It shouldn't matter which hardware or operating system is used to design for the web but in reality it does. The print industry is primarily Mac based but the web design and development industry uses Windows almost exclusively. Here Macs are the minority and simply a final check in cross platform browser compatibility. Designs are coded and built for Windows first then checked to see how they look and function on a Mac. The majority of end users will be Windows based so it makes sense to cater for them first. Even with the popularity of the iPhone and now the iPad, the Mac OS will still only cater for a small percentage of website visitors. Furthermore, by controversially banning Flash from these devices Apple has created a closed platform that poses new challenges for designers and developers.

10. The right tool for the job

One application that every graphic designer will be familiar with is Photoshop. Most likely they will use it in conjunction with other design applications however the web designer will use Photoshop almost exclusively as their only design tool. Carrying out the design process in a single application is something alien to most print designers but makes perfect sense when designing for the web. By having just one tool to do it all, the designer and developer can work closely together on the build of site through a transparent process. Photoshop has become the interface point between design and code, allowing the designer to create easily and the developer to take the design and utilise it efficiently. This in turn means closer collaboration between the designer and the developer resulting in a greater understanding of each other’s role.