My first attempt with Flat Ui Design was with a top view of Macbook Pro. The original design itself is quite simple and therefore I wouldn’t require detail illustration for viewers to identify it being a Macbook Pro.
I used this tutorial to help guide me creating my first ever flat UI design: https://www.youtube.com/watch?v=QmRf5feJaUI
I also used http://flatuicolors.com/ for the colour palette.
Below are screenshots of how I created it
I first began laying out the workspace with the rectangle tool. I then used the Effect>Transform in order create copies of the button rather than drawing it out one by one. It also allowed me to align and arrange them easier.
Once the workspace was created, I began filling them in with colours to bring them to life. I then used the Effect>Convert to Shape>Rounded Rectangle which let me curved the edges on my rectangles to give the workspace the same shape as a Macbook.
I then applied the same effect with my keys.
I then created the top part of the macbook and added a darker shade to the edge.
The next step was to create a flat shadow. I did this by creating the shadow shape with the pen tool then moved the shape down the layer so that it was behind the keys. I then clip masked it with the main workspace shape. This allowed the the drawn shape to mask the workspace so that it is identical. finally I changed the colour of the shadow so it was a darker version of the workspace.
This is the final outcome of my flat design of the Macbook Pro
Overall I’m very pleased with my outcome as I was able to create a flat design of the Macbook Pro. I was very happy with how I understood the techniques the tutorial showed and was able to adapt it to my own preferences. The practise gave me a better idea of how flat designs work and I found it to be very interesting to create. My next challenge is to create a flat design without the guidance of the tutorial.