top of page


We will watch this video on UI Design. Design is evolving and user experience is a large part of the graphic design industry.

Classroom Assignment - Part 1

UI Mobile Design Photoshop

For Part 1 you will be using templates (or creating your own) to learn how mobile device pages will look.
Your next step is you will add interactivity to your design using Adobe XD. 

> CLICK HERE to download a interface template OR create your own.
If you chose to create your own, you will click on the MOBILE document size and then iPhoneX. Once you have done that, then you will create multiple artboards. 


A mobile user interface (mobile UI) is the graphical and usually touch-sensitive display on a mobile device, such as a smartphone or tablet, that allows the user to interact with the device's apps, features, content and functions.

For this assignment you will work in a group of 2 to come up with a design concept for an app interface. 

You will use one of the following wireframe templates to get you started. 
You MUST change them completely.
You can not use anything from the template except for the overall shape. It is only to guide you on size of shapes and text. 

All fonts must be changed.
All colours must be changed.
All images must be changed.
All icons must be changed. 
All sliders must be changed. 

This MUST be a complete redesign. The templates are only there to guide you to what each screen page should look like. 


You can chose one of the following topics for your app design.

  • Travel

  • Recipe

  • Financial

  • Social Media

  • Fashion

  • Health or fitness

Must Have:

You will need to complete 6 frames.
You can choose which 6 you would like to create. 
Each Artboard will have their own folder, neatly organized with all assets.
All layers MUST be named.

ps-size (1).jpg

Student Examples

Eric - Performance Task UI.png
1Rebecca UI Design FPT.png
Leen_Daoud_performance task.png
bottom of page