Professional Certificate in UI/UX Design

About this Course

In this course, you will gain an understanding of the critical importance of user interface design. You will also learn industry-standard methods for how to approach the design of a user interface and key theories and frameworks that underlie the design of most interfaces you use today.

Through a series of case studies on commercial systems - many of which you likely use on a regular basis - we will illustrate the benefits of good design. We will also demonstrate how the costs of bad design can often be severe (in user experience, money, and even human lives).

You will then gain a high-level understanding of the user-interface design process. You will be introduced to common design scenarios - e.g. improving on existing designs and starting a new design from scratch - and the general design processes that tend to be used for each scenario.

Finally, we will begin introducing the large body of existing knowledge on design by providing overviews of core user interface design theories and concepts. This key foundational information will help you avoid “reinventing the wheel” when you are designing your interfaces in this specialization.

What will you learn?

By earning this certification, you will be able to:
Influence people’s perceptions of a product through UI design.

Interpret the tone and personality of a product’s brand and convey that throughout the UI.

Systematically and consistently use sizing, spacing, alignment, and other systems to bring a sense of order to designs.

Design for different screen sizes, from responsive desktop to native mobile.

Instantly spot common mistakes and articulate them to others with a sharpened sense of what makes good UI work.

Give accurate feedback on UI designs with the vocabulary and skills to action them.

Establish and apply best practice workflows from low fidelity ideation to high fidelity designs.

Understand the role of animation in UI and use animations and transitions effectively in your designs.

Design your interface with intent and articulate your decisions and rationale to others.

Present your work in the most effective way.

Ask for and handle feedback.

Communicate confidently with stakeholders, such as developers, product managers, quality assurance testers and clients throughout the design process.

Prepare your files for handover to developers.

This course is suited to anybody interested in designing beautiful interfaces for digital products.
Graphic designers and digital designers who want to up skill to UI design.

UI designers who want to strengthen their knowledge and craft.

UX professionals who want to become more rounded product designers.

Anybody with a design background looking for a creative job in tech.

Course Outline

01. Introduction and Overview

What do UI and UX mean?
What is the difference between UI and UX?
How do UI and UX work together?
What sort of skills do you need for UI and UX?
How do you learn UI and UX design?
What kind of employment opportunities are available in UI and UX?
Case Study: AirBnB vs. CouchSurfing

02. UI/UX Design Process

Design Process Introduction
Designing to Address a Problem without Solution Ideas
Designing for a known solution direction
Designing to iterate on/improve an existing solution
Common Elements
Usability Engineering and Task-Centered Approaches
Use Cases, Personas
Intro to Design-Centered Approaches
Design-Centered Methods & When They Work Best
Practical Techniques for someone who isn't a trained designer
Understand the role of the UI designer and why good UI matters.
Tasks and Scenarios

03. UI/UX Design Content Accessibility

Understanding accessibility
Assistive technology
Hierarchy
Color and contrast
Layout and typography
Writing
Imagery
Sound and motion
Implementing accessibility

04. UI/UX Visual Design

Brands and product guidelines
Visual design principles
Visual grammar

05. UI/UX Design languages

Google material platforms
Material design guideline
Apple HCD guidelines
Mobile, Web, Watch
Style guides and its importance

06. Elements of Style - Color & Aligning

Study of icons and their evolution
Icon usage guidelines
Icon creation using grids
Creating Product Icons

07. Elements of Style - Typography

Types of typefaces
Typography Terminology
Text Anatomy
Choosing Fonts for UI
Guidelines for type
Styling Text
Pairing Fonts

08. Elements of Style - Iconography and imagery

Study of icons and their evolution
Icon usage guidelines
Icon creation using grids
Creating Product Icons

09. UI/UX Design Fundamentals

How & when to use common UI patterns
Menus
Tabs
Bottom tab bar
Buttons
Accordion
Carousel
Breadcrumbs
Modals
Forms
Patterns, and Concepts etc.

10. Sketching & Wireframing

How do you sketch with Wireframing?
How do you layout a wireframe?
Practice a sketching session for an existing website or mobile application of your choice. Start with sketching on a whiteboard or your notebook.
Sketch wireframes for your class project.

11. Paper Prototyping Process.

What is paper prototyping?
Paper prototyping theory
Tricks for Paper Prototyping
Presenting Paper Prototypes
How to carry out paper prototyping

12. Complete guide to paper prototyping

What is paper prototyping?
Benefits of paper prototyping
Drawbacks of paper prototyping
How to make a paper prototype
Testing paper prototypes
Paper prototyping examples
Paper prototyping templates and resources

13. Hierarchy and Layout

We'll look at how to use hierarchy in your design execution to draw attention to the goals of the screen, and generally make users feel more comfortable and awesome.

14. Implementation For UI/UX Design Process

Project- 01- Web UI/UX Template Design 1 Understand the user

Interpreting wireframes and sketches
Wireframes
Think outside the wireframe

15. Implementation For UI/UX Design Process

Project- 01- Web UI/UX Template Design

Starting your design
Presenting information
Low fidelity iteration
Mid/high fidelity iteration
Context and user recognition
Navigational and systemic interface design
Distributional design of interface

16. Design Feedback

Project- 01- Web UI/UX Template Design 1. Get 1-on-1 feedback on your work

17. Presenting UI/UX Designs

Presenting designs
Critique and feedback
Mock-ups and final designs
Organising files
Deliverables to developers
Preparing files for handover

18. Implementation For UI/UX Design Process

Project- 02- Mobile App UI/UX Template Design

Understand the user
Interpreting wireframes and sketches
Wireframes
Think outside the wireframe

19. Implementation For UI/UX Design Process

Project- 02- Mobile App UI/UX Template Design

Starting your design
Presenting information
Low fidelity iteration
Mid/high fidelity iteration
Context and user recognition
Navigational and systemic interface design
Distributional design of interface

20. Design Feedback

Project- 02- Mobile App UI/UX Template Design 1. Get 1-on-1 feedback on your work

21. Presenting Designs

Presenting designs
Critique and feedback
Mock-ups and final designs
Organising files
Deliverables to developers
Preparing files for handover

22. Interaction and Prototyping Process.

Learn the power of prototyping and testing an idea. Understand different methods of prototyping and their levels of fidelity.
Discuss the motivation behind the prototyping, such as newly discovered user goals, business needs and improved functionality.

Creating Your Work Portfolio