Download - Design At Scale Workshop
![Page 1: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/1.jpg)
Design at ScaleFaster, Better UX via Design Systems
Dane Petersen@thegreatsunra
Karel Barnoski@karelbarnoski
Lean Day West Portland, OR | September 16, 2013
![Page 2: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/2.jpg)
HOUSEKEEPING
Install a text editor
Sublime Text is great on PC and Mac
Download the zip file
http://tr.im/4dkrc
Introduce yourself to the people at your table and make sure at least one of you knows HTML/CSS
If everyone at your table knows HTML/CSS, please consider sharing your wisdom with another table!
![Page 3: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/3.jpg)
Introductions
![Page 4: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/4.jpg)
Dane PetersenLead Interaction Designer
GE Aviation
Karel BarnoskiLead Interaction Designer
GE Energy
!
"
![Page 5: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/5.jpg)
OUR PLAN FOR TODAY
Learn about design systems
Moving quickly from concept to creation
Sketch an app for your smart home
Use a design system to convert that sketch into code
![Page 6: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/6.jpg)
1:00–1:10 Settle In & Introductions (10min)
1:10–1:20 Our Perspective (10min)
1:20–1:30 Sketching (10min)
1:30–2:30 Sketch Activity (60 min)
2:30–2:45 Break (15 min)
2:45–3:00 Design Systems (15 min)
3:00–3:15 Coding (15 min)
3:15–4:15 Coding Activity (60 min)
4:15–4:30 Wrap Up (15 min)
TODAY’S SCHEDULE
![Page 7: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/7.jpg)
![Page 8: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/8.jpg)
![Page 9: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/9.jpg)
Go for it!
![Page 10: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/10.jpg)
Questions?
![Page 11: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/11.jpg)
Our Perspective
![Page 12: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/12.jpg)
We are GE
![Page 13: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/13.jpg)
GE is huge
121 years old300,000 employees14,000 developers$147 billion revenue$13 billion income
![Page 14: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/14.jpg)
GE is huge
121 years old300,000 employees14,000 developers$147 billion revenue$13 billion income
![Page 15: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/15.jpg)
![Page 16: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/16.jpg)
![Page 17: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/17.jpg)
![Page 18: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/18.jpg)
![Page 19: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/19.jpg)
![Page 20: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/20.jpg)
![Page 21: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/21.jpg)
![Page 22: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/22.jpg)
machines
![Page 23: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/23.jpg)
machines
analytics
![Page 24: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/24.jpg)
machines
analyticspeople
![Page 25: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/25.jpg)
machines
analyticspeople
The Industrial Internet
![Page 26: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/26.jpg)
Help people create elegant, powerful and extensible experiences for the Industrial Internet
OUR MISSION
![Page 27: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/27.jpg)
Lean UX + Design Systems + Agile
![Page 28: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/28.jpg)
LEAN UX CASE STUDY
5 intense days of cross-functional collaboration
Worked side-by-side with several energy customers
Sketched and built a prototype to get user feedback
![Page 29: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/29.jpg)
![Page 30: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/30.jpg)
Overview!
![Page 31: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/31.jpg)
![Page 32: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/32.jpg)
![Page 33: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/33.jpg)
Sketching
![Page 34: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/34.jpg)
![Page 35: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/35.jpg)
![Page 36: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/36.jpg)
![Page 37: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/37.jpg)
![Page 38: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/38.jpg)
![Page 39: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/39.jpg)
![Page 40: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/40.jpg)
![Page 41: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/41.jpg)
![Page 42: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/42.jpg)
![Page 43: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/43.jpg)
GE HAS A SKETCHING CULTURE
![Page 44: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/44.jpg)
Externalizing Your Work
Making Over Analysis
Shared Understanding
Permission to Fail
FOUR LEAN UX PRINCIPLES
![Page 45: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/45.jpg)
Sketching is all about getting ideas out of your head.
SKETCHING IS EXTERNALIZING YOUR WORK
![Page 46: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/46.jpg)
Sketching is all about getting ideas out of your head.
Thinking only exercises one part of your brain. Looking engages more of your brain.
Getting sketches in front of coworkers and users engages their brains too.
SKETCHING IS EXTERNALIZING YOUR WORK
![Page 47: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/47.jpg)
Make to think!
Over-analyzing a problem can lead to fear that you’re missing something, which leads to analysis paralysis.
Making rough things helps you get a direct response from your target users.
SKETCHING IS MAKING OVER ANALYSIS
![Page 48: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/48.jpg)
Sketching minimizes competition between different ideas.
SKETCHING HELPS SHARED UNDERSTANDING
![Page 49: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/49.jpg)
Sketching minimizes competition between different ideas.
It turns the idea into a third party that everyone is free to critique.
SKETCHING HELPS SHARED UNDERSTANDING
![Page 50: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/50.jpg)
Your first solution probably won’t be your best one.
Use paper to make your mistakes cheaply and quickly.
And then make some more!
SKETCHING IS ALL ABOUT RAPID FAILURE
![Page 51: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/51.jpg)
Anybody can sketch. This isn’t about art!
Ugly is fine! And expected!
Speed is more appropriate than perfection.
And remember...
SKETCHING IS NOT DRAWING
![Page 52: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/52.jpg)
Anybody can sketch. This isn’t about art!
Ugly is fine! And expected!
Speed is more appropriate than perfection.
And remember...
SKETCHING IS NOT DRAWING
![Page 53: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/53.jpg)
Activity #1: Sketching
![Page 54: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/54.jpg)
Blank paper
Sticky notes
Sharpies!
YOUR TOOLS, YOUR FRIENDS
![Page 55: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/55.jpg)
Theme: The Smart Home Manager
ACTIVITY #1: SKETCHING
![Page 56: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/56.jpg)
![Page 57: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/57.jpg)
![Page 58: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/58.jpg)
![Page 59: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/59.jpg)
![Page 60: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/60.jpg)
![Page 61: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/61.jpg)
![Page 62: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/62.jpg)
![Page 63: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/63.jpg)
Theme: The Smart Home Manager
Think of all the connected things in your home
Imagine a system that lets you view and manage all of those things
ACTIVITY #1: SKETCHING
![Page 64: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/64.jpg)
![Page 65: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/65.jpg)
Sketch as an individual (15 min)
Share your sketches with your team (1 min per person)
Establish a design direction as a team (5 min)
As a team, iterate on your shared design (15 min)
Present your design to the other teams (1 min per group)
ACTIVITY #1: SKETCHING
![Page 66: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/66.jpg)
Feeling stuck?
Start with words
One idea per sticky
Quantity over quality
Cluster and iterate
ACTIVITY #1: SKETCHING
![Page 67: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/67.jpg)
Feeling stuck?
Who uses it?
What does it do?
Where do they use it?
When do they use it?
How do they use it?
Why would they use it?
ACTIVITY #1: SKETCHING
![Page 68: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/68.jpg)
Nice work!
![Page 69: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/69.jpg)
![Page 70: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/70.jpg)
Break15 minutes
![Page 71: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/71.jpg)
1:00–1:10 Settle In & Introductions (10min)
1:10–1:20 Our Perspective (10min)
1:20–1:30 Sketching (10min)
1:30–2:30 Sketch Activity (60 min)
2:30–2:45 Break (15 min)
2:45–3:00 Design Systems (15 min)
3:00–3:15 Coding (15 min)
3:15–4:15 Coding Activity (60 min)
4:15–4:30 Wrap Up (15 min)
TODAY’S SCHEDULE
![Page 72: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/72.jpg)
Design Systems
![Page 73: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/73.jpg)
A design system is a collection of visual and interaction elements that embodies the brand
The system is often expressed across many channels including web, mobile, desktop, and service so that a consistent user experience is produced
![Page 74: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/74.jpg)
Logo. A visual metaphor and often the most recognizable part of a design system.
COMPONENTS OF A DESIGN SYSTEM
Color. A consistent color palette supports the system by communicating brand tone.
Imagery. Enhances core qualities of the brand and provides recognizable anchors.
Structure. Organizes content and interface for software and hardware design.
Messaging. Expresses intangible emotional values and purpose or instruction.
Typography. A recognizable brand element that reinforces a unified experience.
Interaction. Patterns for interacting with UI elements creating a quality experience.
#
$
%
&
'
(
![Page 75: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/75.jpg)
DIETER RAMS - BRAUN 1955-1995
![Page 76: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/76.jpg)
PHYSICAL WORLD
![Page 77: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/77.jpg)
DESIGN SYSTEMS ARE NOTHING NEW
![Page 78: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/78.jpg)
HARDWARE & SOFTWARE
![Page 79: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/79.jpg)
GE Design Systems
![Page 80: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/80.jpg)
SHARING DESIGN SYSTEMS WITH OTHERS
![Page 81: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/81.jpg)
MARKETING DESIGN SYSTEM
![Page 82: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/82.jpg)
HEALTHCARE DESIGN SYSTEM
![Page 83: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/83.jpg)
MOBILE DESIGN SYSTEM
![Page 84: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/84.jpg)
TABLET DESIGN SYSTEM
![Page 85: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/85.jpg)
INDUSTRIAL INTERNET DESIGN SYSTEM
![Page 86: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/86.jpg)
INDUSTRIAL INTERNET DESIGN SYSTEM
![Page 87: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/87.jpg)
Speed application development
Improve software UI quality
Enable extension and reuse
Support additional verticals & external partners
Minimize ongoing support needs
INDUSTRIAL INTERNET DESIGN GOALS
)
*
+
,
-
![Page 88: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/88.jpg)
DESIGN TEMPLATES
![Page 89: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/89.jpg)
DESIGN TEMPLATES
![Page 90: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/90.jpg)
DESIGN TEMPLATES
![Page 91: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/91.jpg)
DESIGN TEMPLATES
![Page 92: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/92.jpg)
Prototyping in Code
![Page 93: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/93.jpg)
The Industrial Internet Design System (IIDS)
A code-based design framework that establishes visual and interactive patterns for all of GE’s industrial internet software
![Page 94: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/94.jpg)
IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
![Page 95: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/95.jpg)
IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
![Page 96: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/96.jpg)
<!DOCTYPE html>
![Page 97: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/97.jpg)
<title>Dashboard View</title> <meta name="viewport" content="width=device-width"> <link href="./css/themes/iids/iids.min.css" rel="stylesheet"> <!-- Include modernizr and respond first so they can shim any elements which are missing in older browsers. Other javascripts should be included at the end of the page to improve load time. --> <script src="./js/vendor/modernizr-respond.js"></script> </head> <body> <div class="navbar"> <div class="masthead navbar-inner"> <div class="container"> <a class="brand" href="#"><span class="ge-logo">General Electric</span> My Application <small><i>powered by</i> GE Business</small></a> <button class="btn btn-collapse" data-toggle="collapse" data-target=".primary-navbar,.workspace-navbar"> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </button>
![Page 98: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/98.jpg)
♥ Bootstrap
![Page 99: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/99.jpg)
♥
![Page 100: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/100.jpg)
♥
![Page 101: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/101.jpg)
♥
![Page 102: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/102.jpg)
♥ D3.js
![Page 103: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/103.jpg)
♥
![Page 104: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/104.jpg)
♥
![Page 105: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/105.jpg)
♥
![Page 106: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/106.jpg)
BootstrapDataTables
express{ D3.js
Font Awesome
![Page 107: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/107.jpg)
![Page 108: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/108.jpg)
![Page 109: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/109.jpg)
![Page 110: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/110.jpg)
![Page 111: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/111.jpg)
![Page 112: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/112.jpg)
![Page 113: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/113.jpg)
Activity #2: Coding
![Page 114: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/114.jpg)
Install a text editor:
Sublime Text is great on PC and Mac
Download the zip file:
http://tr.im/4dkrc
![Page 115: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/115.jpg)
OPEN SOURCE DESIGN SYSTEMS
![Page 116: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/116.jpg)
BOOTSTRAP_LDW.ZIP
![Page 117: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/117.jpg)
FLUID.HTML
![Page 118: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/118.jpg)
FLUID.HTML
![Page 119: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/119.jpg)
BOOTSTRAP_LDW/DOCS
![Page 120: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/120.jpg)
BASE-CSS.HTML
![Page 121: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/121.jpg)
BASE-CSS.HTML#BUTTONS
![Page 122: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/122.jpg)
SCAFFOLDING.HTML#GRIDSYSTEM
![Page 123: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/123.jpg)
Turn your sketches into an interactive prototype for your Smart Home Manager
ACTIVITY #2: CODING
![Page 124: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/124.jpg)
ACTIVITY #2: CODING
As a team, figure out which part of your Smart Home Manager each of you is going to work on (5 min)
As an individual, start prototyping your part (20 min)
Share your progress with your team (1 min per person)
Iterate on your part in response to team feedback (15 min)
![Page 125: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/125.jpg)
EXTRA CREDIT
Create a GitHub repository to collaborate with your team
![Page 126: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/126.jpg)
EXTRA CREDIT
Add a data visualization component (Highcharts, D3, etc.)
![Page 127: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/127.jpg)
EXTRA CREDIT
Add a data visualization component (Highcharts, D3, etc.)
![Page 128: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/128.jpg)
Nice work!
![Page 129: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/129.jpg)
![Page 130: Design At Scale Workshop](https://reader033.vdocument.in/reader033/viewer/2022052522/54c747604a79595f4a8b4577/html5/thumbnails/130.jpg)
Thank you!
Dane Petersen@thegreatsunra
Karel Barnoski@karelbarnoski