Designing with giant pictures requires considering how images will look and function at different sizes, which image layers will move or stay static, and ensuring close collaboration between designers and developers. Key factors include how images will scale or respond across devices, providing subtle navigation cues, and clear communication with clients about large image sizes and their technical implications.

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
DESIGN
CONSIDERATIONS
• What moves?
What doesn’t?
• What is
transparent?
• What scales?
What responds?
http://
alwayscreative.net/
6

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

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

9. 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

10. 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

11. 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

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

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

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

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

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

17. 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