Web Design for Graphic Designers

A designer whose world primarily exists in print will invariably have a client request that the designer build a web site for them. To the client, design is design, and it makes sense to have the brand carried forth by the person who initiated it.

Some designers will make an effort to learn what is needed to actually build pages, figuring that the time invested to learn a new set of skills will pay off over time.

Other designers want to keep their focus on what they do best, such as print design and brand identity. They will approach a web designer, such as me, to execute a design that they create.

The challenge is that there are underlying mechanicals to web design, just as they are with print. A good graphic designer will by nature take into account such print mechanicals as gutters, facing pages, trapping, ink viscosities, press idiosyncrasies, paper type, varnishes, etc.

The web has it’s own set of mechanicals. For the graphic designer designing for the web, understanding these will make the process of working with the executing web designer much smoother. Let’s take a look at some of these.

Multiple Platforms and Browsers

Print is absolute. If you have taken every factor into account, your output will perfectly match what you have designed. There are no variations, no surprises.

Imagine while designing you don’t what kind of press will be used, or what size paper. Welcome to the web. The are multiple browsers that all follow a more or less standard set of rules, but each will have slight differences in how they render what has been coded. In addition, the mobile revolution is upon us, and a higher and higher percentage of people are viewing web sites on phones and tablets.

Fonts and Typography

All of the top tier graphic designers I’ve worked with are fanatics about typography. For them, it is a big part of any design project, and their attention to detail to font choice, line spacing, character spacing, orphans and widows is a matter of professional pride.

We’ve come a long way on the web, we’ve got control over line spacing and character spacing, and with the advent of Google fonts and other technologies, we’ve been freed from the tyranny of the classic family of about eight fonts.

Here is the big “but”. Text in web browsers behaves based on the rules of that browser. Firefox on a Mac can be slightly different that Internet Explorer on Windows. For the graphic designer manic about how lines break, this is highly frustrating. Add to this that the user can then use browser tools to change the size of the font, and you’ve now got a big can of typographical worms.

The best advice to the graphic designer when it comes to type is to realize that the web is simply not as precise, the control isn’t there. And trying to use print methods to solve problems, like forcing line breaks, can create other problems when type is rendered.

Stages and Curtains

Imagine if you didn’t know what size paper your user would have when designing for print. On the web, there are display sizes that range from cell phones to 30-inch panels. Creating layouts that work across all of these requires thought.

Most sites are built so that the content fits to a pretty standard width of about 960-980 pixels. This means the site content falls within the width of the least common denominator in monitor sizes today, which 1024 x 768 pixels. So what happens when a web site is viewed on a display that is 1980 x 1024?

If you think about the display as a stage, and the areas to the left and right (the standard today is that sites are centered) are the curtains. Depending on the size of the display, the curtains can be very wide, or not present at all. There are a number of creative ways to use the curtain space, which by nature should not contain critical content. Some sites (such as ours) stretch design elements across the full width of the screen, while centering the content in the sweet spot of 980 pixels. It gives the site a sense of openness. Other solutions include having a background image or pattern that repeats in the curtain area. Some sites will anchor a background image to the left or right edge of the stage, so it is always positioned at the far left or right edge of the browser window.

CSS: The Mechanicals of Web Design

The standard for web design today is for content to be separate from design. In other words content is built into one document (HTML usually), and the different elements are tagged semantically (based on their function-like header, body text, list, etc.). Then a separate document (CSS) provides instruction on how to style and display the content based on the tags. It means styles throughout a site can be changed globally by changing the CSS.

CSS is too extensive for a complete discussion here, so a graphic designer should have a discussion about the possibilities before design is begun.

Content Management Systems

More and more sites are now being built into a content management system (CMS) that allows the site owner to make regular content changes and additions. For design, this requires some thought about the behavior of the design. Often, different templates are created to handle different types of content for the site. But in general, designing areas of content should flexible enough so that the various likely content elements placed by the user will fit the design.

Design Tools

Most web designers composition their sites in Photoshop. For many graphic designers, Photoshop is simply a tool they use for manipulating images. Their primary layout tool is InDesign or Quark.

One of the big advantages to Photoshop for the web designer is the ability to create multiple layers and layer sets to drop different sets of elements onto a page. Photoshop also allows the web designer to define “slices”, areas that match the grid they will ultimately use to build a web page.

Many web designers don’t own Quark or InDesign, unless they also do print layout. Therefore, the graphic designer needs a method to transfer their design to the web designer. Often times they will create a PDF, but since this is a flat file, without layers, it makes it difficult for the web designer to extract the pieces they need. As a note, InDesign and Illustrator both export to a layered file Photoshop can read, though not perfectly.

The best option is for the graphic designer is to create their compositions in Photoshop. If they are going to be using a program that will export to Photoshop, be sure to set the resolution to 72 DPI. If the layouts will be in another program that can’t be imported to Photoshop, the web designer may need to rebuild your design in Photoshop. In addition to a PDF you provide, be sure to include raw source files and font specifications as well.

Behavior

One of the big differences between web and print is the behavior of the user. Web users are increasingly eager to get to information quickly, without barriers. Web users tend to scan information before committing to read, so the use of headlines and smaller paragraphs is essential for good conversion rates. The user may also enter the site through a page other than the home page, so each page on the site has to stand on its own to a certain degree and give the user a sense of the overall purpose of the web site. Users are also increasingly impatient will introductory animations that use Flash or other animation techniques.

In Conclusion

This is just a summary of issues the graphic designer needs to consider when designing for the web. A good web designer with experience in usability will guide and coach you through the process so that you get the best result possible for your client.