About Modules Projects Documents Contact
← Back to Home UI Design

M322 - Designing and Implementing User Interfaces

Grade: 5.0
40+ Hours
6 Competencies

This module taught me to plan an interface before building it. Starting from the users and their tasks, I created sitemaps, wireframes and a style guide in Figma, turned them into a clickable prototype and finally implemented consistent components, navigation, forms and feedback in HTML and CSS, with accessibility and usability in mind from the start.

What I Learned

Core competencies and skills developed throughout this module

1

Understanding Users & Their Tasks

Started every design from the people who will use it and the goals they want to reach.

  • Defining target groups and personas
  • Describing use cases and user flows
  • Deriving requirements for the interface
  • Prioritising content by importance for the user
2

Sitemaps & Wireframes

Planned the structure of the application and the layout of each page before thinking about colours or details.

  • Creating a sitemap as a page overview
  • Sketching low-fidelity wireframes
  • Designing a consistent grid and layout system
  • Planning responsive layouts for mobile and desktop
3

Style Guide & Prototyping in Figma

Defined the visual language in a style guide and built an interactive prototype in Figma to test ideas early.

  • Choosing colours, typography, spacing and icons
  • Building reusable components and variants in Figma
  • Linking screens into a clickable prototype
  • Collecting feedback through simple usability tests
4

Components & Navigation

Implemented the design as consistent, reusable building blocks and a navigation that always shows users where they are.

  • Translating the style guide into CSS custom properties
  • Building buttons, cards and lists as reusable components
  • Marking the active page and providing breadcrumbs
  • Keeping interaction states (hover, focus, disabled) consistent
5

Forms & Feedback

Designed forms that are easy to fill in and give clear, immediate feedback on success and errors.

  • Using visible labels and sensible input types
  • Writing error messages that explain how to fix the problem
  • Showing success messages and loading states
  • Asking for confirmation before destructive actions
6

Accessibility & Usability

Checked the interface against accessibility guidelines and the dialogue principles of ISO 9241-110.

  • Ensuring sufficient colour contrast according to WCAG
  • Supporting keyboard navigation and visible focus
  • Using semantic HTML, alt texts and ARIA where needed
  • Applying self-descriptiveness, error tolerance and conformity with expectations

Code Examples

Practical examples from the module

tokens.css 
/* Design tokens from the style guide, defined once
   and reused by every component */
:root {
    --color-primary:   #2f5d50;
    --color-surface:   #faf8f4;
    --color-text:      #1d1d1b;
    --color-error:     #b3261e;

    --font-body:       "DM Sans", system-ui, sans-serif;
    --space-sm:        8px;
    --space-md:        16px;
    --radius:          10px;
}

.button {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: var(--radius);
    font-family: var(--font-body);
}

.button:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}
contact-form.html 
<form action="send.php" method="post" novalidate>
    <!-- Every field has a visible label -->
    <label for="email">E-mail address</label>
    <input
        type="email"
        id="email"
        name="email"
        autocomplete="email"
        required
        aria-describedby="email-error"
        aria-invalid="true">

    <!-- The error explains what went wrong and how to fix it -->
    <p id="email-error" class="field-error" role="alert">
        Please enter a valid e-mail address, e.g. name@example.ch.
    </p>

    <button type="submit" class="button">Send message</button>
</form>

Skills Acquired

Technologies and concepts mastered in this module

Figma User Flows Wireframing Prototyping Style Guide Design Tokens CSS Custom Properties UI Components Navigation Design Form Design Accessibility (WCAG) Usability Testing

Key Takeaways

  • Design for the user, not yourself: Every decision starts with the user's task.
  • Plan before you style: Structure and layout come before colours and details.
  • Consistency builds trust: A style guide keeps every page looking and behaving the same.
  • Good errors help: A message should explain what went wrong and how to fix it.
  • Accessible is better for everyone: Contrast, focus and labels help all users, not just some.