Home >Design >Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Date post:11-Aug-2014
Category:
View:9,361 times
Download:4 times
Share this document with a friend
Description:
 
Transcript:
  • A brief history lesson 2009
  • A brief history lessonA website that looks good no matter where or how I access it. bouncebargainrentals.com
  • A brief history lessonA website that looks good no matter where or how I access it. alistapart.com/article/responsive-web-design
  • Waterfall Image: http://dmall.me/ZX7pfN
  • Image: Google flexible old lady AGile
  • responsive web design is hard/easy Be afraid/Dont worry!
  • What changed? Web design used to be so easy!
  • Things are different now.
  • 88% of people have a mobile phone. The number of people that use their phone to access the Internet went from 31% (2009) to 55% (2012). 35% of people in the US dont have Internet access at home. 59% of Americans who make less than $30,000 have no Internet access at home. 88% of Americans without a high school diploma dont have Internet access at home. Karen McGrane, via Luke Wroblewski. http://www.lukew.com/ff/entry.asp?1602
  • The way people are using the web has changed.
  • design process z
  • Heres what your site will look like A typical design approach
  • Image: dmall.me/13cuOBM
  • zero-sum game Designing to breakpointsor worse, device widthis a
  • Heres what your site will look like A typical design approach
  • Heres what your site will feel like A new design approach
  • Visual inventory Design by reference
  • Visual inventory Design by reference
  • Visual inventory Design by reference
  • Visual inventory Design by reference
  • Visual inventory Design by reference
  • Visual inventory Design by reference
  • Solve your own problems by using the successes and failures of others.
  • Visual inventory Design by reference
  • Visual inventory Design by reference
  • Photoshop comps dont cut it. At least not the way we used to do it.
  • dmall.me/XA93U2dmall.me/13dialY
  • Im not making a case for ditching Photoshop altogether and designing solely in the browser but rather better understanding how we use Photoshop in modern web design. Brad Frost, Front-End Designer
  • I dont think were in a post-P S D era, but I do think were moving towards a post-full-comp era. Me
  • New design deliverables Style tiles, element collages, & style prototypesoh my!
  • Style Tiles styletil.es
  • [Style tiles are] a catalyst for discussions around the preferences and goals of the client. Samantha Warren: Designer, Twitter
  • dmall.me/13dv0R2
  • a game of riddles
  • There is a cabin on the side of a mountain. Three people are inside and they are dead. How did they die?
  • They were killed in a plane crash. * airplane cabin Image: dmall.me/11fsiFO
  • There is an ancient invention still used in some parts of the world today that allows people to see through walls. What is it?
  • Windows. Image: Hope for Today, by Shane Mielkedmall.me/13dXv1h
  • A woman leaves home and makes three left turns. She returns home again. On the way, she passed two women with masks. Who were the two women?
  • The umpire and the catcher. Image: dmall.me/13dXWsm
  • Too much abstraction and lack of context lead to misdirection. The point
  • element collages danielmall.com/articles/rif-element-collages
  • element collages
  • element collages
  • element collages
  • element collages
  • element collages
  • element collages
  • element collages
  • Electric
  • Shape, book, heart, bubble
  • Visual booklists
  • Pages themed in books
  • Turn the page for step 2
  • Turn the page for step 2
  • Visual booklists
  • Pages themed in books
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks. rif.superfriend.ly/designs/round2
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Obviously this is not a website. But I see how it could be one. The perfect clients reaction to an element collage
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks.
  • Turn powerful phrases into visual hooks. bradfrostweb.com/blog/post/atomic-web-design
  • demo.pattern-lab.info
  • Obviously this is not a website. But I see how it could be one. The perfect clients reaction to an element collage clearleft.com/thinks/visualdesignexplorations
  • drbl.in/gXno
  • Its like giving your client a peek at those hidden layers. Paul Lloyd: Senior Visual Designer, Clearleft
  • Its like giving your client a peek at those hidden layers. Paul Lloyd: Senior Visual Designer, Clearleft
  • We will repl
Popular Tags:

of 159

Click here to load reader

Embed Size (px)
Recommended