Chapter 2: Design website application

Designing a website application is a foundational skill for ICT technicians, particularly in Kenya’s dynamic digital economy. This chapter addresses the critical elements involved in crafting effective web applications that meet user needs and business goals. Mastery of design tools and understanding the design process enable ICT professionals to deliver responsive, user-friendly, and visually appealing websites. The knowledge gained here is essential for engaging diverse sectors, from financial institutions to county governments, enhancing service delivery through digital platforms.

2.1 Website application design tools

Website application design tools are the programs and online services used to plan, draw, build and style the pages of a website before and during development. Some tools produce pictures of the design, some produce the working code, and some do both. A technician who knows what each tool does can choose the one that fits the client, the budget and the skills of the team, and avoids wasting time on a tool that does not suit the job. This topic introduces website design, describes five widely used tools, sets out the factors for choosing between them, and explains how to install and configure them.

2.1.1 Introduction to website design

Website design is the planning and creation of the structure, layout, appearance and behaviour of a website. It combines graphic design, user experience (UX) design and front-end development to produce pages that are both useful and pleasant to use. A website for a small business such as a guesthouse must let a visitor find the rooms, the prices and a way to book within moments, on a phone as well as on a computer.

Purpose of website design

Website design aims to create pages that are attractive, easy to understand and suited to the people who will use them. Good design helps visitors find what they came for, builds trust in the business and encourages them to return. For a guesthouse, the purpose may be to turn a visitor looking at photographs into a customer who sends a booking request.

Components of website design

A website design is made of layout, colour scheme, typography, images and interactive elements. Each component guides the visitor's attention and makes the site easier or harder to use. The layout arranges the content, colours and fonts set the mood, images show the product, and buttons and forms let the visitor act. A bakery's order page needs a clean layout and a clear Order now button so that a visitor is never unsure what to do next.

2.1.1.1 Website design principles

Design principles are rules of good practice that designers apply to every page. Following them keeps a site clear, consistent and usable, whatever tool is used to build it. Example: a print shop's website follows the same principles on its price list page and on its order form, so the visitor feels at home on both.

• Clarity and simplicity: Each page has one main purpose, and everything that does not support it is removed. A visitor should understand within seconds what the page offers.
• Consistency: Colours, fonts, button styles and the position of the menu stay the same on every page. Consistency lets visitors learn the site once and use it everywhere.
• Visual hierarchy: Size, colour and position show which content matters most. The page title is the largest item and the main button stands out from the text around it.
• Easy navigation: The menu is short, labelled with plain words and found in the same place on every page, so visitors can reach any important page in a few clicks.
• Responsive design: The layout adapts to the screen size, so the same site works on a phone, a tablet and a computer. This matters because many users reach websites mainly on phones.
• Accessibility: The site can be used by people with different abilities. Text has enough contrast against its background, pictures have text descriptions, and links can be reached with the keyboard.
• White space: Empty space around text and pictures stops the page from looking crowded and makes reading easier.
• Fast loading: Images are sized and compressed, and unnecessary files are avoided, because slow pages lose visitors, especially on mobile data.

2.1.1.2 Website Design Process

The website design process is the sequence of stages that takes a project from an idea to a finished design. Working in stages lets mistakes be found early, when they are cheap to correct. Example: a web designer building a site for a bakery follows the stages below and shows the bakery owner the work at the end of each stage.

1. Define the goals and the audience. Write down what the website must achieve and who will use it. The bakery wants customers to see the menu and order cakes for collection.
2. Collect and organise the content. Gather the text, photographs, prices and logo, and decide what each page will say. Missing content often causes delay.
3. Plan the structure. Decide which pages the site needs and how they connect. The methods are explained under Creation of website application site map.
4. Draw wireframes. A wireframe is a simple layout of a page in grey boxes and lines, without colour or final pictures, used to agree where things go. The methods are explained under Wireframing and Prototyping.
5. Design the visual look. Choose colours, fonts and images, and produce mock-ups of the main pages for a computer screen and a phone screen.
6. Prototype and test. Link the mock-ups into a clickable prototype, let a few real users try the main tasks, and correct the problems they meet.
7. Hand over to development. Prepare the design files, exported images and a style guide listing colours and fonts, so that the developer can build the pages accurately.
8. Launch and improve. Publish the site, collect feedback and visitor data, and improve the design over time.

2.1.1.3 User Experience (UX) design

User experience design is the practice of shaping how a person feels and what a person can do when using a website. It focuses on helping visitors complete tasks easily, quickly and without frustration. UX is wider than appearance: a beautiful page that is slow or confusing has a poor user experience. Example: an online shop that lets a customer find a product, add it to the cart and pay with a mobile money option in a few steps has good UX, and one that asks for a long registration first loses buyers.

• User research: Designers find out who the users are and what they need through interviews, short questionnaires and observation. Research replaces guesses with evidence.
• Information architecture: Content is grouped and labelled in the way users expect to find it, so that menus and page names make sense to them.
• Interaction design: Buttons, forms and menus behave predictably, and the site gives clear feedback, such as a message after a form is sent.
• Loading speed: Pages open quickly, even on a slow connection, because waiting makes users leave.
• Mobile responsiveness: Text is readable, buttons are large enough to tap, and nothing needs sideways scrolling on a phone.
• Usability testing: Real users try the site while the designer watches where they hesitate or fail, and the design is corrected after each round.
• UX and UI: UX is the whole experience, while user interface (UI) design is the visible part of it: the layout, colours, buttons and icons that the user touches and sees.

2.1.2 Introduction to website design tools

Website design tools are applications and online services that support the creation and editing of page layouts, graphics and code. They range from visual tools used to draw designs, to hosted builders that publish a finished site, to code editors used by developers. The table groups them by the work they do. A project often uses more than one tool, for example a drawing tool for the design and a code editor for the build.

Adobe XD, once used for prototyping, is now in maintenance mode, so no new features are being added, and it should not be chosen for new projects.

2.1.2.1 Figma

Figma is a design tool that runs in a web browser and also has desktop apps. Designers draw page layouts, build reusable parts and link screens into clickable prototypes, and several people can work on the same file at the same time. Example: a designer and a client both open the shared design of a guesthouse website, and the client leaves comments directly on the booking page.

• Collaboration: Team members edit and comment on the same file at the same time, with no need to send versions by email.
• Components: A button or menu is drawn once as a component and reused across screens. Changing the component updates every copy.
• Auto layout and frames: Frames set the size of a page, and auto layout makes items resize and space themselves as content changes, which helps in designing for different screens.
• Prototyping: Screens are linked so that a tester can click through the design before any code exists.
• Developer hand-over: Developers inspect sizes, colours and fonts in the file and copy the values (Dev Mode, which needs a paid seat), and Figma has also added features for publishing simple sites straight from designs.
• Cost and limits: There is a free plan with limits on the number of files and features, and paid plans are charged per person. A stable internet connection is needed for smooth work.

2.1.2.2 WordPress

WordPress is a content management system (CMS) used to build and run websites. The free, open-source software from wordpress.org is installed on the owner's own hosting, while WordPress.com is a separate hosted service with paid plans. A site's appearance is set by a theme and its features are extended by plugins, so a site can be built without writing much code. Example: a tour company's website is built with a theme for travel businesses, and a booking plugin adds the reservation form.

• Themes: A theme controls the design of the whole site. It can be changed without losing the content.
• Plugins: Plugins add features such as contact forms, search engine tools, galleries and online shops.
• Block editor: Pages are built from blocks of text, images, buttons and columns, and the content owner can edit them without a developer.
• Content management: Pages, posts, images and users are managed from an admin screen, which suits sites with content that changes often.
• Requirements: The self-hosted software needs a web server such as Apache or Nginx, PHP and a MySQL or MariaDB database. WordPress recommends a current PHP version, a current MySQL or MariaDB version and HTTPS, so the figures on wordpress.org should be checked before installation.
• Maintenance: The software, themes and plugins must be updated regularly, because out-of-date plugins are a common way for sites to be attacked.

2.1.2.3 Canva

Canva is an online graphic design platform that works in a browser and as a mobile app. It is known for posters, social media posts and logos, and it can also publish simple websites from its templates. Example: a tailor with a small business uses a template to make a one-page site showing photographs of garments, prices and a phone number.

• Templates: Ready-made layouts for posters, cards, presentations and web pages let a beginner produce a good-looking result quickly.
• Drag and drop: Text, photos and shapes are placed by dragging, with no coding.
• Graphics for other tools: Banners, logos and icons made in Canva are exported as PNG, JPEG or PDF and used in a WordPress or Wix site.
• Websites: Canva sites are mostly simple and short, such as a portfolio or an event page, and are not meant for shops or complex web applications. The limits of the current plans should be checked.
• Cost and limits: There is a free plan, with some templates, images and features reserved for paid plans. Publishing on your own domain normally needs a paid plan.

2.1.2.4 Wix

Wix is a hosted website builder. The owner chooses a template, drags text, images and forms onto the page in the editor, and publishes the site on Wix's own hosting without installing anything. Example: a cyber café owner builds a site listing services and prices in an afternoon, with no developer.

• Editors: Wix offers a drag-and-drop editor for general users and a more advanced editor aimed at professional designers and agencies, and it also has a tool that generates a first draft of a site from a few answers.
• Hosting included: Wix hosts the site, so there is no server to set up or maintain.
• Apps and features: Booking, online shop and contact form features are added from its app market.
• Custom code: Developers can add their own code with Wix's development tools, but the freedom is smaller than on a self-hosted site.
• Cost and limits: A free plan shows Wix advertising and a Wix address, and paid plans remove them and allow a custom domain. A site built on Wix cannot easily be moved to another host, so the choice commits the owner to the service.

2.1.2.5 Adobe Dreamweaver

Adobe Dreamweaver is a web page editor that combines a code view with a visual view. A developer writes HTML, CSS and JavaScript in the code view and sees the result in a live preview. Example: a developer opens a client's static website in Dreamweaver, edits the style sheet, and checks the page at phone width before uploading it.

• Code and design views: The code view gives colour-coded syntax and code hints, and the live view shows the page as the browser will display it.
• Responsive preview: The page can be previewed at different screen widths to check the layout on phones and tablets.
• Site management: Files can be uploaded to a web server from inside the program, and Git support helps keep track of changes.
• Licensing: Dreamweaver is sold as part of Adobe's Creative Cloud subscription, so it costs more over time than free editors.
• Current status: Adobe still publishes Dreamweaver updates, but recent releases add few major features. A technician should check Adobe's current Dreamweaver page before choosing it for a new project, and consider a free editor such as Visual Studio Code.

2.1.3 Factors to consider when selecting design tools

The right tool is the one that fits the project, the people who will use it and the money available. Choosing by habit or by fashion often leads to a tool that is too weak for the project or too complicated for the team. A technician weighs the factors below before recommending a tool to a client.

Project complexity and requirements

The more complex the website, the more capable the tool must be. A one-page site for a tailor may need only a simple builder, while an online shop needs payment, stock and order features, and a custom booking system needs a code editor and developers. For example, a print shop that wants customers to upload files and pay online needs more than a poster-style page.

User skill level

Tools differ in how much knowledge they demand. Builders such as Wix and Canva work by dragging items, WordPress needs some learning, and code editors need knowledge of HTML, CSS and JavaScript. A business owner who will edit the site alone is better served by a tool that matches their skills.

Cost and licensing

Cost includes the purchase price, the subscription, the hosting and the price of paid plugins or templates. Free tools such as WordPress, GIMP and Visual Studio Code cost nothing to use, whereas Adobe Creative Cloud and the paid plans of builders are charged monthly or yearly. A small business may prefer free or low-cost tools to keep its running costs down.

Compatibility and integration

The tool must work on the computers the team already has and connect with the other parts of the project, such as payment services, databases, analytics and social media. A shop that takes mobile money payments needs a tool or plugin that supports that payment service.

Support and community

A tool with good documentation, tutorials and an active user community is easier to learn and to fix when something goes wrong. Visual Studio Code and WordPress have large communities and many free guides, while a small or retired tool leaves users to solve problems alone.

Internet access and data costs

Browser-based tools such as Figma, Canva and Wix need a steady internet connection, and large design files use mobile data. Where the connection is slow or expensive, a desktop tool that works offline may be the better choice.

Ownership and portability

Some services keep the site on their own platform, which makes it hard to move later, while self-hosted systems let the owner move the files and database to another host. The owner should know in advance what happens to the site if the subscription ends.

2.1.4 Installation and configuration of design tools

Installation puts a tool on a computer, and configuration sets it up so that it suits the project and the person using it. Careful installation avoids security risks and performance problems, and good configuration saves time on every later task. The table lists the five tools described above and three supporting tools that are often used with them. Requirements change with each version, so the vendor's current page is always checked before installing.

System requirements assessment

Before installing, check that the computer meets the minimum requirements of the tool: the operating system version, processor, memory, free disk space and screen size. A tool installed on a computer that is too weak runs slowly and may crash during work. Example: before installing a graphics editor on a workstation in a web agency's office, the technician checks the memory and free disk space against the vendor's current requirements page.

Downloading and installing software

Software should be downloaded only from the vendor's official website or the official app store, which gives a safe copy of the latest version. Installers from other sites may contain malware. Installation normally means running the setup file and following the prompts, and in an office with several workstations the installations must follow the licence agreement.

To install and configure Visual Studio Code:

1. Check that the computer runs a supported 64-bit operating system and has enough free disk space.
2. Download the installer for the operating system from the official Visual Studio Code website.
3. Run the installer, accept the licence and choose the options offered, such as adding Open with Code to the right-click menu.
4. Start the program and choose a colour theme and a font size that are comfortable to read.
5. Open the Extensions panel and install the tools needed for web work, for example Prettier for tidy code formatting and Live Server for previewing pages in a browser.
6. Open Settings and turn on Auto Save and Format on Save, so that work is protected and code stays tidy.
7. Open a project folder, create a file named index.html, write a short page and preview it to prove that the setup works.

To start using an online tool such as Figma:

1. Check that a current browser is installed and that the internet connection is stable.
2. Create an account with an email address, using a strong password that is not used elsewhere.
3. Create a team or project space and invite the people who will work on the design.
4. Create a new design file and add a frame for a computer screen and another for a phone screen, using the preset sizes.
5. Set the colour styles and text styles for the project, so that every designer uses the same ones.
6. Share the file with the client with view access, so that the client can read and comment but not change the design.

To install and configure self-hosted WordPress:

1. Check that the hosting meets the requirements in the table (PHP 8.3 or newer, MySQL 8.0 or newer or MariaDB 10.11 or newer, HTTPS).
2. In the hosting control panel create an empty database and a database user with a strong password, and note the database name, user name, password and host.
3. Download WordPress from wordpress.org, upload it to the site folder and extract it, or use the one-click installer offered by the host.
4. Open the site address in a browser and choose the language, then enter the database details when asked.
5. Enter the site title, an administrator user name that is not admin, a strong password and an email address, then select Install WordPress.
6. Log in to the admin screen, choose and activate a theme under Appearance, and install only the plugins that are needed under Plugins.
7. Under Settings set the time zone to Nairobi and the permalink structure to Post name, and confirm that the site opens over HTTPS.

Configuration of settings

After installation, configure the workspace layout, themes, keyboard shortcuts, plugins and integrations so that the tool suits the project. In Visual Studio Code, users commonly install extensions for JavaScript or PHP and set a tidy colour theme. In WordPress, the configuration covers the site title, the permalink structure, the theme and the plugins.

Updates and maintenance

Update design tools regularly, because updates repair security faults and add features. Updates should be done at a quiet time so that nobody loses work, and after confirming that important plugins and extensions still work with the new version. A software company's ICT team may set a written update policy so that all workstations are updated in the same way.

Usage and maintenance of design tools

• Make sure the hardware meets or exceeds the recommended specification, to avoid slowdowns during design work.
• Back up project files and configuration settings regularly, to prevent data loss from software crashes.
• Customise the tool settings, such as keyboard shortcuts and interface themes, to match the way you work.
• Use official plugins and extensions to add functions without weakening security.
• Schedule updates, and check compatibility with operating system upgrades before they are installed.

Chapter Summary

This chapter explored the essential tools and principles involved in designing website applications, starting with an overview of website design concepts such as design principles, processes, and the importance of user experience design. It introduced various popular website design tools including Figma, WordPress, Canva, Wix, and Adobe Dreamweaver, while also discussing key factors to consider when selecting and configuring these tools for optimal use. The implementation of website design was examined through the lens of user-centered design, visual design elements, interaction design, and the techniques of wireframing and prototyping. The development of visual hierarchy in website applications focused on the graphical user interface and the hierarchy of elements like typography, color, spacing, reading patterns, size, proximity, alignment, and texture. The chapter then addressed the creation of website site maps, emphasizing their role in web design and search engine optimization, along with different types of site maps and the process of creating visual site maps and wireframes. Finally, it covered critical security and maintenance considerations such as implementing SSL/TLS, configuring firewalls and access controls, setting up backup systems, and using server monitoring tools to ensure website reliability and safety.