Design Practice Exercise | User Interface mimicking

My IronHack Journey — Exercise 2

The second exercise of the journey was all about getting more familiar with the concept of UI (User Interface) and starting to understand better how to use the softwares — like Sketch and Adobe XD.

The goal was to make a perfect copy of the UI of a chosen app and to get more exposure and attention to details when analysing it. Emphasis to details! If there’s one thing I’ve learned with the practice is that there are so many details that you get attached to — that definitely helps you to make a better design. But we’ll get to how I’ve realised that soon in this article.

The app

For me, Culture Trip is a great app to plan trips :)

I’ve chosen the Culture Trip app — which basically makes your travel planning much easier. They provide the user with tips of hotels, restaurants, best things to do, recommendations of local experts and the option to save all the favorite content on easy-access wishlists.

I really like the idea of the app, how the content is organised and especially the bunch of options you get to discover a new place.

The clone

After taking a few screenshots from the app, I used Sketch to mimic them.

First, I created a color palette — based on the main screen of the app. Then I found the typeface by going to the Culture Trip website and using the Chrome extension WhatFont.

All set up, let the party begin! I copied 8 screens in total and this is what I came up with:

(the original design is on the left followed by my clone on the right)

The main lesson learned

Say hello to Consistency!

After mimicking the first screen, I found myself having lots of fun with the exercise. Not only by exploring the software, but actually really paying attention to details to make a perfect copy.

To be honest, I was underestimating this thing of paying attention to every single detail. I would be like: it’s just a copy, it should be easy to do, right? And there was I, analysing every single pixel on the screen.

So I went to the second screen: wait what? What is this color? It wasn’t’ on my palette.
Then the third screen: why does this title have a different size than the one on the first screen? It’s not a big difference, so I don’t think it was an intentional move.
Fourth screen: this purple seems slightly different from the one of my palette.

Conclusion: I’m lost. There are so many different colors, so many different text sizes, spacing, shapes. There was something missing: consistency.

For the exercise, I’ve decided to try to make the perfect copy and keep the original design. To be honest, I didn’t pay much attention to these details as a user — but if there was consistency, the attention to make it simple and to follow better defined patterns, I’m sure the design would be way better and so the user experience.

Other impressions

• Overall I really enjoyed the exercise and I feel more confident using Sketch.
• Good design is invisible, bad design is everywhere. It’s important to pay attention to details to not make them bigger than they should be — to simply keep them as details and not as evidence for bad design.
• Defining just a few colors, just a few text styles and using them wisely is the key. I’m sure it makes the process much easier, both for the designer and developer, and also brings a more eye-catching impression for the user.
• To always keep in mind: Make it simple!