We all know that designers are amazing. The design of your product can often make or break a startup.
But what if you can’t persuade one to join your band based on a payment of cookies and doughnuts? (I’ve personally had more success with Czech Marlenka cake because you know, designers are fancy).
Who needs to read this article, if we can just stare at doughnuts all day.
In the last article, we spoke about step-1 of creating a hit product and that was idea validation — proving to yourself (and VCs) that people actually want your product.
So today we’re going to focus on step-2: designing your product.
We’ve gone into excruciating detail in the online course about typography, colour theory, wireframing, prototyping, UI and UX design.
So here, I wanted to boil it down a bit and just give you the 5 most actionable DIY steps to start improving your designs today.
1. Avoid Confusion
Design is at heart about solving problems. it’s not about making pretty gradients and giving everything a curvy edge.
Let’s think about a really simple problem, designing door handles.
I know, it’s not the most glamourous. But I bet you’ve come across one of these doors before:
Pushing a handle? WTF?
These are doors that are opened by pushing, but confusingly have a handle attached. These doors are so ubiquitous that they even got their own name. They’re called Norman doors, after Don Norman — the writer of the brilliant book “The Design of Everyday Things”.
We, humans, are used to environmental cues that indicate to us what we should do in certain situations. There is a line of people, I should get behind it (or if you’re in Asia, I should squeeze my way to the front).
Responding to these cues makes us faster and allows us to focus our energy on processing novel information. But at times, these heuristics can be abused by bad designers.
So evaluate your designs, are you making everything as simple and as clear as possible? Or are there things in it that could potentially confuse a user?
2. Create Contrast
Let’s think about another problem. You have to present the user with two options when they land on your landing page. You want to contrast the design of the two buttons so that users can distinguish which one is more important.
For example, when you close an unsaved Keynote presentation, you’ll see the above prompt. The contrast between “Don’t Save”, “Cancel” and “Save” pushes the user towards the more attention-grabbing blue save button.
So think about the hierarchy or importance of the buttons and you can subtly use contrast to nudge users towards one over the other.
The text reads: “Do you agree with the reunification of Austria with the German Empire that was enacted on 13 March 1938, and do you vote for the party of our leader Adolf Hitler?” The huge circle says “Yes” and the tiny circle is for voting “No”.
3. Hierarchy
Design is all around us. The best proof of that is the 2017 Oscars. Faye Dunaway and Warren Beatty received the wrong envelope and accidentally read out “La La Land” instead of “Moonlight” as the winner of the best picture.
The reason for this could at least be partly down to the design of the announcement cards.
Here’s the culprit.
In the current design, the name of the award is the least important item at the bottom, in the smallest type and would be read last according to visual hierarchy. The name of the actress is also in the same hierarchy bracket as the name of the film, being the same weight, size and both in all-caps.
I took the liberty of redesigning their announcement card. Now the first thing the presenter sees is the award name and the next thing is the name of the winner. The name of the winner should be the most attention-grabbing and hence it’s the biggest, boldest, heaviest thing on the card.
Now no one can mess that up. (Congrats to Moonlight btw, great film!)
4. Alignment
This is probably one of the first things you learn in design school. Making grids and aligning elements.
Let’s say that we were commissioned to design some business cards.
Grid lines will help you immensely in this task. As you want to try and align and group elements together to provide a cohesive feel to the design.
This is something the design team at Canva made earlier.
Now say if they had broken the rule of alignment and tossed away all their grid lines. Here’s what that design might have looked like.
Ok, obviously I’ve exaggerated it a bit. But you’d be surprised, how often you come across terrible alignment on the web and in real-life. It’s one of those once-you-see-it, you can’t un-see it scenarios (like Lisa Simpson’s involvement in the London 2012 Olympic logo, I’ll let you google that one).
Take notice around you, see how often the rule of alignment is broken and the aesthetic result of that. in my experience, the worst culprits tend to be charity bake-sale posters. And the next time you’re making a design try to align and group elements together and see an immediate improvement.
5. White Space
Have you ever noticed the difference between an expensive store and a cheap one? The next time you go shopping, take a look at the difference in the number of items on display.
Now compare the top image with the bottom. If you had to guess the price of the same handbag, would they be priced the same?
This is the power of white space. Apple could have crammed in loads of devices into their stores. So that you don’t have to queue to confirm just how few ports the new Macbook Pro has. (The answer is too few).
Have white space around your designs works in the same way. It elevates it and makes everything look instantly more expensive.
Image courtesy of the Canva team
Remember, just because there is space in your design, doesn’t mean you have to fill it. Leave some white space for the imagination.
Alright guys, hope you enjoyed our second instalment of how to make products from beginning to end. If you’re interested in learning more about design then head over to our online platform and learn about typography, color theory, wireframing prototyping and lots more design goodness.
Top comments (0)