GLCCN

 

Welcome to the project board for the Great Lakes Clean Communities Network. here you will be able to explore the design inspiration, the website organization, user experience design and user interface design for each step of the GLCCN website project evolution.

Click Here To See The GLCCN In Development

SG-90 Style Guide Creator
SG-90 Style Guide Creator

Proposed Website User Experience (Website Flowchart)

In this updated flowchart you will find an overview of the page design outlining the user work flow for the entire GLCCN website. Annotations have been added to describe detailed usability for when the user is logged in or not.

Screen Shot 2014-02-23 at 4.12.50 PM

The GLCCN Possible Home Page Layouts

 

Early Quick Sketches For The GLCCN Logo Design

Below you will see my latest proposed GLCCN logo designs…

glccn_logo-11

 

glccn_logo-10A glccn_logo-10B

 

Proposed Website Early Drawings

Below you will see early drawings for the home page design of the GLCCN.

glccn_sketch-04

glccn_sketch-02

glccn_sketch-01

The GLCCN Style Guide (Icon Design, Font Families & Color Scheme)

SG-90 Style Guide Creator

Icon Design


We designed four unique icons each with it's own designated color to highlight the four main action steps on the home page of the GLCCN including Connect, Share, Tools & Ecoscore

SG-90 Style Guide Creator

Fonts


ITC Avant Garde Gothic is the primary font used for this the Great Lakes Clean Communities branding. This typeface should be used for all titles and Sub-headings. Titles are Book in font weight while sub-headings are Bold. All body copy is Raleway (Replaced with Arial if a browser can not display Google Fonts).


* If ITC Avant Garde isn’t available, Century Gothic is substituted. Titles can be capitalized and used in Regular or Bold, but never a condensed or extra-bold version.


glccn_brand_fonts2

Color Scheme

Deep Blue

HEX: #095f83

CMYK: 93 / 59 / 31 / 10

RGB: 9 / 95 / 131

Cerulean blue

HEX: #0c99d4

CMYK: 76 / 25 / 1 / 0

RGB: 12 / 153 / 212

Sky Blue

HEX: #dff6fd

CMYK: 11 / 0 / 1 / 0

RGB: 223 / 246 / 253

Forest Green

HEX: #004d1c

CMYK: 88 / 41 / 100 / 46

RGB: 0 / 77 / 28

Fern Green

HEX: #359f63

CMYK: 78 / 13 / 80 / 1

RGB: 53 / 159 / 99

Cyber Yellow

HEX: #ffd25d

CMYK: 1 / 17 / 75 / 0

RGB: 255 / 210 / 93

Princeton Orange

HEX: #f46432

CMYK: 0 / 75 / 89 / 0

RGB: 244 / 100 / 50

Royal Purple

HEX: #382d69

CMYK: 93 / 96 / 28 / 17

RGB: 56 / 45 / 105

Heather Grey

HEX: #f6f6f6

CMYK: 2 / 1 / 1 / 0

RGB: 246 / 246 / 246

Website Home Page Redesign 1st Quarter 2015

SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator

EcoScore Section Design 1st Quarter 2015

SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator

Connect/Groups Section Design 1st Quarter 2015

SG-90 Style Guide Creator
SG-90 Style Guide Creator

Dashboard Section Design 1st Quarter 2015

SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator

Tools Section Design 1st Quarter 2015

SG-90 Style Guide Creator

Share Section Design 1st Quarter 2015

SG-90 Style Guide Creator

Stationary

SG-90 Style Guide Creator