UX/UI Bootcamp — Exercise 2: Design Practice
Aesthetical mirroring of an existing app
This is an interface exercise from UX/UI Design Bootcamp offered by Ironhack.
The goal
Pick an app that you use consistently, take screenshots with your phone (5) and mimick the user interface.
The plan
Learn how to use an UI software within 2 days — oh, yeah, you read it right — and delivery the best mobile app copy as possible.
Footnote — The sofware initially recommended to perfom this task was the Sketch tool, but as I don’t have a Macbook (yet), I was told to use either Figma or Adobe XD instead.
Let’s see how this goes…
Introduction to UI Design
As a field focused on the interface experienced by the user when interacting with a product, either a digital or physical one, the User Interface — or UI, to the closest ones — aims in developing the visual aspects of a device.
“Every element in a visual composition has a number of properties, such as shape and color, that work together to create meaning. The ways in which these properties are applied to each element (and how they change over time and with interaction) allow users to make sense of the content and graphical interface.” — About the Face
Differently from User Exeperience, this study don’t focus on the logic behind the scenes, but in how to make an already-developed-logic to be significant and interesting to the final user.
This board also helped me to understand the difference between them, by highliting some key-concepts of each field:
Now… The task!
1. Choose one app you’d like to work with
As I had no previous knowledge in UI neither it’s sofwares, I preferred selecting a simple app to be mirrored, so I could focus on the understanding of the primary tool and it’s features.
The aplication I’ve selected to be copied was MinimaList, a To Do List with a minimalist design.
Less is more!
2. Screenshot at least five screens and import them on the UI sofware
As Sketch was not available for me at the time, I’ve decided to go with Figma.
I knew exactly nothing about it, so I’ve started with the tutorial below.
And then this one:
And finally this:
LevelUpTuts
3. Create an Artboard with the size of your own phone… Start mimicking the UI.
Work in process…
Almost there…
4. Try to accomplish a perfect clone of these five screens.
5. Share!
Ironhack: What you found from the practice?
As any learn-by-doing practice, a few challenges came up. From discovering which fonts were used on the original app (which I didn’t) to finding Figma’s shortcuts (which I did), my strongest feeling was — Take a deep breath and just do the job. Read tutorials, check blogs, watch Youtube videos… Whatever needs to be done to have the work completed.
Ironhack: What consistencies do you notice in the treatment of color? Typography? Spacing? Other elements that are used?
For me, seeing all elements as grouped pixels helped me to develop a better interaction with the basic concepts of each object handled. From shapes to fonts — and even the eyedroper — , zooming in and out several times also helped me to keeping things structured and aligned.
Ironhack: Can you specify some UI Design patterns that are used prominently in this app?
As a minimalist to do list the app consists, pretty much, in input controls — as checkboxes and text fields — to informational components — as icons and progress bars (in this case, progress circles).
First registered experience with User Interface… Checked!
