Professional Certificate in UI Design
This case study covers the work I completed for the Professional Certificate in UI Design with the UX Design Institute (UXDI). The course is accredited by Glasgow Caledonian University.
I studied this course after completing the UX course with UXDI. I did so as I view user interface design as a natural path of progression to the user experience. One complements the other. And with UI coming after UX in the design progress, I felt it made sense to discover more in this area of study. And to further reinforce what I’d learned before in the UX diploma.
Different stages of the project:
Research and analysis of UI
Individual module exercises
Create final assignment project designs
Final exam
Project overview
Introduction
The Professional Certificate in UI Design picks up from where you left off in the previous UX course with UXDI. You take the knowledge you learned about the user experience and shift your focus to the fundamentals of UI. You look at design elements and systems which help shape good and innovative design.
The course consists of 10 modules. These are:
Introduction to UI Design
Brand and personality
Layout
Design principles
Interactivity
Typography
Colour, shapes and effects
Iconography and imagery
Design process
Presenting designs
After completing these modules, you submit a final project and undertake an exam.
Project brief
The project brief is to design the user interface for a new responsive banking application. This application is for a challenger brand looking to disrupt the financial markets. The client wants an intuitive app to help them stand out from the crowd.
The user interface design must be responsive across desktop, tablet and mobile platforms. Your brief is to create the UI for 3 areas of the banking app:
accounts overview page
current account page
my spending page
The screens must also follow the brand tones of:
playful
clear
trustworthy
Project exercises
The UI course focuses on you completing continual practical exercises throughout the learning stage of the course. To coincide with this, you’re also encouraged to work on your final graded project while progressing through modules.
This provides a unique learning opportunity as you're working on a final project that encompasses the subjects you’re learning about. While challenging, this style of study and project work is also incredibly rewarding.
In the following examples, you’ll see the subjects I studied throughout the course. As well as links to view my work in both the module exercises and the final graded project.
1. Moodboards to influence designs
With the first exercise of this course, it was important to hone in on and consider the brand values: playful, clear and trustworthy. Looking at different sources of information for design reference is an effective way to inspire your work. Using a moodboard is one of the best ways to track your design inspirations and refer to when working on projects.
2. Setting up grid systems
Consistency in design is one of the most vital aspects of producing good user interface designs. As well as this, the designs have to be responsive across desktop, tablet and mobile devices. This exercise involved setting up grids that work for each device and ensuring consistency in design.
3. Exploring different UI elements
With so many different states for user interface elements, understanding how to communicate these becomes a vital aspect as a UI Designer. For this exercise, I looked at different design systems from a range of organisations. This provided a wealth of different design perspectives, often for the same UI elements.
4. Choosing the fonts you want to use
Text and their fonts are just as important to user interface design as graphical designs. Text is how we communicate with users and each other. Therefore, it has arguably the most difficult job when creating a digital product. In this exercise, I looked at a wide collection of different fonts to use in my banking application designs.
5. Creating a colour palette
Fundamental to any good design is the use of colour and shapes. These can be instrumental in conveying your brand personality and the intent of your designs. During this exercise, I looked at the use of different colours and colour theory. Afterwards, this helped me decide which colours I wanted to use in my final banking application designs.
6. Generating iconography
So much of how we communicate with digital products and services involves iconography and imagery. Whether it’s a home screen logo or something that informs a user how to communicate with you. For this exercise, I focused on established iconography sets that would work across different devices.
7. Creating the final UI designs
For the final assignment, I had to create the user interfaces for a responsive banking application. These designs had to work across three different platforms: desktop, mobile and tablet.
One of the key recommendations in this course was to work on the final application designs while completing the coursework. This offered a unique opportunity to put my learnings into practice almost as soon as I’d taken this new knowledge on board.
For my final designs, I drew on my knowledge of the banking sector. I focused on the new digital challenger banking organisations currently disrupting the market. These include Sterling Bank, Tide, Monzo, treecard and N26.