Sketch App Practice

by Nathan DeWaele

I am a software Product Owner and I find that a lot of job postings for similar roles are looking for UX/UI experience.  My husband went to IronHack in Miami and so I am following his course materials. Below is the first Exercise.

Select an app of your liking and learn design software by trying to mimic its look-and-feel. Most probably, you already have something like your own “style” or things that are more appealing to you for diverse reasons. If you want to achieve a certain level in UI Design, you need to research, craft and understand how the masters are doing it. You’ll be screen shooting and copying the app’s screens, refining the fidelity iteration by iteration.

--------------------------------------------

I decided to replicate Experiments With Google and I used the GoFullPage Chrome extension to capture the page in it's entirety and so that I could inspect length and width dimensions.  Below is the screen shot.

Screen capture of AI Duet's submission to Experiments with Google

 

I used Sketch because I have license with them already.

The first thing I did was add an art board that had the same dimension as the screen shot.  I then added the black header and footer bars to ground the proportions.  I then added the video and image elements because ground the proportions.  Credit to Jesman Fabio, James Stamler and Elijah Ekdahl for providing free stock photos on unsplash.

I noticed that the play button does not have evenly rounded corners and in the spirit of completing this exercise quickly, I only did out of the box corner rounding.  Next time, I'll get a better feel for disproportionate rounding with vectors.

I identified the fonts as Source Code Pro and Source Sans Pro by right clicking the text and inspecting its CSS attributes.  Both are Google fonts that I was able to download for free and use immediately.

I also needed a search icon and I downloaded Alexandru Stoica's from Sketch App Resources.  It doe not match exactly but time was more important than perfection in this case.  Next time, I might be more critical of the icon pack.

Because this is an exercise in mocking, I decided not to copy the large body of text verbatim.  Instead I used a Samuel L. Ipsum generator

Below is the final result : )

Replica of experiments with Google made in Sketch by Nate DeWaele

 

Back to UI/UX Product Design