WMGDA Awareness Planning and Styles Documentation
-
Upload
melanie-lynn-ronquillo -
Category
Documents
-
view
219 -
download
1
description
Transcript of WMGDA Awareness Planning and Styles Documentation
![Page 1: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/1.jpg)
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
![Page 2: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/2.jpg)
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.
![Page 3: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/3.jpg)
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
![Page 4: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/4.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 2
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.
![Page 5: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/5.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 3
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?
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
Donate to the archive
Build a better personal reputation in the design community
Gain public and physical recognition (promotional goods)
![Page 6: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/6.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 4
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?
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
Volunteer at the archives
Build a better personal reputation in the design community
![Page 7: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/7.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 5
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
![Page 8: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/8.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 6
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;
![Page 9: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/9.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 7
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
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;
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;
![Page 10: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/10.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 8
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
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;
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
![Page 11: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/11.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 9
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
![Page 12: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/12.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 10
styles
Grid and layout: tablet
1 COLUMN1
width: 28%;
2 COLUMN2
width: 68%;
3 GUTTER
width: 4%;
3 21
![Page 13: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/13.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 11
styles
Grid and layout: mobile
1 COLUMN1
width: 92%;margin: 0 4%;
1
![Page 14: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/14.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 12
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;
![Page 15: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/15.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 13
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.
![Page 16: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/16.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 14
mAilChimp
Account settings
The Account menu allows you to view and change any of your account information.
![Page 17: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/17.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 15
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.
![Page 18: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/18.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 16
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.
![Page 19: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/19.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 17
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.
![Page 20: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/20.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 18
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.
![Page 21: WMGDA Awareness Planning and Styles Documentation](https://reader030.fdocuments.in/reader030/viewer/2022020220/568c0d621a28ab955a8c875a/html5/thumbnails/21.jpg)
west michigan graphic design archives awareness site planning & styles documentation DESIGN PROJECT CENTER COLLEGE OF BUSINESS FERRIS STATE UNIVERSITY May 1, 2014 19
mAilChimp
reports
Reports are available after campaigns have been launched and will give statistics about active campaigns.