Print | Web | Multimedia
Web-based Screen Redesign
Recipe page screen redesign created June 3, 2008.
Recipe page (above the fold) as of June 2, 2008.
Recipe page (above the fold) as of May 8, 2010.
Case Study
Project
Identify a web–based screen design that is in need of a visual change.
Since the initial stages of this project, the Vegetarian Times website continues to evolve with a new interface design. My research and analysis is reflective of the original site design, dated May 20, 2008, in place during the initial stages of this project. Both the original and updated site designs work double–duty in their attempt to promote the companion Vegetarian Times magazine, provide subscription opportunities, and offer resources for healthy living. My redesign proposal brings the magazine to the foreground on the Home page and builds upon the current issue’s content and features.
Site Objective
The purpose of this site is provide a companion piece to Vegetarian Times magazine and offer resources for the vegetarian lifestyle and for people who are seeking alternative cooking methods with a growing interest in plant based foods.
Design Considerations
Although this site does an exceptional job in providing health and environmental resources to the user, it seems to lack the organizational structure needed to connect the reader of Vegetarian Times to nutritional recipes online and in a clear and consistent manner. The presentation of information is a bit overwhelming with content and flash animation fighting for attention on the screen.
Restructuring of Screen Elements
The Web site layout is built on a flexible 4–column grid design. The logo and site identifier are adjacent to photos of enlarge vegetables. These images are rotated and lean in toward the site identifier. The vegetable images are meant to convey a “larger than life” feeling and emphasis is placed on the stem in each photo. The attachment of the stem provides flavor, color and freshness to the vegetable. This concept is carried over into the screen design with use of natural earth tones coloring the background of the screen and into the typography. The addition of freshly garnished food images provides vibrant colors and supports site content.
Navigation is identified with arrow indicators that drop down to indicate location of link selection. The current page link will change in color from eggplant to black while the current link is active. The first and second level navigation are presented in the color eggplant. The content typography is 75% gray when placed against a white background. The footer information is placed at the bottom of the screen in 40% gray to keep eyeflow centered on the content material positioned at mid–screen. All navigation elements and color coding are consistent throughout the site’s homepage and inner pages.
This site is W3C compliant.
