Website Design & UX Basics

The target audience determines every design decision. A website for young children needs large buttons, simple language, bright colours, and few choices because young users have limited reading ability, shorter attention spans, and less experience with digital navigation. A website for professionals needs a clean layout, advanced search features, and dense, precise information. If the designer ignores the audience, the product may be technically functional but completely unusable for its intended users — which makes it a design failure. Knowing the audience first ensures that every decision (typography, navigation, content, colour) serves the people who will actually use the product.

This demonstrates the principle of feedback. Feedback means the system tells the user what happened as a result of their action. When a button changes colour after being clicked, the user receives visual confirmation that the system registered their input — they do not have to wonder “did that work?” or click again unnecessarily. This reduces user frustration and errors, and is a fundamental principle of good interface design.

This criterion is weak and not testable. “Easy to use” is subjective — there is no way to objectively measure whether the product meets this standard. A design criterion must be specific and testable from the user’s perspective. An improved version: “Users who have not seen the website before can complete the main task (e.g., find product information and add an item to the cart) within 2 minutes without assistance.” This is testable: you can observe users completing the task, measure time taken, and record whether assistance was needed. It is written from the user’s perspective and creates a clear pass/fail standard for evaluation.

Both a wireframe and a prototype are design planning tools created before the final product is built. A wireframe is a simple, low-detail layout sketch showing the position of elements (navigation, content areas, buttons) with no colour, images, or styling. It is created early in the design process to plan structure without investing time in aesthetics. A prototype is an early working model — it may be interactive and looks closer to the finished product, but is not fully built. It is used for testing with real users to identify problems before the final product is built. The key difference: a wireframe is a sketch that shows layout; a prototype is an interactive model that allows testing of functionality and user flow.

Decision 1 — Large, High-Contrast Text: Elderly users commonly experience reduced visual acuity and difficulty distinguishing colours with low contrast. Using a minimum font size of 18–20px and a high contrast ratio (dark text on light background, or vice versa) directly addresses this. This applies the principle of accessibility and improves usability for the target audience. Decision 2 — Simple Navigation with Large Click Targets: Elderly users may have reduced fine motor control, making small buttons and links difficult to click accurately. Navigation should be simple with large, well-spaced clickable areas. This applies both ergonomics (fitting the physical capabilities of the user) and simplicity (removing unnecessary complexity). Both decisions directly serve the target audience and can be tested against measurable criteria.

UX (User Experience) is the overall quality of a user’s interaction with a product — whether it feels intuitive, achieves their goals, and leaves them satisfied. UI (User Interface) is the specific set of visual elements the user interacts with: buttons, menus, icons, typography, and layout. Example: Imagine a restaurant booking website. The UI includes the colour of the “Book Now” button, the font used for the menu, and the layout of the reservation form. The UX is whether the user felt confused or confident throughout the booking process, how long it took them to complete, and whether they would return to use the site again. You can have a visually beautiful UI (attractive buttons and colours) but poor UX (the user can’t find the booking form, or the process requires too many steps). Good design prioritises UX and uses UI to support it.

A wireframe is a simple, low-detail layout sketch of a web page. It should include: navigation bar position, main content area placement, button/form locations, heading and text block positions (as labelled boxes). It should NOT include: actual images, colour schemes, decorative styling, or exact typography. Wireframes exist to plan structure efficiently without investing time in aesthetics too early.

Consistency means using the same style, colours, and interaction patterns throughout the product. It matters because users learn how a product works through repetition. If a “Submit” button is blue on one page and red on another, users cannot build a mental model of how the product works. Consistent design reduces cognitive effort — users do not have to relearn how to interact on each page. It also builds trust and makes the product feel professional and reliable.

Weak: “The website should be nice and easy to use.” — This is subjective and not testable.
Strong: “Students can search for and locate a book title in the library catalogue within 60 seconds, without assistance, using the search function.” — This is specific (search function, 60 seconds), measurable (timed observation), written from the user’s perspective, and creates a clear pass/fail evaluation standard.

Ergonomics is the study of designing products to fit the physical and cognitive needs of human users. In website design: buttons must be large enough for fingers or a mouse pointer to click without error (physical ergonomics); the layout must not overwhelm working memory with too many choices at once (cognitive ergonomics); text must be readable without straining the eyes (visual ergonomics). An ergonomic website reduces fatigue and errors, especially for users with disabilities, elderly users, or users on mobile devices with small screens.

This violates the principle of simplicity. Simplicity means including only necessary elements — too many choices creates cognitive overload (sometimes called “choice paralysis”) where the user cannot decide where to go. The fix is to organise the 20 items into logical categories of 4–6 items each, using dropdown submenus. For example, instead of 20 top-level items, you might have 5 main categories (Home, Products, About, Support, Contact) with subcategories appearing on hover. This makes navigation faster and less overwhelming.

The MYP Design Cycle is a structured process for creating solutions to design problems. The four stages are: 1. Inquiring and Analysing (understanding the problem, researching the context and target audience); 2. Developing Ideas (generating and evaluating design options, creating a specification); 3. Creating the Solution (building the product according to the plan); 4. Evaluating (testing the product against the design criteria and reflecting on improvements). Each stage corresponds to a MYP Design Assessment Criterion (A, B, C, D).

A wireframe shows the layout of a single page — where elements are positioned. A storyboard shows a sequence of screens or steps, illustrating the user’s journey through the product. For example, a storyboard for a shopping website might show: landing page → product search → product page → add to cart → checkout → confirmation screen. Storyboards are useful for planning the overall flow and navigation structure before designing individual pages in detail.

1. High contrast colour scheme: Use dark text on a light background (or vice versa) with a contrast ratio of at least 4.5:1. This ensures text remains readable for users with low vision or colour blindness. 2. Alt text for all images: All images should have descriptive alternative text in the HTML. Screen reader software reads this text aloud to users who cannot see the image. Without alt text, visually impaired users lose access to all image-based content. Both decisions directly apply the principle of accessibility and are testable against clear standards (contrast ratio can be measured; alt text can be verified in code).