Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Typography > Application: The Fine Print

4.10. Application: The Fine Print

When we last checked in on the Southern Savers redesign project, all the pieces of Jenny’s site were collated, just begging to be assembled into a fresh new design. Emily Smith laid the groundwork with her usability research, information architecture, and wireframes. Next, Andrew Ramos presented mood boards to Jenny to gain an idea of what colors and texture she favored for the new and improved Southern Savers branding.

It was at this stage of the game that Matthew Smith, Squared Eye’s creative director and principal, stepped up to the plate to knock out the website design. Working from Andrew’s branding elements, his first order of business was choosing typography. “When working from a brand,” said Matthew, “I try to maintain its authentic nature, but interpret it through a web lens.” Part of that interpretation involved finding a typeface that paired well with the unique hand-lettered, arched type in the new logo.

Figure 4-31. Southern Savers Typography

After browsing through his options, Matthew finally settled on the slab serif face Fago Office Serif. Considering that the logo type is a hybrid of a slab serif and a script, this option fitted the look of the branding while still providing enough contrast to stand out on its own. For the body copy, Matthew wanted a simple out-of-the-way typeface that would let the Fago headlines stand out rather than compete with them. Helvetica was the best option, he decided, making the default font stack simply: Helvetica, Arial, sans-serif. Figure 4-31 shows how the new logo looks paired with Fago Office Serif and Helvetica body copy.

With the typography selection nailed down, there were still some color and texture decisions required to flesh out the wireframes. Matthew decided to use the flower portion of the identity as his inspiration here. “There’s some really nice texture happening in those petals that feels elegant but earthy, and I wanted to bring that through the rest of the site.” Drawing from that illustrative style, Matthew incorporated a teal ribbon for the header area that arched out of the page geometrically to give emphasis to the logo. Above that ribbon, he used the dark green from the color palette, accented with copies of the magnolia’s leaves. These elements provided a visual container for the site’s navigation elements that were defined in Emily’s wireframes.

As Matthew was continuing with the design comps, Kevin Smith, the project’s development kung fu expert, was starting on the front-end development and WordPress integration. It was Kevin’s job to determine just how all these typography decisions would get baked into the site’s build. He knew he had to use a dynamic font replacement technique, so he decided to go with Cufón for most instances of the headline font, and image replacement for some of the buttons and static items. Figure 4-32 shows how these typefaces, as well as Matthew’s header design elements, ended up looking in the finished site.

Figure 4-32. Southern Savers home page design

We will take a look at more of the Southern Savers site details later. First, we need to learn about imagery: where to find it, what to look for, and how to make it rock your client’s socks off.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint