Lectures

• GUI Design Basics
• iOS Human Interface Guidelines
• Icon Design

UI Design

• Summary of UI Design Do’s and Don’ts
• A Comprehensive Guide to Mobile App Design
• iOS vs Android App UI Design: The Complete Guide
• Button UX Design: Best Practices, Types, and States

Icon Design

• 10 Essential Tips for UI Icons
• Small Elements, Big Impact
• Designing for UI
• UI Design Glossary
• The Noun Project
• Free Icons Sets

UI Patterns

• 13 basic mobile UI patterns
• iospirations
• screenlane
• mobile-patterns
• mobbin
• ui-patterns
• design vault
• UI movement

• Choose a design direction as a team and apply to all the screens in your user flow.
• Someone in the team may want to finalize design guidelines for the team to follow and/or you may want to co-edit the same file.
• Link between the screens for people to be able to navigate around easily in class.

How to Turn In:

• Share prototype link in the Slack channel #project1
• We will test the prototypes and critique the designs in class on Tuesday.

How to create a clickable Hi-Fi Prototype

1. How to create it? Watch the same provided demo video to learn how to create a simple interactive prototype and how to export the link to share with your classmates on Slack.
   • Double-check that the link you share says “Anyone with the link” can view it. 
2. Required Design Aspects:
   • Have actual text, icons, photos/illustrations, and so on. It should look more refined and more understandable for the user to test. 
   • Have a consistent color scheme, typography, icon set, and use of hierarchy throughout.
3. Choice of Style: The design could be based upon the style guidelines of your existing brand or it can be your own updated design style. 
4. Optional Free UI Kits: You are allowed to use built-in interface elements from existing Free Figma UI Toolkits, such as the keyboard, tab bar, nav bar, icons. Just make sure it is free and give the the creator credit in your Case Study at the end of the project. Once downloaded and opened, you just copy and paste over the elements you want into your own file.
   • You can visit one of the Free Figma UI Kit websites listed below.
     • iOS Toolkits. (Sketch files listed can open in Figma)
     • Google Material Toolkit. (kits are under “Design Resources”)
     • Microsoft Toolkits
   • You could also try searching for a UI Kit for your specific brand to see if they have one.
5. Human Interface Guidelines: If you don’t use a UI Kit, you will want to reference the lecture on Human Interface Guidelines or visit the Human Interface Guidelines website to look at standards of sizing and placement.
6. Tuesday: You will be testing people on this hi-fi prototype next week, this will provide you the feedback to make final decisions on your redesign.

Student Hi-Fi Prototype Examples

• Tinder 
• NPR 
• Zoom 
• Amazon Prime 
• Pinterest
• Redbox (this one uses animation which isn’t required)