Blue Plate Diner website


Project overview

Yellow Pencil created the current website in the late 2000’s based on our then supported Yellow Pencil CMS (content management system). The design was created prior to the proliferation of modern smartphones, and using design techniques that were not current.

In this project we will deliver a new website design based on Responsive Web Design techniques so that the site is not only refreshed visually, but is optimized for small screen devices such as smart phones and tablets.
We will also replace the unsupported Yellow Pencil CMS with the common open source platform, Drupal CMS. This easy-to-use platform will allow Blue Plate Diner staff to add and edit content on the website without having to reach out to us for technical support.

Our team will plan, design, build, test, and launch the website.
This project will allow us to provide more timely ongoing support as the system will be on a more modern platform.

Redesign Blue Plate Diner website (2015)
Client Name: Blue Plate Diner
Designer/ UX designer: Duong Tran
Developer: Alfred Kolowrat
Project manager: Lisa Page
Front-end developer: Frederick Brummer
Blue Plate Diner has the following priorities for this project:
A modern design that better reflects your status in the Edmonton restaurant community and that better appeals to your customers.
A stronger focus on food photography in the design.

Directing visitors to your high priority content:
- Hours and address
- Menu
- Reservations (via either OpenTable or Yelp, TBD)
- Images of food and the room
- Parking and directions
- Events

Step 1: Create sitemap for Blue Plate Diner new website

*The old sitemap of the website: Home, Menu, Hours & Locations , About us, Links, Contact.
This needs reorganizing because some tabs should be put in the right categories so that the navigation bar is more condensed.

Step 2: Develop Color theme from Blue Plate Diner interior design or food specialty

The designer picked colors from its interior design and developed the color theme for the website. This reflects the best color theme and atmosphere of the space.

Step 3: Create the styletile - a sample of design

This is not the actual web design, but it will show the idea of how text, images and style are applied in the design.

Once the client agree with this styletile, it also means that they agree how these elements are applied in the design.
This reduces the risk of changing fonts, images, style, colors, etc. and it is a good way to lock down a step in the design process.

Step 4: Develop from Wireframe to Visual Design

Step 5: Design interface of the web with grid

The designer made sure the design will be transfer to the dev team with clear guidance and direction to implement for both front end and back end development.

Final product

Back to Top