Multimania - Web Design Trends
-
Upload
michael-chaize -
Category
Design
-
view
579 -
download
1
description
Transcript of Multimania - Web Design Trends
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
@mchaizeLET’S CONNECT@mchaizehttp://www.mileycyrus.com/
MERCI BEAUCOUP
@mchaizeLET’S CONNECT@mchaize
Michael CHAIZE www.CreativeDroplets.com