This document is intended to be a very broad overview of the subjects that we will cover in the UI Design Class. This document lists the sections (more or less in order) that students will need to master to successfully complete this class and to enter the field of UI/Web Design.
This is a living document and will change frequently, as new resources are discovered and changes in curriculum become necessary. Over time, links to appropriate resources will be added to this page.
Getting Started
-
Intro to UI Design
- What is this class?
- For whom is this class intended?
- What is the profession of UI Design?
- What is UI/UX?
- How do I study for this class?
- Where can I find information about assignments for this class?
- Setting Up our dev environment
-
Tools
- Git & Github
- Photoshop
- Illustrator
- SublimeText 2
- FTP Client
Building for the Web
-
Web Standards
- What are web standards technologies?
- What is HTML and what is it used for?
- What is CSS and what is it used for?
- What is JavaScript and what is it used for?
- What is a cross-platform website?
- What is accessibility and what does it matter?
-
HTML
- What is HTML?
- HTML document structure
- HTML syntax
- Semantics
- Validation
- Classes
- ID
- Attributes
- Links
- Tags (Important tags to remember)
- Resources for knowing how to markup content
-
CSS
- What is CSS?
- Syntax
- Styling (different ways for making selections)
- Specificity
- The “Cascade”
- The Box Model
- Box-Sizing: Border-Box
-
Testing
- How do I test my HTML & CSS?
- What are browsers?
- Should my sites look the same in every browser and why?
- Why is testing important?
- How do I simulate testing on other devices and platforms?
-
Media
- Images (jpeg, gif, png)
- SVG
- Text
- Video
- Audio
- Embeddable Objects
-
Advanced HTML
- HTML5
- Video
- Canvas
- Audio
- Semantic Tags
-
Advanced CSS
- CSS3
- Animation
- Transitions
- Gradients
- Background Images
-
Responsive Design
- What is Responsive Design
- Fluid Grid
- Flexible Media
- Media Queries
-
Sass
- Setting up Sass
- Syntax differences from CSS
- Nesting
- Includes
- Variables
- Media-queries
-
JavaScript
- What is JavaScript?
- Syntax
- Functions
- Variables
- Properties
- Objects
- The “this” operator
- Events
- User Actions
-
jQuery
- The $ sign
- CSS-based selection
- Common functions
- Chaining
- When should I use jQuery?
- Pros and Cons
- Presentational javaScript
- Zepto alternative
Designing for the Web
-
UI/UX
- What is UI Design (User Interface Design)
- What is UX Design (User Experience Design)
- How do these disciplines interact?
- What tasks are common for UI Designers?
- What tasks are common for UX Designers?
-
Typography
- Basic font theory
- Terms – X-height, M-height, Stressing, Old Style, Serif, Sans Serif
- Web-safe fonts
- Why aren’t all fonts available online?
- Font Services
-
Layout
- Grid-based layout
- Column-based layout
- Layout hierarchy
- Arranging elements on the page
- Floating
- inline-block
- Absolute Positioning
- Relative Positioning
- Fixed Positioning
-
Principles of Design
- Balance
- Emphasis
- Movement
- Pattern
- Repetition
- Proportion
- Rhythm
- Variety
- Unity
-
Elements of Design
- Line
- Shape
- Color
- Space
- Texture
- Size
- Value
-
Color Theory
- The Color Wheel
- Primary, Secondary, and Tertiary colors
- Color Harmonies
- Complementary Colors
- Split-complementary Colors
- Analagous Colors
- Monochromatic Colors
- Color Triad
- Color Moods
- Kuler
-
Gestalt
- Similarity
- Continuation
- Closure
- Proximity
- Figure/Ground
A Process for Working with Clients and Peers
-
The Production Process
- The Client Interview
- Discovery
- Drafting the Creative Brief
- Thumbnails
- Wireframes
- Mockups
- Markup
- Publishing
-
The Creative Brief
- What is a creative brief?
- For whom is the creative brief intended?
- Dissecting the creative brief: (sections of the brief)
- Client
- Project Description
- Project Scope
- Discovery
- Client description
- Goals and objectives
- Target audience
- Client brand, personality, culture
- What should not be changed?
- What should be changed?
- Inspiration
-
Thumbnails
- What are thumbnails?
- Who are thumbnails for?
- Why draw thumbnails?
- What are my goals when creating thumbnails?
-
Wireframing
- What are wireframes?
- Who are wireframes for?
- Why create wireframes?
- What is content-first design?
- How do I talk about my wireframes?
- What are my goals when creating wireframes?
- What are the common elements of all wireframes?
-
Mockups
- What are mockups?
- Who are mockups for?
- Why create mockups?
- What are the common tools for creating mockups?
- Are mockups obsolete?
- How do I manage iterations of my mockups?
- How detailed should I make my mockups?
-
Markup
- What is markup?
- What process should I follow when marking up a website?
- Best practices for deciding classes and ids.
-
Publishing
- How do I get my site onto the web?
- What is FTP?
- What tools do I need to transfer my site from my local drive to a server?
- What is a server
- What is a hosting provider?
- What is a domain?
Allsorts
-
Site File Structure
- Separating Files
- Linking files by type
- What is a site made of so many files?
- Staying organized
-
Common Design Pitfalls
- Boxy
- Too complicated
- Not enough white space
- Not unified
- Not emphasizing typography over imagery
- Copy/paste
- Poor planning
- Skipping thumbnailing and wireframing
- Borders everywhere!!
- Poor choice of breakpoints
- Not thinking about content
- Content relationships that don’t work