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

Module: UI Design (Frameworks)

Frameworks for the web presentation layer, focussing on Semantic UI.

Learning Outcomes

Design using a UI framework

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 6 min

UI Frameworks

Introduction to user interface frameworks.

Screencast 15 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

If you’re like most people, you feel like a baby when it comes to visual design. You sometimes have a vague sense of what you want, but can’t articulate it or make it come about. All you can do is point and cry…

Optional

Semantic UI Example CodePens

Example code illustrating Semantic UI features, from Nate Taylor’s PluralSight course

Semantic UI Hello World

Quick start to using Semantic UI with IntelliJ

Color Blocked Home Pages

A common design pattern for home pages

Spaces vs non spaces in CSS rules

What’s the difference between ‘.classA.classB’ and ‘.classA .classB’?

Experiential Learning

E33: Experience the Semantic UI course at PluralSight

Get acquainted with Semantic UI using the PluralSight online tutorial.

3 hours of video 30 Sep 11:30 PM

E34: BrowserHistory with Semantic UI

Make life wonderful with Semantic UI

Practice WOD 01 Oct 11:30 PM

E35: Island Snow with Semantic UI

Rebuild the Island Snow home page with Semantic UI

Practice WOD 03 Oct 11:30 PM

E36: Your Choice with Semantic UI

Rebuild a site of your choosing with Semantic UI

Practice WOD 04 Oct 11:30 PM

E37: Reflect on UI Frameworks

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

Technical Essay 06 Oct 11:30 PM

Assessments

A11: Assess your ability to use HTML, CSS, and Semantic UI

Outcomes assessed: Design using a UI framework

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

This in-class WOD will your ability to build a simple web page using Semantic UI.

A12: Assess your ability to write about your UI framework experiences

Outcomes assessed: Design using a UI framework, Create high quality technical essays

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