Andrew Fox

With more and more companies turning to digital marketing to get more bang for their buck in  the recession it’s no surprise that more print designers are turning to web. As we know there are huge advantages in digital over traditional print marketing, for example the ability to target and reach out to more of your audience via social media and then measure the return.

More designers coming from a print background may be no bad thing for content but there are  many different issues in digital media such as usability and interactivity to also consider not to mention the more technical nature of the web. Whilst many are more than capable, there are many pitfalls for have-a-go web designers.

Here are some tips for designers making the transition…

1. Unfold “The Fold”

   I’m surprised I still hear people talking about this; the notion of ALL content needing to be in the visible screen without scrolling, an idea adopted from broadsheet newspapers. By all means put important messages (and navigation) on full display but never try to cram all your content into the visible screen. There is valuable real estate lower down and by not allowing users to scroll you are devaluing content you have on longer pages. Users are now used to scrolling – think about how Facebook and Twitter work. Try placing content such as text or images around the area of “The Fold” so that users understand that there is more content below. There are more good reasons for unfolding the fold – Here’s a good article for more information.

2. Learn some HTML

   You may hate this idea but all designers for the web should know even some basic HTML and CSS. By doing this you will understand how to design your site and how it will be built for efficiency. You will be a better web designer for it and you may stop your HTML developer asking “do we have cram this text into this tiny box and make the font so small its illegible?”. Check out the wc3 Schools website for online reference.
   

3. Embrace Social Media and interesting content

   A web site is not just an advert. Okay it often has to be striking and deliver a message just like traditional print media but you also want people to come back for more time and time again. Your design might be the most amazing piece of creative ever but who wants to come back to a web site which hasn’t changed since the last time they paid a visit? Make sure you have new and interesting content featuring heavily on the home page, this could be a blog or news, Twitter feed, poll, resources from delicious, live user generated content or comments from your users from other parts of your web site …the list is endless.

4. Understand content structure and the efficiency of website templates

   A good website allows people to find what they’re looking for as quickly and easily as possible – remember the content is what they’re there for (and what will keep people coming back). Organise content in a logical way. Design templates to minimise duplication – it will make the website flow better. Minimise the templates too. A typical web site will have a different template for the Homepage, Section/Landing page, content page (2 columns), content page (3 columns), maybe a modal popup template for send to friend or other small functions. If its a large content heavy web site it may require further template variations but make sure elements can be reused as much as possible to keep things simple.

5. Understand The Limitations

   You will know about screen resolutions – being a print designer you probably have a huge screen! But not everyone does and think about how your site will look on smaller screen size (1024×768). I usually design to a maximum of 1000px wide (960px is good). Also think about web safe fonts and what you can and can’t use. If you want to use a non standard font (maybe just for headings) you can use a text replacement script like Cufon so that text can still be dynamically generated without using images. Also think about browser support. For example, if your target users are corporate users in an organisation still stuck on IE6, don’t use a lot of rich drop shadows in backgrounds and try to make them work with CSS3.

6. Make your website usable - and interesting!

   Unlike print media, a website is also a functional piece of kit so its important while making things look appealing to your users, that you also give them a nice usable interface. Don’t make buttons or navigation tiny …smaller than 14px for main navigation is too small in my opinion. Allow links to stand out as clickable areas by giving them a different colour or underline. Think about the importance of content on your page and give it suitable emphasis.

7. Don’t put everything in boxes

   As you know, using a grid makes content well balanced and easy to understand and its a designers nature to want to make everything just so. Allow your content and interface breath - leaving little space in boxes will make it hard for you (or your client!) to add content down the line. Also, although most modern browsers zoom, there is still an argument for text scaling – so make sure things have enough space to grow.

8. Design website layouts in Photoshop (Or Fireworks), not Illustrator.

   As good as Illustrator is for Illustration, you’ll never get a clean line with it because its not pixel based. A pixel based program such as Photoshop will allow you to get crisp edges ready for slicing. Fireworks is my web design software of choice as its also vector based and has an almost sketchpad nature somewhere between Photoshop and Illustrator. It also has great slicing and optimisation features.

9. Keep dimensions tidy

   Make sure you keep your dimensions consistent and whole. Eg instead of giving a column a width of 181.3px in Photoshop, why not round it up to 182px or even 180px? This will make things line up nicely with crisp edges and make things much easier when it comes to marking up the site.

10. Understand file types and optimised images

    A .gif which has a maximum of 256 colours is good for flat blocks of colour or basic images or icons where there are few gradients, whereas .jpgs are better suited to pictures which can have many more colours. Ensure you use the right file type to keep images as small as possible whilst retaining high quality.

There’s more to web design than this of course but follow these basic tips and you’ll be on your way to being a half decent webby!

*Image with thanks