Skip to content

Commit

Permalink
updated slides to fit the mobile + web devcon audience
Browse files Browse the repository at this point in the history
  • Loading branch information
@GarthDB
GarthDB committed Jul 19, 2012
1 parent b858329 commit 7707500
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 93 deletions.
76 changes: 27 additions & 49 deletions rapid_html/index.html
View file
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rapid HTML5 Prototyping</title>
<title>Rapid HTML</title>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,100italic,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
Expand All @@ -14,85 +14,63 @@
<div class="state-background"></div>
<div class="slides">
<section data-state="home-page" class="home">
<h1>Rapid HTML5 Prototyping</h1>
<h1>Rapid HTML</h1>
<h3 class="inverted"><b>Garth</b>Braithwaite<span>Senior Experience Designer</span></h3>
</section>
<section><a href="http://garthdb.github.com/Presentations/html_prototyping">garthdb.github.com/Presentations/html_prototyping</a></section>
<section><a href="http://garthdb.github.com/Presentations/rapid_html">garthdb.github.com/Presentations/rapid_html</a></section>
<section>
<h1 class="large"><a href="http://twitter.com/garthdb">@garthdb</a></h1>
</section>
<section>
<h1>Goal</h1>
<p class="fragment">Man up and use HTML in your design process</p>
<p class="fragment">Go fast; use HTML in new processes.</p>
</section>
<section>
<h1>Overview</h1>
<ul>
<li class="fragment">Background <span class="fragment">(Origin Story)</span></li>
<li class="fragment">Problems</li>
<li class="fragment">Background<span class="fragment">(Origin Story)</span></li>
<li class="fragment">Solution</li>
<li class="fragment">Rapid'd!</li>
</ul>
</section>
<section>
<section>
<h1>Origin Story</h1>
<h1>Problems</h1>
</section>
<section>
<h1>Designer</h1>
<h1>Background</h1>
<ul>
<li>Print Agency</li>
<li>20 Designers, 3 Developers</li>
<li>Print Agency (Designer)</li>
<li>Inhouse (Front End Developer)</li>
<li>Inhouse (Developer)</li>
<li>Digital Agency (Architect)</li>
<li>Digital Agency (UX Director)</li>
<li>Product (Experience Designer)</li>
</ul>
</section>
<section>
<h1>Designer / Design Implementer</h1>
<ul>
<li>Inhouse (small)</li>
<li>Public Marketing</li>
<li>1 Designer / Developer</li>
</ul>
<h1>Brackets</h1><img src="assets/brackets_icon.png">
</section>
<section>
<h1>Developer</h1>
<h1>Brackets</h1>
<ul>
<li>Inhouse</li>
<li>Public / Internal Enterprise Applications</li>
<li>1 Manager, 1 Designer / Developer, 1 Developer </li>
<li class="fragment">Open source code editor</li>
<li class="fragment">Built for web development</li>
<li class="fragment">Built in HTML/CSS/JS</li>
<li class="fragment">Highly extensible</li>
<li class="fragment">Brilliant engineer team</li>
</ul>
</section>
<section>
<h1>Architect</h1>
<ul>
<li>Digital Agency</li>
<li>Public Applications</li>
<li>6 Designers, 20 Developers</li>
</ul>
</section>
<section>
<h1>UX Designer</h1>
<ul>
<li>Digital Agency</li>
<li>Public Applications</li>
<li>6 Visual Designers, 20 Developers</li>
</ul>
<h1>Revelation</h1>
<h3 class="fragment">Interaction Design is Hard</h3>
</section>
<section>
<h1>Sr Exp Designer</h1>
<ul>
<li>Product</li>
<li>5000 Total Employees, 110 in XD</li>
</ul>
<h1>IxD</h1>
<h3 class="fragment">Describe how users will interact with a system/product/company to achieve their goals</h3>
</section>
</section>
<section>
<h1>Revelation</h1>
<h3 class="fragment">Interaction Design is Hard</h3>
</section>
<section>
<h1>IxD</h1>
<h3 class="fragment">Describe how users will interact with a system/product/company to achieve their goals</h3>
</section>
<section>
<h1>Problems</h1>
</section>
Expand Down Expand Up @@ -133,7 +111,7 @@ <h3 class="fragment">and strengths</h3>
<h1>Summary</h1>
<p>Designing out of context will always be open to misinterpretation and translation errors.</p><br>
<h2 class="fragment">Translation:</h2>
<p class="fragment">Learn how to code.</p>
<p class="fragment">Designers should learn how to code.</p>
</section>
<section>
<h1>Solution</h1>
Expand Down Expand Up @@ -186,7 +164,7 @@ <h1>Local Testing</h1><a href="http://simbco.github.com/httpster" class="fragmen
<section>
<h1>IDE</h1>
<ul class="flex-list">
<li class="fragment"><a href="http://github.com/adobe/brackets">shhh...</a>(not yet) $0 mac/pc/linux/...</li>
<li class="fragment"><a href="http://github.com/adobe/brackets">Brackets</a>$0 mac/pc/"linux"</li>
<li class="fragment"><a href="http://www.sublimetext.com/2">Sublime Text 2 </a>$59 mac/pc/linux</li>
<li class="fragment"><a href="http://www.panic.com/coda/">Coda </a>$99 mac</li>
<li class="fragment"><a href="http://macrabbit.com/espresso/">Espresso </a>$79 mac</li>
Expand Down Expand Up @@ -393,7 +371,7 @@ <h3>Colophon</h3>
<script>
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(w*)/gi, function(a) {
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
Reveal.initialize({
Expand Down
74 changes: 30 additions & 44 deletions rapid_html/index.jade
View file
@@ -1,6 +1,6 @@
!!! 5
html
title = 'Rapid HTML5 Prototyping'
title = 'Rapid HTML'
include ../includes/head.jade
link(href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,100italic,300italic,400italic,700italic', rel='stylesheet', type='text/css')
body
Expand All @@ -18,71 +18,57 @@ html
span Senior Experience Designer

section
a(href="http://garthdb.github.com/Presentations/html_prototyping") garthdb.github.com/Presentations/html_prototyping
a(href="http://garthdb.github.com/Presentations/rapid_html") garthdb.github.com/Presentations/rapid_html

section
h1.large
a(href="http://twitter.com/garthdb") @garthdb

section
h1 Goal
p.fragment Man up and use HTML in your design process
p.fragment Go fast; use HTML in new processes.

section
h1 Overview
ul
li.fragment Problems
li.fragment
|Background
|Background
span.fragment (Origin Story)
li.fragment Problems
li.fragment Solution
li.fragment Rapid'd!

section
section
h1 Origin Story
section
h1 Designer
ul
li Print Agency
li 20 Designers, 3 Developers
h1 Problems
section
h1 Designer / Design Implementer
h1 Background
ul
li Inhouse (small)
li Public Marketing
li 1 Designer / Developer
li Print Agency (Designer)
li Inhouse (Front End Developer)
li Inhouse (Developer)
li Digital Agency (Architect)
li Digital Agency (UX Director)
li Product (Experience Designer)
section
h1 Developer
ul
li Inhouse
li Public / Internal Enterprise Applications
li 1 Manager, 1 Designer / Developer, 1 Developer
section
h1 Architect
ul
li Digital Agency
li Public Applications
li 6 Designers, 20 Developers
h1 Brackets
img(src="assets/brackets_icon.png")
section
h1 UX Designer
h1 Brackets
ul
li Digital Agency
li Public Applications
li 6 Visual Designers, 20 Developers
section
h1 Sr Exp Designer
ul
li Product
li 5000 Total Employees, 110 in XD
li.fragment Open source code editor
li.fragment Built for web development
li.fragment Built in HTML/CSS/JS
li.fragment Highly extensible
li.fragment Brilliant engineer team

section
h1 Revelation
h3.fragment Interaction Design is Hard
section
h1 Revelation
h3.fragment Interaction Design is Hard

section
h1 IxD
h3.fragment Describe how users will interact with a system/product/company to achieve their goals
section
h1 IxD
h3.fragment Describe how users will interact with a system/product/company to achieve their goals

section
h1 Problems
Expand Down Expand Up @@ -119,7 +105,7 @@ html
p Designing out of context will always be open to misinterpretation and translation errors.
br
h2.fragment Translation:
p.fragment Learn how to code.
p.fragment Designers should learn how to code.

section
h1 Solution
Expand Down Expand Up @@ -169,8 +155,8 @@ html
h1 IDE
ul.flex-list
li.fragment
a(href="http://github.com/adobe/brackets") shhh...
| (not yet) $0 mac/pc/linux/...
a(href="http://github.com/adobe/brackets") Brackets
| $0 mac/pc/"linux"
li.fragment
a(href="http://www.sublimetext.com/2") Sublime Text 2
| $59 mac/pc/linux
Expand Down

0 comments on commit 7707500

Please sign in to comment.