Designing and Developing Faster: The Do’s and Don’ts

by Matt Montaruli on July 10, 2010

Rapid Design and Developing: The Do's and Don'ts

Your client needs you to put together a website, and fast. While you normally like to take time and perfect your work, your deadline is looming and you need to complete this project now.

We’ve all found ourselves in the scenario. Luckily, techniques for rapid prototyping, designing and developing are on the rise.

26TwelveStudio.com marks the first site we rapidly prototyped, developed and launched. We took the “Ready, Fire, Aim” approach to development rather than the traditional “Ready, Aim, Fire” approach.

We did this mainly because we wanted to get our work out there as quickly as possible. We knew we could identify bugs more quickly once in production, rather than on our development servers. The results? Quite bumpy–and we aren’t finished fixing all the bugs yet.

We learned plenty from the process and we have compiled a list of Do’s and Don’ts when rapidly prototyping and developing.

DO’s

DO take time in putting together a mental picture of your design

A clear vision of a design will make it easier for you to lay everything out just right on the page.

DO expect HTML files to look different than PSD files

Photoshop renders fonts and colors slightly different than the browser will, so don’t bank on an exact font-weight or color.

DO give up some control

You probably don’t need that element to have a top margin of exactly 163 pixels. While you may think an extra 3 or 4 pixels make a difference, often it doesn’t. Be picky later and move on for now.

DO use % or EMs rather than PX

Similar to the above, you don’t need that much control for an exact width or margin. EMs or % will allow for more flexibility when viewing in various browsers or screen resolutions.

DO understand a new technique or technology before relying on it

Embarrassingly, we misunderstood the browser support for some of the technology we used on 26TwelveStudio.com. This caused a lot of extra work that could have been avoided if we were certain on browser support ahead of time. Thus, it is worth taking the time to read up on and understand a technique before relying on it.

DON’TS

DON’T spend too much time upfront on the little things

While we hate using extra, unnecessary DIVs, you should worry about eliminating the extraneous tags later. Your design will look the same with or without them. For now, worry about just getting your design to look right and get it out there. Worry about optimizing later.

DON’T think your project is finished after launch

Regardless of how perfect your site looks on your development server, it WILL look different on other displays and browsers. Always test and verify after launch.

DON’T stop learning

Trends and technologies change every day. Always stay on top of what’s new in design and development; otherwise you’ll find yourself still using tables for design layouts.

DON’T avoid the difficult parts

Just because you may not have a firm grasp on a technique or technology, doesn’t mean you should avoid working with it. Even if this is for an important project, force yourself to struggle with the difficult parts you don’t understand–you’ll learn a tremendous amount in the end.

Have any more do’s and don’ts on rapid prototyping or designing and developing in general? Comment below!