A Process of Website Design

What is the best and most logical process for developing a website? Content first, Wireframe, Information Architecture, Site Map, Mobile first, Rapid prototyping… these are just a handful of terms that get thrown around the office on any given day. Everyone has an opinion on where to start and, like many other design disciplines, we aren’t always starting from scratch. Sometimes we are asked to design a new website around an old logo, or to design web pages without images or copy. A web designer’s worst nightmare is to begin a project without ANY content in order to meet a deadline. “Can’t you just design it first and I’ll write the copy for the boxes later?” Because we can’t always DEMAND that a client deliver content before the project commences, we’ve adapted a very fluid process when working on websites at Convoy, and by necessity our process changes with each project we take on. As a designer this can be frustrating—feeling one’s way through what is already a subjective process—on the other hand, it requires us to ask lots of questions upfront to better understand the needs of our clients. We work with what we’ve got, anticipate what is coming, and are flexible enough to respond when the content and/or deliverables change.

In addition to a fluid design and build process, we also need to be aware of constant changes in technology. As mobile devices advance to become the most common web viewing platform, we’ve had to abandon the traditional ‘monitor’ design process and adapt a more “multi-device” or Responsive Design strategy. Most of our clients come to us for websites, but they aren’t always ready to accept that the mobile experience is just as important. A scaling mobile site isn’t acceptable anymore; usability across devices is paramount!

In a nutshell, here is a breakdown of our ideal website design process. While we can’t always follow a straight path from start to finish, this helps us—and hopefully our clients—set a smooth course for the project.

1. Discover

The first step is the most critical. Here, we meet with the client to understand their goals. We define exactly what is being asked of us and what we intend to deliver. We assess the effectiveness of their current brand and marketing efforts. Once a contract has been established and signed, we assign a project manager to start collecting content, logos, fonts, photography, etc.

At a glance

  • Project Goals and Requirements
  • Site map [a list of pages that need to be on the site]
  • Contract agreement
  • Collect content and brand assets

2. Design

With the site map and content in hand, we establish the structure of the site. We sort out the best use of space and create a layout for each page; we consider the user and what they need to access; ultimately we create wireframes (a visual framework of the site) for desktop, tablet and mobile devices—this ensures we’ve considered all relevant content for various devices. Once the client approves the layout, the designer uses Photoshop to create page designs which are also approved by the client. Concurrently, a developer may begin working on a “dev site” prototype so that we can start adding the client’s content. This helps us to see how the content looks on a working site so we can make adjustments and see what additional elements or pages we need to design.

At a glance

  • Information Architecture
  • Wireframes
  • User Interface Design
  • Design Mockups
  • Working Prototype

3. Develop

Once the client has signed off on the website design, the developers go to work, transforming the Photoshop design (PSD) into the working HTML and CSS that comprises the backend of a website. The HTML and CSS are then moved into a Content Management System like WordPress where the site becomes a usable tool that a client can update themselves. The final steps before launching the site are browser testing and client training. Our clients leave knowing how to maintain and update their websites.

At a glance

  • HTML/CSS
  • Integrate into Framework
  • Content Entry
  • Testing
  • Training
  • Launch