Introduction to UI best practices for a very tough week #4 at Ironhack!

Only 2 weeks ago, we created a low-fidelity prototype of an app offering the ability to scan products in Naturalia shops and get information about them, find recipes and create shopping lists. This was our answer to the business need of expanding Naturalia’s market while helping young adults in their way to a healthier lifestyle.

How to get a high-fidelity prototype from these sheets of paper hand-written?

First of all, draw a wide picture

We started the week designing the (mid-fi) wireframes of the app, the mood board and the style-tile.

These tools helped us define the colours, fonts, style of images that will appear in the high-fidelity prototype. They are a real style guide for Naturalia’s app.

This part was both creative and analytic. We had to find out what makes the essence of Naturalia’s image and to understand what to change about it so it would fit our target.

At this stage, we knew what the end product would look like, but the picture was blurry.

Second, create atomes

We were then introduced to the Atomic methodology. The key is to build the interface beginning with its smallest elements : .

Atoms in apps or websites are icons, colours, fonts and simple buttons.

So we had to pick all the icons that will appear in the interface, scale them to the right size and colour and turn them into Sketch symbols. This special trick allows to update the atom everywhere in the document at once.

We now have the precise elements but don’t know yet how they’ll be related to each other.

Finally, play the chemist’s apprentice : get molecules, organisms… and so on!

Now is the fun part : play along with the symbols, assemble them to make nested symbols and end up with some pages. If you don’t like the design, you can either change a molecule (nested symbol) or the atom (symbol). It’s very easy so you can get the perfect design very quickly.

We end up with a high-fidelity prototype that we’ll be able to edit (nearly) effortlessly !

Tough but interesting week

I experienced this week feeling like an artist introduced to pointillism. The atom stage was the less intuitive to me but it was a lot more pleasant when I started to build molecules.

It was worth learning the best practices. Now I’ve been through the atomic design method once, I’ll feel more comfortable next time because I’ve experienced what’s coming next !

How-to design a system : start from atoms was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link


Please enter your comment!
Please enter your name here