Home » color

Tag: color

Where do you start when you design a Website?

“Writing is easy. You only need to stare at a blank piece of paper until drops of blood form on your forehead.” Gene Fowler

I used to feel the same way when it came down to designing a website. 

I would have all these general ideas of what should happen on the site, but then I was faced with this white emptiness and an infinite amount of possibilities. 

The simple task of laying down the first line felt daunting! 

If this is your struggle as well, read on, because you’re in for a treat!

It turns out that the problem is with the “infinite number of choices” when thinking about design. If you only had two colored crayons to choose from, you would not spend to much time picking one.

The key is to limit your choices to just a few!

If going down from “infinite” to “a few choices” makes you cringe, consider the fact that most designs that work were built within pretty restrictive design systems.

But now it seems like we just shifted the problem. Instead of figuring out where to start, you wonder how I choose my design system restrictions?

I will argue that this is a new and different problem. Because you don’t have to choose these restrictions, they are instead imposed on you by the project you want to create. 

What is this project for? Who is it for? 

When you answer these questions, you will build a set of features and an audience for these features. Within these answers, you will find your constraints. 

For example, let’s look at color. Instead of randomly choosing a color or thinking of something that is appealing to your sensibilities, you would serve your audience better by reading on the psychology of color and choosing the one that conveys the message you want to convey to your audience.

The same applies when choosing the fonts for your design. If you know how different people perceive different type-faces, the font choice will be an obvious one.

When it comes to the overall design and layout, you are again constrained by creating a clear hierarchy. You don’t just jam everything in there; you need to consider what is most important and prioritize accordingly. It also helps if you sketch first the features and build up from there, instead of figuring out what the navigation should be like when there is nothing to navigate to. 

The web needs to be accessible, so you need to create proper contrast with your color, provide appropriate text sizes for your labels and enough space around the buttons. 

When you write all these restrictions down, you are left with very few options to choose from. And starting the work on your design will be much easier, especially if you focus on the features or the main call to actions and build from there. 

Build your constraints first (from the requirements of your audience), and the design will flow from there.

Conversions versus Beauty

As a designer, or even as a client, you are thinking of starting a new project, and you need to begin your UI design. 

And you’re thinking: it has to be modern, it has to be beautiful, it has to be exciting, it has to evoke these feelings and then from the infinite number of possibilities you need to choose something that will be your design. 

This can be daunting, and it may not actually serve you. And I confess I had made this mistake in the past a lot! I would learn new fancy ways to do something, and then I would use it everywhere because, drum rolls, I knew how! That is an excellent way to learn and practice your craft, but it is a terrible way to think about design. 

When I began working in projects that had a real business behind them, it became evident that once the design was done, other questions would come to the fore:

– how many visitors do we have

– out of those, how many became leads (subscribers)?

– out of those, how many purchased a product? 

– and out of those, how many become huge fans or joined the mastermind groups? 

These questions have something in common. They are not about esthetics, they are about numbers, and specifically about conversion rates: how much of X turned into Y? 

Now I start all the projects with these questions before even considering the design!

Who is supposed to use this website, and what for? And once I have an answer, what kind of action do I want my audience to take when they interact with my site? How will I measure that? And how do I maximize that? 

The answers to these questions will limit my design choices. And that is a good thing because fewer choices increase the chance of making the “right choice!”. If you go too crazy with your design, users will not be able to relate to it. If you are the same, then why should a client choose you? You need to find the sweet spot! Something that the potential customers can relate to, but that is also customized to serve their needs. 

This means you will need to choose specific fonts, certain colors, and image themes that will be dictated by your target audience and not by what you think “is beautiful.” 

If you are a designer and you need to make a choice, ask yourself: will this bring me closer to my conversion goals or not (pretty comes second).

And if you are a client, be very careful when you ask for a change because your brother does not like the colors, or you don’t like green. If you build something to serve an audience, then their preferences matter over yours. 

Of course, every decision you make can be wrong. You can make informed assumptions about your audience, read the studies about how color influences people and how the font face can make you look serious or playful, but you can still be wrong and not meet the conversion rates you were aiming for. This does not mean you have failed, it means you need to adapt.

An excellent way to adapt is to use A/B testing. I am still studying this concept myself, and it looks like a powerful way to reach “DDD” which is Data-Driven Design, versus “Beauty Driven Design” (which is a polite way to say “Guess Driven Design”). 

My challenge with A/B testing so far is that you need to have a broad test audience to be able to safely conclude that one variant of the test is definitely better than the other and by how much. If you’re into statistics, you’ll love this, and you can do the math yourself! If you are not, choose your testing tool wisely to avoid running meaningless tests with results that are not actually relevant. 

A case study is the website PenguinMagic. When I first looked at it, my design eye judged it as ugly and imaged someone lost their money paying for that. But I have learned that this “ugly design” converts for the people it is addressed to. Believe it or not, this is a multi-million dollar business. They made the clear choice of conversions over beauty!

How about your web project? Do you have goals for it? Are they conversion goals or “being pretty” goals? 

And finally, if you can recommend a useful A/B testing resource, I’d love to read more about it.