UI/UX Design (WDU202c)
Credits: 3

Description:
The UI/UX Design Specialization brings a design-centric approach to user interface and user experience design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. In this sequence of four courses, students will summarize and demonstrate all stages of the UI/UX development process, from user research to defining a project’s strategy, scope, and information architecture, to developing sitemaps and wireframes. Students’ll learn current best practices and conventions in UX design and apply them to create effective and compelling screen-based experiences for websites or apps.

Final Exam is included of Final Theory Exam (TE) & Final Practical Exam (PE): 100%
Students who complete all MOOCs before the course deadline will receive 1 bonus point; otherwise, no bonus point will be awarded.
Condition to pass: TE>=4 and PE>=4 and FR = (TE+PE)/2 + bonus >=5

Learning outcomes:
Explain underlying concepts and principles related to UI/UX design
Apply the key formal elements of clear, consistent, and intuitive UI design to the to the design of a static screen-based interface
Apply current best practices and conventions in UX design and employ the fundamental principles of how UX design functions to shape an audience's experience of a given body of content
Define the strategy and scope of the site, as well as develope its information architecture and overall structure
Apply the UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes

Student tasks:
1. Student must get the certification of UI/UX Design Specialization specialization specialization from Coursera to be accepted to the final examination.
2. Complete the online course to be allowed to take Final Exam

Tools:
- Internet

Materials:
description: https://www.coursera.org/specializations/ui-ux-design
publisher: Coursera
note: SPEC: UI / UX Design Specialization
description: https://www.coursera.org/learn/visual-elements-user-interface-design
publisher: Coursera
note: MOOC 01: Visual Elements of User Interface Design
description: https://www.coursera.org/learn/ux-design-fundamentals
publisher: Coursera
note: MOOC 02: UX Design Fundamentals
description: https://www.coursera.org/learn/web-design-strategy
publisher: Coursera
note: MOOC 03: Web Design: Strategy and Information Architecture
description: https://www.coursera.org/learn/web-design-wireframes-prototypes
publisher: Coursera
note: MOOC 04: Web Design: Wireframes to Prototypes

Assessments:
category: PE
type: Final exam
weight: 50.0
duration: 120'
question_type: CLO1, CLO2, CLO3, CLO4, CLO5
grading_guide: All studied courses.
note: by Exam Board
category: TE
type: Final exam
weight: 50.0
duration: 60'
question_type: CLO1, CLO2, CLO3, CLO4, CLO5
no_question: Computer gradable
knowledge_and_skill: 50
grading_guide: All studied courses. Each module of course contributes 2-3 questions.
note: by Exam Board

Schedule:
session: Specialization Introduction (Offline 1)
Visual Elements of User Interface Design
- Course Overview
- What IS a user interface anyway?
- Introduction to User Interface Design
- Interface Conventions
- Approaches to Screen-based UI
- Formal Elements of Interface Design
- Introduction and Project Brief
- Define the Look and Feel
learning_outcomes: IT
session: Visual Elements of User Interface Design
- Active Elements of Interface Design
- Static to Active
- Composing Interaction
- Points of Interaction
- Create a Sample Pattern Library
learning_outcomes: IT
session: Visual Elements of User Interface Design
- Create a Sample Pattern Library
- Composing the Elements of Interface Design
- Hierarchy and Composition
- Putting it all together
learning_outcomes: IT
session: UX Design Fundamentals
- Course Overview
- Ideation, Articulation, Development
- Ideation
- User Research
- Naming and Mission
- Plan Your App
learning_outcomes: IT
session: UX Design Fundamentals
- Usability
- Working with Wireframes 1
- Working with Wireframes 2
- Working with Wireframes 3
- Setting the Visual Direction
- Feeling Real
- Making a Prototype using Adobe XD
- Create a Clickable Prototype
- Next Steps
learning_outcomes: IT
session: Web Design: Strategy and Information Architecture
- Course Introduction
- The User Experience Process
- Defining User Experience
- The UX Process
- Waterfall vs. Agile
- Web vs. App
- Developing your Project Idea
- Asking Good Questions: Determining Strategy
- Research
- Defining Needs and Audiences
- Preparing your Strategy
- Bonus Material
session: Web Design: Strategy and Information Architecture
What is in and What is Out: Outlining Scope
- Content and Functionality Requirements
- Outlining Your Scope
- Bonus Material
- Getting your Ducks in a Row: The Sitemap
- Introduction to Sitemaps
- Sitemapping
- Sitemap Testing with Treejack
- Creating Your Sitemap
- Next Steps
learning_outcomes: IT
session: Web Design: Wireframes to Prototypes
- Course Overview
- Not Getting Caught up in the Details: Wireframes
- Introduction to Wireframes
- Responsive Design
- Navigation Systems
- Common Design Patterns
- Homepage Content Strategies
- Build Your Wireframes
learning_outcomes: IT
session: Web Design: Wireframes to Prototypes
- Finally, Make it Beautiful: The Mockup Phase
- Introduction to Visual Mockups
- Design Principles and Whitespace
- Web Typography
- Web History, Skeuomorphs & Flat Design
- Moodboards
- Create Your Mockups
- Bonus Content
learning_outcomes: IT
session: Web Design: Wireframes to Prototypes
- An Excursion to Codelandia
- Welcome to Codelandia
- Is coding important?
- Refine Your Mockups
- Bonus Material
learning_outcomes: TU
session: Web Design: Wireframes to Prototypes
- Putting it all Together: Final Presentation
- Making Clickable Mockups
- Clickable Prototypes
- Dark Patterns
- Final Project Submission
learning_outcomes: TU
session: 'Review Spec
Deadline of Coursera Completion: End of Friday of the week.
learning_outcomes: T