Design Approaches

Visual strategies for planning projects

Technical approaches

Diagrams

✅ Can show underlying software

✅ Can show underlying hardware

Wong Cinema Switch Capstone Diagram

❌ Don't conceal the process!

🤔 What software is running on each device?

🤔 Which direction is the information flowing?

🤔 What format is the information--images, JSON, user comments?

✅ Draw arrows to show flow or cause/effect

Dapice, Guy, and Mcguire, Bloodhound Capstone Diagram

✅ Use physical metaphors and intuition

Schematic Coal Diagram

Storyboards

✅ Can show scene sequence with "key frames"

Hand-sketched Storyboard

✅ Can show multiple paths for user

Multi-option Storyboard

✅ Copy-paste to save effort in digital storyboards

Digital Storyboard

✅ Wireframes can be sufficient

Mobile App Components Storyboard

Flowcharts

❌ Useless if too vague!

Game Development Bad Flowchart

✅ Can include phases of a project

Short Movie Production Flowchart

✅ Can include people involved in collaboration

Anime Production Flowchart

✅ Can show how decisions are made

How to respond to social media feedback

✅ Can show multiple outcomes

Where to post your status

Rendering

Alien Rendering

Anarchist Parti

Cranfield Library Parti

F Turns Nazi Parti

Getup Storyboard

Hockey Rendering

Homepage Storyboard

Illusionist Wireless Diagram

Iran Communist Parti

Movie Cluster

Music Parts Parti+

Ohiou Architect Parti

Open Art Parti@O

Restaurant Interface Rendering

Restaurant Pad Rendering

Roadkill Parti

Senegal Socialist Parti

Solarpower Cutaway Diagram

Startrek Cygnus Rendering