Table of Contents
Imagine having a golden touch. Imagine that every website you will create will be excellent. Professional web design process is the key for obtaining this skill. This is not a fairy tale. In a fact, polished process is the secret distinguishing professional web designers from the rest. This process was hidden out of your sight. Until now. Today, in this article, you will be finally able to see under the proverbial hood of professional web design. Are you ready to take this chance, uncover one of the secrets of the best web designers and use it to level up your work and career?
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
Benefits of Having a Process
We are going to explore all the parts of web design process in-depth, but we should first discuss its benefits. My intention is now to use these benefits to answer some of the arguments people may bring against having a specific web design process. Here is the thing, many people would be willing to bet their soul on the idea that “rigid” process and creative fields are mutually exclusive. On the lines below, you will discover the truth.
Limits and Creativity
The first and, I guess, the biggest argument against having any type of process is that it will damage your creativity. Many people, who are not in any creative field or are just starting, believe that creativity is about having abundance of options, resources and tools. Or, this is at least what I used to believe. I took over these assumptions from people I was surrounded with, although neither of these people were actually working in anything even close to creative field. Books about also did little to help. Well, maybe the problem was that I was reading largely biographies and tech books.
The change happened only after I started to read books specifically about web design, design and creativity in general. This was when I discovered that the majority of creative people are using constraints deliberately. What’s more, they even consider constraints and limitations as almost indispensable piece of the creativity puzzle. Let me give you couple examples of people who use constraints for driving their creativity. The first one will probably be Austin Kleon.
Austin even wrote about this subject in his book Steal Like An Artist. It is chapter ten called “Creativity is subtraction”. I recommend that you read this book, or at least that one chapter. Austin is also known for his newspaper blackouts and newspaper popouts. Another artist is Damien Correll. In one interview, Damien said that constraints make the process a little more enjoyable and the final output is usually something he is more proud of.
Examples from the business side can be Jason Fried from 37signals who also wrote a book about how limits can help you build better products and businesses. Let’s also don’t forget Jeff Bezos and his “two pizza teams” rule which states that if a team can’t be fed with two pizzas, it’s too big. If you still don’t want to believe it, find someone in your surroundings working in creative industry and ask them. The answer you will get will probably be the same – constraints are your friend.
Creativity and Overload
There is also another reason for putting some constraints on your work. It is called information overload. We discussed this topic briefly in The beauty of constraints article. The main thought is that the more information you have, the worse your ability to make decisions is. It can go even so far that can’t make any decision at all. Imagine a shelf of twenty types of green teas. Which one would you buy if you have not tried any yet? Chances are that you will spend next seven minutes choosing the tea you will buy. And, even when you make your decision, you will still question it.
Now, let’s change the setting. Imagine there is a shelf with just two or three types of tea. How long would it took you to decide which one to buy? In this scenario, you will probably need less than two minutes to make decisions. Or, you can buy all two or three. The same idea can be applied to the tools you use in your work. It is high likely that you have one or two favorite programs or apps you use on a daily basis. For web designer and graphic designers, these tools will be Sketch, Photoshop, Illustrator or InDesign, or some combination. Then, you have your favorite text editor.
For many of us, these tools are part of our web design process (or just design). Do you consider these tools as limitation of your work? Probably not, rather the opposite. Since these tools are part of your web design process, you know them very well. As a result, what would someone take couple hours, you can get done in hour or less thanks to your expertise. Also, by limiting the number of tools you use you can also increase the speed of your work. No longer you have to decide what app to use. You automatically use this or that and get to work.
Now, couple people may ask on what is the best tool they should use. As I mentioned in Design tips for beginners article, it is not about the best tool, but the right tool. Instead of chasing every new app, I recommend that you try couple apps recommended by people from your industry and listen to your instincts. It is not important what someone think is the best tool. That’s not what you should focus on. Instead, you should focus on finding the tool that will be comfortable for you. So, if you don’t like Photoshop or Sketch, don’t use it! You can use Gimp, InkScape or anything else.
Greater Clarity
Next huge benefit of having a web design process in place is getting greater clarity. Fortunately, this applies to both sides of the table – the web designer as well as his client. In case of web designer, this process will help him get the grasp of the whole project and how the workflow should look like. It can also help him predict what additional assets and resources will he need. Let’s now switch to the perspective of the client. Outlining the whole web design process will give the client clearer idea about how will the web designer proceed in the project.
By explaining the process behind creating the website, web designer will also help his client to look “under the hood”. This removes all the industry jargon and buzzwords and artificially created veil of secrecy sometimes surrounding the discipline of web design. With explaining your web design process, there may be one pleasant consequence. Your client can actually be more willing to pay you the price you ask for without trying to negotiate. The reason is that he now has now a better picture about the amount of work it requires to create great website.
More Accurate Estimates
Another reason to working on your web design process is that you will get significantly better at create more accurate time estimates. Let me tell you that estimates were the hardest part of my work. Call it a Murphy’s law, but my estimated time was almost always smaller than reality. It happened quite often to me that I had to work my butt off to meet the deadlines. This is also the reason I started using “rule of ten”. You can learn more about his rule in 7 Soft Skills Every Freelance Web Designer Must Have Pt2-Timeliness.
Does this mean my estimates are now bulletproof? Well, I would not bet my life on them, but they are much better than they used to be. Now, I’m talking just about my “rule of ten” (seriously, this rule may save your life). What I’m talking about is that having polished web design process in place will help you see individual components the website is composed of. And, the more will you work with your process, the more detailed your insights will be. What does it mean? You will be able to see the smallest pieces of the puzzle without doing any research or creating your first wireframe.
Does that mean that having a web design process will allow you to skip research and wireframing? No. As you will learn soon, both, research and wireframing, are essential components of the process. However, learning and using this process, we will discuss in a moment, will make both of these activities easier and faster. This is one of the purposes of this process – helping you work faster and deliver better results. It is a win-win situation. You will spend less time working and your client will get the results faster and in much higher quality.
Professional Results Guaranteed
The last thing about quality is guaranteed. If you are using professional web design process to design and build websites, it is impossible to deliver bad results. Well, there is one exception. The only way this may happen is when you consciously do a lousy job. You have to deliberately do a bad job. Otherwise, it is not possible to follow this process and deliver low-quality results. You will always end up with, at least, very good website that will resonate with your client and users. Is this statement too bold?
Okay, let’s say you just finished one of the top driving schools. From now on, you have all the knowledge and best practices you can get on how to drive a car. Is there still a chance of an accident? Yes. However, this accident will be mostly caused by one of the factors. The first factor is your car. Something may go wrong and your car can become uncontrollable. For example, its breaks can fail. The second factor is you. You may stop paying attention for couple seconds or you may be tired … Or do something completely stupid.
Whatever the case may be, it is either your fault or your car. It is not fault of the knowledge and set of best practices that you’ve learned in the driving school. You can apply the same principle to this web design process. Sure, there are many “moving” pieces that are necessary and has to work flawlessly. And, that’s why we have this process – to create such an environment where all these pieces will work flawlessly. Okay, it’s time to raise the curtain.
Web Design Process Step-by-Step
The web design process we are going to discuss consists of four main phases. In addition to these four phases, you will also learn about two more components to make your web design process truly bulletproof. These two components are how to present the web design to your client and how to apply Maslow’s hierarchy of needs to the discipline of web design. In other words, how to increase the chance of presenting your results in the best light and how to improve usability and “likeability” of your web designs.
Note: The last thing I will mention is that we will not be dealing with specific tools, at least not primarily. This is not purpose of this article for couple reasons. Firstly, everyone has his own tools he is comfortable working with. Secondly, restricting this web design process to specific tools would make it unusable for many people. Instead, my goal is to give you a tool (well, process) that can be used regardless of the setting, tools, gender, expertise or skills. So, whether you are a beginner, intermediate or veteran web designer, you may still find some gems to implement in your work.
Phase No.1: Discovery
The first step of professional web design process is to ask the right questions the right people. By doing so, you will get better idea of the scope of the project and your client’s needs. What I recommend that you do first and foremost is to think about the role of the website in client’s business strategy. The best way to obtain information about your client’s strategy is through asking the CEO or top tier of management. Then, you can work your way to lower layers of hierarchy.
One of the most important things that distinguish successful web design projects from those who fail is vision. All successful web design projects have some kind of a vision other people can resonate with and align to. If you want the web design communicate this vision, you have to use cascade of “Why?”, “How?”, “What?” questions. Your client’s vision, dream or reason why he is doing his business is the core of the “Why?” question. On the other hand, your client’s product is the core of the “What?” question. Remember to always start with the “Why?”, not “What?”.
What Not to Do
So, what does this mean for your web design process? Firstly, don’t waste your time asking your client on what he wants to have on the website. It is not important. Instead, you have to find out why he wants it to be there. Secondly, don’t waste your time asking his customers on what they would like to have on the website. They will be happy to give you a list of requirements. Instead, you have to find what their real motivations are. Thirdly, don’t waste your time trying to come up with the content for the website before you understand client’s business and his intention.
The Right Questions
In order to understand your client’s strategy you need to have a clear idea about couple things. Who is your client? What your client do? Why should people want to buy from him? Who are your client’s customers? What are client’s expectations in regard to the design of the web? How will the web be supported by other activities of your client? What is your client’s target market segment? Ask you client on these questions and demand detailed answers. I have two warnings.
Firstly, answers such as “our customer is everyone” are pretty clear sign your client has no idea who his customer really is. Never settle for vague answers such as this one. Always dig as deep as you can. Secondly, your client may reject to answer these questions. In that case, it is your responsibility to explain to him that these questions will vastly increase the chances of the project succeeding. So, skipping these questions will only do harm to the project and his business.
Starting Points and Targets
What are all the facts you need to know about your client before you start designing the website? Firstly, you have to know why your client is in doing what he is doing – what is his mission or vision? Secondly, how did your client get where he is today – what is the history of his business? Thirdly, where your client wants to get – what is his vision for the future? What are your client’s values and principles? Fourthly, who are his customers?
The Power of USP
Another piece of the puzzle to design great website is finding the right USP. USP, or Unique Selling Proposition, is a statement that answers the question “why should people buy from your client?” Right USP has to be unique, short, simple, concrete and clear. Great USP is one of the cornerstones you will build the project on. If your client doesn’t have one, you have to create it before moving on. It is also possible that if your client has more than one product or service, he will also have more than one USP. Use these as well.
Can the project and your client succeed without USP? Yes he can. However, it will be much harder and more difficult for him. Great way to understand the power of well-crafted USP is magnifying glass. Imagine you want to make a fire by using Sun rays. How much faster will you achieve your goal if you use magnifying glass to focus the rays on one spot than without it? USP works in the same way. It helps you concentrate energy in specific direction that’s aligned with client’s strategy.
The Brand Called …
Next step of the discovery phase of the web design process is to understand client’s brand. Don’t make the mistake and try to create new one, unless it is also what your client hired you for. Your goal is to obtain as many information about the brand, its values and principles. It is important to mention that brand is not just a client’s logo or visual style. Brand is soul of your client’s business. It has many sides or aspects. Some are visual, such as logo, typography, colors, branding materials. Other aspects are less tangible, such as vision, message and archetype.
Another step in branding phase of this web design process is understanding your client’s competition and partners. Allies and partners of your client form a support network that can help you get the necessary momentum for the project. When you design a website, you need to know if these partners and allies are willing to cooperate and support the project and create synergistic effect. The opposite side of the coin are competitors.
Competitors come in two categories. They are either direct or indirect competition and you need to know about all of them. It is part of the web design process to research the websites of your client’s competition. So, ask your client to give you specific companies and also the links. Doing so will help you get some idea about the way this kind of websites is designed and what is usually expected. These websites will also serve you as an inspiration.
Expectations and Requirements
After branding, you move to the next step that is learning about your client’s expectations and requirements. In this part of the web design process you goal is to agree with your client on what are his expectations about the outputs of your work. Also, make sure to create a set of indicators to measure whether your outputs have expected results. These indicators can be conversion rates, bounce rate, number of repeated returns, number of registrations, etc. Whatever indicators will you choose, just make sure they are measurable and, if possible, concrete rather than abstract.
Quick note: As a web designer, you will often have to deal with requirements rising rather from your client’s fantasies and content of website of his or her competition. It is your job to inform your client that it will be much better idea to focus on results of user research and what his business really needs. Remember that good web designers will tell their client which ideas are good and which are bad instead of simply following the orders.
Limitations and Restrictions
In many projects there will be certain limitations and restrictions related to the web design project on the side of your client. Knowing these limitations will help you predict and prevent some potential risks. It will also increase the chances of delivering better results. There is one thing important to understand. If your client will tell you there are no limitations, you will spend a lot of time refining and reworking the project. You will have to go through number of iterations to finish the project. It is also possible that although you will finish it, the project will never be realized.
One type of limitations you may encounter will be in the form of content for the website. Meaning, there might be some assets such as photos, videos and testimonials your client can’t use and show on the web. Second type of limitations is visual. The most obvious visual limitation is visual style your client is using for his branding. As a professional web designer, you have to always prioritize consistency over anything else. In the end, remember this. Limitations give your work specific boundaries and decrease the chance your work will be rejected.
Processes and Procedures
Another part of discovery phase and important piece of professional web design process is mapping out all the processes and procedures occurring on the side of your client. The best example are e-shops. In case of e-shops, one of the most common processes will be creating orders. How is the order created? What is happening while the order is created? What will happen after the order is created? What will the system do with the contact information? You have to ask these, and many more, questions to be able to build a website on top of them.
Information Gathering
For every web design project you will need to use different methods for gathering information. What methods will you use will largely depend on what information you need to obtain from your client and also how much time do you have. The most basic method of gathering information is initial questionnaire. This questionnaire consists of set of questions you will either send to your client or discuss with him in person. In cheaper projects, the best is to send the questionnaire via email and personally solve only parts your client didn’t understand.
To automate your web design process, you can create some kind of a basic template for the questionnaire and store it on Dropbox or Google Drive. Then, you can simply share this document with your client and everyone involved in the project. Next thing I found useful is to transform client’s answer in a mind map. It helps me think visually and find connection I may miss otherwise. Good rule of thumb for questionnaire is to always include examples and use plain language.
Topics you should include in the questionnaire are the benefits the project should bring; business of your client – what he does, his vision, mission, strategy, values, principles, etc.; brand and its key characteristics, brand story, archetype, USP, etc.; competition and allies; needs and motivations of client’s customers; referral source of visitors; client’s expectations, key metrics and limitations; other questions specific to the nature of the client.
In case of larger projects, basic questionnaire will not be enough for your web design process. You will need to get in touch with all the key people in on the side of your client and map out company’s internal processes. By talking with these people you will be able to understand their expectations, how their customers think what they care about, how the make decisions and how your work can benefit them. What are the main areas of your focus? First, what are customers asking for? Second, what are they complaining about?
Third, what prevents them from making the decision (make an order)? What are their worries related to make the decision? What myths about your client they believe? What do they think customers need and want? Next step is to broaden this database of information by exploring demographic of the target customer base. You will find more about this topic in the next part of this article. Until then, you can learn more about these aspects of web design process in Personas: Crafting Great User Experience article.
Time for SWOT
The last part of the discovery phase is to arrange a meeting with your client and all the key people and do a SWOT analysis. The goal of SWOT analysis is exploring Strengths, Weaknesses, Opportunities and Threats for the company or product. One thing, you can either set up a meeting or include SWOT analysis in your questionnaire and send it to your client and all the key people. SWOT analysis will give you a better overview of your client’s business and its needs and help you create tailor-made design. SWOT analysis is also a great way to test the quality of your client’s USP.
Closing Thoughts on Having a Web Design Process Pt1 – Discovery
This is all for the first part of the Web Design Process – Your Ultimate Guide to Designing Websites series. The last thing I will say about the discovery phase is this. A large number of your potential clients will don’t have any strategy written on paper. In a fact, many of them will start to think about it when you ask for it. Don’t let this discourage you and never continue without agreeing with your client on concrete strategy. Also, never work on projects lacking any limitations.
Otherwise, you will spend hours and hours reworking and editing project that may never even be realized. Also, never do projects without marketing support. And, never ask “why” unless you formulate the question clearly and concretely. The only exception is “5 why” method. That’s it. Enjoy the day and
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
