UI Design Challenges

UI Design / UX Design / Visual Design
Overview: This is a collection of highlights from my studio onboarding tasks and entries into design challenges, such as 100 Days of UI, Sharpen or Designercize, my favourites of which will be featured here. Although consideration is always taken for UX, these are isolated exercises and sometimes only focus on UI to experiment with design patterns and exercise the visual design muscles.
​​Platform: Web, Desktop, Mobile
My Role: UI Designer
Tools: Photoshop, Illustrator, Affinity Designer, Figma

Inter Face Off

Task: This challenge was about comparing interfaces from a particular genre to capture what works and helps to define those themes, before creating an original UI for a hypothetical game based within that genre. I explored the genres Arcade and Sports analysing the different use of elements used in VS screens and Vehicle select screens.
Timeframe: 4 days
Platform: Console

Arcade - Anime Fighting Game

For arcade, I looked at traditional fighting games like Street Fighter and Tekken, comparing them to anime fighting games such as Dragonball Fighterz and Jojo's Bizarre Adventure. I took what worked from these games and added some of my own creativity of my own to create something exciting and original.

Sports - Street Racing Game

For Sports, I explored traditional racing games like GRID and Grand truismo 5, comparing them to more colourful street racing games like Need for Speed: Heat, Burnout Paradise and The Crew.

Wireframes

Mobile Tachometer Display

Task: Design a stylised tachometer using Illustrator and photoshop.
​​Timeframe: 2 days
​Platform: Mobile
Tools: Photoshop, Illustrator

Process:

I made a moodboard taking large inspiration from the Marvel Ironman movies and went for a holographic style tachometer intended to act as a dynamic animated background for a mobile Home Screen. I also looked at a selection of dynamic android themes both for inspiration as well as to familiarise with the parameters I was designing for.

Functionality

Battery and connection metres can be seen top and bottom as well as the relevant buttons for standard android phone apps around the centre coin. The coin in the centre displaying the date and time would be interactable, allowing the user to spin the coin in 3d space with the drag of a finger, providing a little extra flavour and fun to the screen.

Game Icon Set

Ability and Status Effect Icons

Task: Icons allow for quick, visual communication of a concept in a way that is recognisable and memorable. I was challenged to design a group of icons that work coherently as a set. There were 6 abilities and 6 status effects to design for.
​​Timeframe: 2 days
​Platform: Console
Tools: Photoshop, Illustrator

Icon Mock-ups

Disclaimer: Screen shots from Assassin's Creed Oddyssey and Final Fantasy 7 Remake

Themed Buttons

Task: Create two buttons and explore their themes. One button must be sci-fi and the other must be fantasy.
Platform: Any
Timeframe: 2 days
Tools: Photoshop, Illustrator

Process

I created mood boards for each style to inspire my designs, which is also reflected in my delivery.
After some initial sketch work and brainstorming, avoiding cliches where possible, I created my shapes in Illustrator before moving to photoshop to apply layer effects, blend modes, textures and patterns.

Sci-fi Switch

Stylised as a levitating hologram with a glitching kanji inside to add a cyberpunk edge, intended used as an on/off switch possibly by touch, perhaps with a tap or swipe.

Fantasy button

​Stylised as a gladiatorial gold coin, badge or shield, and intended to be used on a skill tree where its inner lining would glow once activated and unlocked.

Sign up & Sign in

Task: Design a simple log in and registration form.
​Timeframe: 1 day
Platform: Mobile
Tools: Affinity Designer

Error 404 Page

Task:  Design a flavourful Error 404 screen.
​Timeframe: 1 day
Platform: Web
Tools: Affinity Designer

Music Player

Task:  Design a stylish music player.
​Timeframe: 1 day
Platform: Mobile
Tools: Affinity Designer

App Icons & Game Buttons

Task: I was to design an app icon for a mobile game. I explored some different directions before going for a skeuomorphic stone temple button with a gem in the middle to make it pop.
​Timeframe: 1 day
Platform: Mobile
Tools: Affinity Designer

Button exploration

For more in-depth info on UX design challenges and case studies, please request access to Private projects