Course Overview-Course Overview
Course Introduction
()
About this course
About the assignments
Project Brief
Required tools
Academic Integrity
About CalArts and the Program in Graphic Design
Course Overview-How Peer Review Works
What is peer review?
Why Peer Review?
()
Peer Review Tips
()
How to apply feedback
()
Course Overview-Course Communication Policies
Instructor Presence and Staff Support
Forum Guidelines
Requesting Peer Reviews
Not Getting Caught up in the Details: Wireframes-Introduction to Wireframes
Introduction to Week 1
()
Introduction to Wireframes
()
Example Wireframes: Pasadena Conservatory of Music
Not Getting Caught up in the Details: Wireframes-Responsive Design
Responsive Design: What size should your website be?
()
Scrolling
Further Reading
Not Getting Caught up in the Details: Wireframes-Navigation Systems
Introduction and Primary navigation
()
Secondary and utility navigation
()
Related content, inline links, indexes, and search
()
Wayfinding
()
Not Getting Caught up in the Details: Wireframes-Common Design Patterns
Header
()
Footer
()
Sidebar
()
Content
()
Common Form Elements
()
Not Getting Caught up in the Details: Wireframes-Homepage Content Strategies
Introduction to Homepage Content Strategies
()
Examples of Homepage Content Strategies
()
Not Getting Caught up in the Details: Wireframes-Build Your Wireframes
Wireframing Tools
()
Try it yourself: Sketch out a wireframe
Wireframes: Bradley
()
Wireframes: Alyson, part 1
()
Wireframes: Alyson, part 2
()
A Final Thought for the Week
Finally, Make it Beautiful: The Mockup Phase-Introduction to Visual Mockups
Introduction to Week 2
()
Visual Mockups
()
Finally, Make it Beautiful: The Mockup Phase-Design Principles and Whitespace
Design Principles
()
What is whitespace?
()
Using whitespace to style a form
()
A visual comparison
()
Finally, Make it Beautiful: The Mockup Phase-The Grid
The Grid
Finally, Make it Beautiful: The Mockup Phase-Web Typography
Web Fonts
()
Web Typography: A few tips
()
Further Reading
Finally, Make it Beautiful: The Mockup Phase-Web History, Skeuomorphs & Flat Design
Web History, Skeuomorphs & Flat Design
Finally, Make it Beautiful: The Mockup Phase-Moodboards
Moodboards
Finally, Make it Beautiful: The Mockup Phase-Create Your Mockups
Creating Visual Mockups
()
Moodboards and Homepage Mockup: Bradley
()
Homepage Mockup: Alyson
()
Finally, Make it Beautiful: The Mockup Phase-Bonus Content
Interview with Rob Hope: Web design trends
()
More from Rob Hope: EBook on Landing Page Hot Tips
A Final Thought for the Week
An Excursion to Codelandia-Welcome to Codelandia
Introduction to Week 3
()
A Web Design History Primer
An Excursion to Codelandia-Is coding important?
Do I Need to Learn How to Code?
()
How to become a unicorn
Survey of Web Technologies
()
HTML vs. CSS vs. Javascript: A metaphorical adventure
()
HTML Basics
()
CSS Basics
()
Web Inspector
()
Try it yourself: Styling Buttons
An Excursion to Codelandia-Bonus Material
Further "Reading"
A Final Thought for the Week
Putting it all Together: Final Presentation-Making Clickable Mockups
Introduction to Week 4
()
Putting it all Together: Final Presentation-Clickable Prototypes
Clickable Prototypes Introduction
()
Invision Introduction
()
Exporting Assets
()
Importing Assets and Creating Hotspots
()
Hotspot Templates
()
Putting it all Together: Final Presentation-Dark Patterns
Dark Patterns
Putting it all Together: Final Presentation-Final Project Submission
Full Mockups: Bradley
()
Full Mockups: Alyson
()
A Final Thought for the Week