Exercice 2: UI Design Practice

Prework IronHack #3

Hi everyone, I have a new challenge to discover some more of the UI Designer work !

About this exercice we have to discover how to reproduce a screen with Figma and create UI Design.

This exercice is for :

=> training and get familiar with UI Design Software interface

=> Get more exposure and attention to detail when analyzing UI

=> Discover some tricks and aesthetics we can relate to prefer. Add them to our toolbox

How to process ?

First we have to choose a app that we like to use and take 5 screenshot. Then with our screenshot we have to reproduce the same image on Figma.

I create my Artboard with the size of my phone which is a Iphone 5SE and i choose to copy the screens from the app SoundCloud.

So our goal is to copy the same Design with the same colors, typography, images and size.

Let’s see my first work !

Screen 1:

We can see that at the beginning I start to reproduce only the colors and the typography:

Then I went on the website “The noun project” to try to find the same symbols to add on my artboard:

At the end I reproduce a clone of my screen:

My first screen wasn’t perfect because I couldn’t find all the same symbols but I continue to work on it and make it perfect.

Screen 2:

On this screen I worked mostly to reproduce the image in the good size

Screen 3:

On this screen I learnt how to highlight a transparence on the text

Screen 4:

This screen was the easyer on because wasn’t any image or new symbols

Screen 5:

On this screen I copied the image of the albums but couldn’t find the way to cut the text

Conclusion:

For this exercice I spended long time to understand how to use Figma and learnt by myself with some Tuto on youtube “how to use Figma” and started really slowly to be confortable with.

I really enjoyed to do this exercice beacsue I learnt a lot, was a reall challenge for me and i’m happy about what I did even isn’t perfect, I’m excited to continue and learn more.

See you soon for an other Challenge !