Web Design trendsTHE WHY AND THE HOW

© 2013 Adobe Systems Incorporated. All Rights Reserved. #CreateNow© 2013 Adobe Systems Incorporated. All Rights Reserved. #CreateNow

Démystification

Bonjour

Michaël CHAIZE@mchaize

@mchaizeLET’S CONNECT

1994 2014>

TABLE BASED PAGES

@mchaizeLET’S CONNECT

1994 2014>CSS HITS THE WEB

THE RISE OF FLASHTHE RISE OF JAVASCRIPT

WEB 2.0 - RIA

THE MOBILE WEB

THE TRENDS

LET’S CONNECT@mchaize

Great things are not accomplished by those who yield to trends and fads and popular opinion. JACK KEROUAC

«

I don't follow trends. I have my own look, which I call ‘Lolita Meets Old Hollywood Glam’. KATTY PERRY

« THE TRENDS

@mchaizeLET’S CONNECT@mchaize

THE TRENDS

LET’S CONNECT@mchaize

TOP 5

LET’S CONNECT@mchaize

RESPONSIVE WEB DESIGN STORY TELLING TYPOGRAPHY FLAT DESIGN

HERO

RESPONSIVE WEB DESIGN

@mchaizeLET’S CONNECT@mchaize

Same content ?

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

Same needs ?

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

RESPONSIVE WEB DESIGNTHE TOOLS

@mchaizeLET’S CONNECT@mchaize

REFLOW CC // MUSE CC

STORYTELLING

@mchaizeLET’S CONNECT@mchaize

STORYTELLING

@mchaizeLET’S CONNECT@mchaize

LIGHT ANIMATIONS > INTERACTIVE STORIES

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

HTML5 ANIMATION

@mchaizeLET’S CONNECT@mchaize

HTML5 ANIMATION - PARALLAX SCROLLING

@mchaizeLET’S CONNECT@mchaize

VIDEO

@mchaizeLET’S CONNECT@mchaize

VIDEO

STORYTELLING

@mchaizeLET’S CONNECT@mchaize

THE TOOLS - ANIMATION

EDGE ANIMATE

PARALLAX SCROLLING

@mchaizeLET’S CONNECT@mchaize

THE TOOLS

EDGE ANIMATEADOBE MUSE

STORYTELLING

@mchaizeLET’S CONNECT@mchaize

VIDEO

@mchaizeLET’S CONNECT@mchaize

NON BORING TYPOGRAPHY

@mchaizeLET’S CONNECT@mchaize

NON BORING TYPOGRAPHY

@mchaizeLET’S CONNECT@mchaize

Andale MonoTimes New Roman

GeorgiaVerdanaArial

Courier NewTrebuchet MSComic SansImpact

1996 2009TYPEKIT

@mchaizeLET’S CONNECT@mchaize

TYPEKIT

TRENDS IN TYPOGRAPHY

@mchaizeLET’S CONNECT@mchaize

Lobster is the new Comic Sans MS

Proxima Nova is the new Helvetica

@mchaizeLET’S CONNECT@mchaize

TYPEKIT

@mchaizeLET’S CONNECT@mchaize

TYPEKIT EDGE WEB FONTS

free

FLAT DESIGN

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

FLAT DESIGN

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

FLATVSREALISM.COM

FLAT DESIGN

@mchaizeLET’S CONNECT@mchaize

FLAT DESIGN

@mchaizeLET’S CONNECT@mchaize

FLAT DESIGN & SVG

@mchaizeLET’S CONNECT@mchaize

FROM ILLUSTRATOR & PHOTOSHOP

@mchaizeLET’S CONNECT@mchaize

SNAPSVG.io

FLAT DESIGN & LONG SHADOWS

@mchaizeLET’S CONNECT@mchaize

BUT… WAIT A MINUTE…

@mchaizeLET’S CONNECT@mchaize

http://lab.rayps.com/lsg/

COLORS

KULER.ADOBE.COM

@mchaizeLET’S CONNECT@mchaize

HERO BANNER

MANIPULATED IMAGERY

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

http://www.seattlecidercompany.com/

@mchaizeLET’S CONNECT@mchaize

CSS BLEND MODES

@mchaizeLET’S CONNECT@mchaize

BONUS

CRAZY STUFF

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaize

CONCLUSION

WRAP-UP

@mchaizeLET’S CONNECT@mchaize

THE TRENDS

USE WEB FONTS

@mchaizeLET’S CONNECT@mchaize

FLAT DESIGN

RESPONSIVE WEB DESIGN

HTML5 ANIMATIONS

5 COLORS MAX

SVG EVERYWHERE

VIDEO PRODUCTION BONUS

THE TRENDS

UNDERSTAND THEM BEFORE FOLLOWING THEM

@mchaizeLET’S CONNECT@mchaize

I WANT A FLAT DESIGN WEBSITE. I WANT THE BEST UX.

I WANT A RESPONSIVE PAGE. I WANT THE BEST MOBILE XP.

I WANT ANIMATIONS ON MY PAGE. I WANT TO TELL A STORY.

@mchaizeLET’S CONNECT@mchaize

KEEP CALM A WEB DESIGNER

IS ALSO A DESIGNER

@mchaizeLET’S CONNECT@mchaize

F#!K THE TRENDS

@mchaizeLET’S CONNECT@mchaize

@mchaizeLET’S CONNECT@mchaizehttp://www.mileycyrus.com/

MERCI BEAUCOUP

@mchaizeLET’S CONNECT@mchaize

Michael CHAIZE www.CreativeDroplets.com