[web design] Five tips for designers

For about a year now I have been building websites professionally - that is when I'm not doing my halftime job in Vooruit and when I'm actually getting work in.

In eighty percent of the cases my role was slicer or developer, meaning that I was given the designs by external 'design companies' and that I converted them to html and 'injected' this in the CMS (Silverstripe).

To be honest I am quite surprised in what I have experienced this past year, I always thought these things only happened in the books I read, but not in real life.

Hence this, five simple tips for designers or design companies, whether they're beginning or have existed for ten years. If you don't follow these simple rules it is really time to shape up or get another job.

Deliver in a real format

In many cases designs are given to me in PDF. While PDF is a great format for documents or to get a first impression of a design, it doesn't really get me far in terms of slicing.

A few issues I experienced in the past year:

• Color problems: when imported in Adobe Photoshop the color doesn't always seem to be the same as the designer expects.
• Pixel dimensions: when imported in Adobe Photoshop I usually have to guess at what resolution the original PDF was created. Without an explaining document I cannot guess if the layout is 800, 960, 1000 or whatever size wide. Setting the PDF at 100% usually doesn't correspond with the sizes the designer had in mind either.
• Images: please provide high quality images, gradients etc. We don't want to use the poor stuff from the PDF to start on.

As you can see, these are just a few problems which can cause a lot of frustration to begin with.

Preferred document format is a layered PSD, where your design is clearly positioned in a wide background, so we can see if it should be centered,  right or left aligned, if the background should flow along with the page width, if some margins need to scale, ...

If you use Illustrator, then you can easily export to PSD. If you really can't provide PSD's, please provide 100% PNG's along with your PDF's and possibly a document explaining every catch there may be.

Show some link love

The internet is all about linking to each other, still in a lot of the received designs links were almost completely ignored. Sometimes there wasn't a visual difference at all, not even mentioning the complete neglection of the hover state.

To be good a designer you should provide at least two different designs for a link: the normal state and the hover state. A great designer won't forget the visited state either. Links should clearly stand out from the content so visitors notice them at a glance.

A great article about the usability of links can be found on Wolf's Little Store. (Dutch alert!)

Design with headings

A good html document uses heading tags, going from h1 to h6. In most cases you won't need h4 to h6, but this doesn't mean h1 to h3 can be ignored.

Provide designs with clear headings. Headings should look different from normal body copy. Most of the time you'll want a h2 to look bigger or at least different from a h3 as well.

Roger Johanssen wrote an article about headings and heading hierarchy with some great discussions.

Design for the largest content

In a few occassions I got designs where content was sparse and limited to fit in a certain amount of space. This works well when you're a designer and choose your own amount of words or image sizes. Problems arise as soon as the client starts filling content and it won't fit the box. Make sure you get this cleared out from the beginning. Make a design that scales or make sure that the client understands very well the allowed number of words is limited in certain areas. 

Also, do not fear the scrollbar. Pages are meant to scroll, not everyone has the same screen resolution, nor does everyone surf the web with maximized windows. This does not mean we want to see scrollbars anywhere else. We do not.

Avoid splash pages

Real designers will probably wonder why the hell I'm adding this tip, but unfortunately I'm still seeing too many splash pages.

Please avoid these were possible, they're annoying and almost everybody will use the skip animation button if there is one. If it's a javascript splash page I will set a cookie anyway so a visitor will only be bothered the first time he visits the site.

Conclusion

By no means I pretend to be a perfect designer, slicer or developer, but just a few looks around and reading a few books made me understand that these are really just simple steps a designer can take to improve his or her work.

I try to open my eyes and I expect from everybody else the same.

Yes, I know these are very basic things. But apparently it is still necessary to mention them.

PS: yes I know this site currently doesn't validate even though that doesn't mean shit and yes I know it's using @import and has tons of possible improvements which I haven't come to yet.