Slide 1

Slide 1 text

REPLACING PHOTOSHOP HTML PROTOTYPES Dennis Kardys UX/Creative Director - WSOL @dkardys WITH

Slide 2

Slide 2 text

THE REAL WORLD The mundane and tedious situations we accept as facts of life?

Slide 3

Slide 3 text

vs. THE REAL WORLD Faulty prototypes begging to be fixed.

Slide 4

Slide 4 text

WEB DESIGN IS HARDER THAN EVER

Slide 5

Slide 5 text

How do we communicate CANVAS, CONTEXT & CAPABILITIES?

Slide 6

Slide 6 text

But WILL the People know to click it?

Slide 7

Slide 7 text

http://disneycartoon.deviantart.com/art/Spongebob-Imagination-126455311 IMAGINATION

Slide 8

Slide 8 text

BETTER WAYS?

Slide 9

Slide 9 text

Samantha Warren’s STYLE TILES

Slide 10

Slide 10 text

Jeremy Keith Pattern Primer Jeremy Keith’s PATTERN PRIMER

Slide 11

Slide 11 text

...beginning with the atomic units of content and styling them first before even thinking about layout... - Jeremy Keith

Slide 12

Slide 12 text

Slide 13

Slide 13 text

IF THEY MATED?

Slide 14

Slide 14 text

1. RESPONSIVE 2. LAYOUT INDEPENDENT 3. COMMUNICATE + IDEATE 4. DISPOSABLE 5. SUSTAINABLE

Slide 15

Slide 15 text

The HTML Device Agnostic Design Style Tile Pattern UI KIT thingamajig

Slide 16

Slide 16 text

The HTML Device Agnostic Design Style Tile Pattern UI KIT thingamajig code name: MAMMAL PAW

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

The goal is to provide a realistic and cohesive impression of the visual design...

Slide 19

Slide 19 text

that can be evaluated objectively... outside the conventions of any ONE specific CONTEXT.

Slide 20

Slide 20 text

UI Patterns Color Scheme Typography

Slide 21

Slide 21 text

Forms Illustration Style Figures & Captions Content Modules

Slide 22

Slide 22 text

Operation: MAMMAL PAW vs...

Slide 23

Slide 23 text

2 sets of wireframe concepts, 2 design concepts, responsive design

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

+

Slide 26

Slide 26 text

+ IF THEY MATED?

Slide 27

Slide 27 text

+

Slide 28

Slide 28 text

People want options, but they don’t always understand them -peter the unemployed architect

Slide 29

Slide 29 text

Choices give a sense of control and stake of ownership in the chaos called the creative process.

Slide 30

Slide 30 text

Understanding your clients motivations helps you propose alternative viable solutions

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

BETTER DESIGN COMMUNICATION Presenting responsive HTML provokes smarter conversations

Slide 33

Slide 33 text

Ben has spoken. We demand the button above the fold!

Slide 34

Slide 34 text

MORE CONSTRUCTIVE COLLABORATION exploration vs. refinement

Slide 35

Slide 35 text

initial number of concepts concepts reduced, idea refined concepts reduced, idea refined concept resolution Design Funnel: Continual Refinement based on illustrations from “Sketching User Experiences” by Bill Buxton, 2007

Slide 36

Slide 36 text

Variation: Alternating Refinement and Ideation concepts reduced, idea refined concepts reduced, idea refined concept resolution concept generation concept generation concept generation initial number of concepts based on illustrations from “Sketching User Experiences” by Bill Buxton, 2007

Slide 37

Slide 37 text

Ultimately, more ideas, more collaboration, better results. Equal effort. More time for testing.

Slide 38

Slide 38 text

Modular Design + Structured Content (CC BY-SA) http://www.flickr.com/photos/bdesham/2432400623/

Slide 39

Slide 39 text

Find Patterns Avoid Conditional Logic Start using a framework OOCSS / SMACSS

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Object: Media Block (.media) floated image, title, description, link or button

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Object: Content Listings (.vlist) assorted vertical lists of content

Slide 44

Slide 44 text

HTML Prototype Design Guide.html baseline.css grid.css patterns.css Hi Fidelity HTML style-v1.css style-v2.css style-v3.css

Slide 45

Slide 45 text

example style.css ABSTRACT STYLES example: instead of .purple, .green, .blue, use .c1, .c2, .c3

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Pitfalls: How much to show? Keeping code organized Keeping pages looking cohesive Unknowns

Slide 48

Slide 48 text

It’s the normal cycle of thinking you have things figured out... then realizing just how much you don't.

Slide 49

Slide 49 text

Dennis Kardys UX/Creative Director - WSOL @dkardys THANK YOU! dennis@robotregime.com robotregime.com