Web Design and Development: UI and UX Principles

Websites often disappoint for predictable reasons. Design starts from the organisation chart rather than user tasks, decisions are made on personal preference, visual design is finished before the structure is tested, accessibility is checked at the end, and designers and developers work from different assumptions. The result is rework, low completion rates on key services and complaints that could have been avoided.

This programme follows a human-centred design process from start to finish. It moves through five stages: understanding users and their tasks, structuring content and navigation, designing the interface, building it in a way that is responsive and accessible, and testing and improving it with evidence.

Built on recognised practice. The programme references ISO 9241-210 on human-centred design, the W3C Web Content Accessibility Guidelines (WCAG), widely used usability heuristics, and established design process models such as the Double Diamond. Participants learn how to apply them in everyday design and development work, not only what they say.

Decisions this programme improves. Which user needs and tasks a site should prioritise; how to organise content and navigation; which design patterns to reuse; when a design is ready to build; how to meet accessibility requirements; and which usability findings to fix first.

How it is delivered. Twenty hours across five sessions, built around one running case: redesigning a public-facing service website. Participants create personas and user journeys, run a card sort, sketch and prototype key pages, check them against accessibility criteria and run a short usability test. Exercises use freely available prototyping tools and standard HTML and CSS; no prior design software skills are assumed.

In-house option. For organisations, the programme can be tailored to your own websites, digital services, brand guidelines and technology stack, and delivered for design, development, content and business teams together.

Who Should Attend

Web and digital teams: web designers, front-end developers and webmasters

Digital service staff: product owners, digital service managers and business analysts

Content professionals: content editors, communication and marketing staff who manage websites

IT professionals moving into design or front-end development roles

Project managers overseeing website or portal projects

Objectives

Explain the difference between user interface design and user experience design and how they work together

Plan and conduct simple user research, including interviews and analysis of existing data

Create personas, user journeys and task flows that guide design decisions

Structure content and navigation using card sorting and information architecture principles

Produce wireframes and interactive prototypes for key pages

Apply visual design principles for layout, typography, colour and hierarchy

Use a design system and reusable components to keep interfaces consistent

Build responsive page layouts with semantic HTML and CSS

Check a design against WCAG accessibility criteria and fix common issues

Run a usability test, prioritise findings and plan improvements

Course Outline

Understanding Users and Their Tasks

UI and UX: definitions, roles and the design process
Human-centred design principles
User research methods: interviews, surveys, analytics and support data
Personas, scenarios and user journey maps
Defining the problem and setting measurable experience goals
Designing for bilingual and right-to-left audiences

Structuring Content and Navigation

Information architecture and content inventories
Card sorting and tree testing
Navigation patterns and labelling
Task flows and user flows
Writing clear content for the web
Search and findability

Designing the Interface

Sketching, wireframing and prototyping
Visual hierarchy, layout grids and white space
Typography, colour and imagery
Forms, feedback and error messages
Design systems, components and style guides
Mobile-first and responsive design

Building Accessible, Responsive Front Ends

How design is handed over to development
Semantic HTML and the structure of a page
CSS layout with flexbox and grid, and responsive breakpoints
Web accessibility: WCAG principles and common failures
Keyboard navigation, screen readers and colour contrast
Performance and its effect on user experience

Testing, Measuring and Improving

Usability heuristics and expert reviews
Planning and running moderated usability tests
Web analytics and simple A/B testing
Prioritising findings and managing a design backlog
Appropriate use of AI tools in research, content and prototyping
Action plan: improving user experience on your own sites

Competencies

Human-centred design process

User research and persona development

Information architecture and navigation design

Wireframing and prototyping

Visual interface design and design systems

Responsive front-end development with HTML and CSS

Web accessibility and WCAG compliance

Usability testing and evaluation

Evidence-based design improvement

Riyadh

Train in Riyadh with access to Elite Academy’s full portfolio of professional programs. In a city known as a rapidly transforming regional capital at the center of major public- and private-sector development, organizations and professionals can join upcoming courses or request any program to be arranged locally. Professional training in Riyadh is not limited to a specific group of subjects. Elite Academy makes its complete portfolio available in the city across management, business, technical and industry-focused disciplines. With a rapidly transforming regional capital at the center of major public- and private-sector development, Riyadh provides an effective setting for international learning. Use the schedule below to view courses already planned for the destination, or contact our team to request another program and preferred dates in Riyadh, subject to scheduling and delivery requirements.