Web, versus print, design operates on an entirely different paradigm than we are used to. In print, a PSD is produced and it is up to a print director to manage the conversion of the PSD to a medium of choice. This makes sense. But web introduces a sudden shift. In print, we use our medium on our printers. On web, we use their paper and their printers. To produce a static image in a PSD and to translate it to a proper web app is becoming increasingly difficult as the range of viewable devices grow and our designs take advantage of new design trends.
So what are web designers doing? Many are working hand-in-hand with their developers. They take skeleton applications and pages – sites that are interactive and filled with fake data to make it look real – and tweak the CSS and HTML on these sites themselves. This requires additional training, however, which can be costly and time consuming. Likewise, many graphic designers find themselves already too busy with their workload to introduce the additional time of trying to manipulate web design.
Many designers are following key suggestions to make the conversion easier into web user experiences.
- Do not think in terms of print, but rather user experience and flow.
- Lines of text will never be even, nor will they ever fill a div evenly. Go to a random site with comments. Copy random comments and paste them into your placeholders. Prepare your design for uneven components, and deal with them accordingly.
- Designs should fail gracefully. This is a term we have in programming – it means an application’s failure and crashing should react in a predictable, controllable way. Likewise, web designs should be able to be pushed to their limit, and then gracefully adapt. If the user resizes the window to be long and thin, or short and wide, then the web design should fit. Not only should we responsively hide items and shrink items for small screens, but we should handle absurdly larger screens just as gracefully.
- Never design to a resolution, or to a certain pixel size. A phone can have the same resolution as a larger laptop – thus a 100 pixel wide box can range in size from a quarter inch to three inches. Design, instead, with percentages. But be ready with max and min width settings.
- Centering vertically can be done, but rarely works in scalable design. Likewise, floating divs are difficult to determine how to act on changing screen sizes.
- When designing a PSD, start with 960px width, or 1024px and build in empty space on the sides. THEN proceed to stretch your design. Does it look fine with a VERY tall page? What about a short, 400px wide one? Most laptops used by corporations still have a 1024 x 768 resolution. Include the Start bar, title menu, address bar, bookmarks bar, and others, you suddenly are dealing with only 400px of height and 600px of width IF they view your site in full screen.
- For touch applications, avoid tightly spaced small buttons.
- Text does not always scale 1:1 with percentage.
- Designate what items hide and/or move when screen sizes drop too small. Does that side menu shrink into a drop down below 600 pixels? Does that floating logo outright disappear?
- Create high resolution and dpi copies of all images. Large images can scale easily to serve smaller images on smaller resolution screens, and serve larger ones when requested. You cannot, however, scale up a low quality image to a higher resolution without obvious artifacts.
- Use Google Web Fonts. If your font is not in there, don’t use it for anything but rasterized, unchangeable images.
- If the client is corporate or enterprise, design for IE8 and do not use fancy CSS. If the client is anyone else, design for proper browsers.