designing with giant pictures

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

NAVIGATE DIFFERENT

http://narrowdesign.com/

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.