Tweet
Tweet

Slide 1

Slide 1 text

Work Smarter, Not Harder. Using digital prototypes to create responsive wireframes.

Slide 2

Slide 2 text

Who are we?

Slide 3

Slide 3 text

A brief history

Slide 4

Slide 4 text

The Guttenberg Version Wireframes:

Slide 5

Slide 5 text

The Wireframe

Slide 6

Slide 6 text

3 in 3

Slide 7

Slide 7 text

Illustrator Axure Omnigraffle

Slide 8

Slide 8 text

Responsive Prototype

Slide 9

Slide 9 text

3 in 1 html

Slide 10

Slide 10 text

Early collaboration

Slide 11

Slide 11 text

Prototype Tools Foundation Bootstrap Proty

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

What You Need To Know

Slide 14

Slide 14 text

Responsive Principles

Slide 15

Slide 15 text

Grid System

Slide 16

Slide 16 text

Content is king

Slide 17

Slide 17 text

Sketch A Plan

Slide 18

Slide 18 text

Technical Components GitHub*

Slide 19

Slide 19 text

Text Wrangler Dreamweaver Sublime Text 2 Coda Textmate

Slide 20

Slide 20 text

Prototype Pros

Slide 21

Slide 21 text

Instant feedback

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

...for the most part.

Slide 24

Slide 24 text

Prototypes are dynamic. …like these two.

Slide 25

Slide 25 text

Prototype Cons

Slide 26

Slide 26 text

This looks convincingly real!

Slide 27

Slide 27 text

Changes to timeline

Slide 28

Slide 28 text

Integrate as a deliverable

Slide 29

Slide 29 text

Paparazzi Awesome Screenshot

Slide 30

Slide 30 text

In sum... • 3 in 1 • HTML/CSS (more universal) • instant feedback • more effective wireframes

Slide 31

Slide 31 text

Gracias! Andrew Wachholz [email protected] Michelle Chin [email protected]