Design Phase

Capturing your requirements and vision

DesignTools graphic

Project Brief

During an initial consultation, one of the first tasks is the project brief. This document describes the scope of the project including information about the goals, requirements, and more. It serves as an informal agreement about the desired high-level outcomes of the project. It also provides all parties with a centralized location for the project’s detailed requirements.

It’s critical to spend enought time on this step so that the project’s direction is well-defined. The project brief will influence many aspects of the work including visual design, the complexity of the software solution, and the amount of time required.

ProjectQuestionnaire image

Sample Questionnaire for Project Brief

The full version goes into much greater depth.

Mood Board

A mood board is basically a collection of images that provides inspiration for design elements, style, and user-interface features. It can include work from competitors, but may also includes pieces from other artistic sources such as movies, books, and websites. Gathering inspiration from a mood board is also useful fo gauging how well the new design aligns with traditional user expectations for sites of a particular genre.

Mood boards can be very useful. If a client is willing to make one, it basically says to the developer “make something similar to this!” If the developer makes one, it basically says to the client “how about something like this?”

MoodBoard

Mood Board

Collect inspirational images and make comments. Above are some examples from my past work.

Diagrams

A ‘use case diagram’ describes the various users of a site and the sequence of actions they can perform. It’s a great way to summarize the functionality that a website provides. As the design progresses, additional types of unified modeling language (UML) diagrams can be made such as sequence diagrams and class diagrams. Relevant diagrams are included in the site’s final deliverables.

UseCaseDiagram

Use Case Diagram

A simple example for an eCommerce website.

Mockup

Once the project requirements are decided, the creative design process begins. A mockup is a visual depiction of the user-interface for a website. Mockups start off very rough. Also called ‘wireframes’, these documents simply capture the basic layout. Over several iterations, additional visual features are added including a color theme, images, illustrations, and typography. A finished mockup is really valuable for two reasons. First, it gives the client an opportunity to visualize the project direction and give feedback. Second, it allows the developer to organize the site-wide styles into a ‘design palette’.

The wireframing mockups are also very valuable. They initiate the design with only a small time investment. That makes it easier to explore different design options and modes of user interaction for the site. See the adjacent examples.

Wireframing example

Wireframing

Here’s a very rough mockup for the website of a conference calling software. This takes less than an hour to create.

Mockup example

Finished Mock-up

The final mockup for the website of a conference calling software from my past work. This can take a couple days to create.

Development Phase

Capturing your requirements and vision

The initial design phase provided the project’s roadmap, but to begin the implementation, we start the software development loop shown in the adjacent figure. In each cycle, both the website’s design and code is improved. Then the software tests are used to make sure that the new changes do not harm the work from the previous cycle. Finally, the client has the opportunity to provide feedback or just monitor the progress as the cycles roll by.

Here’s the key point. Rather than building the entire website at once, this method moves the website through a series of intermediate stages. It’s an iterative approach that provides much needed flexibility. Flexibility is needed because after each cycle, the client and the developer gain greater insight into how the site should work. This insight leads to small changes to the original plan, but with the Agile software development loop, these changes can be accommodated efficiently.

Agile development cycle

Agile Software Lifecycle

This development loop is at the heart of the Agile method.

Production Phase

Final steps for a live website

At this point, the website is feature-rich and running in the development and staging environments. However, making the site ready for the public requires some finishing touches. This is also the stage when the final deliverables will be made available and the project is completed.

FinalDeliverables

Let’s Get Started