2. User Interface and User Experience (UI/UX)

Syllabus Points Covered

Programming for the web

Designing web applications

• Explore and explain the influence of a web browser on web development, including the use of developer (dev) tools

• Investigate cascading style sheets (CSS) and its impact on the design of a web application

  • consistency of appearance

  • flexibility with browsers or display devices

  • CSS maintenance tools

• Explore the types and significance of code libraries for front-end web development

  • frameworks that control complex web applications

  • predesigned CSS classes

• Investigate methods to support and manage the load times of web pages/applications

• Design, develop and implement a progressive web app (PWA)

  • the application of design and user interface (UI) and user experience (UX) principles of font, colour, audio, video and navigation

  • a UI that considers accessibility and inclusivity

Chapter Contents

• 2.1. Overview
  • 2.1.1. What is UI/UX?
  • 2.1.2. Why is UI/UX Important?
  • 2.1.3. What Will You Learn in This Module?
  • 2.1.4. Glossary
• 2.2. Responsive Web Design
  • 2.2.1. Flexbox and Grids
  • 2.2.2. Detecting the Device Display Size
  • 2.2.3. Adjusting Content Size and Layout
  • 2.2.4. The Viewport Meta Tag
  • 2.2.5. Glossary
• 2.3. Front End Frameworks
  • 2.3.1. What Are Front-End Frameworks?
  • 2.3.2. Getting Started
  • 2.3.3. Bootstrap’s Grid System
  • 2.3.4. Responsive Design and Breakpoints
  • 2.3.5. Styling
  • 2.3.6. Glossary
• 2.4. CSS Preprocessors
  • 2.4.1. Motivation
  • 2.4.2. Sass
  • 2.4.3. Bootstrap and Sass
  • 2.4.4. Glossary
• 2.5. Performance
  • 2.5.1. Why is Performance a UX Issue?
  • 2.5.2. Evaluating Page Performance
  • 2.5.3. Improving Page Load Time