before and after 0658
TRANSCRIPT
-
7/29/2019 Before and After 0658
1/18
Before&After
Continued
XiBAmagazine.com U
Focus your presentation 0658
Focus your presentation
-
7/29/2019 Before and After 0658
2/18
Before&After
2of11
XiBAmagazine.com U
Focus your presentation 0658
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
-
7/29/2019 Before and After 0658
3/18
Before&After Focus your presentation 3of11
3of11
XiBAmagazine.com U
Focus your presentation 0658
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.
-
7/29/2019 Before and After 0658
4/18
Before&After Focus your presentation 4of11
4of11
XiBAmagazine.com U
Focus your presentation 0658
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.
-
7/29/2019 Before and After 0658
5/18
Before&After Focus your presentation 5of11
5of11
XiBAmagazine.com U
Focus your presentation 0658
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)
-
7/29/2019 Before and After 0658
6/18
Before&After Focus your presentation 6of11
6of11
XiBAmagazine.com U
Focus your presentation 0658
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/29/2019 Before and After 0658
7/18
Before&After Focus your presentation 7of11
7of11
XiBAmagazine.com U
Focus your presentation 0658
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
-
7/29/2019 Before and After 0658
8/18
Before&After Focus your presentation 8of11
8of11
XiBAmagazine.com U
Focus your presentation 0658
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.
-
7/29/2019 Before and After 0658
9/18
Before&After Focus your presentation 9of11
9of11
XiBAmagazine.com U
Focus your presentation 0658
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.
-
7/29/2019 Before and After 0658
10/18
Before&After
10of11
XiBAmagazine.com U
Focus your presentation 0658
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%
-
7/29/2019 Before and After 0658
11/18
Before&After
11of11 | Printing formats
XiBAmagazine.com U
Focus your presentation 0658
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
-
7/29/2019 Before and After 0658
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.
-
7/29/2019 Before and After 0658
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.
-
7/29/2019 Before and After 0658
14/18
Before&After|www.bamagazine.com
2of6
Focusyourpresentation0658
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.
-
7/29/2019 Before and After 0658
15/18
Before&After|www.bamagazine.com
3of6
Focusyourpresentation0658
0658Focusyourpresentation
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)
-
7/29/2019 Before and After 0658
16/18
Before&After|www.bamagazine.com
4of6
Focusyourpresentation
0658
0658Focusyourpresentation
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.
-
7/29/2019 Before and After 0658
17/18
Before&After
|www.b
a
magazin
e.c
om
5of
6
Focusyourpresentation
0658
0658Focusyourpresentation
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.
-
7/29/2019 Before and After 0658
18/18
Before&After|www.ba
magazine.com
6of6
Focusyourpresentation0658
0658Focusyourpresentation
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