Progressive Prototyping with HTML5

“Interaction design without prototyping is like cooking without tasting.” How to create fancy web design with HTML5 and CSS3

Trang 1

PROGRESSIVE PROTOTYPING

TODD ZAKI WARFEL / BIG D / #html5

Trang 2

“Interaction design without prototyping is like cooking without tasting ”

- Craig Villamore cvil.ly

http://bit.ly/pb5Xec

Trang 3

I DON’T WIREFRAME

Trang 4

I want to taste the f

ood I’m making.

Trang 5

DESIGN PROCESS PROTOTYPING IS A

Trang 6

WORK THROUGH AND VALIDATE YOUR DESIGN

PROTOTYPING OFFERs A BETTER WAY TO

Trang 7

“You can fix it on the drafting board with an eraser, or on the construction site with a

sledgehammer.”

- Frank Lloyd Wright

Trang 8

FAIL IN A LOW COST ENVIRONMENT PROTOTYPES ALLOW YOU TO

Trang 9

IF YOU AREN’T FAILING, YOU’RE NOT TRYING HARD ENOUGH.

Trang 11

It might end up lik e this, but

Trang 12

It always starts with a sk

etch

Trang 14

Designing with data fir

st

Trang 15

Next, a fe w rounds in gr

ayscale

Trang 16

Finish it off with some se

x appeal

Trang 19

HTML5 Doctype

<!DOCTYPE HTML>

Trang 24

html page structure

A typical HTML page will

use divs with IDs and

Classes to create the

structure.

div id=header

div id=footer

div id= sidebar div id=content

div id=nav

Trang 25

HTML5 page structure

HTML5 gives semantic

meaning to these structures,

which previously required

IDs and Classes.

footer

aside section/article

header nav

Trang 26

PRO TIP: UPDATE YOUR RESET.CSS

article, aside, footer, header, hgroup, nav, meter, progress, section

{ display:block; margin:0; padding:0;

border:0; font-‐weight:inherit; font-‐

style:inherit; font-‐size:100%; font-‐

family:inherit; vertical-‐align:baseline; list-‐style:none; outline:none}

Trang 27

What about thIS LITTLE BASTARD?

IE needs a little help from

our friend JavaScript.

Trang 28

Pro tip: Smack IE Into Shape

Trang 29

NEW HTML5 Input Types

Trang 30

NEW HTML5 Input Types

url

Trang 31

Email URL

Instant mobile adv

antage

Trang 32

Gettin’ Sexy with CSS3

It’s the New Photoshop, YO!

Trang 33

E[attribute*=value]

E ~ F :root :last-‐child :only-‐child :nth-‐child() :nth-‐last-‐child() :first-‐of-‐type :last-‐of-‐type :only-‐of-‐type :nth-‐of-‐type()

:nth-‐last-‐of-‐type() :empty

:not() :target :enabled :disabled :checked

Trang 34

E[attribute*=value]

E ~ F :root

:last-‐child

:only-‐child

:nth-‐child() :nth-‐last-‐child() :first-‐of-‐type :last-‐of-‐type :only-‐of-‐type :nth-‐of-‐type()

:nth-‐last-‐of-‐type()

:empty :not() :target :enabled :disabled :checked

Trang 36

Fancy Button

Trang 37

Border Radius

-‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐ radius:6px; border-‐radius:6px;

Fancy Button

Trang 38

TExt Shadow

text-‐shadow: 1px 1px 0 #d2572b;}

Fancy Button

Trang 40

Background Gradient

background:-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b);

background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐

stop(0.55, #e67646), to(#d2572b));

Fancy Button

Trang 41

Anatomy of a CSS3 Button

.btn-‐primary {padding:.5em .9em; background:

#e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐

gradient(center top, #eb9972, #e67646 55%,

#d2572b); -‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0

0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0

0 3px; box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:#ddd 0 0 0 2px; -‐webkit-‐box-‐shadow:#ddd

0 0 0 2px; font-‐size: 1.375em; font-‐weight: 500;

color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}

Trang 42

#d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐

radius:6px; border-‐radius:6px; border:1px solid

#bc6647; -‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px;

font-‐size: 1.375em; font-‐weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}

Trang 43

#d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐

radius:6px; border-‐radius:6px; border:1px solid

#bc6647; -‐moz-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; -‐webkit-‐box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px; box-‐shadow:rgba(218,218,218,.6) 0 0 0 3px;

font-‐size: 1.375em; font-‐weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}

Trang 44

#e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55,

#e67646), to(#d2572b)); background:-‐moz-‐linear-‐

#d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐

border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐

box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐

weight: 500; color: #fff; text-‐shadow: 1px 1px 0

#d2572b; }

Trang 45

Hi-fi color/Hi-fi functional

Trang 46

Build all the pieces fir

st

Trang 47

Add some inter action with jQuer

y

Trang 48

Show me some of that se

xy self heal

Trang 50

http://www.w3.org/TR/html5 http://www.w3.org/Style/CSS/current-‐work.en.html http://html5shiv.googlecode.com/svn/trunk/html5.js http://modernizr.com

http://diveintohtml5.org http://realworldcss3.com/resources/

Trang 51

Prototyping: a Practitioner’s Guide

Tiêu đề	Progressive prototyping
Tác giả	Todd Zaki Warfel
Thể loại	bài luận
Năm xuất bản	2025

Định dạng
Số trang	51
Dung lượng	28,24 MB