7 Recommendations When Moving From Print To Web Design
1. Design in Photoshop instead of Illustrator
While some designers will disagree that Photoshop should be used for design, almost every web designer I know creates concepts in Photoshop. The advantage to designing in Photoshop is less to the designers and more to the developer. It is much, much easier to crop, hide layers, measure pixels and optimize graphics using Photoshop. It also provides a much more realistic representation of the web site concept considering Photoshop uses pixels and Illustrator does not.
2. Ensure concept design matches CMS capabilities
When designing a website for a content management system it is important to understand the capabilities and limitations of the CMS you are designing for. Have your developers review the site mock-ups thoroughly, discuss potential issues and solve those problems before beginning themeing. What could take tens of hours of development could be solved with 30 minutes of re-design in Photoshop.
3. Use standardized Grid systems for design and themeing
Using a standardized Grid system like 960, Omega or Fusion not only increases theme implementation efficiency, but can ensure design elements position correctly and consistently. Providing designers with Grid templates is an easy task as most Grid systems come with templates for Photoshop, Illustrator, Fireworks, etc.
4. Work from a style guideline
Speak to your client and ask them to provide a style guide if they have one. Style guides provide brand documentation to designers and developers to ensure fonts, colors, imagery, spacing, etc. are being used correctly. Brand consistency strengthens the brand!
5. Get mock-ups for page elements
Often overlooked, the design of secondary page elements such as drop-down menus, hero banners, inline graphics and icons can significantly change the way a user experiences a website. Having these elements designed and approved before development not only ensures consistency throughout the website, but provides developers with more direction.
6. Create a CSS markup page
It has been my experience that creating an example page with heading, body, block quotes, link, button and other tags being used on the site ensures that styles are not overlooked when building out pages within the website. Content contributors can also use this page as an example when adding content.
7. Use web-safe font stacks
Often, when print designers create mock-ups for the web, they will use non-friendly fonts that do not translate to users of the website. To accommodate for a diverse group of users and to ensure the site looks consistent across computers and browsers use web-safe fonts and stack them. By stacking fonts, users are provided with secondary and tertiary options in the event they do not have the intended font installed on their computer.
