What curriculum is covered in Pro Intensive: Build Website UIs?

This unique intensive covers design principles and concepts while simultaneously teaching you how to implement these principles in code, using HTML and CSS. In just 8 weeks, we’ll cover the fundamentals of usability, accessibility, color theory, typography, layout and more.

After completing Building Website UIs, you’ll have the foundation to incorporate best practices of visual design and user interface design to confidently create Website UIs that are polished and usable.

The capstone project consists of you integrating user research and all of the design principles that you learn throughout the intensive to write a proposal to improve the UI of an e-commerce website. In the second half of the capstone project, you will then make these design changes that you recommended, based on your advanced HTML and CSS knowledge.

Unit 1: Intro to User-Centered Design

This unit covers the process and guiding principles of user-centered design.

Topics:

  • User Personas
  • Interpreting User Research
  • SWOT Analysis
  • Website Usability Conventions

Project:

  • Fresh Deals E-Commerce Website

UNIT 2: HTML & CSS Foundations

This unit covers the basics of HTML and CSS. Learners who are already comfortable with HTML and CSS are encouraged to skip to the projects and quizzes before moving on.

Topics:

  • Introduction to HTML
  • Common HTML Elements
  • HTML Tags
  • CSS Setup and Selectors
  • CSS Visual Rules

Projects:

  • Fashion Blog
  • Healthy Recipes
  • Olivia Woodruff

Unit 3: Intro to Usability

This unit covers the main principles of usability (learnability, efficiency, memorability, errors, satisfaction) and how to write and use user stories.

Topics:

  • Nielsen’s Principles of Usability
  • Writing User Stories
  • Assessing the Goodreads.com User Interface

Project:

  • Baker’s Bike Shop: User Stories

Unit 4: Accessibility

This unit covers basic visual design principles, that will make your site more attractive and visible to all of your users, as well as semantic HTML, which makes your site navigable via screen readers.

Topics:

  • Visual Design for Accessibility
  • Semantic HTML for Accessibility
  • Setting Up and Using Screenreaders

Projects:

  • Gigantic Workflow Website
  • Accessibility Off-Platform Screenreader Project

Unit 5: Color Theory

This unit covers color theory, and color for UI Design.

Topics:

  • Color Theory (color wheel, complementary colors, contrasting colors, etc)
  • Color For User Interfaces (Semantic use of color for UI)

Projects:

  • Cumulative Project

Unit 6: Text and Typography

This unit covers how to use text and typography in an efficient and highly visible way.

Topics:

  • Intro to Typography
  • Best Practices for Text Design
  • Lessons Learned From Eye Tracking Research
  • Link fonts, Font-face, and Fallback fonts

Project:

  • Cumulative Project

Unit 7: UI Layout Concepts

This unit covers CSS Grid, a powerful way of organizing the content and images on your website, in a way that creates symmetry and visual balance.

Topics:

  • Whitespace and Symmetry
  • Scrolling and Placement
  • CSS Grid

Projects:

  • Pup-Spa
  • Grid Architecture
  • Cumulative Project

Unit 8: Navigation

This unit covers the principles of website navigation, or, how to help your users find the content that they are looking for in as few clicks as possible!

Topics:

  • HTML Buttons
  • CSS Animations
  • CSS Navigation

Projects:

  • Cumulative Project

Unit 9: Capstone Project:

The capstone project consists of you integrating user research and all of the design principles that you learn throughout the intensive to write a proposal to improve the UI of an e-commerce website. In the second half of the capstone project, you will then make these design changes that you recommended, based on your advanced HTML and CSS knowledge.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit one here

0 Comments

Article is closed for comments.