From print to web: avoiding common design mistakes

14 July 2009, in Design, Work method | 2 comments »

Moving from print to the web is not as easy as it may seem. I had to do it myself a few years back, so I can speak from my personal experience of the process and also from my experiences coding designs that have been created by print designers that were new to the web.

The value of experience

Experience will help and probably the first few tries will not be without their problems, no matter how hard you try. But there are some mistakes I usually spot on web designs that have been created by print designers or designers that have no knowledge of coding, and that, if you’re in that position, you can easily avoid.

Learning how to code

When you’re handing over a design to be coded by someone else with at least some experience, they will know in a second if the designer has any idea of how things work on the web, or on screen.

Learning HTML and CSS is a must, not an option, if your intentions are to be truly great at what you do. It will make it easier for you and for the developers you’re working with. It doesn’t mean you have to become a front-end guru, but a basic knowledge of how things work will be to your advantage.

But don’t get me wrong! It’s good that there are no restrictions—sometimes designing a layout can become a very rational process if you know you will have to code it later on, but it’s wise to know how things work at a minimum level.

Here is a list of a few things that you should pay attention to when designing for the web:

1. Proportions

Closed
Photo by caitlinburke

This one is easy! When you are creating a new layout, pay attention to the size of the elements and think of how and whether they will fit in the page. Are you creating buttons that are too big compared with the rest of the page? What happens when you have more navigation items than you designed, will they fit the design? How will they wrap?

It makes it easier to design with the units set to pixels, because that will be the primary measurement unit on the web. Pay attention that you are not designing a layout that has 20 centimeters, and if you really must, how will it translate to the screen?

2. Organize your file

If you’re handing out Photoshop, Illustrator, or any other layered type files, make sure that the layers are well organized. It doesn’t have to be OCD-organized, but at least separate the big blocks that make up your site in folders and name key layers.

Here is an example of a well-organized Photoshop file:

photoshop-layers

3. Too many effects and details

I’m referring to details that will not add value to the layout and will just make it harder to code. A rounded border with a coloured gradient border, a complex background that would require multiple images to reproduce and a dropshadow on the same element may be a bit too much (although you never know, right?)!

Your designs don’t have to be all shiny and cute to be beautiful and good.

4. Use fonts that are web-safe

Red-Type
Photo by bebop717

Opinions divide on this matter. Some say we should experiment with type, others that we must adapt to the medium and work with the fonts we have at our display. I would say I agree with both, with limits: we should definitely experiment, but in some cases, we have to play it safe.

In those cases, make sure that long chunks of text or text that needs to be flexible uses web-safe fonts.

Techniques can be used to use almost any font now, but sometimes that will add time to development that may not be suitable to a particular project. So the best thing is actually talk to the developers upfront whether that option is viable.

5. Not following some conventions

Doc martens punk
Photo by dmmartens666

If you plan on designing a website that is intuitive to use and doesn’t get in the way of visitors and potential clients, there are some conventions you should at least try to follow. Most conventions exist for a very good reason: they make our lives easier, so we don’t have to analyze every single action we take in our day-to-day lives.

So be sure that if you’re breaking a convention, it’s because it actually feels right for your design, and not just because you desperately want to be different. There’s no point in reinventing the wheel.

6. Not using grids or properly align elements

Behind bars
Photo by bollaeszter

Using grids is one of the best advice one can give you. The website will look more balanced and you won’t feel lost with the sight of a lot of stuff just floating around the screen and not knowing what to do with them or where to place them.

But don’t forget, the grid is also there to be broken! :)

7. Use spacing carefully

try to fit in
Photo by Adam_T4

You don’t need to go overboard with this one, but pay attention to spacing when you’re designing websites. Make sure everything has enough room to “breathe”, that the design isn’t crammed and that spacing is consistent across the layout (padding, margins, borders, etc.).

8. Write down notes

Magnus Christensson's notes
Photo by Jacob Bøtter

You don’t have to write a massive report about your designs when handing them down to someone else. Actually, if you do, you will probably be cursed at. I’m talking about small notes that you can write with pen and paper while you are designing and then put on a text file to accompany your layouts.

You can be as thorough as to giving the exact colour codes you used, or as scarce as just mentioning whether it is a fluid or a fixed layout–everything helps!

Conclusion

To sum things up, if you have little or no experience in designing for the web, the best thing you can do is take a look at how other designers do it, pay attention to websites you like using and that you think are good, and reflect on why you like them? What are the common features of a good design, what is it that you can improve in your work just by analysing others’ work and experimenting?

Did you have any problems when you stared designing for the web? What were your biggest challenges and how did you overcome them? Leave you tips in the comments!

Further reading

There are 2 comments:

  1. Thanks for the great article! It’s wonderful for beginners – I think that learning how to code is the BEST advice for print designers converting to the web.

    Once you know how to build it on screen, then you save time down the road changing those impossible, but “so cool” features of your PSD mockup.

  2. inayaili says:

    That’s true and I’m glad you pointed that out: it saves a lot of time to know what you can and cannot do.

Leave a comment: