Embed Size (px)
Citation preview
Designing with Giant Pictures
1
PREPARED FOR THE LEARN PHASE
2
PICTURES ARE POPULAR.
MORE USERS THAN TWITTER
“... THE FASTEST GROWING SITE EVER.”
3
PICTURES ARE POWERFUL.
4
PICTURES ARE POSSIBLE.
Design Trends
5
6
ANCHOR SITESDESIGN CONSIDERATIONS•What moves? What doesn’t?
•What is transparent?
•What scales? What responds?
http://alwayscreative.net/
7
SPLIT SCREENS http://nationallgbtmuseum.org/
8
FROM MICROSITE TO MACROPAGE
http://www.salesforce.com/dreamforce/DF12/
9
TRANSPARENCY& BACKGROUNDS
DESIGN CONSIDERATIONS• Subtle navigation
cues make big impact.
• Identify and label background layers carefully.
•Designer + Developer collaboration
• Client communication is critical.
http://www.ebay.com/new
10
SCALE& SLIDE
DESIGNCONSIDERATIONS• Will images
scale or respond?
• Vertical slideshows are cool, but don’t overcomplicate.
• Don’t forget to provide nav hints.
https://www.cueup.com/
11
ANIMATED BUILDS CREATE IMPACT
DESIGN CONSIDERATIONS• 2006 unofficial study
of CommArts awards showed consistent element among winners was animated builds.
• Use navigation to drive storytelling
http://www.zensorium.com/tinke/
12
ANIMATE LAYERED PNGs
DESIGN CONSIDERATIONS•Ubiquity of PNG format allows for anti-aliased transparency in layers
https://squareup.com/
13
USER-ACTIVATED ANIMATION
http://www.spokespedicabs.com/
14
VIDEO AS TEXTURE
http://www.teehanlax.com/
15
WINDOW INTO A CANVAS http://pipsqueakcider.com.au/#intro
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 Team4. 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.
