Before and After 0658

7/29/2019 Before and After 0658

1/18

Before&After

Continued

XiBAmagazine.com U

Focus your presentation 0658

Focus your presentation


2/18

Before&After

2of11

XiBAmagazine.com U


Its just you and the iPhone and nothing else. This keyboard page shows

how the absence of distractions is important to a clear presentation. Note

whats here: a plain typeface, blank background, neutral colors, nothing flash-

es or blinks, no frames or gingerbread. And another thingvery few words.

Result? Youre focused on the product, relaxed and ready to learn.

We continue to be impressedblown away is more

like itby the focus of Apples design. Its newiPhone site, in particular, is so direct and clear that

it makes the iPhone obvious to even a casual viewer.

Yet because the iPhone is so different, the potential

for misunderstanding is high. How do they do it?

The site designers have plenty they could say.

They could gush (truthfully) about the technical

innovations, the 200 patents, the coolness of it all.

Instead, they confidently show you the phone asa friend would, put it in your hand, explain how it

works. They present the phone from your point of

view, calmly, lightly, naturally. Result: You under-

stand it, and you like it.

Understanding is our goal, too, when we present

our idea/product/program to others. We want our

audience toget it. Lets see what Apple can teach us.

Focus your presentationApple knows that a perfect presentation is made with the audience

in mind. Heres what we can learn from its brilliant iPhone site.

www.apple.com/iphone


3/18

Before&After Focus your presentation 3of11

3of11

XiBAmagazine.com U


The basic structure

The site is designed as a presentation stage. It has a large main field for stills andvideo, and four small links beneath.All five fields look alike, a visual tie.

Five fields comprise the page. Five is enough;

more, and attention would be dissipated by

choices. Two visual contrasts are at work: scale

the main field is huge compared to the links

and value; ones black, and the others are white.

Result: The similarities tie the page together,

while the differences keep parts distinct.


4/18


4of11

XiBAmagazine.com U


Type and photos work together

Each field has one headline and one photo. There are no text only sectionsnor any photo only sections. One topic, one photo, every time.

Keep them apart. Each field is divided in half,

type on the left, photo on the right. The type is

minimaljust a word or twoand aligned left;

each photo is simple (one object, no background)

and dark. Note in the main field (left, top) that

the white headline ties to the white phone face,

while in the link fields the ties are black.

Note alignments. Because the four links are the same kindof thing, repetitive layout adds clarity

and comprehension speed; the viewer processes one design, not four.


5/18


5of11

XiBAmagazine.com U


Myriad is one of the worlds clearest type-

faces. Its open and minimal with no fine detail,

ideal for low-res use. Because Myriad is not

universally available as a system font, Lucida

Grande, a lookalike, is substituted for small

html text. When using two similar faces, you can

differentiate the two using scale (big-small) and

value (dark-light). Note above that the smallest

type is also the lightest.

One typeface

One clear typeface is used throughout. One is all you need. Type is for support, notpizzazz. You want it to release its information quickly and not draw attention.

Spacious simplicity The presentation is minimal and spaciousjust the iPhone and a couple

choices alone in a whole screen. Result? Note how easy it is to read instantly.

Watch it

Download it

Small Medium Large

Large (71.5MB)


6/18


6of11

XiBAmagazine.com U


Angled objects appear more lifelike than flat ones. Note that some

face this way and others that, some are viewed from above and others at

table level, yet all are basically the same size. Each pose was chosen for

expressive impact and clarity.

Dimension

Flat fields are given life by subtle gradients that mimic the sheen of aluminum andthe ambience of real light. Reflections and angles convey surface and depth.

Gradients mimic reality. Look around at your desk and office walls.

Youll see that light plays off all surfaces, so no surface is truly monotone.

Reflections are everywhere. By mimicking this ambience with gradients,

the site feels real and warm while at the same time remaining neutral.

Gradients

Gradient

Reflections


7/18


7of11

XiBAmagazine.com U


No barriers Video presentation is

more natural than reading, and usu-

ally more effective. But its design isjust as important. Note here that the

narrator is centered in the screen, the

strongest position (think of a target).

He never drops eye contact (hes

talking to you ). And nothing visual

comes between you and his presen-

tationnot his looks, not his clothes,

not his voice, not his surroundings.

The design is deliberately (even relent-

lessly) pleasant but neutral so that all

the emotional hooks come from the

iPhone. The result is easy on the eyes

and incredibly easy to understand.

Natural presentation, no distractions

The heart of the site is video; the iPhone is explained in a natural, conversational way.Even in motion, the design remains focused; every detail contributes to clarity.

Black background

Black shirt, plain. No collars,

lapels, buttons or cuffs

Black hair

Glasses, but nearly invisible

Pleasant but average looks,

average size, average build

iPhone is the only product


8/18


8of11

XiBAmagazine.com U


One . . . thought . . . at . . . a . . . time . . .

When the narrator shows an iPhone function, the screen changes to a closeup withvoiceover. The iPhone appears, then the action, one at a time, clear as a bell.

Centered, centered, centered. For a closeup, the iPhone replaces the narrator in

the center of the black field. A finger appears and touches the glass. Note that only

one element is onscreen at a time. Because in the closeup the finger is the key actor,

it too was chosen for its neutral qualitiesadult male, but smooth, not hairy, wrinkly,

bumpy, spotted, tattooed, glossed or anything else that would draw attentionaway.

Note, too, that phone and finger are perfectly lit and cast no shadows. Is this attention

to detail worth it? Absolutely.


9/18


9of11

XiBAmagazine.com U


Quick tours, bite-size information

Efficient Featuressection splits the screen in two and adds text; this requires reading,but its quicker than pure video for those who want the Cliffs Notes version.

Four icons represent four main

features. Color is brilliant against the

gray. Nav triangle is tinybut is all it

takes on the clean page.

Short headline and description

give a brief summary. Flash demo

on the far left shows the feature in

action. Your eyes follow the animated

dot. No sounds, no blinky lights.

Visual chapters Each of the four

categories are broken down into

short demos. Note the icons are sim-ply small versions of the big demo

window (left); black indicates active.

The white triangle points to a short

description, which is set in smaller

type with tighter leading to differ-

entiate it from the main description

above. Nice.

Keep them apart

Visual on the left, narrative on the right. Note the visuals black, the text white.


10/18

Before&After

10of11

XiBAmagazine.com U


Focus your presentation 10of11

Typefaces

1) Myriad (Apple uses a customized

version called Apple Myriad thats

minutely different.)

2) Lucida Grande (Lucida Grande is a

screen version ofLucida Sans.)

Gradients

Article resources

1

2

(Bottom, left) Values shown are for

print. The actual RGB gradients are

minutely different.

100%

42%

0%

10%

42%

18%


11/18

Before&After

11of11 | Printing formats

XiBAmagazine.com U


Before & After magazine

Before & After has been sharing its practical approach

to graphic design since 1990. Because our modern world

has made designers of us all (ready or not), Before &

After is dedicated to making graphic design understand-

able, useful and even fun for everyone.

John McWade Publisher and creative director

Gaye McWade Associate publisher

Dexter Mark Abellera Staff designer

Before & After magazine

323 Lincoln Street, Roseville, CA 95678

Telephone 916-784-3880

Fax 916-784-3995

E-mail [email protected]

www http://www.bamagazine.com

Copyright 2007 Before & After magazine

ISSN 1049-0035. All rights reserved

You may pass along a free copy of this article to others

by clicking here. You may not alter this article, and you

may not charge for it. You may quote brief sections

for review; please credit Before & After magazine, and

let us know. To link Before & After magazine to your

Web site, use this URL: http://www.bamagazine.com.

For all other permissions, please contact us.

Subscribe to Before & After

Subscribe to Before & After, and become a

more capable, confident designer for pennies

per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this articleTo pass along a free copy of this article to

others, click here.

Join our e-list

To be notified by e-mail of new articles as

they become available, go to

http://www.bamagazine.com/email

Focus your presentation 11of11


12/18

Before&After

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver formatPrint: (Specify pages 1318)

For presentation formatPrint: (Specify pages 111)

Print

Format: Landscape

Page Size: Fit to Page

Save

Presentation format or

Paper-saver format

Before & After is made to fit your binder

Before & After articles are intended for permanent reference. All are titled and numbered.

For the current table of contents, click here. To save time and paper, a paper-saver format of this article,

suitable for one- or two-sided printing, is provided on the following pages.


13/18

Before&After|www.bamagazine.com

1of6

Focusyourpresentation0658

0658Focusyourpre

sentation

F

ocus

yourpresentation

www.apple.com/iphone

ItsjustyouandtheiPhone

andnothingelse.Thiskeyboardpageshows

howtheabsenceofdistractionsisimportanttoaclearpresentation.Note

whatshere:aplaintypeface,blankbackground,neutralcolors,no

thingflash-

esorblinks,noframesorgingerbread.Andanotherthingveryfe

wwords.

Result?Yourefocusedonthep

roduct,relaxedandreadytolearn

.

Wecon

tinuetobeimpressed

blownawayismore

likeit

bythefocusofApplesdesign.Itsnew

iPhone

site,inparticular,isso

directandclearthat

itmakestheiPhoneobviousto

evenacasualviewer.

Yetbec

ausetheiPhoneissodifferent,thepotential

formisunderstandingishigh.Howdotheydoit?

The

sitedesignershaveplen

tytheycouldsay.

Theycouldgush(truthfully)ab

outthetechnical

innova

tions,the200patents,thecoolnessofitall.

Instead,theyconfidentlyshow

youthephoneas

afriendwould,putitinyourh

and,explainhowit

works.

Theypresentthephone

fromyourpointof

view,calmly,lightly,naturally.Result:Youunder-

standit,andyoulikeit.

Und

erstandingisourgoal,too,whenwepresent

ouridea/product/programtoothers.Wewantour

audien

cetogetit.LetsseewhatApplecanteachus.


14/18


2of6


0658Focusyourpresentation

Thebasicstructure

Thesiteisdesigned

asapresentationstage

.Ithasalargemainfield

forstillsand

video,andfoursmalllinksbeneath.Allfivefieldslookalike,avisua

ltie.

Fivefie

ldscomprisethepage.Fiveisenough;

more,andattentionwouldbedissipatedb

y

choices.Twovisualcontrastsareatwork:s

cale

themainfieldishugecomparedtothelinks

andvalue;onesblack,andtheothersare

white.

Result:Thesimilaritiestiethepagetogeth

er,

whileth

edifferenceskeeppartsdistinct.

Typeandphotosw

orktogether

Eachfieldhasoneheadlineandonephoto.Therearenotextonlysections

noranyphotoonlysections.Onetopic,o

nephoto,everytime.

Keepthemapart.Eachfieldisdividedinhalf,

typeon

theleft,photoontheright.Thety

peis

minimaljustawordortwoandaligned

left;

eachph

otoissimple(oneobject,nobackground)

anddark.Noteinthemainfield(left,top)that

thewhiteheadlinetiestothewhitephoneface,

whilein

thelinkfieldsthetiesareblack.

Notealignments.Becausethefourlinksar

ethesamekindofthing,repetitivelayoutaddsclarity

andcom

prehensionspeed;theviewerprocessesonedesign,notfour.


15/18


3of6



Angledobjectsappearmorelifelikethanflatones.Notethatsome

facethiswayandothersthat,som

eareviewedfromaboveandothe

rsat

tablelevel,yetallarebasicallythe

samesize.Eachposewaschosen

for

expressiveimpactandclarity.

Dimension

Flatfieldsaregiven

lifebysubtlegradients

thatmimicthesheenof

aluminumand

theambienceofreallight.Reflectionsandanglesconveysurfaceanddepth.

Gradients

mimicreality.Lookaroundaty

ourdeskandofficewalls.

Youllseet

hatlightplaysoffallsurfaces,son

osurfaceistrulymonotone.

Reflections

areeverywhere.Bymimickingthisambiencewithgradients,

thesitefee

lsrealandwarmwhileatthesam

etimeremainingneutral.

Gradients

G

radient

Reflections

Myriadisoneoftheworldsclearest

type-

faces.Itsopenandminimalwithnofi

nedetail,

idealforlow-resuse.BecauseMyriad

isnot

universallyavailableasasystemfont,Lucida

Gra

nde,alookalike,issubstitutedforsmall

htm

ltext.Whenusingtwosimilarfaces,youcan

differentiatethetwousingscale(big-small)and

value

(dark-light).Noteabovethatthe

smallest

typeisalsothelightest.

Onetypeface

Onecleartypeface

isusedthroughout.Oneisallyouneed.Typeis

forsupport,not

pizzazz.Youwantittoreleaseitsinformationquicklyandnotdraw

attention.

Spacious

simplicityThepresentationism

inimalandspaciousjusttheiPho

neandacouple

choicesaloneinawholescreen.Result?Not

ehoweasyitistoreadinstantly

.

Watchit

Downloadit

Small

Medium

Large

Large(71.5MB)


16/18


4of6

Focusyourpresentation

0658


NobarriersVideopresentationis

morenaturalthanreading,andusu-

allymore

effective.Butitsdesignis

justasim

portant.Noteherethatthe

narrator

iscenteredinthescreen,the

stronges

tposition(thinkofatarget).

Heneverdropseyecontact(hes

talkingto

you).Andnothingvisual

comesbetweenyouandhispresen-

tationn

othislooks,nothisclothes,

nothisvoice,nothissurroundings.

Thedesignisdeliberately(evenrelent-

lessly)pleasantbutneutralsothatall

theemotionalhookscomefromthe

iPhone.T

heresultiseasyontheeyes

andincrediblyeasytounderstand.

Naturalpresentat

ion,nodistractions

Theheartofthesiteisvideo;theiPhoneisexplainedinanatural,c

onversationalway.

Eveninmotion,thedesignremainsfocused;everydetailcontribut

estoclarity.

Blackbackground

Blackshirt,plain.Nocollars,

lapels,buttonsorcuffs

Blackhair

Glasses,butnearlyinvisible

Pleasantbutav

eragelooks,

averagesize,av

eragebuild

iPhoneistheonlyproduct

One...thought..

.at...a...time...

WhenthenarratorshowsaniPhonefunction,thescreenchangestoacloseupwith

voiceover.TheiPho

neappears,thentheaction,oneatatime,clear

asabell.

Centered,centered,center

ed.Foracloseup,theiPhonereplacesthenarratorin

thecenteroftheblackfield.A

fingerappearsandtouchestheglass.Notethatonly

oneelementisonscreenatatime.Becauseinthecloseupthefingeristhekeyactor,

ittoowaschosenforitsneutralqualitiesadultmale,butsmooth,nothairy,wrinkly,

bumpy,spotted,tattooed,glossedoranythingelsethatwoulddr

awattentionaway.

Note,too,thatphoneandfinge

rareperfectlylitandcastnoshadows.Isthisattention

todetailworthit?Absolutely.


17/18

Before&After

|www.b

a

magazin

e.c

om

5of

6

Focusyourpresentation

0658


Typ

efaces

1)M

yriad(Apple

usesacustomiz

ed

version

calle

dA

ppleM

yria

dthats

m

inutely

differen

t.)

2)L

ucid

aGran

de(Lucid

aGran

deis

a

scre

env

ersion

ofL

ucid

aSan

s.)

Gradients

Articleresources

12

(Bottom,left)V

alu

essh

own

arefor

prin

t.Th

eactualR

GB

gra

dien

tsare

min

utely

differen

t.

100%

42%

0%

10%

42%

18%

Quicktours,bite-s

izeinformation

Effi

cien

tFeaturesse

ction

sp

litsthescre

enin

twoan

daddstex

t;this

require

sre

adin

g,

butits

quic

ker

than

purevid

eofor

thosewh

owan

ttheCliffsN

otes

version

.

Fouriconsre

pre

sen

tfo

urm

ain

feature

s.

Coloris

brillian

tag

ainstthe

gra

y.N

av

trian

gleistiny

but

isallit

tak

eson

thecle

an

page.

Shortheadlineanddesc

ription

giv

eabrief

summ

ary.Fla

sh

demo

on

thefarleft

sh

ow

sthefe

a

turein

action.Y

our

eyesfollowth

e

anim

ated

dot.N

osoun

ds,n

oblink

ylig

hts.

VisualchaptersE

ach

of

thefo

ur

categorie

sare

brok

en

down

into

sh

ort

dem

os.N

otetheic

on

saresim-

ply

sm

allv

ersion

sof

thebig

dem

o

win

dow(left);

bla

ckin

dic

ate

sactive.

Th

ewhite

trian

gle

poin

tsto

ash

ort

descrip

tion

,whichis

setin

smaller

typewith

tigh

terle

adin

gto

differ-

en

tiateitfromth

em

ain

des

cription

abov

e.Nic

e.

Keepthemapa

rt

Vis

ual

on

the

left,n

arra

tiveon

therigh

t.N

otet

hevis

uals

bla

ck

,thetex

twhite.


18/18

Before&After|www.ba

magazine.com

6of6



Before&Aftermag

azine

Before&Afterhasbee

nsharingitspracticalapproach

tographicdesignsince1990.Becauseourmodernworld

hasmadedesignersofusall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand

-

able,usefulandevenfunforeveryone.

JohnMcWadePublis

herandcreativedirector

GayeMcWadeAssoc

iatepublisher

DexterMarkAbelle

raStaffdesigner

Before&Aftermag

azine

323LincolnStreet,Roseville,CA95678

Telephone916-784-38

80

Fax916-784-3995

E-mailmailbox@bama

gazine.com

wwwhttp://www.bam

agazine.com

Copyright2007Be

fore&Aftermagazine

ISSN1049-0035.All

rightsreserved

Youmaypassalongafreecopyofthisarticletoothers

byclickinghere.Youm

aynotalterthisarticle,andyou

maynotchargeforit.Youmayquotebriefsections

forreview;pleasecred

itBefore&Aftermagazine,and

letusknow.TolinkBefore&Aftermagazinetoyour

Website,usethisURL:http://www.bamagazine.com.

Forallotherpermissio

ns,pleasecontactus.

SubscribetoBefore

&After

SubscribetoBefore&A

fter,andbecomea

morecapable,confidentdesignerforpennies

perarticle.Tolearnmo

re,goto

http://www.bamagazin

e.com/Subscribe

E-mailthisarticle

Topassalongafreecopyofthisarticleto

others,clickhere.

Joinoure-list

Tobenotifiedbye-mailofnewarticlesas

theybecomeavailable,goto

http://www.bamagazin

e.com/email

Date post:	14-Apr-2018
Category:	Documents
Upload:	dsnv
View:	220 times
Download:	0 times

Before and After 0658

Documents