Foundations of Web Design

Module Summary

This module provides a comprehensive overview of web design principles, introduces Figma as a key tool for design collaboration, and explores modern CSS libraries for efficient front-end development. Learners will gain hands-on experience with Figma for creating and collaborating on web designs and will be introduced to Tailwind CSS and Bootstrap for styling and layout. By the end of this module, learners will have the skills to create responsive, user-friendly designs and implement them using popular CSS frameworks.

Learning Objectives

By the end of this module, learners will be able to:

• Describe the roles and responsibilities in web design and development teams.
• Use Figma to create wireframes, prototypes, and high-fidelity designs.
• Collaborate effectively on design projects using Figma’s tools and features.
• Implement responsive designs using CSS libraries like Tailwind CSS and Bootstrap.
• Customize CSS frameworks to fit project requirements and brand guidelines.
• Apply advanced features of Figma and CSS frameworks in real-world projects.

Learning Outcomes

Upon completing this module, learners will be able to:

1. Demonstrate an understanding of web design roles and the design-to-development handoff process.
2. Create wireframes, prototypes, and high-fidelity designs in Figma.
3. Collaborate with team members on design projects using Figma’s collaboration tools.
4. Use utility-first CSS frameworks to style and layout web pages efficiently.
5. Build responsive, mobile-first designs using Tailwind CSS and Bootstrap.
6. Customize and extend CSS frameworks using configuration files and preprocessors like Sass.

Module Outline

Lesson 1: Introduction to Web Design and Roles

• Time: 1.5 hours
• Topics:
  • Overview of web design and development roles
  • Distinction between web designers and developers
  • Introduction to Figma as a design tool
• Activities:
  • Group discussion on roles in a web design project
  • Guided tour of Figma’s interface and features

Lesson 2: Getting Started with Figma

• Time: 1.5 hours
• Topics:
  • Setting up a Figma project
  • Creating wireframes and basic design elements
  • Using Figma’s design tools (frames, shapes, text)
• Activities:
  • Code-along: Create a basic wireframe for a landing page
  • Knowledge Check: Multiple-choice questions on Figma’s tools and features

Lesson 3: Developing with Figma

• Time: 1.5 hours
• Topics:
  • Creating high-fidelity designs in Figma
  • Using components and design systems
  • Building interactive prototypes with Figma
• Activities:
  • Hands-on exercise: Design a high-fidelity user interface for a web app
  • Knowledge Check: Multiple-choice questions on design principles and prototyping

Lesson 4: Figma Resources

• Time: 1 hour
• Topics:
  • Exploring Figma’s resource library
  • Utilizing Figma templates and plugins
• Activities:
  • Guided exploration of Figma Community resources
  • Lab exercise: Apply a Figma template to a new project

Lab: Exploring Advanced Figma Features

• Time: 2 hours (asynchronous)
• Topics:
  • Advanced prototyping and interactions in Figma
  • Using design tokens and variables
• Activities:
  • Self-paced lab: Build an interactive prototype using advanced Figma features

Lesson 6: Collaboration and Implementation

• Time: 1 hour
• Topics:
  • Handoff process from design to development
  • Best practices for collaboration between designers and developers
• Activities:
  • Group activity: Simulate a design handoff process
  • Reflection exercise on collaboration strategies

Lab: Practicing Implementation with Frontend Mentor

• Time: 4.5 hours
• Task: Complete a Frontend Mentor challenge using Figma for design and CSS frameworks for implementation.
• Objective: Demonstrate the ability to create a responsive design using Figma and implement it with a CSS framework.
• Submission Requirements:
  • GitHub repository link with project files
  • Reflection on design choices and implementation challenges

Lesson 7: CSS Libraries

• Time: 1 hour
• Topics:
  • Overview of modern CSS libraries (Tailwind, Bootstrap, Bulma)
  • Introduction to utility classes and their usage
• Activities:
  • Code-along: Basic styling with utility classes
  • Knowledge Check: Multiple-choice questions on CSS libraries

Lesson 8: Tailwind CSS

• Time: 1 hour
• Topics:
  • Introduction to Tailwind CSS
  • Using utility classes for rapid styling
  • Creating responsive designs with Tailwind
• Activities:
  • Code-along: Build a responsive component using Tailwind
  • Knowledge Check: Multiple-choice questions on utility classes

Lesson 9: Bootstrap

• Time: 1 hour
• Topics:
  • Introduction to Bootstrap
  • Using the grid system and pre-designed components
  • Customizing Bootstrap with Sass
• Activities:
  • Code-along: Create a responsive layout using Bootstrap
  • Knowledge Check: Multiple-choice questions on Bootstrap components

Lab: Developing with Bootstrap

• Time: 2.5 hours
• Task: Complete a small project using Bootstrap for layout and styling based on a Frontend Mentor challenge.
• Objective: Demonstrate proficiency in using Bootstrap’s grid system and components.
• Submission Requirements:
  • GitHub repository link with project files
  • Reflection on customization and responsiveness

Final Assessments

Knowledge-Based Assessment (KBA)

• Time: 1.5 hours (asynchronous)
• Format: 25 to 30 multiple-choice and short-answer questions covering Figma, CSS libraries, and responsive design principles.
• Objective: Assess learners’ understanding of design tools, CSS frameworks, and responsive design techniques.

Skills-Based Assessment (SBA): Responsive Design Project

• Time: 5.5 hours
• Activity: Build a fully responsive web page using Figma for design and Tailwind CSS or Bootstrap for implementation.
• Deliverable: GitHub repository with:
  • index.html: Main HTML file
  • style.css or custom.scss: CSS or Sass file
  • README.md: Project overview and reflection
• Rubric:
  • Design Selection (10 points)
  • HTML Structure (15 points)
  • CSS Framework Utilization (20 points)
  • Customization and Responsiveness (20 points)
  • Version Control (Git) (10 points)
  • Documentation (10 points)
  • Reflection (5 points)