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

1. Designing with Giant Pictures
PREPARED FOR THE LEARN PHASE
1

2. PICTURES ARE
POPULAR.
MORE USERS
THAN TWITTER
“... THE FASTEST
GROWING SITE
EVER.”
2

3. PICTURES ARE
POWERFUL.
3

4. PICTURES ARE
POSSIBLE.
4

5. Design Trends
5

6. ANCHOR
SITES
http://
alwayscreative.net/
6

7. ANCHOR
SITES
http://
alwayscreative.net/
6

8. ANCHOR
SITES
DESIGN
CONSIDERATIONS
• What moves?
What doesn’t?
• What is
transparent?
• What scales?
What responds?
http://
alwayscreative.net/
6

9. SPLIT SCREENS http://nationallgbtmuseum.org/
7

10. FROM
MICROSITE http://www.salesforce.com/
dreamforce/DF12/
TO MACROPAGE
8

11. TRANSPARENCY
& BACKGROUNDS
http://www.ebay.com/new
9

12. TRANSPARENCY
& BACKGROUNDS
http://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. SCALE
& SLIDE
https://
www.cueup.com/
10

14. SCALE
& SLIDE
https://
www.cueup.com/
DESIGN
CONSIDERATIONS
• Will images
scale or
respond?
• Vertical
slideshows are
cool, but don’t
overcomplicate.
• Don’t forget to
provide nav
hints.
10

15. ANIMATED
BUILDS
CREATE
IMPACT
http://
www.zensorium.com/
tinke/
11

16. ANIMATED
BUILDS
CREATE
IMPACT
http://
www.zensorium.com/
tinke/
DESIGN
CONSIDERATIONS
• 2006 unofficial study
of CommArts awards
showed consistent
element among
winners was
animated builds.
• Use navigation to
drive storytelling
11

17. ANIMATE
LAYERED
PNGs
https://
squareup.com/
12

18. ANIMATE
LAYERED
PNGs
https://
squareup.com/
DESIGN
CONSIDERATIONS
• Ubiquity of PNG
format allows for
anti-aliased
transparency in
layers
12

19. USER-ACTIVATED http://www.spokespedicabs.com/
ANIMATION
13

20. VIDEO AS http://www.teehanlax.com/
TEXTURE
14

21. WINDOW INTO
http://pipsqueakcider.com.au/#intro
A CANVAS
15

22. NAVIGATE http://narrowdesign.com/
DIFFERENT

23. SUMMARY OF
CONSIDERATIONS
1. What will your image will do at different sizes.
2. What layers will move and what will stay put.
3. Designers + Developers = 1 Team
4. Give clues.
5. Make sure your client knows you are using 300k
images, why you are using them, and what the
implications are so you don’t look like an idiot.
17