We prefer skipping static image-based mockups in favor of designing with code. This is not a new idea. But new or not, this process can be confusing for some clients.

Let’s take a look at our new mockup-less web design process.

Before we begin designing, we work with our clients to clearly define and prioritize the information that will go on the site. What do you hope to accomplish as an organization, and what is your audience looking for? The answers to questions like these will help us define the functionality and information hierarchy of the site.

Once we understand the purpose of the website as a whole, we’ll apply that goal to something finite, like the homepage. Before we pick up a pencil to start sketching ideas, we start with a basic list:

  1. Branding: The primary emotionally communicative element of the design. It does not convey detailed information so much as give users an impression about what you represent and help user identify with the organization.
  2. Featured content: Selected by site administrators, this area will include highlighted items from across the website such as events, pages, etc.
  3. Site navigation: This allows users to find the content they’re looking for.
  4. Push Communication and User Feedback: Feeds of recent items from sources such as the blog, Twitter, or newsletters, with links to the source articles where applicable.
  5. Footer content: Includes links for some site navigation, legal pages, corporate sponsors, and social networking pages, as well as location and copyright information.

Without committing to any visual decisions, we have created an accurate top-level plan for the site’s homepage. We now know that—no matter what the homepage looks like—if it can correctly present this information, it will be a victory for the organization and the site’s users.

Think about mobile first

Once we understand the site’s content and priorities, we start building our content using a mobile-first approach.

By focusing on mobile first, we can have these discussions with clients earlier and more effectively. Once our mobile hierarchy is clear, it’s time to progressively widen the browser and consider more complex layout decisions.

Can't avoid Photoshop forever, and why would we want to.

It’s right around this time that we’ll take a brief diversion from our HTML to define some sensible style elements (similar to Samantha Warren’s style tiles or Sparkbox’s style prototypes). This is usually a small Photoshop canvas where we bring in the typography we’ve been working with in the wireframes and start experimenting with color, texture, and imagery. Once defined, we can use these basic visual building blocks to nudge our wireframes toward website-ness.

As we layer in more visual elements, we tend to bounce back and forth between our text editors and Photoshop. But Photoshop is no longer the primary design canvas; it’s now more of a sketchpad. 

Kill the mockups.

Sending clients something to review, we just e-mail them a link. Clients can look at the designs in various browsers and on various devices, resize them, click links and navigation, and generally review how everything works. Instead of asking our clients to pretend that an image is a website, we show them a website.

When we’re done with revisions, clients get the same signoff form as usual. But in place of a file name, the final designs are specified by that version’s permanent URL.

So that’s it. This is how we skip the static mockups and build sites rapidly.

Creative Reboot is small design group that specializes in bridging the gap between creativity and technology.