Overview

2.1. Overview#

When you visit a website, you probably notice how hard or easy it is to navigate, how quickly it loads, or how well it works on your phone. These aspects are no accident—they’re the result of careful planning and design focused on UI/UX, or User Interface (UI) and User Experience (UX).

In this module, we’ll explore how to create websites that not only look great but also work seamlessly for users. You’ll learn how to make your sites adaptable, efficient, and enjoyable for everyone, regardless of the device they’re using or the speed of their internet connection.

2.1.1. What is UI/UX?#

  • User Interface (UI): The look and feel of a website. It includes things like layout, buttons, colors, and typography—everything the user sees and interacts with.

  • User Experience (UX): The overall experience of using the website. This covers how intuitive, fast, and satisfying the site is to navigate. A great website balances UI and UX to make sure users can easily achieve their goals while enjoying the process.

2.1.2. Why is UI/UX Important?#

Website that take forever to load, is hard to use on your phone, or has confusing navigation can drive users away, even if the website has valuable content.

On the other hand:

  • Good UI makes your website attractive and inviting.

  • Good UX ensures users can find what they need easily and quickly.

2.1.3. What Will You Learn in This Module?#

  1. Responsive Web Design

In today’s world, people access websites on a variety of devices, from desktops to smartphones. Responsive web design ensures your website looks and works great on all screen sizes.

You’ll learn:

  • How to use flexible layouts and media queries to create adaptive designs.

  • Why responsiveness is critical for modern web design.

  1. Front-End Frameworks: Bootstrap

Building a responsive website from scratch can be time-consuming. That’s where frameworks like Bootstrap come in. Bootstrap provides pre-designed components and tools that make creating beautiful, responsive websites faster and easier.

You’ll learn:

  • How to use Bootstrap’s grid system to create layouts.

  • How to work with pre-built UI components like buttons, modals, and navigation bars.

  • How frameworks streamline the design process.

  1. Performance as User Experience

Website performance—how fast your site loads and responds—is a critical part of UX. Users expect websites to load almost instantly, and delays can lead to frustration and high bounce rates.

You’ll learn:

  • How performance affects user experience and SEO.

  • Strategies to optimise performance, such as image compression and lazy loading.

  • Tools to measure and improve website performance.