Course · UX & UI Design
Websites and apps people love to use
0.1 / What it's about
Good interfaces make doing the right thing easy.
UX & UI Design shows you how to design websites and apps that are clear, consistent, and easy to use on any screen: from grids, typography, and components to clickable prototypes and developer handoff. The course starts with three UX modules (concepts, user flows, deep dive): how people use a website. This is followed by five UI modules: how it looks and feels.
As a consistent example, you will follow Velowerk, a small bicycle workshop in Basel that is getting a new website with online booking.
Key questions of the course:
QUESTION 1
What makes an interface clear and easy to use?
QUESTION 2
How do I build a layout that works on every screen?
QUESTION 3
How do components become a unified system?
QUESTION 4
How does a design get tested and fully implemented?
Course framework:
TARGET AUDIENCE
Creators
Students in graphic, media, web, or UX design, with no prior programming knowledge.
SCOPE
8 × 90 mins
Plus final project; each module can also be taken individually.
FORMAT
Hands-on
Three UX modules (A–C) and five UI modules; brief input, tools, and practice on an ongoing project.
REFERENCE
Cross-references
Connections to typography, accessibility, visual communication and design thinking.
0.2 / Learning objectives
After the course, you will design interfaces systematically.
After the course, you will be able to:
0.3 / Course content
All modules and sections at a glance.
Five UI modules, each with a core question and a tool; preceded by the three UX modules A, B, and C (concepts, flows, in-depth study). Click on a module to open it.
MODULE 01
What makes a good interface?
MODULE 02
Where does everything go, on every screen?
MODULE 03
How do you read on a screen?
MODULE 04
What does an interface consist of?
MODULE 05
How does a design become a product?
0.4 / Procedure per module
Each module follows the same structure.
The rhythm stays the same, the content changes:
01
Introduction (10 mins)
A question or problem from day-to-day project work.
02
Input (20 mins)
Fundamentals and best practices.
03
Tool (15 mins)
Explore the topic in the interactive tool.
04
Exercise (35 mins)
Application to a project of your own.
05
Reflection (10 mins)
What are you adopting into your workflow?
In each section, you'll find a key takeaway in bold with a lightning bolt icon, an exercise behind the blue button, a read-aloud function, and on many cards, examples behind the lightbulb icon.
0.5 / Record of achievement
The end result is a tested website.
Final project: a small website for a real or fictitious offering, as a clickable prototype with a component library, in five steps:
01
Analyse
Review existing solutions, determine main action.
02
Structure
Grid, spacing, and layout for three widths.
03
Design
Type scale, colours, and components with states.
04
Prototypes
Build a clickable user flow and test it with real users.
05
Hand over
Documenting views, states, tokens and copy.
Evaluation criteria: clear hierarchy, consistent system, works on mobile and desktop, tested, fully handed over.
0.6 / Literature and Sources
Good interfaces have role models.
• Krug, S. (2014): Don’t Make Me Think, Revisited. New Riders.
• Wathan, A. & Schoger, S. (2018): Refactoring UI.
• Frost, B. (2016): Atomic Design.
• Norman, D. (2013): The Design of Everyday Things. Revised edition. Basic Books.
• Google: Material Design 3. m3.material.io
• Apple: Human Interface Guidelines.
• Wroblewski, L. (2011): Mobile First. A Book Apart.
Please note: The years indicate the first edition; many titles are available in newer editions and in German.