Ironhack Exercise 02 — Design Practice

Pre-work exercise for the UX/UI Lisbon Bootcamp April 2020

In my second Ironhack exercise I was asked to choose any app, take five screenshots, import to Sketch and copy those screens using the available tools.

The selected app was DailyArt, an app that sends you everyday a classical painting and tell you a little bit about the art piece and the artist. Inside the app they have a huge library with paintings and artists, but unfortunately you only get full access in the premium version :(

The image on the left is the original, on the right is the copy. These screenshots were taken inside Sketch. The screen size is 1080 x 1920.

What I’ve found inside the app

DailyArt uses mainly three colors, with different variations of shades and tints (to solve this I changed the opacity in many components). To copy those colors I’ve used the Sketch eyedropper.

To match the typography I used What The Font by MyFonts, that allows you to upload a screen in order to find the font. Then I used Fonts Ninja, that offer a free trial of many fonts. I used Roboto, Helvetica Neue and Libre Baskerville.

I made all the icons from scratch, even the ones on the Android menu. This is where I spend a lot of time (I couldn’t imagine that making a heart shape was so hard) . To do the icons I used the shapes Rectangle, Oval and Triangle. If that wasn’t enough I would go for the Vector tool.

To fit the paintings and the artist portraits I used a ton of masks. Learning this in the Ironhack lessons was essential to accomplish the exercise. In some icons (like the battery) I used boolean operations. The ruler and the guides were also really important to align components.

Command + D (Duplicate), Command + G (Group), and Command + S (Save) were the most used shortcuts.

About the patterns I identify buttons, drop-down buttons (Artboard 1), search box (Artboards 3 and 4), icons and the “hamburger button”.

This exercise was really important. Took me hours to finish the first screen, but then things started to get faster. It was really nice to get familiarized with some tools.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Thanks for reading :)