Sketch Visual Design Exercise

Creating screens with Sketch

Laura G. Castellanos
UX/UI Prework
3 min readSep 30, 2017

--

The purpose of this exercise was to get familiar with Sketch by designing two screens for a fictional travel app that lets people plan trips with friends and share a daily itinerary with activity and location details. The information provided was just a capture of the screens to recreate: the Log In and the Itinerary pages.

Although it seemed a great challenge at first (basically because neither I had used Sketch nor designed a UI screen before), a thorough look at the screens made me realise that all the elements of the pages could be divided into smaller elements, much easier to create. That gave me my first insight: every element in a page/screen, no matter how intricate or elaborate it might appear, can be split into minor elements that are easier to produce, all you need is to carefully analyse them.

Once I realised that everything that I would need could be done with basic shapes, alignment, masking, opacity, Boolean operations, blur and icons, I got on with it. To be honest, I expected Sketch to be more difficult than it actually is, but I think that the fact of being an usual Illustrator user made everything easier for me. All I needed was to adapt myself to the new interface. All the concepts and tools were pretty much the same. I’ve missed some features Illustrator provided though, but I’m pretty sure Sketch has them too; all I have to do is keep practising to find them.

I’ve really enjoyed making this exercise, creating all the elements of a screen and arranging them to match the layout of the image. It helps you get the notion of how little elements combine with others to achieve an elaborate result. I’m a graphic nerd, so searching through Sketch’s typefaces and colours to find ones that would match the originals has also made my day.

My main hitch, however, has been one I didn’t forecast: getting familiar with Mac’s interface and OS. I’d never used a Mac before, but I thought it wouldn’t be so difficult. I couldn’t be more wrong. Nothing acted the way I expected and I had to spent some time searching how to do simple tasks in the computer’s help (I even wasn’t able to extract my pen drive the first day :( ). But just like I mentioned before, I hope that a bit of practise will help me make my way with OS.

Log In and Itinerary screens

--

--