INTRODUCTION AND INSPIRATION

Role: UI Designer | Duration: 5 days | Type: Personal Project | Tools used: Figma

In the summer of 2022 I visited Barcelona, Spain for the first time. I spent three days absorbing the artwork, architecture and beautiful Spanish weather. I was inspired to create a iPhone UI based on what I saw in the city.

Project Overview

My goal with this project was to create iPhone UI components; which included widgets app icons and home screen background. These components would be inspired by visual elements from Barcelona city as well as follow the design guidelines by Apple for iOS.

Vision Board

I first created a vision board with a collection of photos from my trip. I did this, so I can capture colours, themes and patterns to use in my UI.

Colour Palette

I extracted colours from the vision board with the intention to have 3-4 neutral colours and 3-4 accent colours.

Typography

I decided not to alter the typography for this project. This is because I wanted to keep an element of simplicity with my design. iOS uses the font SF Pro. The text underneath the app icons are in 10pt. Text within widgets are 17pt for titles and 13pt for subtext.

Creating the Widgets

Antoni Gaudi was a Spanish artist and architect in the late 1800s - early 1900s. He designed landmark buildings in Barcelona such as Sagrada Familia and Park Güell. I incorporated themes I've seen in those landmarks such as the use of patterned tiles and the ordinal structure.

Creating the App Icons

Similar to the widgets, I aimed to create app icons that capture the ordinal or "fluid" structure to Gaudi's buildings. I did this by adding curved waves in the background of the all the app icons.

While in my design process, I made sure to reference to Apple's best practices for creating app icons. Some of which include:

• Embrace simplicity. Simple icons tend to be easier for people to understand and recognize.
• Include text only when it's an essential part of the brand.
• Prefer graphical images to photos.
• Use gradients and shadows cautiously.

Completed Phone UI

Designed for Phone 13 iOS version 15.