Designing With Big Pictures

461 views
409 views

Published on

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

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

No Downloads
Views
Total views
461
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Designing With Big 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. ANCHORSITEShttp://alwayscreative.net/ 6
    7. 7. ANCHORSITEShttp://alwayscreative.net/ 6
    8. 8. ANCHORSITESDESIGNCONSIDERATIONS• What moves? What doesn’t?• What is transparent?• What scales? What responds?http://alwayscreative.net/ 6
    9. 9. SPLIT SCREENS http://nationallgbtmuseum.org/ 7
    10. 10. FROMMICROSITE http://www.salesforce.com/ dreamforce/DF12/TO MACROPAGE 8
    11. 11. TRANSPARENCY& BACKGROUNDShttp://www.ebay.com/new 9
    12. 12. 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
    13. 13. SCALE& SLIDEhttps://www.cueup.com/ 10
    14. 14. 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
    15. 15. ANIMATEDBUILDSCREATEIMPACThttp://www.zensorium.com/tinke/ 11
    16. 16. 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
    17. 17. ANIMATELAYEREDPNGshttps://squareup.com/ 12
    18. 18. ANIMATE LAYERED PNGs https:// squareup.com/DESIGNCONSIDERATIONS• Ubiquity of PNG format allows for anti-aliased transparency in layers 12
    19. 19. USER-ACTIVATED http://www.spokespedicabs.com/ANIMATION 13
    20. 20. VIDEO AS http://www.teehanlax.com/TEXTURE 14
    21. 21. WINDOW INTO http://pipsqueakcider.com.au/#introA CANVAS 15
    22. 22. NAVIGATE http://narrowdesign.com/DIFFERENT
    23. 23. 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

    ×