Issuu on Google+

Summer 2012 RMCAD Environmental Graphic Design Project: EGDenver

Date: July 27, 2012

Professor: Douglas Ekstrand

Students: Michelle Luttman, Westbrook Mahurin, Lydia McWherter, Andy Merskin, Marianne Rutzer, Jeffrey Smith, Ian Tan


CONTENTS Mission Statement • 07 Web Functionality • 09 Identity Development • 23 Commodities • 37 Web Development • 43 Photo Specifications • 49


LAYOUT SKETCHES

MISSION STATEMENT

EGDenver strives to be an online resource of Environmental Graphic Design within Denver, Colorado for the current and future students at the Rocky Mountain College of Art + Design, and a resource for all people around the world.

Sheet: 07


WEB FUNCTIONALITY Screen Compositions Webpage Mockups

Sheet: 09


LAYOUT SKETCHES Designing and building a solid backend for EGDENVER was a high priority from the beginning. This will allow each student to add and edit the signs that they are studying, editors to check and maintain the content and tags, and for the instructor to manage the users, semesters, and the rest of the site’s content.

Sheet: 10

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Layout Sketches

Layout Sketches

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 11


Sheet: 12

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Layout Sketches

Layout Sketches

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 13


LANDING PAGE

HOME PAGE

A landing page is for people who aren’t already familiar with the website. This is essentially a short and sweet greeting or tour telling people what the the brand is about, what the website does, and a few examples of content. We don’t want to overwhelm people with search bars, maps, and everything we have to offer. Let’s just give them a taste of what we’re about. Of course, we’ll include a big, shiny link telling them to start using the full website. See Foursquare’s website for a fantastic example, or http://bit.ly/IEzjbv for more.

Sheet: 14

RMCAD Environmental Graphic Design — Summer 2012

The front page is the first thing familiar visitors will see, and is really the starting point for navigating and exploring content on the website. The idea is to provide a number of different ways to find signs. Is it through search? Is it through semesters? Or is it through a neat sign that caught their eye? This home page also follows the website’s layout syntax that appears on every page of the website (brand mark, navigation links, search, etc).

EGDenver

July 27, 2012

Landing Page

Home Page

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 15


SEARCH PAGE

SEMESTERS PAGE

This is the search result page. The search bar allows the user to search for more specific tags / signs. For example, one might look for the letter “E” in hopes of exapanding one’s EGD project. This allows them to search our resources in a specific and hasty way. They may also further their search by using the advanced filters on the left.

Sheet: 16

RMCAD Environmental Graphic Design — Summer 2012

As an effort to expand this project for future classes, we also want to add a semester page. This will allow students to have branding opportunities for their own semester, as well as proclaim their own work.

EGDenver

July 27, 2012

Search Page

Semesters Page

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 17


SEMESTERS HOME PAGE

GLOSSARY PAGE

To expand the idea of having different semesters add to this project, we also would like to add a Semester profile page. This will allow users to sort the work added in the specific semesters and quite possibly learn more about said semesters. Additionally, there will be a minimap on the left of the profiles. Whenever a user hovers over an image of a sign, they will be given spatial orientation on where the sign specifically is. As each class will choose a cross-street (not specific streets) this will help avoid confusion.

Sheet: 18

RMCAD Environmental Graphic Design — Summer 2012

As part of the intiative to educate about Environmental Graphic Design, we will also include a glossary page. This will contain all the terms that will be covered through our website. If a user were to click on specific glossary terms, they will also get a dropdown of multiple examples of the term applied in real life. We believe this will facilitate a quick understanding of signs.

EGDenver

July 27, 2012

Semesters Home Page

Glossary Page

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 19


LIGHTBOX PAGE A lightbox is a page that opens up above your current page. This allows information to be accessed quickly. This function is similar to the display one sees when you view a facebook image. The lightbox will be used for specific details/ descriptions of each and every sign. Each lightbox will come with a larger image on the left of the sign, accompanied with different angles of the same sign on the bottom. On the right, we will place a short specific description of the sign, along with it’s address. This will also be accompanied by the glossary terms that applies to the said sign.

Sheet: 20

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Lightbox Page


IDENTITY DEVELOPMENT EGDenver Initial Sketches Logo Process Final Compositions Class Identity Logo Process Final Compositions

Sheet: 23


LOGO SKETCHES The goal of our logo design was to come up multiple variations of themes and styles for the logo. We started out by an index list (which contained words that related to EGD) and we proceeded to pull out our ideas from there.

Sheet: 24

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Logo Sketches

Logo Sketches

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 25


LOGO PROCESS In creating an identity for EGDenver my concerns were to evoke contemporary technological styling in an original and easy to read treatment. I accomplish this through sleek angular typefaces incorporated with simple graphic elements. The use of both upper and lowercase letterforms within the same logo also works to engage the viewer on another level.

Sheet: 26

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Jeffrey Smith – Logo Process

Jeffrey Smith – Logo Process

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 27


LOGO PROCESS Clean forms and negative space are very important elements in the design process of a logo. The skyline of Denver with its high rises and attached signage is the inspiration of my design mark.

Sheet: 28

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Marianne Rutzer – Logo Process

Marianne Rutzer – Logo Process

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 29


LOGO PROCESS

LOGO PROCESS

This is one of the main tracks I decided to go down. The idea of vintage signage lives strong in our minds, and I felt that it’s expression caused a very relatable feel and hence a strong impact of the viewer. I experimented with vintage sign colors and vintage cursive signage.

Sheet: 30

RMCAD Environmental Graphic Design — Summer 2012

An initial exploration of simple swiss-like design. Using solid type to express professionalism and seriousness.

EGDenver

July 27, 2012

Ian Tan – Logo Process

Ian Tan – Logo Process

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 31


LOGO PROCESS

FINAL LOGO

My exploration began with me experimenting with different types and combinations. I wanted to find a perfect balance between character and professionalism.

Sheet: 32

RMCAD Environmental Graphic Design — Summer 2012

We made the final logo with the idea of quoting our alma mater. Using a similar font as the RMCAD logo, we tweaked it and customized it to give it some personality. Additionally, we boxed out the EG as it may be used as an affix for future expansions of this project.

EGDenver

July 27, 2012

Michelle Luttman – Logo Process

Other information can go here if needed. Final Logo

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 02 33


CLASS LOGO PROCESS

FINAL CLASS LOGO

These are sketches for the Summer 2012 EGDenver class. Each class throughout all the semesters will develop their own logo for their own class. They will be used on the website to identify which class is responsible for what, while also giving them credit.

Sheet: 34

RMCAD Environmental Graphic Design — Summer 2012

This is the final logo for our class. We wanted to abbreviate “summer” to keep with the theme of how we abbreviated the street names in our file naming process.

EGDenver

July 27, 2012

Jeffrey Smith – Class Logo Process

OtherJeffrey information can– go hereLogo if needed. Smith Final

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 02 35


COMMODITIES

Downtown Denver – 15th & Wazee Photographs

Sheet: 37


15th & WAZEE PHOTOGRAPHS A big part of this project was that we needed to document every single type of building sign on the 15th & Wazee block of Denver. We went downtown at different times of the day; morning, afternoon, sunset, and twilight to show what each sign looks like during different lighting.

Sheet: 38

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Lydia McWherter, Westbrook Mahurin, Jeffrey Smith

Lydia McWherter, Westbrook Mahurin, Jeffrey Smith

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 02 39


Sheet: 40

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Lydia McWherter, Westbrook Mahurin, Jeffrey Smith

Lydia McWherter, Westbrook Mahurin, Jeffrey Smith

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 02 41


WEB DEVELOPMENT

Sheet: 43


LOG-IN & SIGN-UP PAGES We have built a complete, working authentication system running on the Ruby programming language. Using the latest standards in web development, we are currently building beautiful, easy to use interfaces that students and instructors will be using to make this project successful.

Sheet: 44

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Log-in Page

Sign-Up Page

July 27, 2012

EGDenver

RMCAD Environmental Graphic Design — Summer 2012

Sheet: 45


TAGS INTERFACE The Tags panel is just one example of the many tailored interfaces we are building.

Sheet: 46

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Log-in Page


PHOTO SPECIFICATIONS

Sheet: 49


PHOTO SPECIFICATIONS These are the specifications for the naming of our photographs we took of downtown Denver.

FILE NAMES

PHOTOGRAPHS

File names need to be setup in this specific orientation in order to help with organization of the photographs on our website.

Each photograph needs to be at least 800px and 72dpi for proper viewing on the web. Each photo also needs to be saved for the web during the editing process.

SU12_STREET_ORIENTATION_NAME_NUMBER.jpg SU12_MRKT_E_KITCHEN_01.jpg, SU12_MRKT_E_KITCHEN_02.jpg

STREET ORIENTATIONS Street names are to be kept to two letters in the file name. 15th: SW 16th: NE Blake: SE Wazee: NW

CATEGORIES FOR TAGGING Each tag for the photographs will fall underneath one or more of these categories. • Fabrication • Material • Finish • Lighting (If Any) • Application/Mounting • Color

STREET NAMES Street names are to be kept to a 4 letter abbreviation. 15TH, 16TH, BLKE, WAZE

Sheet: 50

RMCAD Environmental Graphic Design — Summer 2012

EGDenver

July 27, 2012

Photo Specifications


EGDenver Process Book