The exercises I have done so far.

Project 01: Persona

Figma UI / UX Essentials - image 1 - student project

Project 02: Wireframe

Figma UI / UX Essentials - image 2 - student project

Project 03: Icons

Figma UI / UX Essentials - image 3 - student project

Project 04: Testing On your phone

Figma UI / UX Essentials - image 4 - student project

Project 05: Animation

Project 06 - MoodBoard

Figma UI / UX Essentials - image 5 - student project

Project 07: Colors & Columns

Figma UI / UX Essentials - image 6 - student project

Project 08: Text

Since Project 7, I changed up the colors a bit. I wanted to go with more of an orange tone as opposed to the yellow I had before. I also went with a more vintage woodblock-style font that reminds me of old films. The name change also creates a much more interesting brand... "Dillon's hot sauce" wasn't really doing it for me.

Figma UI / UX Essentials - image 7 - student project

In the first draft, I liked the rough / Hi-FI mock up, but it is definitely missing something, most likely texture... I am leaning into the rough-and-tumble look though, I think I want to do some more research on old Western films and graphics, see if I can find some further inspiration, and get this campy western feel I am going for.

Figma UI / UX Essentials - image 8 - student project

Project 09: Making Stuff (Icons & Buttons)

For the icons I wanted to try having different than the usual icons, to match the old western theme. I chose a Salloon door as the home icon, a basket for the cart, and an old-looking cog for the settings section. The idea was to give it more charm with some custom designs. The buttons are also a bit more rugged looking to match the aesthetic.

Figma UI / UX Essentials - image 9 - student project

Figma UI / UX Essentials - image 10 - student project

Project 10: Pictures

Things are starting to heat up ;). I made some crude mockups for the hot sauce brand to use for the UI Cards, as well as some stock imagery for the launch page. I also added some arrows to show that the Ui cards are horizontal and matched the current style.

Figma UI / UX Essentials - image 11 - student project

Project 11: Buttons

Figma UI / UX Essentials - image 12 - student project

Dillon McSwane

1

1