Sketch To Screen

The first step for developing the main experience of the project was to convert the sketches I had done earlier into wireframes. This went well and only had to make some small changes due to the length of certain bits of content.

612624BD-05A0-41E9-9963-3C3B23C41412_1_105_c.jpeg

C6B790A0-C221-43D7-8508-04EF7ED16354_1_105_c.jpeg

52440999-051F-4E8D-AA7B-53AB80C1CA4D_1_201_a.heic

Screenshot 2024-04-04 at 16.49.12.png


Take Off

The first set of screens I worked on was the Take Off section. I basically treated this like designing one long/wide poster. I had initially thought of having to move through each screen by buttons rather than scroll, but the way I was designing lent itself to self controlled scrolling with buttons between sections. Once I had the main content in place, I began layering up the background, using relevant type and shapes as forms to give depth to the screen.

Screenshot 2024-04-05 at 16.16.25.png

I was really pleased with the final design for this section and felt it was very engaging. The animated parts worked really well and were subtle enough to not distract from the main content. I really liked the forms being used in the background, and the setting of the quote.

MacBook Air - 5.png


Drawing Lines

As this was the first screen, I wanted to bring the content in in a more interesting way. To do this I split the lines up across multiple screens and used smart animate, to give the illusion of them drawing in.

Screenshot 2024-04-04 at 16.27.42.png


This first section went really well, but had made a problem arise with my art direction.

Changing (Art) Direction