MLD

A detailed 10 step web design process.

The following article speaks not only to designers, but to project managers, studio managers and anyone invested in the creative process. I will concentrate on the process of a web design but some of these points will transcend across all design disciplines. It’s also a bit of a rant.

“Too many times, too many times…” as sung by the Mentals. It’s a song about not being able to fall sleep after a break-up, but it could have been written about a bad web production process. The lyrics: “… I’ve seen the sun come up through bloodshot eyes this week”.  Referring to late nights in the office trying to cover up the mistakes made after traveling down the wrong design path due to poor processes and bad project management perhaps? “Too many times” I’ve been the victim of a project spiraling out of control, forced to run around in circles chasing my own tail. Why? Poor processes or no processes in place which can culminate a series of unsuitable design decisions from the project’s inception to the client presentation stage, all the way through to the final conception of the project. Havoc and mayhem. Anarchy instead of order.

There’s always going to be all night sessions in-front of your screen. That’s not going to change through these processes. In-fact I like a bit of anarchy, the idea of following a process is to give your project a more deliberate direction, give those all night sessions much more substance. The project can only benefit, the quality only increase.

The step-by-step process:

Now every design challenge has a unique set of problems that need to be negotiated. That said, I believe there can be no perfect, all encompassing design methodology that suits every project. The following process is meant to be adopted loosely. The technical and conceptual methodologies can be shaped to suit most projects. A little early planning needs to be in-place. These guidelines are not rigid to the point of stifling the creative process but there to help aid the flow of creative juices.

1. First comes the idea. The idea could be a product, or associated to a product. From the idea, a project is conceived. Sometimes a project is the product i.e: a book, a movie, a funky hat. Sometimes the project is formed to sell the product i.e: An advertising campaign to sell a book or a movie or a funky hat? Sometimes a project is produced for no other reason than the client wants a website. Whatever the product or reason for the project, the following should take place.

2. Outline the nature of the project. Whether it’s a book, an advertising campaign, a funky hat or a digital device. The reasons for the production need to be discussed before the project commences. Does the client just want a digital presence? What is the purpose of this presence? Are they advertising anything? Are they generating content? What is the final product meant to achieve? Ask these questions and you’re on the way to a brief.

3. The briefs (plural). The brief is important, like you wouldn’t believe! So important in-fact, it takes up the next two points of this article. There are a few briefs to consider, some are used in some working environments, some not in others, and they are named differently by different people. The two briefs I’m going to discuss, I call the Client brief and the Creative brief. In addition to these are the Technical brief and the Idea brief. The Idea brief is a short description covering off the first two points of this article. The idea brief can be added to the Creative brief. The Technical brief deals with any technical requirements for the project. It too can become part of the Creative brief. Important point: certain parts or levels of the brief can be reserved for only those members who need see them. Just say it is a technical requirement that advertising has to feature at a strict set of dimensions. The design team reading the creative brief need to be aware of these dimensions in order to incorporate the advertising space into the design. Obvious right? However, the client doesn’t need to see that level of the brief, unless of course, questions arise about the layout. Your final Creative brief needs to be split into a client level and team level brief.

4. The initial Client brief in detail: this comes straight from the first two points. It outlines the project. The needs and the purpose of the project. This is usually the first document created and the designer usually has nothing to do with its creation. It is usually generated by the client, or, by the project manager. It’s my belief the design team should have someone at the table for this initial brief. The ideal situation would be for members of the client team with members from your team working together on the initial client brief. This way everyone is on the same page from the ‘get-go’. The world isn’t perfect and this rarely happens. I’m saying it should be the norm, not the exception.

5. The Creative brief in detail: this is generated out of discussions around the initial client brief. Its contents procured from a series of brainstorming sessions in order to look at creative ways of solving design problems and generating ideas around the first two points: the idea and the project outline. You need to reference the initial Client brief. The Creative brief should be succinct in its nature and have input from members of both the creative and technical teams. You need to cover off any client information: their business strategy, the client sector regarding the product, any competitor information and the relevant strengths and weaknesses which may be associated. The business context of the project. Project information and any technical requirements, a project overview and all key information attaining to the project including the intended audience and immediate client base. The project logistics including a list of deliverables. The expected results of the project and the project goal. It’s best if one person writes the final output just for consistency. It should be as short as possible, that’s why it’s called a ‘brief’, so, whoever writes it needs to be a good communicator. This brief should then be sent to the client and the client should be asked for feedback and any additional input. There are great online applications for this process now, a big thank you to 37 signals for Basecamp. Once the creative brief is finalized it should be signed off by the client. Very important! Then and only then should the creative process start. Done properly the approved document will ground all design decisions along the creative path and should be reintroduced at the time of client presentation to explain your decisions.

6. WAIT! One more thing has to happen before you begin designing. The content! Who is generating the content? Content, content, content! How can you design, or make design decisions without content? I hear Mental as Anything’s “Too Many Times” blaring from my inner ear stereophonic ghetto blaster. “Mock-up a homepage and a content page” How many times have I been asked to do this? Go mental! How many times have I asked: “What content goes on the page?”, to which a reply of:  “Just put some dummy copy in, we just need to show a concept” comes back. NO! This concept turns into two or three. All the time “Lorem Ipsum” works its way around the page. Then in this far from perfect world a mock-up is rushed into the development stage. No brief and no process in place. THIS IS WRONG! People, project managers, producers. Listen up! If you can’t get content, at least get a word count. This is important. I hear you say: “It’s impossible to predict the length of an article or any written piece”. Come on, journalists have been doing it for decades. Newspapers are designed around word counts as are magazine articles. It’s time content generators in the online space took some responsibility. The web presence can be dynamic, however, there needs to be some guidelines produced for the display of content. If there is an excerpt which links through to a full article, how long should it be? Is the content going to be ‘blog style’, dynamic content?’ The page design needs to reflect this nature. Should we factor in pagination? Or, will the page just extend as long as necessary? The content is the basis of the design, it is the essence of the final product, whether it be a television commercial, a comic book or a banking website. I don’t know what they expected when the content that replaced the “Lorem Ipsum” was poured in and made the page look terrible. Who gets the blame? The designer. That’s who! Why? It looks terrible. You’re in charge of how it looks. Well, that may be true, but one can only work with what they’ve got. Designer’s revolt! Keep pushing back on producers, clients and managers for content. It has always been bad project management and poor processes holding the power to destroy the look of a project.

7. With that off my chest let’s get back to the design strategy. From here on in we will concentrate on an online project. Let’s cover off what we have. You now have a signed off creative brief in front of you. You have the content or at least an idea and guidelines for the content. Next step is the planning stage. Information architecture is incredibly important. It drives the usability, the functionality and initializes the user experience. It is basically the spine in the formula holding the entire project together. Produce a site map. There are a number of methods. Post-it notes are great. Divide the content into sections then write down each section of a website onto a Post-it note. You can stick them down on some board or up on a whiteboard, move them around and scribble down some notes. Keep moving them until you get the most streamlined, simplistic form of navigation. Ask questions like: “Can this content be consolidated?”, “Can we put this on another page”, “Does this content need it’s own section?” etc… Look at the site-map from a user’s perspective. Essentially the site-map is the method a user navigates through the content. What is it that you want the user to do? What does the user want to achieve? What is the experience going to be like? What does the client want the user to do? What is the users reason for visiting this site? Create some personas and scenarios. A persona is a brief profile of a typical user. Ask your client for specific details of the main audience type or the type they hope to attract. Refer back to your creative brief. Map a customer’s path through the site-map using the persona profiles you created. You should create between 4 to 8 different persona scenarios, or more, to gain a better idea of how the site is to be ideally navigated by the widest audience possible. Now that the site-map is sketched you should produce a professional site-map using a graphic program such as Adobe Illustrator. Specialized software exists for information architecture such as Visio for Windows, or Omni Graffle for Mac. Once the site-map is produced add it to the Creative brief and send it to the client for approval. Keep the persona profiles on hand for the client presentation.

8. While you wait for approval on the sitemap you should start producing wire-frames. These can be as detailed or as loose as the project allows. They should contain the following components: (i) Navigation items. (ii) Content (sometimes the actual content), placeholders for the page headers, sub headers and imagery. (iii) Footer content. (iv) Branding space. (v) All other info or placeholders pertaining to the project and each individual page such as sidebar content, advertising, cross-promotional space or sub navigation items. Wire-frames are a big part of the information design, but are not produced as a reference for the layout design or look-and-feel. Wire-frames are simply produced as placeholder information for the page. Anyone in the team can produce the wire-frames as long as they are intimate with the content and site-map. The internal team including the designer should approve the wire frames. Once you get approval or changes from the client pertaining to the site-map you need to adjust the wire-frames accordingly. The client does not need to see wire-frames. The wire-frames are there for the design team. It is imperative the designer’s only concern is the look-and-feel from this point. The more information they have in front of them means the focus becomes the aesthetic nature and interactivity of the project. That’s what the client wants to see.

9. Design time: Now you have an approved creative brief, a comprehensive site-map, content specifics and wire-frames in-front of you. Time to start the mock-up stage. Refer back to the Creative brief to refresh the project in your mind and remind you about the mood and tone of the project. There may be reference material you should consider, or colours and layouts that you should avoid? Look for any inspiration, not only from the web, but also from books, movies and other mediums. It has been traditional to create a number of mock-up options to present to the client. Over time I have come to believe that this method is detrimental to the design team and to the client. I now believe you should concentrate on a single design. Take time refining that design. Map all changes and design decisions to the creative brief then add the final mock-ups to the Creative brief. An interactive mock-up known as a prototype should then be produced before presenting to the client. Designing in the browser and showing certain interactive qualities such as roll-over states or any animation can do wonders in getting the client on-board. This prototype should then be tested for usability and any improvements made. A static mock-up just won’t cut it these days. Give the client something they can ‘play’ with, feel, and interact with. This stage ends with the client presentation.

10. The final stage combines a few components. First, the approval phase. If the client has changes you must go back to the creative brief, and look at what is signed off, what changes are inside or outside the project scope and charge accordingly. There may be minor changes you can make as you build? Depending on the depth of the changes this will guide how many steps back in this process you have to go. If approval is successful you can go onto the development and testing phase. The final build is undertaken and browser tested as per the project and target audience guidelines. Depending on the scope of the project a style guide is produced. The lead designer and art director along with the producer should all test and approve the final build before the client views the site. If all is well the site is sent live.

Congratulations! Project complete. You should still keep an eye on the site and how it transforms over time, especially if the client has the ability to make updates through a CMS or through the server. Offer advice on any design decisions made after the build and the site is live. Remember the site is still a showcase of your work. It’s in your best interest as well as the clients to keep an eye on things. If you do show a continued interest the client is happy and you are seen as an ally. All is well in the universe thanks to some early steps and organization.