Ironhack Prework ->Exercise 2
Design Practice (Interface copy)
Entering the UI topic from prework, the second exercise consisted of “mimicking” a few screens from an APP’s of our choice using one of the 3 presented software (Sketch, Adobe XD or Figma). I’ve decided by using Figma, in the beginning, because I found it easy to navigate, very complete and you don’t need to download anything to your computer.
The APP I’ve chosen was Duolingo. I really like this APP because of its simplicity and easy navigation.
My process
I’ve started by choosing a few starter screens to screenshot from my cellphone. I’ve chosen 5 screens in a roll so I could also try the Prototype feature after redoing the screens on the artboards.
Then, I opened all of them on the same canvas and created an artboard next to each one, so I could easily see what I needed to copy. This way was also easy to use the rules to adjust the spacing between elements.
Most of the tools were used, especially Pen and Shapes. For the shortcuts, the two I’ve used the most were H (Hand Tool) and Ctrl +/Ctrl -(Zoom in and Zoom out).
I couldn't find the specific font used on the website, but it wasn’t hard finding a similar font to adequate. For this, I’ve used Gothic A1.
And now, here are my results from the exercise (screenshot on the left and my copy on the right):
Conclusion
My background in Fashion Design helped me feel comfortable and familiar with the tools, which was a facilitator. The part the took me the longest to finish was redoing some icons from scratch. Some others, I’ve got from tool-kits available on Figma website.
