ICEPT
IQRA UNIVERSITY ISLAMABAD
COURSE DESCRIPTION FORM
INSTITUTION: Iqra University, Islamabad Campus (A campus of Iqra University, Karachi)
|
Course Title
|
UI/UX Design
Requirements to enter the course: Basics of digital design tools (Adobe Photoshop and Adobe Illustrator) and concepts will be helpful but not required. Strong motivation, interest in technology, empathy for people and passion for design will be required.
Software: Adobe XD, Figma
|
|
Course Description
|
Every digital interface/interaction (e.g., web and mobile application, car dashboard, smart appliance) was designed to solve a problem or to make our lives better, easier, and more successful. Every time you use your phone, the buttons you push, the gestures to swipe up, down, left right, the font choices, the colour scheme—all these were designed by a UI/UX designer. In other words, UI/UX is the communication layer between the computer software and the user. This hands-on, project-based course, explores the principles and practice of user interface and user experience design for digital platforms.
|
|
Topics Covered in the Course
|
|
1
|
UI/UX Overview
- Intro to UI/UX
- EX1: Good/Bad UX
· X-hour: Notion & Figma Setup & Adobe XD
· Design Thinking
· How to express ideas. Tools (Paper, Figma, other?). Mini intro to Figma
· How to share first ideas with others, how to present and explain
- HW1: Team Design Sprint
- Reading: Empathy Fieldguide
|
|
2
|
User Research
- How to Identify Requirement of UX
· EX2: Defining UX Design, Why it’s Necessary
- X-hour: Figma Adobe XD Basics
- How to identify user needs
- The role of design in problem definition.
· User Research, Trendy UX Designs
· Pro designer mindset – Design as a problem solving tool.
· Reading: Interaction Design,
|
|
3
|
User Journeys
· EX3: User Journey Maps + HMW
- X-hour: Figma Grayscales, Creation of UI in XD
- Intro to Design system
- How to prioritise ideas: how to choose one of the ideas after ideation
- Finding solutions & constraint cards
· HW3: Sketch + Revise
|
|
4
|
Grayscales & User Testing
· UX Principles
· EX4: Blocking Grayscales + User Flow
· X-hour: Figma Prototype
· Understanding user testing
· Typography: Font size, serif/sans serif
· Layout: Box model, grids & containers, negative space
· Colour: Colour picking methods
· Typography: Font weight
· Style: corner radius
· HW4: Grayscales + Usability Testing
· Reading: Design of Everyday Things
|
|
5
|
UI Principles
· EX5: UI Analysis
- X-hour: Figma UI Part 1
- Colour: colour contrast & accessibility
- Colour: Primary, secondary, tertiary colours
- Typography: Hierarchy; Titles & body
- Style: design direction
- Layout: Alignment
- Imagery: How to use imagery
- HW5: UI Design in 3 Sprints
- Reading: Refactoring UI
|
|
6
|
Topics in UI
- Non-Traditional UI
- Dealing with Design and Trends
· EX6: Find UI in other Technologies
- X-hour: Figma and XD UI Part 2
- UI Special Topics
· HW6: Create UI for other Technologies
· Reading: Creating UI Design
|
|
7
|
Style Guide
- UI Components
- How to find and use UI kits
· EX7: Style Guide Analysis
- X-hour: Figma Advanced
- Mobile Native design resources
- Desktop design resources
· HW7: Style Guide for Responsive UI
· Reading: Visual Display of Information
|
|
8
|
Special Topics & Final Project
· Start of final project (Complete UI Design of any Application Plus Screen Designing for application understanding)
- X-hour: Portfolio Workshop on Behance
- Design for Inclusion
· Final project
|
|
