Five Tips for Codeable Web Design
If you’re a print designer and find yourself suddenly designing for the web, or you’re a new web designer (or even an experienced web designer) who just has a few gaps in your knowledge, this post is for you.
Whether you’re outsourcing your code or doing it yourself, there are a few things you can do from the get-go that will save you lots of time and/or money.
For this post, I’m listing them with a short, high-level explanation; in future weeks, I’ll elaborate on each of them and link this post to the more detailed information.
In priority order, I present to you: five things you can do to make your designs easier to code.
- Use web fonts. Yes, I know you love that Hoefler & Frere-Jones font. Everyone loves H&FJ fonts. But when it’s time to use them on the web, good luck. You can’t do it in a way that’s both simple and legal. So save yourself some angst later and stick with fonts from TypeKit, Google Fonts, or Font Squirrel (among others).
- Use seamless or solid backgrounds. One of the big differences between print and web design is the canvas; thanks to huge screens and dynamic content, you need to plan your design to look good even if the canvas is three times wider than you expected. Seamless or solid backgrounds are the easiest way to do it, in most cases, but the important part is to have a plan, any plan.
- Limit fancy filters. Photoshop gives you all these neat tools and you can hardly be blamed for wanting to dive into them. But if your background has a pattern, applying filters to layered objects on top of it is going to be very difficult, if not impossible, to replicate online. (There are a few exceptions, but if you’re not sure you’re dealing with one of them, limit yourself to transparency adjustments only.)
- Show everything. It’s easy to identify the sites where content elements were not planned: they’re the ones where some elements look like afterthoughts! The more you intentionally style, the better the overall design will be. I’ll publish a more detailed list (and maybe a resource to help) but start with things like headings, links, paragraphs, lists, and comments.
- Plan for dynamic content. Yes, it’d be lovely if all content was magically the right length for the bottom of two columns to line up perfectly… but that doesn’t usually happen. And inevitably, someone wants to add another item to the menu. How will your design hold up with real-world content? Some of this will depend on the quality of the coding, but you can help a lot by thinking about it as you design.