Current web design trends

CURRENT WEB
DESIGN TRENDS
TRENDS, TECHNOLOGY AND THE NEW TOOLS OF THE TRADE

PATRICK MCNEIL – HOW DESIGN LIVE 2012

TODAY I WANT TO TALK ABOUT

WEB TRENDS
TECHNOLOGY
AND WORKFLOW


I’M CONFUSED

TRENDS AND
WORKFLOWS? ISN’T THIS AN ODD PAIRING?
LIKE FINE WINE WITH BUFFALO WINGS


WHO AM I?
I AM PATRICK MCNEIL
1. Find me on pmcneil.com
or on twitter @designmeltdown

2. I am a freelance writer, designer, teacher and
web developer

3. I have worked in the web community for around
12 years now

4. I love to write books, talk about design and teach
designers about the web


URL AT THE END


THE TRADITIONAL
DESIGN WORKFLOW


3 NOT SO SURPRISING

TECH DRIVEN
DESIGN TRENDS
TECHNOLOGY IS SELDOM GENTLE ABOUT DRIVING CHANGE


MULTIPLE DEVICES


RESPONSIVE
DESIGN
ADAPTING TO A USERS ENVIRONMENT


MULTIPLE LAYOUTS

HTTP://WWW.GOLDENISLES.COM/


HTTP://UCSD.EDU/


WHAT DOES THIS
MEAN FOR
DESIGNERS?
MORE WORK OF COURSE


INCREASINGLY
RICH DESIGNS
RETURNING TO A FORMER STATE OF VISUAL INTENSITY


TYPOGRAPHIC
FREEDOM


HTTP://BITFOUNDRY.CA/


HTTP://DANEDEN.ME/TYPE/


LIVE TYPE PLAYS NICE
IN A RESPONSIVE
WORLD


TYPE TOOLS
THESE USE CSS TO EMBED CUSTOM FONTS

http://www.google.com/webfonts
https://typekit.com/

http://www.fontsquirrel.com/


TYPE PLUGINS
USING JAVASCRIPT TO ENHANCE TYPOGRAPHY

Find more here: http://www.howinteractivedesign.com/technology/39-modern-web-typography-tools


CSS3
THE LATEST VERSION OF CSS


NEW CSS3 STYLES
CODE BASED VISUAL STYLES
1. Rounded corners
2. Multiple backgrounds
3. Drop shadows
4. Text shadows
5. Gradients
6. Transitions (animations between styles)
7. Transformations (scale, rotate etc)
8. @font face
9. RGBA (colors with alpha transparency)


WHY IS CODE
BETTER THEN
IMAGES?


HTTP://JOELGLOVIER.COM/


HTTP://BOOKMARKLY.COM/


ALL 3 WORK TOGETHER

RESPONSIVE
DESIGN + CSS3 +
WEB TYPOGRAPHY
A MAGICAL MIX OF INSPIRING GOODNESS


HOUSTON WE
HAVE A
PROBLEM


DESIGNING IN
CODE A CLASSIC CHICKEN AND EGG CONUNDRUM


A BUSTED
PROCESS
OUT WITH THE OLD – BUT IN WITH WHAT?


MODERN TOOLS SMART PEOPLE ARE ON IT


CSSHAT.COM


CSSHAT SAMPLE


HTTP://WWW.WEBINK.COM/WEBFONTPLUGIN


CSS3 CODE
HTTP://CSS3GENERATOR.COM/


ADOBE SHADOW
HTTP://LABS.ADOBE.COM/TECHNOLOGIES/SHADOW/

Image source: http://www.webmonkey.com/2012/03/adobe-shadow-simplifies-mobile-web-testing/


QUICK TESTING
HTTP://RESPONSIVEPX.COM/


DESIGN
PROCESS
TRENDS
NEW APPROACHES AND TECHNIQUES SHAPING THE INDUSTRY


PICK AN
APPROACH
FORM A STRATEGY

1. Desktop first (pretty much what we have been doing all along)
2. Mobile first (http://stuffandnonsense.co.uk/projects/320andup/)
3. Separate mobile & desktop sites (still need to consider responsiveness)
4. Design or brand driven (more like the traditional approach)
5. UX focused (user testing at the core)


IDENTIFY BREAK
POINTS
CRITICAL SIZES YOUR DESIGN WILL ADAPT TO
Some important sizes:
1. 320px – smartphones in portrait
2. 480px – smartphones in landscape
3. 600px – small tablets in portrait
4. 768px – small tablets in landscape
5. 1024px – some tablets, laptops and desktop monitors
6. 1200px - widescreen monitors
7. 1600x – large monitors

Most often you will need to plan for 3 or 4 sizes


INSPIRATION
HTTP://MEDIAQUERI.ES/


SKETCH BOOK
HTTP://APPSKETCHBOOK.COM/ FOR $12.95


FRAMEWORKS
A GOOD STARTING POINT: HTTP://FLUIDBASELINEGRID.COM/


A NEW PROCESS
A PROPOSED PROCESS FOR THE NEW APPROACHES


THIS LEADS US
TO OUR FINAL
TREND


A SURPRISE ENDING

DESIGNERS
LEARNING TO
CODE HTML, CSS & JAVASCRIPT


CODEVISUALLY.COM


JQUERYFORDESIGNERS.COM


TYMPANUS.NET/CODROPS/


CSSDECK.COM


HTMLANDCSSBOOK.COM


THANK YOU
VIEW THIS PRESENTATION:
PMCNEIL.COM


Current web design trends

Recommended

Recommended

More Related Content

Similar to Current web design trends

Similar to Current web design trends (20)

More from Patrick McNeil

More from Patrick McNeil (6)

Recently uploaded

Recently uploaded (20)

Current web design trends

Editor's Notes