wmgda awareness planning and styles documentation

west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 2, 2014

awareness site Planning & styles Documentation

west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 2, 2014

Planning

What is the Graphic Design Archives? 1

Brand Core Values 2

User Paths 3

styles

Web Colors & Typography 5

Layouts and Grid 9

Imagery 12

mailchimP

Instructions for Use 13

table of contents

Planning Document

This document has been created to help maintain and manage the awareness site for the West Michigan Graphic Design Archives.

west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 1

What is the Graphic Design Archives?

The design work included in the archives will represent significant contributions to the evolution of the graphic design discipline; the work will interest, excite, inspire, intrigue, and educate.

It has met a need, solved a problem, or sold an idea, product, service, or event. It is likely to have received recognition from national design organizations.

Whenever possible, the archives will include not only finished products, but also the stories behind and evidence of the design, development, and production.

When fully developed, the archives will offer a facility with a gallery for exhibitions of work from the permanent collection and feature new acquisitions—as well as current work in West Michigan.

The vision includes collaborative space for designers and design classes; it is envisioned as accessible and hospitable to the public. The archives will make both physical artifacts and digital representations available to design professionals, educators, students, business people, and others interested in the rich legacy of graphic design, paper manufacture, and printing in West Michigan.

What is this document for?

This document is designed to help maintain the West Michigan Graphic Design archives awareness Site by functioning as a style guide when updating site content. MailChimp instructions are also included for managing subscribers and sending email campaigns.

plAnninG


Brand Core Values

plAnninG

Compel inform

illuminAte striVe

Users should be excited for the upcoming archives. They should be anticipating the chance to learn more, dive deeper, and explore the work in the archives.

Users need information about the archives, the work inducted into it and how they can get involved.

The archives preserves the best of West Michigan graphic design, meaning the work needs to be the focal point of both the awareness site and the archives itself.

The awareness site strives to generate excitement, involvement, and anticipation for the upcoming archives.


user paths

plAnninG

DESIGN EDUCaTOR

Paul anderson, 47 years old Professor, Western Michigan University (5 years)

Why does Paul want to support the archive?

Enrich their own work by gaining a deeper understanding of WM design history

Find more ways to get involved with the design community

Support and preserve design history

DESIGN PROFESSIONaL

Ian Siegal, 32 years old Designer, Firebelly Design (4 years)

Why does Ian want to support the archive?




Donate to the archive

Build a better personal reputation in the design community

Gain public and physical recognition (promotional goods)


user paths

plAnninG

DESIGN STUDENT

Bailey Sanders, 20 years old Graphic Design Student, Western University (2 years)

Why is Bailey excited about the Graphic Design archives?




Volunteer at the archives

Build a better personal reputation in the design community


styles

This is LaTo.

Lato is to be the only font used on the West Michigan Graphic Design Archives Awareness Site.

If emphasis is to be put on a parTicuLar secTion of Type use bold small capitals that match the

x-height of the body copy and use the hex color #FFAF00.

DOWNLOaD FONT FaMILy aT:

fontsquirrel.com/fonts/lato

#FFAF00 Active navigation links, paragraph rules, MI icon, yellow in body copy (.emphasis)

#FFBB00 Footer bar

#F0F0F0 Navigation background

#000000 Body copy

#737373 Gray in headlines (h1)

#646464 Bold text other than h1 headlines

Web Colors & typography


styles

Web typography: Desktop and laptop

1

2

3

6

4

7

58

1 h1

font-family: ‘Lato’; font-size: 1.7rem; line-height: 2.1rem; font-weight: 900; letter-spacing: .1rem; word-spacing: .3rem; text-transform: uppercase; color: #737373; padding: 5px 0 0 0;

2 .NaV-SELECTED

font-family: ‘Lato’; font-size: 1.25rem; font-weight: 900; color: #FFaF00; background-color: #FFF; box-shadow: 1px 3px 2px #C8C8C8; line-height: 2rem; margin: 0 0 6px 0; padding: 1.2rem 0px 1rem 25px;

6 P

font-family: ‘Lato’; font-size: 1.25rem; line-height: 2rem; letter-spacing: .06rem; font-weight: 400; color: #000; margin: 0 0 1rem 0;

7 .EMPhaSIS

font-family: ‘Lato’; font-size: 1.1rem; font-weight: 900; letter-spacing: .15rem; word-spacing: .2rem; text-transform: uppercase; color: #FFaF00;

8.RIGhTS-FLOaT-RIGhT

font-family: ‘Lato’; font-size: 1.1rem; line-height: 2rem; letter-spacing: .04rem; text-align: right; text-transform: uppercase; color: #646464; margin: 4px 50px 0 0;

3 .NaV-LINkS

font-family: ‘Lato’; font-size: 1.25rem; font-weight: 700; color: #646464; background-color: #F0F0F0; line-height: 20px; text-align: left; margin: 0 0 6px 0; padding: 1rem 0px 1rem 25px;

4 .CaLLOUT

font-family: ‘Lato’; font-size: 1.25rem; line-height: 2.7rem; letter-spacing: .06rem; color: #000;

5 .FOOTER-STyLE

font-family: ‘Lato’; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; color: #646464;


styles

Web typography: tablet

3

21

4

5

6

78©2014 GRAPHIC DESIGN ARCHIVES

1 .NaV-SELECTED

font-family: ‘Lato’; font-size: 1.25rem; font-weight: 900; color: #FFaF00; background-color: #FFF; box-shadow: 1px 3px 2px: box-shadow: #C8C8C8; line-height: 2rem; padding: 10px 0; margin: 0 1% 0 0;

2 .NaV-LINkS


3 h1

font-family: ‘Lato’; font-size: 2.2rem; line-height: 2.6rem; font-weight: 900; letter-spacing: .1rem; word-spacing: .3rem; text-transform: uppercase; color: #737373;

4 EMPhaSIS

font-family: ‘Lato’; font-size: 1.3rem; font-weight: 900; letter-spacing: .1rem; text-transform: uppercase; color: #FFaF00;

5 .CaLLOUT

font-family: ‘Lato’; font-size: 1.7rem; line-height: 2.8rem; font-weight: 900; letter-spacing: .06rem; word-spacing: .04rem; color: #828282;

6 P

font-family: ‘Lato’; font-size: 1.8rem; line-height: 2.5rem; letter-spacing: .08rem; word-spacing: .04rem; color: #000;

7 .FOOTER-STyLE

font-family: ‘Lato’; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; color: #646464;

8 .RIGhTS-FLOaT-RIGhT

font-family: ‘Lato’; font-size: 1.1rem; line-height: 3rem; letter-spacing: .04rem; text-align: right; text-transform: uppercase; color: #646464;


styles

1

2

3

6

5

4

1 .NaV-SELECTED

font-family: ‘Lato’; font-size: 1.25rem; font-weight: 900; color: #FFaF00; background-color: #FFF; box-shadow: 1px 3px 2px; box-shadow: #C8C8C8; line-height: 2rem; padding: 10px 0; margin: 0 1% 0 0;

2 .NaV-LINkS


3 h1

font-family: ‘Lato’; font-size: 2.2rem; line-height: 2.6rem; font-weight: 900; letter-spacing: .1rem; word-spacing: .3rem; text-transform: uppercase; color: #737373;

4 P

font-family: ‘Lato’; font-size: 1.5rem; line-height: 2.7rem; letter-spacing: .06rem; color: #000;

5 .EMPhaSIS

font-family: ‘Lato’; font-size: 1.1rem; font-weight: 900; letter-spacing: .05rem; text-transform: uppercase; color: #FFaF00;

Web typography: mobile


styles

Grid and layout: Desktop and laptop

1 COLUMN1

width: 194px;

2 COLUMN2

width: 224px;

3 COLUMN3

width: 430px;

4 GUTTER

width: 24px;

44 321


styles

Grid and layout: tablet

1 COLUMN1

width: 28%;

2 COLUMN2

width: 68%;

3 GUTTER

width: 4%;

3 21


styles

Grid and layout: mobile

1 COLUMN1

width: 92%;margin: 0 4%;

1


styles

imagery

Images should remain proportional to the dimensions that they are scanned or photographed. Be sure to save retina versions of images if they are to appear on mobile devices. This can be done by saving them twice the resolution of the desktop version.

POSTER

width: 500px;

MaGazINE/BOOk SPREaD

width: 430px;

MaGazINE/BOOk PaGE

width: 224px;


mAilChimp

Dashboard and user tab

The Dashboard is the primary screen giving you access to all areas of MailChimp. The User tab gives you the option to go your account information, get support, or log out.


mAilChimp

Account settings

The Account menu allows you to view and change any of your account information.


mAilChimp

Campaigns and Campaign info

The Campaign screen allows you create, edit and send e-mails to any of your lists containing subscribers. Upon clicking on an existing campaign or creating a new campaign, MailChimp will walk you through all the steps in order to setup and send campaigns.


mAilChimp

lists

Here is where your lists of subscribers appear. It gives you a small overview about each list. You can also access and edit lists from this screen. The Awareness site is linked to the West Michigan Graphic Design Archives Mailing List.


mAilChimp

subscribers

This is an overview of a current subscriber. It lets you know their subscription details such as what groups they are subscribed to within a list. The example below shows that Alison Popp is in the Volunteer Opportunities group but not the Financial Contributions group and her volunteer-specific skills are listed here as well.

When sending out campaigns you can target specific attributes of multiple subscribers. MailChimp will ask who you would like to like your campaigns to be sent to in the campaign section.


mAilChimp

West michigan Graphic Design Archives mailing list

Inside the West Michigan Graphic Design Archives Mailing List is all the subscribers interested in receiving emails about updates.

By clicking the Segments tab you can sort the list to show only those interested in volunteer oportunities or interested in making a financial contribution.


mAilChimp

reports

Reports are available after campaigns have been launched and will give statistics about active campaigns.

wmgda awareness planning and styles documentation

Documents