BAmagazine.com Before&After ® i U X Lessons from a beautiful site The University of Miami College of Arts & Sciences shows that beauty really is in the details Continued  Continued  Lessons from a beautiful site 0667 BAmagazine.com Before&After ® i U X Lessons from a beautiful site The University of Miami College of Arts & Sciences site shows that beauty really is in the details The best design is simple design: an idea, an image, a few words, open space It’s clear, attractive, memorable But real life is not often simple; it’s full of stuff 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 Miami’s College of Arts & Sciences site is that it handles complexity beautifully It does 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 Let’s look at a few Home page Two dozen elements and links easily coexist on this inviting, visually coherent page  ฀ ฀2 of 12  Lessons from a beautiful site 0667 Before&After Lessons from a beautiful site ® BAmagazine.com of 12 i U X Structure The site is conveniently screen size, not too long, so most of it is always visible It is organized in three horizontal sections; each holds a different kind of information—permanent stuff top and bottom, active stuff in the middle All eyes here Color differentiates the sections A white “center stage” is flanked by a dark header and light footer These contain the foundational elements—logo, links, search and so on The white center is active, with transitory stories, news briefs, stuff like that Left, a screen-size space like this conveys a tight, organized impression and is easier to read than a scrolling page Tight editing is key Home page Interior page Header Header Main stage Main stage Footer Footer  ฀ ฀3 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com of 12 i U X Header Two dark bands—one green, one tan—form a simple, substantial header that leads the site; logo and links are reversed in white To soften the look, a faint gradient yields an understated illusion of radiant light Beautiful typography is the signature element of 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 information from floating away The two lines of small type are the same size but spaced differently; the more-important words are in panorama college of ARTS & SCIENCES u n i v e r s i t y o f m i a m i P-a-n-o-r-a-m-i-c letterspacing conveys elegance and stature Note the tiny shadow It’s unusual to see such a modern artifact juxtaposed with old type, but its understatement is classy and in this case adds valuable depth Right, four permanent links on the far right are tinted to appear barely there, yet remain easily accessible  ฀ ฀4 of 12  Lessons from a beautiful site 0667 Before&After Lessons from a beautiful site ® BAmagazine.com of 12 i U X Main links The highest-level links are in the tan header band Typography, color and shadow are identical to the logo, which reinforces their connection and permanence Link type matches the logo Left, tan band and green field are different colors but have virtually the same gray value (dark-light), which keeps the two connected while being different Below, wide letterspacing is relaxed and less demanding than normal spacing and so conveys a sense of deliberation and stateliness Onscreen, it’s easier to read, too ALUMNI HOME Link A LU M N I A LU M N I ABOU T THE COLLEGE ACADEMICS Active Hover ALUMNI Three shades of tan define the link states normal, active and hover; this quietly but very clearly tells the reader where he is Shades are progressively darker versions of one color—a monochromatic palette, right—that change the message without changing the subject Nice  ฀ ฀5 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com of 12 i U X Sub links As the reader moves deeper into the site, subtle changes of type case and color are all it takes to signal the different levels Style and size remain constant ACADEMICS Dean’s Message 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 links but just change case and reverse color Dean’s Message Spotlights A Chemical Change Designs by Michiko Religious Perspectives Contacts A & S Magazine 75% 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  ฀ ฀6 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com of 12 i U X 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 that’s very pleasant to read Same typestyle and size A gradient as light as chiffon The left column is defined by an incredibly subtle gradient that fades from less than two percent color to white What’s interesting is how slight the edge has to be, not merely to be visible but clearly present Beautiful Comfortable reading width Book-width columns of type—45 to 65 characters or so—are ideal for comfortable 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  ฀ ฀7 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com of 12 i U X Footer A correctly designed footer conveys real authority; it should be thought of not as the tail but the foundation that supports everything else The footer holds permanent information—key links, contact information, logo A LU M N I Same size, different color Identical typography—style, case, size and spacing—but reversed colors connect footer to header and unify the page Hierarchy is important Above, left, a header and footer of equal weight result in an “Oreo cookie” that divides the reader’s attention and weakens the presentation Instead, three-stage hierarchy gives each section appropriate weight Keep in mind that the reader’s eye will always gravitate toward the center Save it for your most important material, and put supporting material around it Background colors extend outward MY UM Small logo, big impression Lower-right corner is the natural exit point of a page and the correct place for a logo, which serves as a full stop and makes an impression much bigger than its small size Efficient Live matter is aligned flush  ฀ ฀8 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com of 12 i U X Type The html text of the entire site is set in Georgia, the best onscreen serif typeface universally available Georgia has the look of book typography plus the medium physical traits that make it especially readable at low resolution Compared to Times, the universal default Georgia is bigger The perceived size of a typeface is not its point size but its x-height, that is, the size of its lowercase characters; Georgia’s are 68% of the cap height, quite average Times is too small for onscreen clarity 1b3c6d7 Georgia has text figures Georgia’s oldstyle numerals, or text figures, have ascenders and descenders like lowercase letters These are more distinctive and therefore easier to read than ordinary, “all-caps” numerals Beautiful, too GeorgiaTimes a a ee Open Wider counters The open shapes inside the characters, called counters, are as important as the outside Georgia has big, round counters that remain open at low res Constricted Bolder serifs Georgia’s serifs are bold and easy to see, and its curves are simple and open Times’ thin, pointy serifs are handsome in print but weak onscreen, where too-few pixels are available to render them clearly Georgia Times  ฀ ฀9 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com 10 of 12 i U X Type Word- and letter spacing is as important as letter shapes, and here Georgia also excels At text sizes it is smooth, repetitive and rhythmic Georgia Times Academics Academics The University of Miami’s College of Arts and Sciences is the largest The University of Miami’s College of Arts and Sciences is the largest academic unit within the University of Miami, home to over 4,000 academic unit within the University of Miami, home to over 4,000 students and 400 distinguished full-time faculty, working at the cutting students and 400 distinguished full-time faculty, working at the cutting edge of knowledge in their ields Located in the beautiful city of Coral edge of knowledge in their ields Located in the beautiful city of Coral Gables, Florida, we are a premier college within a Carnegie Research I Gables, Florida, we are a premier college within a Carnegie Research I private university private university Students who enter the College of Arts and Sciences have the Students who enter the College of Arts and Sciences have the opportunity to experience the breadth and depth of the intellectual life opportunity to experience the breadth and depth of the intellectual life of of the University of Miami The College of Arts and Sciences offers 39 the University of Miami The College of Arts and Sciences offers 39 major areas of study and more than 45 minor concentrations from major areas of study and more than 45 minor concentrations from acting to analytic geometry, from philosophy to physics acting to analytic geometry, from philosophy to physics Georgia reads better online Unlike Times, which is a print typeface adapted for the screen, Georgia was designed specifically for onscreen use As a result, its letter- and word spacing at low resolution is smooth, repetitive and rhythmic, while Times’ is often choppy and fitful, an effect not visible in print (above) Even in print, however, Times’ thinner stems and serifs yield an edgier, less coherent look  ฀ ฀10 of 12  Lessons from a beautiful site 0667 Before&After Lessons from a beautiful site ® BAmagazine.com 11 of 12 i U X Article resources Typefaces Colors Adobe Caslon Bold OsF (www.adobe.com) R245 G245 B245 Georgia (www.fonts.com) R215 G209 B202 R151 G83 B10 R118 G63 B6 R75 G55 B31 R75 G82 B26 R103 G107 B30 Design Jody Ferry (www.jodyferry.com) WebLinc, LLC (www.weblinc.com) 10 R140 G70 B6 0% 100% HOME ABOU T THE COLLEGE ACADEMICS 10     11 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com 12 of 12 Subscribe to Before & After i U X 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 understandable, useful and even fun for everyone 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 John McWade Publisher and creative director Gaye McWade Associate publisher Dexter Mark Abellera Staff designer E-mail this article To pass along a free copy of this article to Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com others, click here Join our e-list To be notified by e-mail of new articles as they become available, go to Copyright ©2008 Before & After magazine ISSN 1049-0035 All rights reserved http://www.bamagazine.com/email 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  ฀ ฀12 of 12 | Printing formats  Lessons from a beautiful site 0667 Before&After BAmagazine.com ® i U X 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 For presentation format Print: (Specify pages 1–12) For paper-saver format Print: (Specify pages 14–19) Print Format: Landscape Page Size: Fit to Page Save Presentation format or Paper-saver format  ฀ ฀Back | Paper-saver format  Lessons from a beautiful site The University of Miami College of Arts & Sciences shows that beauty really is in the details The best design is simple design: an idea, an image, a few words, open space It’s clear, attractive, memorable But real life is not often simple; it’s full of stuff 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 Miami’s College of Arts & Sciences site is that it handles complexity beautifully It does 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 Let’s look at a few Home page Two dozen elements and links easily coexist on this inviting, visually coherent page 0667 Lessons from a beautiful site Before&After | www.bamagazine.com of Lessons from a beautiful site 0667 Structure The site is conveniently screen size, not too long, so most of it is always visible It is organized in three horizontal sections; each holds a different kind of information—permanent stuff top and bottom, active stuff in the middle Color differentiates the sections A white “center stage” is flanked by a dark header and light footer These contain the foundational elements—logo, links, search and so on The white center is active, with transitory stories, news briefs, stuff like that Left, 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 Home page Interior page Header Header Main stage Main stage Footer Footer Header Two dark bands—one green, one tan—form a simple, substantial header that leads the site; logo and links are reversed in white To soften the look, a faint gradient yields an understated illusion of radiant light Beautiful typography is the signature element of 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 information from floating away The two lines of small type are the same size but spaced differently; the more-important words are in panorama college of ARTS & SCIENCES u n i v e r s i t y o f m i a m i P-a-n-o-r-a-m-i-c letterspacing conveys elegance and stature Note the tiny shadow It’s unusual to see such a modern artifact juxtaposed with old type, but its understatement is classy and in this case adds valuable depth Right, four permanent links on the far right are tinted to appear barely there, yet remain easily accessible 0667 Lessons from a beautiful site Before&After | www.bamagazine.com of Lessons from a beautiful site 0667 Main links The highest-level links are in the tan header band Typography, color and shadow are identical to the logo, which reinforces their connection and permanence Link type matches the logo Left, tan band and green field are different colors but have virtually the same gray value (dark-light), which keeps the two connected while being different Below, wide letterspacing is relaxed and less demanding than normal spacing and so conveys a sense of deliberation and stateliness Onscreen, it’s easier to read, too ALUMNI HOME Link A LU M N I A LU M N I ABOU T THE COLLEGE ACADEMICS Active Hover ALUMNI Three shades of tan define the link states normal, active and hover; this quietly but very clearly tells the reader where he is Shades are progressively darker versions of one color—a monochromatic palette, right—that change the message without changing the subject Nice Sub links As the reader moves deeper into the site, subtle changes of type case and color are all it takes to signal the different levels Style and size remain constant ACADEMICS Dean’s Message 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 links but just change case and reverse color Dean’s Message Spotlights A Chemical Change Designs by Michiko Religious Perspectives Contacts A & S Magazine 75% 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 0667 Lessons from a beautiful site Before&After | www.bamagazine.com of Lessons from a beautiful site 0667 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 that’s very pleasant to read Same typestyle and size Comfortable reading width Book-width columns of type—45 to 65 characters or so—are ideal for comfortable 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 A gradient as light as chiffon The left column is defined by an incredibly subtle gradient that fades from less than two percent color to white What’s interesting is how slight the edge has to be, not merely to be visible but clearly present Beautiful Footer A correctly designed footer conveys real authority; it should be thought of not as the tail but the foundation that supports everything else The footer holds permanent information—key links, contact information, logo A LU M N I Same size, different color Identical typography—style, case, size and spacing—but reversed colors connect footer to header and unify the page Hierarchy is important Above, left, a header and footer of equal weight result in an “Oreo cookie” that divides the reader’s attention and weakens the presentation Instead, three-stage hierarchy gives each section appropriate weight Keep in mind that the reader’s eye will always gravitate toward the center Save it for your most important material, and put supporting material around it MY UM Background colors extend outward 0667 Lessons from a beautiful site Small logo, big impression Lower-right corner is the natural exit point of a page and the correct place for a logo, which serves as a full stop and makes an impression much bigger than its small size Efficient Live matter is aligned flush Before&After | www.bamagazine.com of Lessons from a beautiful site 0667 Type The html text of the entire site is set in Georgia, the best onscreen serif typeface universally available Georgia has the look of book typography plus the medium physical traits that make it especially readable at low resolution 1b3c6d7 Compared to Times, the universal default Georgia is bigger The perceived size of a typeface is not its point size but its x-height, that is, the size of its lowercase characters; Georgia’s are 68% of the cap height, quite average Times is too small for onscreen clarity Georgia has text figures Georgia’s oldstyle numerals, or text figures, have ascenders and descenders like lowercase letters These are more distinctive and therefore easier to read than ordinary, “all-caps” numerals Beautiful, too GeorgiaTimes a a ee Open Wider counters The open shapes inside the characters, called counters, are as important as the outside Georgia has big, round counters that remain open at low res Bolder serifs Georgia’s serifs are bold and easy to see, and its curves are simple and open Times’ thin, pointy serifs are handsome in print but weak onscreen, where too-few pixels are available to render them clearly Georgia Type Constricted Times Word- and letter spacing is as important as letter shapes, and here Georgia also excels At text sizes it is smooth, repetitive and rhythmic Georgia Times Academics Academics The University of Miami’s College of Arts and Sciences is the largest The University of Miami’s College of Arts and Sciences is the largest academic unit within the University of Miami, home to over 4,000 academic unit within the University of Miami, home to over 4,000 students and 400 distinguished full-time faculty, working at the cutting students and 400 distinguished full-time faculty, working at the cutting edge of knowledge in their ields Located in the beautiful city of Coral edge of knowledge in their ields Located in the beautiful city of Coral Gables, Florida, we are a premier college within a Carnegie Research I Gables, Florida, we are a premier college within a Carnegie Research I private university private university Students who enter the College of Arts and Sciences have the Students who enter the College of Arts and Sciences have the opportunity to experience the breadth and depth of the intellectual life opportunity to experience the breadth and depth of the intellectual life of of the University of Miami The College of Arts and Sciences offers 39 the University of Miami The College of Arts and Sciences offers 39 major areas of study and more than 45 minor concentrations from major areas of study and more than 45 minor concentrations from acting to analytic geometry, from philosophy to physics acting to analytic geometry, from philosophy to physics Georgia reads better online Unlike Times, which is a print typeface adapted for the screen, Georgia was designed specifically for onscreen use As a result, its letter- and word spacing at low resolution is smooth, repetitive and rhythmic, while Times’ is often choppy and fitful, an effect not visible in print (above) Even in print, however, Times’ thinner stems and serifs yield an edgier, less coherent look 0667 Lessons from a beautiful site Before&After | www.bamagazine.com of Lessons from a beautiful site 0667 Article resources Typefaces Colors Adobe Caslon Bold OsF (www.adobe.com) R245 G245 B245 Georgia (www.fonts.com) R215 G209 B202 R151 G83 B10 R118 G63 B6 R75 G55 B31 R75 G82 B26 R103 G107 B30 Design Jody Ferry (www.jodyferry.com) WebLinc, LLC (www.weblinc.com) 10 R140 G70 B6 0% 100% HOME ABOU T THE COLLEGE ACADEMICS 10 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 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 understandable, useful and even fun for everyone John McWade Publisher and creative director Gaye McWade Associate publisher Dexter Mark Abellera Staff designer E-mail this article To pass along a free copy of this article to Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com others, click here Join our e-list To be notified by e-mail of new articles as they become available, go to Copyright ©2008 Before & After magazine ISSN 1049-0035 All rights reserved http://www.bamagazine.com/email 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 0667 Lessons from a beautiful site Before&After | www.bamagazine.com of Lessons from a beautiful site 0667 [...]... elegance and stature Note the tiny shadow It’s unusual to see such a modern artifact juxtaposed with old type, but its understatement is classy and in this case adds valuable depth Right, four permanent links on the far right are tinted to appear barely there, yet remain easily accessible 0667 Lessons from a beautiful site Before&After | www.bamagazine.com 2 of 6 Lessons from a beautiful site 0667 Main... COLLEGE ACADEMICS 8 5 6 7 9 5 10     11 of 12  Lessons from a beautiful site 0667 Before&After ® Lessons from a beautiful site BAmagazine.com 12 of 12 Subscribe to Before & After i U X 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... pages 14–19) Print Format: Landscape Page Size: Fit to Page Save Presentation format or Paper-saver format  ฀ ฀Back | Paper-saver format  Lessons from a beautiful site The University of Miami College of Arts & Sciences shows that beauty really is in the details The best design is simple design: an idea, an image, a few words, open space It’s clear, attractive, memorable But real life is not often simple;... easier to read than a scrolling page Tight editing is key All eyes here Home page Interior page Header Header Main stage Main stage Footer Footer Header Two dark bands—one green, one tan—form a simple, substantial header that leads the site; logo and links are reversed in white To soften the look, a faint gradient yields an understated illusion of radiant light Beautiful typography is the signature element... change case and reverse color Dean’s Message Spotlights A Chemical Change Designs by Michiko Religious Perspectives Contacts A & S Magazine 75% 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 0667 Lessons from a beautiful site Before&After | www.bamagazine.com 3 of 6 Lessons from a beautiful site 0667 Main stage... reader’s attention and weakens the presentation Instead, three-stage hierarchy gives each section appropriate weight Keep in mind that the reader’s eye will always gravitate toward the center Save it for your most important material, and put supporting material around it MY UM Background colors extend outward 0667 Lessons from a beautiful site Small logo, big impression Lower-right corner is the natural... is the natural exit point of a page and the correct place for a logo, which serves as a full stop and makes an impression much bigger than its small size Efficient Live matter is aligned flush Before&After | www.bamagazine.com 4 of 6 Lessons from a beautiful site 0667 Type The html text of the entire site is set in Georgia, the best onscreen serif typeface universally available Georgia has the look... Before & After is dedicated to making graphic design understandable, useful and even fun for everyone John McWade Publisher and creative director Gaye McWade Associate publisher Dexter Mark Abellera Staff designer E-mail this article To pass along a free copy of this article to Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com... 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 information from floating away The two lines of small type are the same size but spaced differently; the more-important words are in panorama college of ARTS & SCIENCES u n i v e r s i t y o f m i a m i P -a- n-o-r -a- m-i-c letterspacing... understandable, useful and even fun for everyone 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 John McWade Publisher and creative director Gaye McWade Associate publisher Dexter Mark Abellera Staff designer E-mail this article To pass along a free copy of this article to Before & After magazine