Practical web UI/UX

Refactor working interfaces, complete forms, recover from errors, inspect asynchronous states, query records, and test real responsive components and keyboard behavior.

Prerequisite: Experience using websites. No design software, professional design background, or earlier course required. Fifteen lessons and 30 illustrated exercises use an original workshop-booking product. Working HTML interfaces keep references visible while you revise visual hierarchy, spacing, type, forms, feedback, navigation, data views, and responsive components. The capstone lets you repair labels and error recovery independently. All transactions are local demonstrations, not a live service.

Lessons

1. 1

   Design the task before the screen

   A useful interface connects an intention to an understandable outcome. A tidy collection of components is not yet a usable workflow.

2. 2

   Give each screen a clear primary action

   Hierarchy connects content priority to action priority. Prominence should help an informed decision, not hide alternatives or consequences.

3. 3

   Refactor spacing around relationships

   Useful spacing distinguishes groups and makes alignment predictable. Uniform padding everywhere does not express every relationship.

4. 4

   Build a small type system for an application

   Repeated roles should look related. A type system reduces arbitrary choices while leaving room for content and language differences.

5. 5

   Use borders, backgrounds, and elevation deliberately

   Visual separation should explain containment, interaction, or layering. More boxes and shadows are not automatically more structure.

6. 6

   Make forms understandable before submission

   Persistent labels, useful hints, and appropriate controls reduce uncertainty before an error occurs.

7. 7

   Help people recover from errors

   An error should identify the problem, explain a repair, and preserve valid work.

8. 8

   Design consequences, confirmation, and undo

   Actions differ in cost and reversibility. Confirmation and undo solve different problems.

9. 9

   Represent waiting, failure, and success honestly

   A click starts a request; it does not prove the request succeeded. Interface state should follow what the system knows.

10. 10

    Keep location and task context visible

    Navigation should tell people where they are, what they can do, and how to return without losing relevant context.

11. 11

    Design search, filters, and useful empty states

    A data view must explain what is included, why nothing is visible, and how a person can recover.

12. 12

    Stress a real component with width and content

    Responsive work changes the composition when content constraints require it. It should not depend on ideal strings or a single device label.

13. 13

    Operate the interface without a pointer

    Semantics, focus, and keyboard behavior are part of the design, not finishing touches added after styling.

14. 14

    Build consistency through roles and contracts

    Reusable components need consistent states and behavior as well as shared color and spacing values.

15. 15

    Refactor and test a complete booking interaction

    A convincing revision combines visual craft, state handling, and evidence. It must survive more than a preferred default screenshot.