1. Home
  2. Modules
  3. UI Design (Frameworks)

Module: UI Design (Frameworks)

Frameworks for the web presentation layer, focussing on Twitter Bootstrap.

Learning Outcomes

Design using Twitter Bootstrap

Create high quality technical essays

Readings

Guided tour of the UI Design (Frameworks) module

Why, what, how, and when you will learn about UI Design and framework support.

Screencast 4 min

UI Frameworks

Introduction to user interface frameworks and Twitter Bootstrap.

Screencast 15 min

Bootstrap Grids for Beginners

Introduction to the Twitter Bootstrap grid system.

Screencast 8 min

Bootstrap Example: Basic

A basic Bootstrap page layout.

Screencast 13 min

Bootstrap Example: Signin

A Bootstrap page layout for signin.

Screencast 5 min

Bootstrap Example: Bootswatch

The Bootswatch themes for Bootstrap

Screencast 5 min

Bootstrap Example: Theses Are Us

Simple bootswatch customization to make a vendor site

Screencast 11 min

Browser Color Pickers

How to use browser-based plugins to determine page colors.

Screencast 6 min

7 rules for creating gorgeous UI (Part 1)

A non-artsy primer in digital aesthetics.

7 rules for creating gorgeous UI (Part 2)

A guide to visual aesthetics, written by a nerd

Clean up your mess: A guide to visual design for everyone

This guide will help you communicate with conscious skill. It will show you how to create designs that are easy to understand and attractive.

Optional

The subtle magic behind why the Bootstrap 3 grid works

Behind the curtain of the Bootstrap grid implementation

Optional CSS Ninjas Only

The 11 most beautiful Bootstrap sites

One designer’s picks; illustrates what is possible with Bootstrap.

Optional

Experiential Learning

E40: Build bootstrap bookmarks

Read the Bootstrap manual while creating bookmarks.

17 Oct 09:00 PM

E41: Bootstrap Browser History

Develop a simple web page using Twitter Bootstrap

Practice WOD 18 Oct 09:00 PM

E42: Responsive Kamanu

Develop a responsive web page based upon kamanu.com

Practice WOD 19 Oct 09:00 PM

E43: Responsive Castle High School

Develop a responsive web page based upon the Castle High School web site

Practice WOD 20 Oct 09:00 PM

E44: Reflect on UI Frameworks

Write a technical essay summarizing your experience doing the UI Frameworks practice WODs.

Technical Essay 22 Oct 09:00 PM

Assessments

A18: Assess your ability to use HTML, CSS, and Twitter Bootstrap

22 Oct 09:00 AM

Outcomes assessed: Design using Twitter Bootstrap

Rx: < 20 min Av: 20-30 min Sd: 30-40 min DNF: 40+ min or incorrect

This in-class WOD assessed your ability to build a simple web page using Twitter Bootstrap.

Discussion:

  • The class is hitting its stride now! All but one finished the WOD and received full credit. It appears you are all getting good at studying efficiently and putting in the right amount of time to get prepared for the WODs.

A19: Assess your ability to write about your Twitter Bootstrap experiences

22 Oct 09:00 PM

Outcomes assessed: Design using Twitter Bootstrap, Create high quality technical essays

This assessment evaluated your technical essay regarding the UI Design Frameworks module for clarity, insight, and conformance to the technical essay guidelines.

Discussion:

  • Everyone’s essay was well above threshold this week. Good job! I am happy that many of you are finding Bootstrap to be such a useful technology, and that you’re starting to feel comfortable with UI design for the browser.