How to design a website from the ground up
This is a short step-by-step guide of a bulletproof strategy to design great layouts for websites and applications.
First, let me start off with this: I don't like the word “criticize”. Too often, it makes people think they have to say something "bad" or negative about something. However, a good approach to criticizing designs is essential, because you have to give feedback.
Let me introduce you to our “Design Review” method. It’s a group exercise for reviewing designs and for providing helpful and constructive feedback to designers. Also, this exercise is not limited to only designers. Any team could benefit from giving and receiving meaningful feedback. So if you run marketing, development or other creative teams, have a go, you will like it!
The basic idea is very simple: you sit down together with your team (including the stakeholders) and then you discuss each of the designs. Sounds simple enough, right? Not so fast, there are a few obstacles that we have to overcome first.
When I ask someone to give me feedback (or even worse: criticize something!), he or she usually concentrates on the negative things (what would not work, what does he or she does not like, etc.).
It’s practically engrained into us. We simply react like this, always focusing on the negative.
The problem with this approach is that we overlook some of the key points for our feedback:
When I ask someone to give me feedback, he or she usually concentrates on the negative things.
... and we have to give the slightly more "negative" feedback as well:
Have you ever heard of the ‘Six Thinking Hats’ technique? It's a brilliant method for dispensing feedback. The idea is to give people different roles that indicate different mindsets.
For the Design Review, we will use four hats for four different roles.
If you put your white hat on, the only thing you will focus on are the bare facts, providing others with objective feedback. With this hat, you’ll examine the designs using these key points:
In our experience, the person taking on the White Hat role will also make sure that the designs are optimal before we deliver the final product.
Do the designs look great on low-quality displays? Do we only use licensed fonts or free web fonts? Are all the images royalty free or otherwise watermarked so that the client doesn’t have to worry about those finer details? .etc.
Like the content?
We let you know when we have something fresh!
One of the most important roles is taken on by the black hat. If you put your black hat on, you have to be critical (and this time, I mean it!). You will focus on what could go wrong and what risks are being taken:
The black hat has to be critical but always have to back up their arguments and provide sound evidence for each remark.
Sometimes it's hard to distinguish between the black hat and the white hat (e.g., something is missing). But then again, two sets of eyes are better than one!
This ‘infectiously positive outlook’ might seem unusual when asking people to criticize designs, but you shouldn't focus only on the bad things. You might want to ask yourself: What can I learn from the good aspects of the design?
So if you are wearing your yellow hat, you will do the following:
The “why” is very important, just like when you’re giving critical feedback. You have to find reasons to explain why that design decision is right and why users will love it (you will find that out when doing your research, won't you?).
Every designer (and non-designer) has to learn how to defend a design decision. The yellow hat helps them to do just that.
This hat is one of my favorites. If you’re slipping on the green hat, the only thing you care about is finding new ways to improve and enhance the designs, breaking down all the boundaries. It’s your role to bring new ideas to the table and be creative!
The sky is the limit when it comes to brainstorming new ideas and solutions. After the brainstorming session, the team should decide what ideas to include, which ones can be discarded or which ideas should be saved for later. Bear in mind that you might not have the time and money to bring in all the ideas.
That or you don't want to go overboard with the project scope. Nevertheless, it is still a good idea to seek out new alternatives, bringing in fresh, original ideas. And most of the time you will find small improvements and ideas that could be implemented!
So, we’ve had a look at all of the roles and now we have the full team. Let's put all of the pieces together and create a Design Review.
Invite all the designers who are working on the project. Remember to also involve your stakeholders (or clients), developers and everybody who has knowledge on the project and will be working on it.
We always select the roles randomly. This way, everybody will adopt one of the mindsets, and everybody can express their opinion.
However, you can also do this another way. The whole team focuses on one color at a time, and everybody will give comments according to that role. When you have gathered enough feedback, move to the next hat.
The downside I see here is that most of the people will give feedback when it's "their color." Critical people will enjoy the black and white hat, but will not try to do their best to work with the yellow or green hats.
I would like to share our Google Spreadsheet with you. On this template, you will find four tabs that indicate the four, different colors. This way, you can work in one doc simultaneously.
Click here to download the Design Review Sheet
Now it’s your turn - go ahead and create your first Design Review! Let me know what you think!
Schedule a quick 30 min call with us,
we would love to help you!
Our co-founder and UX expert, Csaba, wrote a hands-on, down-to-earth approach to UX design that provides a complete overview of the Seven Step UX product design process that we use every day at Webabstract. This book is a practical, step-by-step guide that will take you through all of the steps and teach you all of the methods you need to know for UX work from planning an app or website to wireframing, research, and design. It is a must-read for understanding user experience design.
Enter your email address and we will contact you to schedule the call:
We will contact you shortly!Return to the blog
Sounds interesting? Enter your email and download the ebook for free!
We let you know when we have something fresh!