Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing with Giant Pictures

680 views

Published on

Adam Kleinberg's Keynote presentation on utilizing large images for web design.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Designing with Giant Pictures

  1. 1. Designing with Giant PicturesPREPARED FOR THE LEARN PHASE 1
  2. 2. PICTURES AREPOPULAR.MORE USERSTHAN TWITTER“... THE FASTESTGROWING SITEEVER.” 2
  3. 3. PICTURES AREPOWERFUL. 3
  4. 4. PICTURES AREPOSSIBLE. 4
  5. 5. Design Trends 5
  6. 6. ANCHORSITESDESIGNCONSIDERATIONS• What moves? What doesn’t?• What is transparent?• What scales? What responds?http://alwayscreative.net/ 6
  7. 7. SPLIT SCREENS http://nationallgbtmuseum.org/ 7
  8. 8. FROMMICROSITE http://www.salesforce.com/ dreamforce/DF12/TO MACROPAGE 8
  9. 9. TRANSPARENCY& BACKGROUNDShttp://www.ebay.com/new DESIGN CONSIDERATIONS • Subtle navigation cues make big impact. • Identify and label background layers carefully. • Designer + Developer collaboration • Client communication is critical. 9
  10. 10. SCALE& SLIDEhttps://www.cueup.com/DESIGNCONSIDERATIONS• Will images scale or respond?• Vertical slideshows are cool, but don’t overcomplicate.• Don’t forget to provide nav hints. 10
  11. 11. ANIMATEDBUILDSCREATEIMPACThttp://www.zensorium.com/tinke/DESIGNCONSIDERATIONS• 2006 unofficial study of CommArts awards showed consistent element among winners was animated builds.• Use navigation to drive storytelling 11
  12. 12. ANIMATE LAYERED PNGs https:// squareup.com/DESIGNCONSIDERATIONS• Ubiquity of PNG format allows for anti-aliased transparency in layers 12
  13. 13. USER-ACTIVATED http://www.spokespedicabs.com/ANIMATION 13
  14. 14. VIDEO AS http://www.teehanlax.com/TEXTURE 14
  15. 15. WINDOW INTO http://pipsqueakcider.com.au/#introA CANVAS 15
  16. 16. NAVIGATE http://narrowdesign.com/DIFFERENT
  17. 17. SUMMARY OFCONSIDERATIONS1. What will your image will do at different sizes.2. What layers will move and what will stay put.3. Designers + Developers = 1 Team4. Give clues.5. Make sure your client knows you are using 300kimages, why you are using them, and what theimplications are so you don’t look like an idiot. 17

×