Chapter 1: Design web application

Designing a web application is a critical phase in software development that directly influences user experience, functionality, and overall success of the product. In Kenya’s fast-growing digital economy, where businesses ranging from banking institutions to county government services increasingly rely on web applications, a well-conceived design is essential for meeting user needs and achieving operational efficiency. This chapter explores fundamental design principles that guide software developers in crafting web applications that are intuitive, accessible, and visually appealing. Through these principles, developers ensure web applications serve diverse Kenyan users effectively, from urban professionals accessing online banking platforms to rural farmers using e-commerce portals.

1.1 Design Principles

Design principles are the agreed rules that guide how a web application is planned before any code is written. They cover who the users are, how content is organised, how screens look, how people interact with them and how the application stays usable for everyone. A developer who applies them early avoids redesigning screens after the code is finished. Example: a Mombasa tour operator planning an online safari booking application first decides who will book, what they want to do, how packages are grouped, and which colours and fonts suit the brand, and only then draws the screens.

Kenyan users reach web applications on a wide range of phones and computers, with different data budgets and reading habits. Each principle in this topic therefore ends in a decision the developer can test: a goal written down, a menu named, a colour checked for contrast, a button given a clear label.

1.1.1 User-centered Design

User-centered design (UCD) is a way of working in which the needs, limits and habits of the people who will use the application drive every design decision. The team studies the users, designs a draft, tests the draft with real users, and repeats until the application fits them. Example: a Nakuru poultry-feed supplier that wants to sell online asks its walk-in customers how they choose a feed today before deciding what filters the website's product page should offer.

Understanding user needs

• User research: Interviews, short surveys and observation show the situations in which people will use the application. A tailoring business may ask ten regular customers how they place orders now, and learn that many send photos by phone.
• Persona development: A persona is a fictional but realistic profile built from research, with a name, a device, a goal and a frustration. A car-hire booking site may have one persona for a first-time renter on a basic smartphone and another for a travel agent booking ten cars at once.
• Contextual inquiry: Watching people in their normal place of work or travel reveals limits that interviews miss, such as a weak mobile signal at a market stall or a shared phone.
• Iterative feedback: Showing sketches and prototypes to users at every stage lets the team correct mistakes while they are still cheap to fix.
• Usability checks: Asking a few users to complete a real task on a draft shows where they hesitate, which labels confuse them and which steps they skip.

Benefits of user involvement

• Better usability: Screens built with direct user input are easier to understand, so less training and support is needed.
• Higher adoption: People keep using an application that fits the way they already work.
• Lower development cost: Misunderstandings found at the sketch stage are cheaper to fix than a finished feature that has to be rebuilt.
• Wider inclusion: Research with older users, first-time smartphone users and users with disabilities exposes barriers that the team would not have noticed.
• Greater loyalty: Users who see their feedback in the product are more likely to return and recommend it.

1.1.1.1 User's goals

A goal is the outcome a user wants to reach, stated without describing how the application will deliver it. The goal explains why the person opens the application at all, and every screen should help the user move towards it. Example: a customer of a spare-parts shop wants to buy a brake pad that fits one particular vehicle and to know that it is in stock today.

Goals are collected from interviews, survey answers, customer messages and the questions the shop or support desk is asked every day. They are usually written as user stories in the form "As a [type of user], I want [goal], so that [reason]".

• End goals: What the user wants to achieve, such as buying a part or booking a room.
• Experience goals: How the user wants to feel while doing it, such as confident that the price is final or not rushed.
• Business goals: What the owner of the application needs, such as more completed orders. A good design serves both the user's goals and the business goals.
• Primary and secondary goals: The main reason for visiting comes first on the screen, and occasional goals, such as changing an address, sit behind it.
• Measurable goals: A goal such as "find a part in under one minute" can be tested with real users, while "easy to use" cannot.

Example user story: "As a mechanic, I want to search for a part by vehicle model, so that I do not order a part that does not fit." The design response is a search box with a vehicle model filter placed at the top of the home screen.

1.1.1.2 User's tasks

A task is a concrete action, or a sequence of actions, that the user performs to reach a goal. Where a goal says why, a task says what the user does. Task analysis breaks a goal into its steps so that the designer can remove unnecessary ones and make the remaining ones obvious. Example: for the goal of buying a brake pad, the tasks are searching, choosing a vehicle, checking stock, paying and confirming delivery.

Steps of a simple task analysis:

1. Write the goal in one sentence, for example "Buy a brake pad that fits my vehicle."
2. List every action a user performs today to reach it, in order, by watching or asking real users.
3. Mark the steps that are repeated, optional or caused by a weakness of the current process.
4. Remove or merge steps that do not help the goal, such as asking for an account before the user has seen the price.
5. Rewrite the remaining steps as the screens of the new application, one decision per screen where possible.
6. Test the new flow with a few users and note where they stop, go back or make a mistake.
7. Revise the flow and repeat the test until users complete the task without help.

Example: a first draft of the ordering flow has nine steps: open site, register, verify email, search, select vehicle, view part, add to cart, enter address, pay. Allowing guest checkout and asking for the address and payment on one screen reduces the flow to six steps: open site, search, select vehicle, view part, add to cart, enter address and pay.

Tasks are also ranked by how often they happen. Frequent tasks, such as searching, must be one click away, while rare tasks, such as changing a delivery town, can be placed in an account page.

1.1.1.3 Preferences

Preferences are the choices users make about how they want to use the application, such as language, device, payment method or text size. Respecting them reduces effort and makes the application feel built for the user. Example: a hardware shop's web application remembers that a customer prefers Kiswahili and delivery to Eldoret, so the customer does not enter them again.

Common preferences in Kenyan web applications:

• Language: English or Kiswahili labels, and local words that users understand.
• Device and connection: Many users browse on phones with limited data, so pages that load quickly and allow images to be turned off respect this preference.
• Payment method: Mobile money, card or cash on delivery, shown as choices rather than forced.
• Notification channel: SMS, email or in-application messages, chosen by the user.
• Display options: Text size, light or dark theme and reduced animation.

A preference can be stored in the browser so that it is remembered on the next visit. In JavaScript, localStorage keeps a small value as text:

localStorage.setItem("language", "sw");
const language = localStorage.getItem("language") || "en";
console.log(language);   // sw

The first line saves the value sw, the second reads it back and uses en when nothing was saved, and the third prints sw in the browser console. Preferences that must follow the user to another device are saved in the user's account on the server instead.

1.1.2 Information Architecture

Information architecture (IA) is the organisation of content and functions so that users can find what they need without effort. It decides the groups, the levels and the names that appear in menus and links. Example: a tour operator's site groups its pages into Safaris, Beach Holidays, Prices and Contact, so that a visitor knows where to look for each need.

Organising content effectively

• Hierarchy: Information is arranged in clear levels, from main categories down to single pages, so users understand how pages relate. A product catalogue may go from category to brand to product.
• Navigation design: Menus and links are consistent and predictable, so users learn once where things are. The main menu stays in the same place on every page.
• Labelling systems: Names are short and use words that users know. A farm-produce shop may show Kiswahili terms beside the English names.
• Search function: A search box helps users who know what they want. Results that tolerate small spelling mistakes help users typing on small screens.
• Content grouping: Related items are placed together, which reduces the effort of scanning a page. Delivery, payment and returns information may sit in one help section.

Impact on user experience

• Less frustration: A clear structure stops users from feeling lost.
• Faster tasks: Logical groups let users reach the goal in fewer clicks.
• Lower bounce rate: Visitors who find what they need stay longer instead of leaving after one page.
• Better accessibility: A clear heading structure helps screen readers announce the page correctly.
• Consistency across devices: The same structure on phone and computer helps users who switch between them.

1.1.3 Visual Design

Visual design is the look of the application: how the layout, type, colours and images are used to guide the eye and express a brand. It affects first impressions and also usability, because users read the order, size and colour of elements as signals of importance. Example: a flower-farm order page that uses one strong brand colour for the Order button and neutral colours elsewhere shows buyers at once where to act.

The four elements below are covered in turn. After them, consistency is the rule that binds them: the same style is repeated across all pages.

1.1.3.1 Layout

Layout is the arrangement of elements on the screen: where the logo, menu, content, images and buttons are placed, and how much space separates them. A good layout shows what is most important first and makes the page easy to scan. Example: an online menu for a restaurant places the dish photo and price at the top of each card, with the Order button at the bottom right.

• Visual hierarchy: Larger, bolder or higher elements are read first, so the page title and the main action are made the most noticeable.
• Grid: A grid of columns and rows keeps elements aligned. Many layouts use a 12-column grid that collapses to one column on a phone.
• White space: Empty space around elements stops the page from looking crowded and helps users separate groups of content.
• Alignment and proximity: Related items are aligned along the same edge and placed close together, while unrelated items are separated.
• Common patterns: Users already know patterns such as a logo at the top left, a menu across the top or behind a menu button on a phone, and a footer with contact details.

A simple two-column layout can be drawn with CSS Grid:

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

This divides the width into two columns, the first twice as wide as the second, with a 16 px gap between them. Making the layout adapt to different screen widths is the subject of responsiveness of web pages.

1.1.3.2 Typography

Typography is the choice and arrangement of type: the typeface, size, weight, spacing and line length. It matters because users spend much of their time reading text. Example: an online notice board for a training centre uses one clear typeface at a comfortable size so that text is easy to read on a low-cost phone.

• Typeface choice: Sans-serif faces such as Arial or Segoe UI are widely used for screen text, while a serif face may suit a heading. Two typefaces are usually enough for a whole application.
• Size: Body text of about 16 px is a common minimum on screens. Headings are made larger in steps, so that the order of importance is clear.
• Line height: Space between lines of about 1.5 times the text size makes paragraphs easier to follow.
• Line length: Lines of roughly 50 to 75 characters are comfortable to read. Very long lines make it hard to find the start of the next line.
• Weight and style: Bold is used sparingly for emphasis, and italics for titles or a single word, rather than whole paragraphs.
• Web fonts: A custom font must be downloaded, which adds to page weight on costly mobile data. System fonts load immediately.

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;      /* 16 px by default */
  line-height: 1.5;
}
h1 { font-size: 2rem; }  /* 32 px when the base size is 16 px */

Using rem units means that sizes follow the user's own browser text-size setting, which helps people who need larger text.

1.1.3.3 Colour scheme

A colour scheme is the small set of colours used throughout the application: a main brand colour, one or two accent colours and neutral colours for text and backgrounds. Colour attracts attention, groups related items and signals meaning, for example red for an error. Example: a courier company uses deep blue for its header, amber for the Track Parcel button and dark grey for text.

• Palette: Choose one main colour, one accent for actions and neutral shades. A limited palette looks consistent and makes the accent stand out.
• Contrast: Text must differ clearly from its background. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
• Meaning: Colours carry meaning for different people, so important information is never given by colour alone. An error message also uses an icon and words.
• Consistency: The same colour is used for the same purpose on every page, so that users learn that amber means an action.
• Tokens: Colours are defined once and reused, so a brand change is made in one place.

:root {
  --brand: #0b5394;
  --accent: #f9a825;
  --text: #1f2933;
  --surface: #ffffff;
}
.button { background: var(--accent); color: var(--text); }

Checking the pairs with a contrast calculator gives these ratios: brand blue on white is about 7.8 to 1 and dark text on the amber accent is about 7.5 to 1, so both pass. White text on the amber accent is only about 2 to 1 and fails, and light grey #9e9e9e on white is about 2.7 to 1 and also fails.

1.1.3.4 Imagery

Imagery means the photographs, illustrations, icons and graphics in the application. Images explain content quickly, show products and build trust, but they also add to page weight and can exclude users who cannot see them. Example: a guesthouse booking page shows clear photos of each room and uses simple icons for Wi-Fi, parking and breakfast.

• Relevance: Use images that show the real product, place or people, rather than unrelated decoration. Local photographs help users recognise the setting.
• Formats: JPEG suits photographs, PNG suits graphics with transparency, WebP gives smaller files for both, and SVG suits logos and icons because it scales without losing sharpness.
• File size: Resize images to the size at which they are displayed and compress them. A photo that is much larger than needed slows the page on mobile data.
• Alternative text: Every meaningful image has an alt attribute that describes it, for example <img src="room.jpg" alt="Twin room with two beds and a window">. Purely decorative images use an empty alt attribute.
• Icons: Icons should be simple and, where the meaning is not obvious, accompanied by a text label.
• Loading: Adding loading="lazy" to images lower on the page delays their download until the user scrolls near them.

Consistency in visual design

Consistency means that the same style rules are repeated across the whole application: the same headings, button shapes, colours and spacing. Users then learn the interface once and trust it. Teams record these rules in a style guide or a design system of reusable components, so that every developer and designer builds the same buttons and forms.

Role of visual design in engagement

• Building trust: A tidy, professional look makes users more willing to enter payment details.
• Guiding action: Visual cues such as a strong button colour lead users through the steps of a task.
• Supporting the brand: Colours, type and images express the identity of the business.
• Encouraging return visits: A pleasant, clear design makes users more willing to come back.
• Supporting accessibility: Good contrast and readable type serve users with weak eyesight and users in bright sunlight.

1.1.4 Interaction Design

Interaction design defines how users act on the application and how it responds: buttons, forms, menus, messages and the flow from one step to the next. Good interaction design makes the next action obvious and gives clear confirmation of what has happened. Example: after a customer submits an order form, the page immediately shows an order number and the expected delivery date.

Principles guiding interaction design

• Feedback: The application responds to every action, such as a message after saving a form or a loading indicator while data is fetched, so that users know their action was received.
• Affordance: Elements look like what they do. A button looks pressable and a link looks clickable, which removes guessing.
• Consistency: The same action works the same way everywhere. A Save button is in the same place and has the same label on every form.
• Error prevention and recovery: Forms use clear labels, sensible defaults and checks as the user types, and explain how to correct a mistake in plain words.
• Efficiency of use: Shortcuts and bulk actions help frequent users, for example a shop owner who imports a spreadsheet of products instead of typing them one at a time.

1.1.5 Accessibility

Accessibility means designing so that people with a wide range of abilities, devices and situations can use the application. This includes people who are blind or have low vision, people who cannot use a mouse, people who are deaf, people with learning or attention difficulties, and anyone using a cracked screen or a bright outdoor setting. Example: a hotel booking page that can be completed using only a keyboard and read aloud by a screen reader can be used by a guest with low vision.

The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), are the international reference. The current version is WCAG 2.2. They are organised under four principles.

Implementing accessibility

• Perceivable: Information can be perceived by more than one sense. Images have text alternatives, videos have captions and text has enough contrast.
• Operable: All functions work with a keyboard and assistive devices, links and buttons are large enough to touch, and there is a visible focus outline.
• Understandable: Language is plain, labels are clear and errors are explained and easy to correct.
• Robust: The code uses standard HTML so that browsers, screen readers and other assistive technologies interpret it correctly.
• Testing: Developers check accessibility by tabbing through the page with a keyboard, by using a screen reader, and by running automated checkers, which find only part of the problems.

Two simple HTML habits improve accessibility at once: give each image an alt text and connect each form field to its label.

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel">

1.1.6 Web application design tools

Design tools let a team draw and test screens before developers write code. They range from tools for quick low-detail sketches to tools for complete interactive prototypes. Choosing one depends on the team's size, the computers they use and the budget. Example: a small Kisumu software team working with a designer in Nairobi picks a browser-based tool so that both can edit the same screens at the same time.

• Figma lets designers in different towns work on one file at once and lets developers inspect sizes and colours.
• Adobe XD is in maintenance mode and receives no new features, so a team starting a new project chooses a tool that is still developed.
• Balsamiq's rough look keeps early discussions on layout and not on colour.
• Axure RP can simulate rules such as showing an error only when a field is empty, which helps test complex flows.
• Sketch is used by designers who work on Apple computers.

1.1.6.1 Drafting application

A drafting application is software used to draw the first versions of screens, graphics and assets. Designers move through three levels of detail. A wireframe is a simple black-and-white layout showing where things go. A mockup adds colours, fonts and images to show the look. A prototype links the screens so that users can click through them as if the application worked. Example: for a flower farm's order site, the designer draws a wireframe of the order screen, adds the brand colours in a mockup and links the screens into a prototype for the farm manager to try.

Figma

Figma is a design tool that runs in a web browser, with desktop apps, and a free plan for small projects. Screens are drawn on frames, which represent a phone or computer screen, and several people can edit one file together and leave comments on the screens.

Basic parts of Figma:

• Frames: Containers that represent screens. A frame size such as 360 px wide is often used for a small phone.
• Shapes and text: Rectangles, lines and text layers drawn with the tools for each.
• Auto layout: A setting that makes a group of items space and resize itself as items are added.
• Components: Reusable elements such as a button. Editing the main component updates all copies.
• Styles and variables: Saved colours, text styles and values that are reused across screens.
• Prototype mode: Connects frames with interactions such as click to open another screen.
• Dev Mode: A view for developers to inspect spacing, colours and font sizes and to export assets.

Steps to draft a login screen in Figma:

1. Create a new design file and press F to select the Frame tool.
2. In the right panel choose a phone preset, or type a width of 360 and a height of 800.
3. Press T and add a heading text, then draw two input boxes with the Rectangle tool (R) and label them Phone number and Password.
4. Draw a rectangle for the button, add the text Log in, select both and press Shift + A to apply auto layout.
5. Turn the button into a component so that the same button can be reused on other screens.
6. Make a second frame for the home screen, then open the Prototype tab and drag a connection from the button to the new frame.
7. Share the file link or present the prototype so that the manager can click through and comment.

Illustrator or Photoshop basics

Adobe Illustrator and Adobe Photoshop are paid applications from Adobe's Creative Cloud subscription. Illustrator works with vector graphics, which are made of shapes and curves and stay sharp at any size. Photoshop works with raster graphics, which are made of pixels and are suited to photographs. Free alternatives with similar basic functions are Inkscape for vector work and GIMP for raster work.

Basics of Illustrator:

• Artboards: Each artboard is a canvas for one icon or screen, and several can be in one file.
• Shape and Pen tools: Shapes are drawn with the shape tools, and custom curves are drawn with the Pen tool (P).
• Export: File, Export, Export for Screens saves artboards as SVG or PNG at chosen sizes.

Basics of Photoshop:

• Layers: Each element sits on its own layer so that it can be edited without changing the rest.
• Crop and resize: The Crop tool trims an image and Image, Image Size sets its width and height in pixels.
• Export: File, Export, Export As saves a JPEG, PNG or WebP at a chosen quality and size.

Steps to prepare a hero photo for a website in Photoshop:

1. Open the photo with File, Open.
2. Use the Crop tool to trim it to the shape the page needs, for example a wide banner.
3. Choose Image, Image Size and set the width to the width at which it will be displayed, for example 1200 px.
4. Apply a light correction to brightness and contrast if the photo is dark.
5. Choose File, Export, Export As and select JPEG or WebP.
6. Lower the quality setting until the preview still looks good and the file size is small.
7. Save the file with a clear name such as hero-roses.jpg and add its alt text in the HTML.

Chapter Summary

This chapter explored the essential principles involved in designing a web application, beginning with user-centered design that focuses on understanding users’ goals, tasks, and preferences to create meaningful experiences. It highlighted the importance of organizing information effectively through information architecture and emphasized the role of visual design elements such as layout, typography, colour schemes, and imagery in enhancing usability and appeal. Interaction design was discussed as a key factor in facilitating intuitive user engagement, while accessibility considerations ensure that web applications are usable by people with diverse abilities. The chapter introduced various web application design tools, including drafting applications like Figma, Illustrator, and Photoshop, which aid in creating prototypes and visual assets. It also covered designing web application functionality through the creation of site maps to structure content and the need to optimize performance for efficient operation. The creation of responsive web page interfaces was examined to ensure compatibility across different devices. Finally, the chapter addressed designing web application output, focusing on generating documents such as PDFs and Excel files to meet user needs.