close

Shelley Bassett

Menu

Close

Beginning Web Design - Build-Along Tutorial Series

Unpacking a Brief | Beginning Web Design


April 25, 2018

Starting a new web design project can be daunting. But it get's a little easier when you know the steps. This week we're starting from the beginning, and learning about unpacking a brief

This tutorial is part of a larger series. You can find the other posts here.

Any design project is really about solving a problem. It might be huge like world hunger, or small like telling a short story. No matter the size or scale of the task, the first step is to understand the task itself. While unpacking a brief might sound difficult or unnecessary, it’s the most important step. Reading and understanding the brief is key to creating the best solution. It can be challenging to understand exactly what a client is asking for, but taking the time here will result in a far better end product.

For this Beginning Web Design series, we’re going to be looking at a fictional brief from a fictional client. We’ll unpack the problem, design a solution, then build our design. Some steps will take longer than others, but at the end, we should have a fully functional website! The fictional brief we’re using for this website is from a man who wants to showcase the town he lives in. You can follow along with this exactly, or substitute your own home-town instead.

I want to show Melbourne to the world. It needs to look good on a smartphone, so I was thinking it should be an app. I’d like lots of images, because the town is so pretty, but it should also have information on the location of each image. Also, could you include a map?

What is a brief?

A brief is simply the request of the client. Some, like the one above, are straightforward and easy to understand. Others might take some work to determine what the client really wants. Creating a proposal is a balancing act between listening to the clients request, and steering them towards a viable solution. While unpacking a brief, be considerate of what the client wants versus what they actually say. It’s better to have a satisfied client than a portfolio piece. That being said, it’s fine to try and gently steer the client in a direction that makes sense for the brief.

Unpacking a brief

Where to start? The beginning is always the best place. Our client wants to show Melbourne to the world. That’s an easy enough request, and clearly the problem we should be focusing on. There is already lots of information on Melbourne (and likely every other city), so we’re going to have our work cut out for us to design something special that really shines a light on the city. The only thing they don’t specify is which parts of the city they want in this project. We should request a list of locations they love.

This client then goes on to talk about an app. Hold up this might not be the best idea. Sure, more than half of all internet traffic is mobile now (this number is actually closer to 85%), but convincing people to download an app for something so specific is going to be hard. And how will they find it? If they’re performing a web search, it would be better to serve the information as a site, rather than a link to an app. This is a prime example of a client having a vision that won’t meet their expectations.

The next part of this clients request is images. This might seem like a simple request, and makes sense within the project, but we should double check who is providing the images. If the client has some, great! But make sure they’re both royalty free (or taken by the client) and at a suitable size and scale for the project. Asking these questions now can save a lot of hassle later. If the client doesn’t have images, or requests that we source them, be sure to work that into the budget, both in terms of time and finance.

The final request is for a map. This makes sense for the project and should be easy to include. Done!

Querying the client

Once we’ve completed an initial evaluation, we need to return to the client with our questions. If you’re not sure what questions you should be asking, The Futur have a great video on it here. For this brief, we should check the following:

  1. Do you have a list of locations in Melbourne you want to feature?
  2. Are you sure this needs to be an app? Could a responsive website work better?
  3. Do you have images for this project or will they need to be sourced?
  4. Did you have a specific style in mind for the finished project?

We’ve already spoken about the first three questions. The answers are going to be key in creating a solution for this client. The fourth question is to help us create some direction. The client didn’t mention a style, but that doesn’t mean they don’t have one in mind. Part of unpacking a brief is determining what the client wants as much as what they need. Here’s their response to our questions.

I love the old theatres around the city. They’re really beautiful at night and have some amazing shows. Sorry, but I haven’t got any images of these places. Can you find some? I don’t know what a responsive website is. I just wanted to be able to show people Melbourne from my phone. As for style, I’m not really sure. Could you give me some options?

This is better. They’ve come back with some great information for us to use. We now know to feature Melbourne theatres, but we’re going to have to find or create the images. And it’s really obvious they don’t actually want an app, they just didn’t know how to ask for a mobile website. The one question we need to focus on is giving them style options. When we present a proposal to this client, we should have several styles to show them. And as they mentioned the theatres looking good at night, that should be the focus of at least one.

Creating a solution

Now we’ve unpacked a brief, queried the client, and have a solid understanding of the task at hand, we can begin some actual design work. But before we dive in to building a dense website, there are many more steps we should take. You can follow each step in this tutorial series here.

 

Leave a comment

Advertisement

Leave a Message | No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *