#iamondays Website Analysis: Ellen Lupton Style

Ryan Scherf’s website (http://ryanscherf.net), tweeted by @CassieWrites_, is a perfect example of Ellen Lupton’s ideas about “Letters” and “Grids” from her book Thinking With Type (2010). Lupton addresses fundamental ideas of typography in her book and describes the ways in which we use typography in many areas of our lives.

Ryan Scherf’s website uses some of Lupton’s ideas about “Letters” in his headers. He uses multiple typefaces, which Lupton suggests must be done with care and attention to detail. Lupton writes, “Combining typefaces is like making a salad. Start with a small number of elements representing different colors, tastes, and textures. Strive for contrast rather than harmony,” meaning designers can’t just sneak different typefaces into areas and hope we no one notices (54). Scherf does exactly what Lupton suggests, choosing contrasting typefaces and colors which stand out and make viewers pay close attention to his words. Scherf chooses a more sophisticated, architecture-like font in white on a dark background to describe what type of work he does, and what he will be showcasing on his website.

Screen Shot 2013-03-13 at 1.34.57 PM

He then sandwiches a more playful and colorful mixture of typefaces with different weights and leading to show what type of designing he does, or for what “platforms.” The use of these colors draws the eye down and around, while the different weights make each platform stand out to the eye.

The final piece of the sandwich is his location, which brings viewers back to the sophisticate, clean typeface.

As readers of Lupton will know, choosing a typeface is a big decision. The typeface you pick to represent your business says a lot about who you are. There are things to consider, like the history of the typeface, but there are also connotations that go along with certain typefaces. The two used by Scherf show a clean, almost minimalist classic feeling that seems professional; and a fun, chunky, and colorful feeling that shows a more unique and creative side. For a web designer, I think those combinations seem like a good choice. The typefaces Scherf uses show that he is professional, but also creative. That is the kind of person I would trust to work on my website.

Scherf also uses grids, which Lupton addresses in her book as well. His website runs on a linear grid, where examples of his work are in two columns, running vertically down the page. According to Lupton, linear grids in web design are a good choice for multiple reasons. Most importantly, linear design that uses tables and cells that flow in a line which is the easiest thing for devices for the visually impaired to translate into sound. These devices read webpages in a row by row fashion, so linear design translates most easily and clearly. Also, linear design is best for translation onto mobile devices. While funky, new-age web design may look neat on a desktop or laptop computer, the layout often gets skewed when it translates onto a mobile device. Linear grids in web design work best when there is little room, like on your phone (171)!

Screen Shot 2013-03-13 at 1.54.30 PM

Within his own web design it appears that Scherf follows these same principles. Although not all of his work is completely linear, many of the spaces containing content are styled in a paragraph-like way that reads like a book. He also incorporates different typefaces in a purposeful manner.

Overall, Ryan Scherf’s website follows many design principles that Ellen Lupton stands behind in her book. He demonstrates his ability as a designer on his webpage. He chooses clean, functional typeface and a sensible grid system to make the most of his spaces.

Seeing Lupton’s ideas in practice helped me get a better grasp on many of her concepts. Now that I am more aware of how to put these ideas to work, I think I will pay more attention to these design principles when browsing the internet. How have the readings for class changed the way you look at things, such as websites, in your daily lives?

Works Cited

Lupton, Ellen. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. 2nd ed. New York: Princeton Architectural, 2010. Print.

Advertisements
Categories: #IAMondays | Tags: , , , , , , , , | 3 Comments

Post navigation

3 thoughts on “#iamondays Website Analysis: Ellen Lupton Style

  1. This site can also be analyzed using Tufte’s principles. There certainly seems to be a good blend of pictures and text together. The site is also self-demonstrative; it’s a well-designed website promoting the creation of well-designed websites.

    The images on the main page are also screenshots of the pages the designer made. Clicking on the image brings you to the exact page you see on the screen there. That is a good example of user-friendly design. It makes it very intuitive to navigate since you can see exactly where you are going, as if the images on Scherf’s site are windows into the other sites that he has created.

  2. tomwink

    I think what most works in his favor is the understatedness of the design.The fonts mingle well together and despite the realization that they are different fonts it never impedes the reading. The layout of the visuals reminds me of a newspaper, with the two columns. The design is very user-friendly. I did feel like the page was lacking in energy. It was just very flat. I feel like this was due to font colors vs. background colors, but I thought the home page could stand to be a bit more dynamic.

  3. Notice how the content begins underneath the fold, the illustration of the hills and mountains is above the fold. It’s almost as if the designer wants you to think “Oooooh, pretty” before you even read anything (like Jason said, letting his work speak for itself). Also, I’ve been noticing more linear grids online recently (like theverge, for instance). There is a certain elegance to its clean-cut look.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: