I recently had a bit of a rant on Twitter about receiving website mockups from print designers. I don’t have anything against print designers making websites, I think it’s great they are branching out, but it’s worth doing research before diving into the world of the web.
With that in mind, as a front-end developer, I have taken the time to put together a list of common design mistakes I get when receiving PSD’s.
1. Over use Lorem Ipsum
To get the most from a website you need to design around the content, and not to slot content into your design. This way you can emphasise certain areas of text that your client has sent through and see where the hierarchy of content lies. Going full steam ahead and whacking loads of Lorem Ipsum into your designs before you even know what your clients website needs to say isn’t going to do it any favours!
Personally I don’t get cracking on a design until I have received content. By this I don’t mean every single blog post, or every single product as these will follow the same templates anyway, but the key areas such as the Home Page and About section as these will give you the inspiration to do something exciting with that content, such as emphasising a certain bit of text. Receiving the content from a client is extremely telling and will give you all the information you need to guide you in what their website is about and the tone of voice they are going for.
Whether you wait for the content before beginning, or wait weeks or months for it whilst your beautiful Lorem Ipsum design lays waiting to be replaced with content, you will still be waiting, so you may as well get the content first. It keeps the client focused on what they want the website to say, and not what it should look like.
2. Tiny fonts
I always have the opposite problem – when attempting to design my own business cards I always make my fonts too large. Why? Because I’m not a print designer – I’m not an expert on what font sizes should be used on print mediums. When I receive PSD’s from print designers they always seem to come in 9px-12px font sizes, which makes me squint at the screen. It’s bad for usability and accessibility, so don’t be afraid of larger fonts!
3. Keep it consistent
The great thing about print is you have the freedom to use a multitude of layouts on every page of your brochure or booklet if you so wish, but this doesn’t sit too well on most websites. I’m not suggesting every page should follow the exact same layout, as that will most likely lead to a boring template based site. I’ve often received PSD’s whereby there is a different font style on every page for headers and links.
Decide on your font colours, sizes, links, h1’s, h2’s, etc and try stick to the same on every page. If you’re going to use lowercase for headers, make sure you use them on ALL headers. If you’re going to use a dark red for the links on a white background, make sure they are on every page with a white background, it will help guide your users to clicking in the right places.
A great idea is to spend a little time and produce a style guide for your developer – there’s a great tutorial on creating one here: http://www.sitepoint.com/develop-style-guide-site/
4. Know the limitations of the web
I’ve had all sorts of crazy requests from designers because they don’t understand how HTML, CSS, jQuery, etc work. I’m not saying go out there and learn the whole lot, but a basic understanding of what’s possible and what technologies would suit the design best will really enhance your design and make sure you’re not expecting the impossible and disappointing clients who have already signed off your designs.
5. Grid systems
This follows on from point 3 – make sure things line up, it’s much more aesthetically pleasing to the eye and makes your content flow nicely. Establishing a good ‘vertical rhythm’ as they say is very important for readability and aesthetics. This website is an amazing resource for learning about grid systems and producing them if you’re unsure about them http://960.gs/
6. Get a developer involved!
I’m always amazed at how many designers miss out this step. They are the ones who understand best how a website works and what is possible. If you get them involved in the early stages (wireframing and early mockups) then they will be able to advise you on what works and what doesn’t – ultimately keeping the cost low for your client and avoiding big changes in the future.
