5 Tips For Designers Who Want To Design In Code

I believe now, more than ever is the time that designers should know how to code their own designs. Here are a few tips on the designing-in-code process that may help you.

Read more articles on Code, Design, Methodology, Prototyping

I believe knowing and understanding what makes up an experience as a whole helps visual and interaction designers and developers tremendously and is quickly becoming the standard among user experience driven companies. Having broad skill sets of understanding across multiple disciplines is much more marketable and helpful to the end experience than extremely specialized in one area. I’m not trying to harp only on designers, I believe front-end developers should understand principals of graphic design and information architecture too.

The purpose of this post is to get those designers who do not know how to code a few tips into jumping into test the HTML waters. Getting more and more designers the power of understanding the freedom and constraints of code to fuel, and more so direct their creativity.

I want to teach and show skeptics the benefits of a technique. More so today with the tools we have, it is easier to learn than “back in the day” of IE6 wrangling and the only way to teach yourself about the power of CSS were sites like http://www.csszengarden.com/.

Here are a few tips on the designing in code process that may help you:

1. Sketch Early and Often

As a designer, visual, interactive or otherwise, you’re probably already doing this one. I think there is something about the tactile process of producing layouts, visual emphasis and your thoughts from pencil to paper.

When you’re planning a rapid process like designing in code, making decisions and having the groundwork laid out is extremely important. I usually go through a few revisions of my sketches in two or three levels of fidelity before jumping into code and Photoshop.

What you should be concerned about at this time is information architecture, or high level page flows, distribution and layout of content. As well as an idea of your planned interaction design.

You don’t need to get every detail nailed down now. You should probably always keep a sketch pad, a few different weights of sharpies, a pencil and a few different grey markers. I like to use thin tip and Super Sharpies and warm grey 30% and maybe 10% PrismaColor markers.

2. Rapidly Prototype & Test Interactions

Before coding up a holistic design with all of your intended design, for God’s sake, test your design decisions before getting into code. There are multiple ways to prototype and test quick and cheap. Some folks use paper and post it notes, some use Keynote or invision.

Understanding what works well and what doesn’t will save you a lot of time before even spending time in code.

3. Find A Development Framework

There are a few front-end development frameworks available today. The one’s that I’ve found to be the most valuable for designs to use, whether new coders who haven’t touched a tag in their life to the experienced design-coder, are the ones that include both the framework for a grid system as well as the CSS and JavaScript components.

Using frameworks such as Bootstrap from Twitter or Foundation by Zurb are wonderful starting points to start playing around with code. I say this because creating a layout, a specific interaction or learning how to create a gradient, border or tabs on UI elements are as easy as copy and pasting code into your favorite text editor, saving it as an .html file and opening it up in a browser.

4. Build A Library of Reusable Widgets, Layouts and Styles

Even though some of the rapid prototyping development frameworks include a lot of micro interface elements like buttons and tabs, saving the larger layouts and interactions you use could save you time down the road.

Keep the code clean and reusing specific layouts and interactions become much easier and save time down the road when similar interface elements come up.

5. Refine Aesthetics In Photoshop

Even though a lot of these code framework provide a solid foundation for visual styles, like borders, drop shadows, gradients and inner shadows that visual designers love to use. Each project is different and the visual design should communicate and reflect the experience strategy, information architecture and overall aesthetic. Jumping between Photoshop and code is a great way to control the visual aesthetic of your site’s feel, but translate it one-to-one to your prototype.