Dynamic Graphics+Create Magazine
HOME   |   MAKEOVERS  |   ARCHIVE  |   EDUCATION  |   JOBS  |   ADVERTISE
Topics
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Makeovers
2007 Makeovers Issue: Web (cont'd)
STANFORD UNIVERSITY OFFICE OF TECHNOLOGY LICENSING
Top of the class web redesign

Designer: Rebecca Pastore

What’s in a name? A lot. And it can be essential when your name already says you’re among the best in your field. Such is the case with Stanford University’s Office of Technology Licensing (OTL).

Senior associate Mary Albertson says that while the design for OTL’s branch of the university’s site is clean, it’s also uninteresting. “It’s difficult to navigate and doesn’t capitalize on the Stanford name. We don’t want our page to look like a ‘university’ page necessarily,” says Albertson. She would prefer a design “that reflects the creativity of our inventors, the breadth of the technologies we manage and the venerability of Stanford.”

Designer Rebecca Pastore’s personal goal for this redesign was to make it easy to identify the content, subjects and structure of the OTL website so users can better discover relevant information—by designing a functional, easy to use and clean website. “I wanted the site to be consistent, concise, familiar and, most importantly, legible,” says Pastore. To achieve these goals and maintain the same look and feel throughout, Pastore uses bulleted lists for top breakdown, keeps the navigation where the user expects on every page and in the same format, and makes the site easy to read via contrasting web-safe fonts and background colors—no patterned backgrounds—smooth gradients and common screen fonts such as Tahoma.

“A major benefit to the newly designed CSS—cascading style sheets—menu is that it makes the website SEO—search engine optimization—friendly,” explains Pastore. “The old site’s navigation was in Flash, which doesn’t allow for search engine spiders to crawl the links. If you use external CSS files to design and determine the design attributes, the HTML code will be clean, and it will result in better search engine rankings. Search engines want to see your content—the text, not the code. With CSS, you practically externalize excessive code into an external file, thus leaving the actual page clean and simple. In addition, CSS gives the site a professional look. It’s wise to use CSS to jibe with current trends in the industry.”


1. Original site
Mary Albertson, senior associate for the Stanford University Office of Technology, feels the current site is difficult to navigate and doesn’t capitalize on the Stanford name. She’d like to see a bold, yet classy redesign for the site.

2. New logo
Designer Rebecca Pastore liked the OTL’s icon, but thought the fonts and lettering layout could be updated to look more modern and professional.

3. Fonts
In her redesign, Pastore selected common screen fonts such as Tahoma, Lucida and Perpetua for their legibility on screen.

4. Colors
To maintain Stanford’s branding, Albertson wants to keep the school’s cardinal color. Pastore incorporated the cardinal red in her redesign and added a complementary wine color, as well as some tan and creamy browns. She chose teal for contrast.


5. Home page
“The biggest enhancement is having a striking front page with easy-to-locate content and highlighted topics for the three major types of visitors to the site,” says the designer. “There is a balance between white space and the text—a change from the current site, which had a disproportionate amount of white space to text.”

6. Tech-Finder
As requested by the OTL, a “Tech-Finder” feature is included in the design to assist companies and inventors looking for online disclosures.


7. Branding
Strong branding creates or reinforces a user’s impression of a site. The old site did not capitalize on the Stanford name, so in the redesign the university logo is prominently displayed on the top of each page.

8. Search
A prominent search feature was added to help visitors quickly locate the information they want.

9. Initial process
Pastore sketched the layout and navigation desired for the site.

10. Images
Images in the redesign include the following from Ablestock.com: images 23090678, 23772228, 23769464, 23089572; all images from www.jupiterimages.com.

|« 1 | 2 | 3 | 4 | 5 |
Events & Courses

WebMediaBrands
mediabistro learnnetwork freelanceconnect SemanticWeb
Jobs | Events | News
Copyright 2009 WebMediaBrands Inc. All rights reserved.
Advertise | Terms of Use | Privacy Policy