The transition from print design to web design can be a frustrating one, but as we make the shift from paper to web, it is an essential one for all graphic designers to make. Truthfully speaking, the thing that initially made it difficult was the very thing that I thought would help – design experience… print design experience. Don’t get me wrong, my print background provided me with a comfort in the design field that was invaluable, but what it also provided me with was a know-it-all attitude. I honestly thought there couldn’t be much of a difference between print and web design. But I was wrong.
After several of my designs falling flat, lacking that ‘finished look’, I got some really good tips on how to ‘webify’ my work. As print designers, we rely on things like stock, specialty inks, varnishes, and embossing to give our work sparkle. You really can’t underestimate the dimension that you get when holding your work in your hand. Because all of these things are impossible on the web, tricks must be learned to give your designs that same sparkle and depth.
Using the website I have designed for a fake coffee shop I am going to walk through some of the techniques you can use to ‘webify’ your designs. In the coming weeks I am going to produce screencasts for each technique so you can see, in depth, how to create them. Download the full jpeg (460 Kb) to follow along with the post.
A spotlight effect can create prominence and helps direct the viewer’s eyes to a focal point. In this example, lighting is also used to help create dimension. As with any technique, don’t go overboard! Keeping your lighting from a consistent light source will unify your website.
Using very subtle and very thin (1 pixel) lines helps to add a polished look to your designs. Because they are so small and subtle, they are easily forgotten. Try adding lines to the top and bottom of sections. Putting a gradient overlay on top of your lines will give them even more subtlety.
Drop and inner shadowing are great effects to add to your website. Adding a subtle drop-shadow to navigation items will help them pop.
As with any design, giving a website the appearance of having three dimensions makes it more interesting to look at. You can easily guide your viewer’s eye to key areas of a page by adding a 3D effect. Once again, it is good to analyze your design to make sure your dimensions make sense. Make sure the shadows and lighting effects work together for a cohesive look.
5. Gradient Overlay
Gradients can have a bad reputation, especially the hideous default gradients. That being said, when used properly, gradients can be extremely helpful. They are great at creating an easy transition between an image and solid colours.
This design element is just as important in web design as it is in print. Using different textures makes your website interesting. Picking appropriate textures goes without saying, always keep legibility in mind.
In a nutshell, the effects that you should use on your designs to make them ‘webby’ are ones that introduce depth and sparkle. This list is certainly not exhaustive, the internet is a never-ending source of the latest web trends and tutorials on how to create them. It is extremely important to keep on top of this, however, since time always seems to run out – and quickly, at that – if you try to learn one new technique a week, your designs will improve dramatically.