Embed Size (px)
DESCRIPTION
Web designers are having a great time. Over the last year, a lot of web design patterns took off: more simplicity, more cleanliness and more focus. This energy can translate into Flat Design, RWD, web fonts, parallax… Michaël has worked in the Web Design industry since the 90’s. In this session, he will list the current web design trends. Then he will explain WHY they took off, and HOW to achieve them. Get inspired and join the conversation about our Web Design industry.
Citation preview
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
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…
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
MERCI BEAUCOUP
@mchaizeLET’S CONNECT@mchaize
Michael CHAIZE www.CreativeDroplets.com
