Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Design
·
LAST UPDATED
September 1, 2016

What can a Nobel Prize Winner teach you about mobile app design?

Digital Experience Designer. Playing with shapes, animation and interaction. Helping various clients craft experiences for users. www.slavomier.com

A user interface is like a joke. If you have to explain it, it’s not that good.”

Starting a project is always exciting

When we're in the flow (or whatever you call your productive state these days) we often hurry to transfer every idea from our brain to the real world. We fiddle with shapes, explore ideas, design and redesign, mess around with colors until we feel it's right.... When suddenly you catch yourself playing with one button for 5 hours and you still haven't really designed anything that would resemble your website structure. So how can you progress faster?

It's all in your head

Our focus center is deeply rooted in our brain. Daniel Kahneman, a Nobel Prize awarded behavioral economist introduced an interesting WYSIATI (What you see is all there is) principle in a book called Thinking, Fast & Slow. This model describes that human decision-making is not completely rational. WYSIATI means that our decisions are based only on the information that are available to us. This is why we tend to judge things and people soon after we see them for the first time. With the lack of context we are often very sure (stubborn even), that something is like that or that this thing should be done like this. In terms of design it means that the things located in the center of our vision are also in the center of our focus, while all unseen remains in the dark.

Focusing on one point will make you blind

It might sound basic - I cannot see everything right? Right, but you should always consider multiple options, not just the first one. The good news is that natural bias that Kahneman describes can be fought, mostly by being aware of it. There are two ways how I go about this:

1. Force it out

When I'm really stuck I create 30 minute time slots. I set up an alarm clock and after working for 30 minutes on one concept I leave it and start again from scratch. It's better to spend one afternoon experimenting like this than waste a week focusing on the first idea (which is usually not a feasible one).

2. Structure is more important than details

I do my best to cut out all of the distractions like font styles or colors in the beginning. I call it the “prototype view”.

  1. Start by making a list of all the things that need to be a part of your design. Write them down on a piece of paper next to your computer, not in a Wunderlist or Evernote. It's better to get used to look away from the screen than force yourself to remember that you should switch some apps. And it's also good for your eyes. ☝🏼
  2. Then start translating these ideas into sketches. A simple outline structure should do just fine.
  3. Try at least three completely different layouts and approaches.
  4. Then look on that paper aside your computer and check the list if each layout meets all of the requirements.
  5. If something makes sense, go on. Add colors, layers, elements - you know your thing.

Let's see how it can look like in practise:

 

Trust me, don't go too wild too early. All you have to do is get rid of the distractions.

  1. Place a huge rectangle all above your artboards.
  2. Be sure it doesn’t snap only to one. Set it’s color to white and blending mode to Color.
  3. Lock it down.

Tip: Forget Lorem Ipsum. You don't have to write kick-ass compelling copy, but try headlines and name test styles so you have a better idea what should be communicated in a particular area.

That’s it, no visible colors, no visible styles. Now you can fully focus on single elements and it’s shape and harmony it creates.

Too simple? Use UI kits

If rough outlines are too simple for you, use UI kits. You won't have to waste time with manually designing all of the elements. Just download something like this and play with all the elements. However, watch out for getting limited by what is pre-designed. Always try changing the structure, order, layout and styles to keep your design fresh.

Do you have any tips about focusing during your design process? I'd ❤️ to know. Let me know in the comments.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: