Table of Contents
There are many important parts of web design process. Today, you are going to master the third phase, the web design. You will learn about direction in web design, prototyping, creating mockups and wireframing. You will also learn the best methods and practices to follow in order to create persuasive and irresistible websites. Are you ready to master the third phase of web design process and become a better web designer?
All parts of the Web Design Process series:
Web Design Process Pt1-Discovery
Web Design Process Pt2-User Research
Web Design Process Pt3-Web Design
Web Design Process Pt4-Evaluation
Phase No.3: Web Design
This third part of this serious focused on mastering web design process is all about web design. In this phase, we are going to discuss the whole process from the ground up. This means you will start with learning about how to set the design direction, create the structure and content of the website, prototype ideas and iterate and finally design the website – create graphic version of the website (mockup) you will present to your client. You will also learn about the biggest mistakes web designers often do and you should avoid at all costs (there are 3).
The Beginning and Dangerous Temptations
After the first two phases of web design process, you have certain amount of ideas you can work with. You also have insights into the business of your client and lives of his customers (visitors of the website). Now, it’s time to get back to your drawing board and get your creative juices into motion. In this phase, your goal is to interpret the information you received in such a way that the result of your work will make sense. This means separating the chaff from the wheat, so to speak.
It also means looking for patterns in information and data you have, mixing it with your knowledge and experiences and give the result clear structure. This process consists of three steps. First step is setting a design direction. Second step is designing the structure and content of the website. Third step is prototyping. Don’t try to skip any of these steps. I know there will be web designers wanting to jump right into sketching or even prototyping. I was one of them. So, please resist the temptation and stick to the process.
Wireframes and sketches are important part of web design process, but they are not the first or the only step you have to make. At this moment, you have no idea about the structure or about the content. This applies to all pages of the website. Therefore, there is nothing you can wireframe or sketch. In a typical case, you need to create sufficient amount of content to convince the visitor to go through the whole process of the buying cycle. Here is the catch. Only few visitors will make conversion action on their first visit.
One thing that, I think, deserves attention is how people view the web design process. In most cases, when you tell someone you design websites for living, they will probably think about the last layer. They will imagine you, sitting in front of computer, creating a mockup in Photoshop or sketch. The same goes for clients. All these people see the same illusion. One good metaphor for web design can be an iceberg. A small piece of your work is visible, the rest (the majority) of your work is hidden under the sea surface. There is nothing bad about it. Just don’t fall into the “please do the mockup first” trap.
No. 1: Setting Design Direction
You first goal in this phase of web design process is to sort your thought and ideas you got in previous phases. You want to take these ideas and morph them into multi-level structure of the website that will pass the test of time. You did the user research so you now have sufficient amount of information about what users need, want and expect from the website. You also know how the websites in client’s industry looks like. I suggest that you summarize these information into a short paragraph. It will help you design the best solution and present it to your client.
Naming the Website
Many web designers I talked with found it useful to give the website they are working on a name. I can only agree. Don’t get me wrong. I’m not talking about something sentimental such as naming the website Stanley. Leave this to people designing and selling themes and templates (time for a humble pie). Naming the website means using specific category. For example, it can mean that you are designing an “e-shop”, “landing page”, “news site”, “blog” and so on. Using this method can help you set priorities better and see the big picture.
Idea Generation
The goal of generating is to never stop with the first thing you come up with. It is about the quantity rather than quality. Although, the quality of ideas is important as well. In case of smaller projects, the first idea may work. When it comes to bigger projects, there is almost always some better idea than the first one. And, unless you give this process of generating ideas time and space, you may never find this better idea. What method or tool should you use? My personal pick are mind maps. It is easy to learn and use. For now, we will briefly discuss two other methods.
Six Thinking Hats
The first method is called six thinking hats and was created by Edward de Bono. This method allows you to think about the problem in a structured way from six prespecified angles. It is usually done in group and every participant will put on specific imaginary hat. Then, he will think about the problem from the angle specified by the colour of the hat. White hat symbolizes facts. Yellow symbolizes positives. Black symbolizes judgment. Red symbolizes feelings and intuition. Green symbolizes creativity. Blue symbolizes thinking. More about this method de Bono’s website.
Design Studio
Design studio is one of the more complex methods for generating ideas in groups. Participants are divided into groups, learn about the problem they have to solve and sketch possible solution. Then, these sketches are presented to other groups and each group will get feedback on its idea. In the end, participants will their ideas and feedback from presentation and discussion to create one solution together. There is good well-written article by Will Evans called Introduction to Design Studio Methodology and it will give you a better idea about how to use this method. You can also watch video about this method by Todd Zaki Warfel.
Proposal Thesis
The goal of proposal thesis is agreeing with your client on the final form and shape of the future solution. This thesis represents philosophy of the new solution in the context of all information you got thorough the previous phases of web design process – discovery and user research. In other words, one part of this thesis will be formed on the basis of discussion with your client. Another part will be formed during from user research. The last part will be formed during brainstorming or while you will be enjoying your morning cup of tea or coffee.
Let me give you two short examples of how thesis can look like. First example: “Search feature on the website will work similarly to Google search. There will be an input field with automatic whisperer. Website will use minimalist design and results will be sorted by the category of content.” Second example: “Calendar on the website will contain events from different websites that will be imported via moderated RSS channels. Registered user will be able to customize and personalize their feed of events by specific dates and places. Users will also be able to register for these events on the website.”
Write down your thesis and present them to your client. It will help you test whether you are moving in the right direction without spending too much money before you create your first prototype. I should mention that this phase makes sense mainly in case of bigger projects. It is predominantly these projects when neither you nor your client has any idea about how the result of the web design process should look like.
No. 2: Structure and Content of the Website
In this part of web design phase, you will start to form wider context of the website into more detailed description of the solution. However, doesn’t necessarily mean creating a single piece of graphic. You can use mind maps, I previously mentioned, to put all information you have on one place. Another easy and cheap tool you can use are post-it note and wall or whiteboard. The key is to have all information in one cluster so you can see the bigger picture. You will use this cluster to create the structure of content you will later work on.
Content Strategy
Content strategy deals with planning, creating and evaluating the efficiency of the content thorough all marketing channels and the website itself. In typical web design process content strategy consists of these six steps. First, mapping current channels upon which you are creating the content. Second, if you are doing redesign, mapping the current website. If not, then skip this step. Third, establishing principles for content creation and processes for working with the content.
Fourth, planning the creation of the content and transfer of the current content. Fifth, planning the creation of additional content for individual channels. The sixth and last step is setting and evaluating Key Performance Indicators (KPI).
Using content strategy will help you control the content. It will also help you keep it consistent, up-to-date and relevant. Content strategist is something like an analyst and manager of people who create the content in one person. It is responsibility of this person to set the direction and evaluate the results. One interesting framework for content strategy you can take a look at is See-Think-Do by Avinash Kaushik. If you want to design really great websites, you have to know at least the fundamentals of content strategy. If you focus on web apps, you’ll use content strategy less often.
Design Frameworks
Design frameworks can be the first step in your web design process. These frameworks will give you set of instructions how to think about presentation of the content on the website. For example, if you want visitors to give you their email address, you have to give them clear reasons to do it. You have to tell them specific benefits they will get in exchange. This means you will start with a clear and short headline describing the biggest benefit visitors will gain. Then, you will get into more details and describe additional concrete benefits.
Next, you will add couple testimonials as a social proof to create trust. After this, you will use clear CTA. Remember to always use action words. The last piece of the puzzle is to support everything with beautiful graphic of the product. This was just a brief example of how to design a landing page. I discuss this topic in-depth in 7 Deadly Mistakes To Avoid in Landing Page Design article.
Designing Information Architecture
The design of information architecture is very extensive discipline. For this reason, I will give you couple question you can use to get started. First, is your client using the same language as the visitors of the website? What type of content do you need to present on the website? According to what criteria and priorities will you organize the content? Will visitors often move between different categories? How are people searching today? What are their searching habits?
These are just a few tips. If you are interested in information architecture, I suggest that you take a look at book by Louis Rosenfeld and Peter Morville called Information Architecture.
Task Flows and the Way of the User
The goal of this method is to map out how will people move through the website. At this point, you already have information from user research phase so you now only need to “morph” users’ motivations into concrete sequences of pages. Keep in mind couple things. First, people will have specific motivations when they visit the website. You’ve learned about these motivations in research. Second, people will come the outside on specific page. In many situations, this page will not be the homepage. Third, people will go through specific sequence of pages.
Hierarchy of these pages is not important. Important is the continuity between them in relation to objectives of the visitor. Fourth, in ideal situation, visitors will make some kind of a conversion action. Use this task flows method will help you think about the mind of the visitor in broader spectrum and structure the content. Some connections will be more intuitive, while some will require more information obtained from user research and human behavior models.
Three Mistakes in Content Strategy
The first mistake a web designer can make is to create a website and fill it with some placeholder images lorem ipsum text and let his client replace this content in the future. Unfortunately, this will never work. As you will see, the content will just never be in harmony with the structure. Why should it? The website was designed with different content! The second mistake is using text from catalogues and other materials your client is already using. Copywriting for web is discipline on its own that requires adequate education or having some web copywriter you work with.
The third and last mistake you can do is “saving” some bucks and, instead of hiring professional photographer, using some cheap stock images. This mistake can kill almost any project no matter how great potential it had. So, either use high quality authentic photos or don’t use any photos on the website and in your web design process at all.
No. 3: Prototyping
The process of prototyping consists of three parts. These parts are sketching, wireframing and creating the prototype. During the prototyping process, you will design the structure of the website and its content and its priorities on individual pages. Then, you will connect pages together. With prototype in hand, you can simulate and also test key interactions between the visitor and the website. One thing to remember is that the prototype doesn’t have to be perfect.
It is often better to think about prototype as a crash test dummy you can use to test your hypothesis. So, when one hypothesis doesn’t work as it should or doesn’t work at all, don’t throw in the towel. Instead, take the lesson you learned, adjust the prototype and iterate. This build-measure-learn loop has been tested in many areas and methods, such as lean startup. Let’s now take a brief look at each part of prototyping process.
Sketching
Sketching is one of the easiest and cheapest method you will encounter in web design process. You can do it anywhere, online or offline. It is also great to generate new ideas. All you need is to take a pen or pencil, piece of paper and start drawing. At this moment, you have clear idea about the content and its purpose. Now, your job is to give it visual form. For those of you arguing they couldn’t draw, your sketch doesn’t have to look like a chef-d’oeuvre. Don’t worry, your sketch will not be exhibited in Louvre. Just draw using simple shapes.
I suggest that you create couple small-scale sketches for every page of the website on one A4. Six to eight sketches is good range to test different ideas. Play with these variations and try different layouts. Also, if you are working in a team, engage other members as well and use sketches to generate ideas together. Remember that everyone can sketch. Remind every member that goal is not creating perfection mockup, but simple sketch to illustrate ideas.
Another approach is to use smaller format of the paper, say A6, for every idea and let A4 for storyboards. When it comes to pens, many web designers in this part of web design process are using pens with thick nib. These pens will not allow you to draw smaller details. Only when you have the concept, you can switch to pen or pencil and focus on smaller details. I also want to encourage you to show your sketches to other people in your team and asking them for feedback. This will help you polish the sketch before moving to the next part of prototyping process.
Wireframing
The goal of wireframes is to create the layout for the content of each page you can later present to your client. Good wireframe should always make clear three things. First, it should be visible what content will be on what page. Second, what visual priority will each piece of content have. Third, how will the content be laid out and what relationships will be between its parts. Also keep in mind that wireframes serve as a foundation for the mockup (graphic presentation) of the website.
This means that although graphic designer can change or adjust parts of the wireframe, the content and priorities should be already pretty much firmly established. With regard to that, you can think about wireframe as a skeleton of the website that will be later covered with leather. However, this doesn’t mean that graphic designer will use the wireframe as coloring book.
Another thing to mention in relation to wireframes is what text to use. The answer is simple. Since you know what content will be used on the website, use it in wireframes as well. There is no reason to stick with lorem ipsum. You can also use text from website of your client’s competitor or write the texts by yourself. In my web design process, I usually write texts on my own.
Prototype
The word prototype can have different meanings. In this article, I refer to prototype as wireframes wired together with links. The benefit of prototype is that can interact with it and the wireframe will react on a certain way. You can browse through the website, open popups, menus and send forms. Prototype makes it much easier to imagine how the final website will work. This fact makes prototype important part of the web design process especially for agencies and freelance web designers. Smoothly working and well-presented prototype can be the key for realization of the project. On the other hand, broken prototype can ruin everything.
In terms of prototypes, there can be different degrees of functionality and interactivity depending in its purpose. For presentation to your client, many functions of the prototype can be described only verbally. If you want to use prototype for user testing, you will need to create amount of content and functionality necessary to provide you with any results. It is also important to discuss the prototype with everyone involved in the project and comment the parts you didn’t prototyped.
It is also useful to remind everyone that prototype can provide only partial view on the solution. It still requires a bit of imagination. You should always compare the prototype with goals of your client. Next, make sure that the prototype is aligned with expectations of the visitors of the website. You’ve learned about these expectations in user research. Also, compare individual pages of the prototype with each other. Are there any repeating patterns or is every page looking like separate project? Then, give yourself a break and return to the prototype after a day or two. This distance will help you see it with fresh eyes.
Mobile First or Desktop First
During my career as a web designer, I found it beneficial to use mobile first approach while working on mobile, tablet and desktop version as well. This will save you a lot of time and work compared to situation where you will create only desktop version and leave the rest on another graphic designer or developer (if you are not doing it). Using mobile first approach and creating prototypes for every category of devices will also help you create more usable websites. Let’s be honest. In most cases, developer will just squeeze the content to fit the screen and move on.
The result? Usable on desktop and barely usable anywhere else. One of the ways to avoid this is by using the approach we discussed above and creating sketches, wireframes and prototypes for mobile, tablets and desktop. Don’t leave anything to chance.
No. 4: Design the Website
The fourth and final part of this phase of web design process is designing the website. Well, this is true only if you are web designer who doesn’t code the website. Otherwise, you web design process, and my as well, will include one more phase focused on transforming the website mockup into code and publishing it. For now, we will stick to this shorter four-phase version of the process.
The first thing to mention is that, in this phase, your ego can be your biggest enemy and you need to curb it. Otherwise, it will prevent you from thinking clearly about the design and influence your decisions. Another danger for every web designer are trends. Nice design depends on trends. It doesn’t care about the people visiting the website, project or your client. Let’s make one thing clear. Graphic design is not subjective. Graphic design has to support the project and its goals.
It is beneficial if your client understands this and supports it. However, don’t expect something more than “I like it” or “I don’t like it”. Don’t worry about this. Just remind yourself that your client is not an expert on web design. It is probably not the subject of his business. Don’t look for meaningful feedback among your clients. There are only two ways to get real feedback. First is by measuring the performance of the website and comparing it to the indicators you chose. Second is by asking another professional web designer for their feedback.
This is also why you should work on your network and create relationships with other web designers. Use the options Internet is providing you with and start building connections with other people in web design industry. Working with other professionals will also help you find mistakes you are currently doing and fix them. As a result, your speed of learning will increase significantly. Keep in mind that to become really at web design, you need to have a lot of patience. Talent alone will not make it. You must be willing to put in the hours and effort.
Also remember that in web design, separating graphic design, interaction design and content strategy is not possible. All these parts have to work together. For this reason, you need to be good at all these areas. You need to know how to create great wireframes. You need to have knowledge of graphic design. You need to be skilled in interaction design. You also must be able to work with the content of the website. In short, web design is hard discipline to master, but it’s worth it.
Underestimating Graphic Design
Graphic design is the place where rubber meets the road. If your client doesn’t like the design, you can forget about any future work. High quality design also works as a support for brand, building trust and user’s fault tolerance. Attractiveness of the website is also important for its performance in the terms of business and generating profits. So, don’t trust anyone who claims that graphic design is not important. That person is simply incapable to deliver appropriate output.
To make this whole thing more complicated, there is also other side of the coin. Sometimes, clients are focused only on the graphic design of the website mostly the homepage. Which side is easier to deal with, I don’t know. Although graphic design is important, without interaction design and content strategy your project will end before its realization. It is like a tripod chair without two legs. To use my favorite Pareto Principle, graphic design is 20 percent while interaction design and content strategy are the remaining 80.
Many Faces of Website Design
Website design can be perceived from many angles. You can like it or you can dislike it. It can be built on current trends or not. It can be built on the principles of graphic design and typography or not. It can support the brand of your client and its position on the market. It conveys specific message we want the visitor to take. It works in regard to conversion actions. Every person involved in the project will use different angle.
For example, layman will either like the design or not. Technical supervision will view the design from the point of design principles and client’s brand. And, the only way to test the message and conversions is to monitor and evaluate the behavior of the visitors or test the website.
Website Design and the Context
Every web design project takes place in specific in one of two contexts. The first context is that client have a logotype, graphic manual. He can also have other branding materials such as billboards, business cards, catalogues, illustrations, photos, brand colors and so on. All these materials will be deeply connected to the website. This is most common example. In this context, it is the best to work together with client’s graphic designer and create the website as a part of the whole brand experience. If your client has other websites, you can base your work on them to ensure alignment. However, that doesn’t mean you should skip or shorten your web design process and copy these websites!
The second context is a little bit more extreme. Your client has nothing and you are starting on a green field. In this situation, you have basically two options. First, you can find graphic designer who will create all brand-related assets and materials based on client’s visual style. Then, you will continue while cooperating with the designer. The second option is to do it all by yourself. This is something I would recommend only to professional web designers with sufficient amount of knowledge and expertise in graphic design. Unless you know how to design great logotypes, print materials and also great websites, stick to the option number one.
Closing Thoughts on Having a Web Design Process and Web Design
The takeaway from this phase of web design process is following. Start with the purpose of the website and gradually move to smaller details. Use sketching to think about the structure and content of the website. If you are working in a team, make sure everyone is engaged. The more people will be involved, the more ideas you will create. Remember that graphic design is inseparable part of web design. If you are great at graphic design, do by yourself. If not, find great graphic designer you will work with.
In order to make the web design phase easier and smoother, you can use frameworks such as mentioned See-Think-Do framework created by Avinash Kaushik or any other design framework. Also, don’t forget to use Maslow’s pyramid for web design. We’ll discuss in this topic web design process series as well. Next, use brainstorming to generate ideas and never get attached to the first one. Mind maps are also great tools that will help you think about the bigger picture. Also, keep in mind that web design is hard. So, be patient.
The next, fourth, part of web design process series will be about evaluation.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
