Moving From Print Design to Web Design

February 21, 2017
Written By John Lai

It is February 2017 and Evermight still finds itself working with print designers from other organizations that are doing the work of web designers. Web design itself encompasses both user interface (UI) design and user experience (UX) design, and sometimes different individuals perform each of these responsibilities. When a print designer attempts web design with limited experience in UI/UX design and the designer is not up to speed with the latest front end technologies, the designer makes poor design choices that either substantially increase the cost of execution or make it impossible for the front-end engineers to produce a quality product.

In our opinion, print designers looking to improve their web design skills should invest 80 hours into learning HTML + CSS coding. In 80 hours, the designer will have learnt the fundamental skills to build very nice single-page-websites. There are plenty of great tutorials on the internet to make HTML CSS education a fun endeavour!

Once the designer has sufficient grasp of HTML + CSS, the designer will be ready to design fundamentally sound web interfaces. The designer should keep in mind these important aspects of web design which are not considered in print design:

Fluid Canvas – The canvas will be of variable dimensions to accommodate the various desktop display dimensions and mobile display dimensions. The designer needs to think about design in terms of components and decide how each component will appear within the most common display break-points.

Dynamic Content – The content on a website is often dynamic, meaning one creative element must render different content on different pages at different times. Different content typically means variable length content. Consider this example of a starburst with the word "new" inscribed in it.

Starburst image with the word new inscribed

Consider what would happen if the client requires the word "new" to be replaced every day with another word or phrase. And consider what would happen if the website has to support other languages where the average length of words and phrases are different than those of English. (In Canada, we often build web sites and software that support English and French. French, on average, is 30% lengthier than English.) If the text increases substantially in length, clearly it will not fit within the original design without sacrificing legibility. This concept of dynamic length applies to every creative element including but not limited to navigation menus, call out buttons, side bar widgets, banners, hero boxes, etc...

Interactivity – Many website interfaces are not static. Users can interact with components such as navigations, buttons, pop-up windows, move-able panels. As a user experience designer, the designer must consider whether the placement of one creative component will interfere with eventual behaviour of another component, and whether it will improve or worsen the user’s experience on the website.

Typography – The designer must test each font face that is to be used against an actual HTML CSS page. The designer must decide whether the font weight and font style renders consistently across all browsers the client expects to be supported. Often times, this may not be the case, and the designer must devise creative alternatives.

Iconography – Before designing custom icons for standard call to actions seen in most websites, consider leveraging existing font-icon libraries which will make the web site significantly more maintainable.

Web Content Accessibility – Consider designing the website in a way that is accessible to individuals of all abilities. WCAG compliance is a complete subject on its own, but some sample guidelines:

  • Design with the expectation that as much legible content be rendered as HTML text as opposed to images to assist those with screen-reading devices
  • Provide sufficient color contrast for individuals who may have a difficult time observing the entire color spectrum
  • Be consistent with navigation designs to help users navigate the website
  • Be consistent with buttons and call to actions to help users navigate the website

This is by no means an exhaustive list of things a print designer should consider when learning to be web design, but hopefully it serves as a useful starting point. It has definitely helped our designers!