Designing with Giant Pictures

634 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
634
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×