Before and After 0667

7/29/2019 Before and After 0667

1/19

Before&After XiBAmagazine.com U

Continued Lessons from a beautiful site 0667

Lessons from a

beautifulsite

Continued


2/19

Before&After

2of12

XiBAmagazine.com U

Lessons from a beautiful site 0667

Lessons from a beautiful siteThe University of Miami College of Arts & Sciences site shows thatbeauty really is in the details.

Home page Two dozen elements and links easily

coexist on this inviting, visually coherent page.

The best design is simple design: an idea,

an image, a few words, open space. Its clear,

attractive, memorable.But real life is not often simple; its full

ofstuff. People, programs and commerce all

need attention and screen space, and this

can make for a busy, complex site.

What we like about the University of

Miamis College of Arts & Sciences site is

that it handles complexity beautifully. Itdoes this in two ways: It reduces each

element to its essence (the simple thing),

then it beautifully crafts the details. A dozen

visual techniques allow its many parts to

coexist effortlessly. Lets look at a few.


3/19

Before&After Lessons from a beautiful site 3of12

3of12

XiBAmagazine.com U


Structure

The site is conveniently screen size, not too long, so most of it is alwaysvisible. It is organized in three horizontal sections; each holds a different kind

of informationpermanent stuff top and bottom, active stuff in the middle.

Color differentiates the sections

A white center stage is fanked by a

dark header and light ooter. These con-tain the oundational elementslogo,

links, search and so on. The white center

is active, with transitory stories, news

bries, stu like that. Let, a screen-size

space like this conveys a tight, organized

impression and is easier to read than a

scrolling page. Tight editing is key.

All eyes here

Interior pageHome page

Header Header

Main stage

Footer

Footer

Main stage


4/19


4of12

XiBAmagazine.com U


ollg of

arts&sciencesu v y o f m m

P-a-n-o-r-a-m-i-c letterspacing conveys elegance and stature.

Note the tiny shadow. Its unusual to see such a modern artiact

juxtaposed with old type, but its understatement is classy and in

this case adds valuable depth.

Right, our permanent links on the ar

right are tinted to appear barely there,

yet remain easily accessible.

Beautiful typography is the signature element o the site.

Scholarly Caslon type in classic, old-style caps and small caps

(big circle, below) conveys literacy and tradition; compact line

spacing (small circle) keeps minor inormation rom foating

away. The two lines o small type are the same size but spaced

dierently; the more-important words are in panorama.

Header

Two dark bandsone green, one tanform a simple, substantial header thatleads the site; logo and links are reversed in white. To soften the look, a faint gradient

yields an understated illusion of radiant light.


5/19


5of12

XiBAmagazine.com U


Main links

The highest-level links are in the tan header band. Typography, color and shadoware identical to the logo, which reinforces their connection and permanence.

Left, tan band and green feld are dierent colors but

have virtually the samegray value (dark-light), whichkeeps the two connected while being dierent. Below, wide

letterspacing is relaxed and less demanding than normal

spacing and so conveys a sense o deliberation and state-

liness. Onscreen, its easier to read, too.

Three shades of tan defne the link

states normal, active and hover; this

quietly but very clearly tells the reader

where he is. Shades are progressively

darker versions o one colora monochro-

matic palette, rightthat change the mes-

sage without changing the subject. Nice.

Link Active Hover

Link type matches the logo.

HOME ABOUT THE COLLEGE ACADEMICS ALUMNI

ALUMNI ALUMNI ALUMNI


6/19


6of12

XiBAmagazine.com U


Sub links

As the reader moves deeper into the site, subtle changes of type caseand colorare all it takes to signal the different levels. Style and size remain constant.

Reverse the colors The beautifully uniform

look of the site results from as few typographic

differences as possible. Left, the sub links

retain the type size and style of the main linksbut just change case and reverse color.

As the links descend, the type color changes

to black, then to gray. Note one typeface in one

size easily conveys four levels of information.

ACADEMICS

Deans Message

Deans Message

Spotlights

A Chemical Change

Designs by Michiko

Religious Perspectives

Contacts

A & S Magazine

75%


7/19


7of12

XiBAmagazine.com U


Main stage

Between header and footer, a white main stage is the focal point of the site.On each page, one short, book-like article is set in widely spaced lines of serif type,

which conveys an airy, literary look thats very pleasant to read.

A gradient as light as chiffon The let column is

defned by an incredibly subtle gradient that ades rom

less than two percent color to white. Whats interesting

is how slight the edge has to be, not merely to be vis-

ible but clearly present. Beautiul.

Comfortable reading width Book-width columns o

type45 to 65 characters or soare ideal or comort-

able reading; the wide leading(spacing) is visual silence

between lines that relaxes the message. The longer your

lines, the more space you should put between them.

Same typestyle and size


8/19


8of12

XiBAmagazine.com U


Footer

A correctly designed footer conveys real authority; it should be thought ofnot as the tail but the foundation that supports everything else. The footer holds

permanent informationkey links, contact information, logo.

Live matter is aligned ush.Background colors extend outward.

Same size, different color

Identical typographystyle,

case, size and spacingbut

reversed colors connect ooter

to header and uniy the page.

Small logo, big impression

Lower-right corner is the natu-

ral exit point o a page and the

correct place or a logo, which

serves as a ull stop and makes

an impression much bigger

than its small size. Efcient.

Hierarchy is important Above, let, a header and

ooter o equal weight result in an Oreo cookie

that divides the readers attention and weakens thepresentation. Instead, three-stage hierarchy gives

each section appropriate weight. Keep in mind that

the readers eye will always gravitate toward the

center. Save it or your most important material, and

put supporting material around it.

ALUMNI

MY UM


9/19

Beore&Ater Lessons from a beautiful site 9of12

9of12

XiBAmagazine.com U

Lessons rom a beautiul site 0667

Type

The html text of the entire site is set in Georgia, the best onscreen seriftypeface universally available. Georgia has the look of book typography plus the

medium physical traits that make it especially readable at low resolution . . .

Bolder seris Georgias seris are

bold and easy to see, and its curves

are simple and open. Times thin,

pointy seris are handsome in print but

weak onscreen, where too-ew pixels

are available to render them clearly.

Wider counters The open

shapes inside the characters,

called counters, are as impor-

tant as the outside. Georgia

has big, round counters that

remain open at low res.

Georgia is biggerThe perceived size o a typeace is

not its point size but its x-height, that is, the size o its

lowercase characters; Georgias are 68% o the cap height,quite average. Times is too small or onscreen clarity.

Georgia has text fgures Georgias old-

style numerals, or text fgures, have ascend-

ers and descenders like lowercase letters. These are more distinctive andthereore easier to read than ordinary, all-caps numerals. Beautiul, too.

c

GeorgiaTimes

Compared to Times, the universal deault . . .

Georgia Times

Open Constricted


10/19

Before&After

10of12

XiBAmagazine.com U


Lessons from a beautiful site 10of12

Academics

The University of Miamis College of Arts and Sciences is the largest

academic unit within the University of Miami, home to over 4,000

students and 400 distinguished full-time faculty, working at the cutting

edge of knowledge in their elds. Located in the beautiful city of Coral

Gables, Florida, we are a premier college within a Carnegie Research I

private university.

Students who enter the College of Arts and Sciences have the

opportunity to experience the breadth and depth of the intellectual lifeof the University of Miami. The College of Arts and Sciences offers 39

major areas of study and more than 45 minor concentrations -- from

acting to analytic geometry, from philosophy to physics.

Academics

The University of Miamis College of Arts and Sciences is the largest

academic unit within the University of Miami, home to over 4,000

students and 400 distinguished full-time faculty, working at the cutting

edge of knowledge in their elds. Located in the beautiful city of Coral

Gables, Florida, we are a premier college within a Carnegie Research I

private university.

Students who enter the College of Arts and Sciences have the

opportunity to experience the breadth and depth of the intellectual life ofthe University of Miami. The College of Arts and Sciences offers 39

major areas of study and more than 45 minor concentrations -- from

acting to analytic geometry, from philosophy to physics.

Type

Word- and letter spacing is as important as letter shapes, and here Georgiaalso excels. At text sizes it is smooth, repetitive and rhythmic.

Georgia reads better online Unlike Times, which is a print typeace adapted or the screen, Georgia

was designed specifcally or onscreen use. As a result, its letter- and word spacing at low resolution

is smooth, repetitive and rhythmic, while Times is oten choppy and ftul, an eect not visible in print

(above). Even in print, however, Times thinner stems and seris yield an edgier, less coherent look.

Georgia Times


11/19

Before&After

11of12

XiBAmagazine.com U


Lessons from a beautiful site 11of12

Typefaces

1 Adobe Caslon Bold OsF

(www.adobe.com)

2 Georgia (www.fonts.com)

Design

Jody Ferry (www.jodyferry.com)

WebLinc, LLC (www.weblinc.com)

Colors

4

5

6

7

8

8

Article resources

R245 G245 B245

R215 G209 B202

R151 G83 B10

R118 G63 B6

R75 G55 B31

R75 G82 B26

R103 G107 B30

R140 G70 B6

4

5 6 7

8

95

10

8

9

HOME ABOUT THE COLLEGE ACADEMICS

1

2

10

3

3

100%0%


12/19

Before&After

12of12 | Printing formats

XiBAmagazine.com U


Lessons rom a beautiul site 12of12

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 2008 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 Beore & Ater, and become a

more capable, confdent designer or pennies

per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this articleTo pass along a ree copy o this article to

others, click here.

Join our e-list

To be notifed by e-mail o new articles as

they become available, go to

http://www.bamagazine.com/email


13/19

Beore&Ater

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver ormatPrint: (Specify pages 1419)

For presentation ormatPrint: (Specify pages 112)

Print

Format: Landscape

Page Size: Fit to Page

Save

Presentation format or

Paper-saver format

Beore & Ater is made to ft 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.


14/19

Before&After|www.ba

magazine.com

1of6

Lessonsfromabeautifulsite0667

0667Lessonsfroma

beautifulsite L

essons

froma

be

autiful

site

Homepage

Twodozenelementsandlinkseasily

coexistonthisinviting,visuallycoherentpage.

Theb

estdesignissimpledes

ign:anidea,

anim

age,afewwords,openspace.Itsclear,

attractive,memorable.

Bu

treallifeisnotoftensim

ple;itsfull

ofstuff.People,programsandcommerceall

need

attentionandscreensp

ace,andthis

canm

akeforabusy,complexsite.

WhatwelikeabouttheUn

iversityof

Miam

isCollegeofArts&Sciencessiteis

thati

thandlescomplexitybe

autifully.It

does

thisintwoways:Itredu

ceseach

elementtoitsessence(thesimplething),

then

itbeautifullycraftsthed

etails.Adozen

visua

ltechniquesallowitsmanypartsto

coexisteffortlessly.Letslook

atafew.


15/19

Before&After

|www.b

ama

gazin

e.c

om

2o

6


0667Lessonsfroma

beautifulsite

Structure

Thesiteisconvenientlyscreensize,nottoo

long,somostofitisalways

visible.Itisorganiz

edinthreehorizontalsections;eachholdsadif

ferentkind

ofinformationpermanentstufftopandbottom,activestuffinth

emiddle.

Colordifferentia

testhesections

Awhitec

en

ter

stageisf

ank

edbya

darkh

eader

an

dlig

htooter.Th

esecon-

tain

theo

un

dation

alelem

en

tslo

go,

link

s,search

an

dsoon.Th

ewhite

cen

ter

isactive,with

tran

sitory

storie

s,n

ew

s

bries,

stulik

etha

t.Let,

ascre

en-size

spacelik

ethis

conv

eysatigh

t,org

anize

d

impre

ssion

an

dis

easier

tore

adthan

a

scrollin

gpage.Tigh

teditin

gisk

ey.

All

eyes

here

Interiorpage

Home

page

Header

Header

Main

stage

Footer

Footer

M

ainstage

ollg

of

ar

ts&scie

nces

u

v

y

o

f

m

m

P-a-n-o-r-a-m-i-cletterspacingconve

ys

elegan

cean

dstature.

Notethe

tinyshadow.Its

un

usual

toseesucham

odern

artia

ct

jux

taposedwith

old

type,butits

un

dersta

temen

tis

cla

ssyan

d

inthis

ca

seaddsv

alu

able

depth.

Righ

t,o

urp

erm

an

en

tlink

son

thear

righ

tare

tintedtoappear

barely

there

,

yetrem

a

ineasilyaccessible.

Beautifultypographyis

thesign

ature

elemen

to

thesite.

Sch

olarly

Caslon

typein

cla

ssic,old-style

capsan

dsmall

caps

(big

circle

,below

)conv

eyslitera

cyan

dtrad

ition

;com

pactlin

e

spacin

g(small

circle

)k

eepsmin

orinorm

at

ionromf

oating

aw

ay.Th

etwolin

eso

small

typeare

thesame

sizebutspaced

dieren

tly;them

ore-im

portan

tw

ord

sareinpan

oram

a.

Header

Twodarkbandso

negreen,onetanform

asimple,substantialh

eaderthat

leadsthesite;logo

andlinksarereversedinwhite.Tosoftenthelook,afaintgradient

yieldsanunderstatedillusionofradiantlig

ht.


16/19

Before&After|www.bamagazine.com

3o6


0667Lessonsfroma

beautifulsite

Sublinks

Asthereadermove

sdeeperintothesite,su

btlechangesoftypecase

andcolor

areallittakestosig

nalthedifferentlevels.Styleandsizeremainco

nstant.

ReversethecolorsTh

ebeautiullyuniorm

lookothesiteresultsromasewtypographic

dierencesaspossible.L

et,thesublinks

retainthetypesizeands

tyleothemainlinks

butjustchangecaseand

reversecolor.

Asthelinksdescend,

thetypecolorchanges

toblack,thentogray.No

teonetypeaceinone

sizeeasilyconveysourlevelsoinormation.

DeansMessage

Spotlights

AChemicalChange

DesignsbyM

ichiko

ReligiousPerspectives

Contacts

A&SMagazine

75%

Mainlinks

Thehighest-levelli

nksareinthetanheade

rband.Typography,colorandshadow

areidenticaltothe

logo,whichreinforcestheirconnectionandper

manence.

Left,

tanbandandgreenfeldaredierentcolorsbut

have

virtuallythesamegrayvalue(dark

-light),which

keepsthetwoconnectedwhilebeingd

ierent.Below,wide

letter

spacingisrelaxedandlessdeman

dingthannormal

spacingandsoconveysasenseodelib

erationandstate-

liness

.Onscreen,itseasiertoread,too.

Threeshadesoftandefnethelink

statesnormal,activeandhover;this

quietlybutveryclearlytellsthereader

whereheis.Shadesareprogressively

darke

rversionsoonecoloramonoch

ro-

matic

palette,rightthatchangethemes-

sagewithoutchangingthesubject.Nice

.

Link

Active

Hove

r

Link

typematchesthelogo.

HOME

ABOUT

THECOLLEGE

ACADEM

ICS

ALUMNI

AL

UMNI

ALUMNI

ALUMNI

ACADEMIC

S

DeansMessa

ge


17/19

Before&After|www.bamagazine.com

4o6


0667Lessonsfroma

beautifulsite

Mainstage

Betweenheaderan

dfooter,awhitemainstageisthefocalpointofthesite.

Oneachpage,one

short,book-likearticleissetinwidelyspacedlinesofseriftype,

whichconveysanairy,literarylookthatsv

erypleasanttoread.

Agradientaslightaschiff

onTheletcolumnis

denedbyanincrediblysubtle

gradientthatadesrom

lessthantwopercentcolorto

white.Whatsinteresting

ishowslighttheedgehastob

e,notmerelytobevis-

iblebutclearlypresent.Beautiul.

ComfortablereadingwidthBook-widthcolumnso

type45to6

5charactersorsoareidealorc

omort-

ablereading;

thewideleading(spacing)isvisua

lsilence

betweenlinesthatrelaxesthemessage.Thelon

geryour

lines,themor

espaceyoushouldputbetweent

hem.

Sametypestyleand

sizeFooter

Acorrectlydesigne

dfooterconveysrealau

thority;itshouldbethoughtof

notasthetailbutthefoundationthatsupp

ortseverythin

gelse.Thefooterholds

permanentinformationkeylinks,contac

tinformation,logo.

Livematterisalignedfush.

Backgroundcolorsextendoutward.

Samesize,differentcolor

Identicaltypographystyle,

case,sizeandspacin

gbut

reversedcolorsconn

ectooter

toheaderanduniythepage.

Smalllogo,bigimpression

Lower-rightcorneris

thenatu-

ralexitpointoapageandthe

correctplaceoralo

go,which

servesasaullstopandmakes

animpressionmuch

bigger

thanitssmallsize.Ecient.

HierarchyisimportantAbove,let,aheaderand

ooteroequalweightresultinanOreocookie

thatdividesthere

adersattentionandweakensthe

presentation.Instead,three-stagehierarchygives

eachsectionappr

opriateweight.Keepinmindthat

thereaderseyew

illalwaysgravitatetowardthe

center.Saveitor

yourmostimportantmaterial,and

putsupportingmaterialaroundit.

ALUMNI

MYUM


18/19

Beore&Ater|www.ba

magazine.com

5o6

Lessonsrom

abeautiulsite0667

0667Lessonsrom

a

beautiulsite

Academics

TheUniversityofMiamisColle

geofArtsandSciencesisthelargest

academicunitwithintheUnive

rsityofMiami,hometoover4,000

studentsand400distinguished

full-timefaculty,workingatthecutting

edgeofknowledgeintheireld

s.LocatedinthebeautifulcityofCor

al

Gables,Florida,weareapremi

ercollegewithinaCarnegieResearch

I

privateuniversity.

StudentswhoentertheCollege

ofArtsandScienceshavethe

opportunitytoexperiencetheb

readthanddepthoftheintellectuall

ife

oftheUniversityofMiami.The

CollegeofArtsandSciencesoffers3

9

majorareasofstudyandmorethan45minorconcentrations--from

actingtoanalyticgeometry,fro

mphilosophytophysics.

Academics

TheUniversityofMiamisCollegeofArtsandSciencesisthelargest

academicunitwithintheUn

iversityofMiami,hometoover4,000

studentsand400distinguish

edfull-timefaculty,workingatthecu

tting

edgeofknowledgeintheirelds.LocatedinthebeautifulcityofCoral

Gables,Florida,weareapremiercollegewithinaCarnegieResea

rchI

privateuniversity.

StudentswhoentertheColl

egeofArtsandScienceshavethe

opportunitytoexperienceth

ebreadthanddepthoftheintellectuallifeof

theUniversityofMiami.Th

eCollegeofArtsandSciencesoffers

39

majorareasofstudyandmo

rethan45minorconcentrations--fro

m

actingtoanalyticgeometry,

fromphilosophytophysics.

Type

Word-andlettersp

acingisasimportantas

lettershapes,andhereGeorgia

alsoexcels.Attextsizesitissmooth,repetitiveandrhythmic.

GeorgiareadsbetteronlineUnlikeTimes,whichisaprinttypeaceadaptedorthescreen,Georgia

wasdesigned

specifcallyoronscreenuse.Asa

result,itsletter-andwordspacing

atlowresolution

issmooth,rep

etitiveandrhythmic,whileTimes

isotenchoppyandftul,aneectnotvisibleinprint

(above).Eveninprint,however,Timesthinnerst

emsandserisyieldanedgier,less

coherentlook.

Georgia

Times

Type

ThehtmltextoftheentiresiteissetinGeorgia,thebestonscreens

erif

typefaceuniversall

yavailable.Georgiahas

thelookofbooktypographyplusthe

mediumphysicaltraitsthatmakeitespeciallyreadableatlowresolution...

Bo

lderserisGeorgiasserisare

boldandeasytosee,anditscurves

are

simpleandopen.Timesthin,

pointyserisarehandsomeinprintbut

we

akonscreen,wheretoo-ewpixels

are

availabletorenderthemclearly.

WidercountersTheopen

shapesin

sidethecharacters,

calledcou

nters,areasimpor-

tantasth

eoutside.Georgia

hasbig,roundcountersthat

remainop

enatlowres.

Georgia

isbiggerTheperceivedsizeoa

typeaceis

notitspointsizebutitsx-height,thatis,the

sizeoits

lowercasecharacters;Georgiasare68%

o

thecapheight,

quiteaverage.Timesistoosmalloronscreenclarity.

Georgia

hastextfguresGeorgiasold-

stylenum

erals,ortextfgures,haveascend-

ersandd

escenderslikelowercaseletters.

Thesearemoredistinctiveand

thereore

easiertoreadthanordinary,all-capsnumerals.Beautiul,too.

c

Ge

orgiaTim

es

Compar

edtoTimes,theuniversaldeault...

Georgia

Times

Open

Constr

icted


19/19

Before&After|www.ba

magazine.com

6of6

Lessonsfrom

abeauti

fulsite0667

0667Lessonsfrom

a

beautifulsite

3100%

0%

Before&Aftermagazine

Before&Afterhasbee

nsharingitspracticalapproach

tographicdesignsince1990.Becauseourmodernworld

hasmadedesignersofusall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand-

able,usefulandevenf

unforeveryone.

JohnMcWadePublisherandcreativedirector

GayeMcWadeAssoc

iatepublisher

DexterMarkAbelle

raStaffdesigner

Before&Aftermagazine

323LincolnStreet,Ros

eville,CA95678

Telephone916-784-38

80

Fax916-784-3995

E-mailmailbox@bama

gazine.com

wwwhttp://www.bam

agazine.com

Copyright2008Be

fore&Aftermagazine

ISSN1049-0035.Allrightsreserved

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

SubscribetoBeore&A

ter,andbecomea

morecapable,confdentdesignerorpennies

perarticle.Tolearnmo

re,goto

http://www.bamagazin

e.com/Subscribe

E-mailthisarticle

Topassalongareecopyothisarticleto

others,clickhere.

Joinoure-list

Tobenotifedbye-mailonewarticlesas

theybecomeavailable,goto

http://www.bamagazin

e.com/email

Colors

456788

Articleresources

R245G245B245

R215G209B202

R151G83B10

R118G63B6

R75G55B31

R75G82B26

R103G107B30

R140G70B6

4

5

6

7

89

5

10

89

HOME

ABOUTTHEC

OLLEGE

ACADEMICS

12

10 3

Typefaces

1A

dobeCaslonBoldOsF

(w

ww.adobe.com)

2G

eorgia(www.fonts.com)

De

sign

JodyFerry(www.jodyferry.com)

WebLinc,LLC(www.weblinc.com)

Before and After 0667

Documents

Transcript of Before and After 0667