awareness Site Planning & styles Documentation west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 2, 2014
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.
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
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 2, 2014
planning
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 1
planning
Brand Core Values
Compel
inform
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.
illuminate
strive
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 2
planning
User Paths
Enrich their own work by gaining a deeper understanding of WM design history
DESIGN EDUCATOR
Support and preserve design history
Find more ways to get involved with the design community
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
Support and preserve design history
Donate to the archive
Find more ways to get involved with the design community
Build a better personal reputation in the design community
Gain public and physical recognition (promotional goods)
DESIGN PROFESSIONAL Ian Siegal, 32 years old Designer, Firebelly Design (4 years)
Why does Ian want to support the archive?
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 3
planning
User Paths
Enrich their own work by gaining a deeper understanding of WM design history
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
Support and preserve design history
Find more ways to get involved with the design community
Build a better personal reputation in the design community
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 4
styles
Web Colors & Typography
#FFAF00 Active navigation links, paragraph rules, MI icon, yellow in body copy (.emphasis) #FFBB00 Footer bar #737373 Gray in headlines (h1) #646464 Bold text other than h1 headlines #F0F0F0 Navigation background #000000 Body copy
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
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 5
styles
Web Typography: Desktop and Laptop
6
1 2 3
7
4
5
8
1 h1
3 .nav-links
6 p
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;
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;
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
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;
4 .callout font-family: ‘Lato’; font-size: 1.25rem; line-height: 2.7rem; letter-spacing: .06rem; color: #000;
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 5 .footer-style font-family: ‘Lato’; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; color: #646464;
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;
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 6
styles
Web Typography: Tablet
1
2 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;
3 4
2 .nav-links
5
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;
6
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
7 ©2014 GRAPHIC DESIGN ARCHIVES
8
font-family: ‘Lato’; font-size: 1.3rem; font-weight: 900; letter-spacing: .1rem; text-transform: uppercase; color: #FFAF00;
5 .callout
6 p
7 .footer-style
8 .rights-float-right
font-family: ‘Lato’; font-size: 1.7rem; line-height: 2.8rem; font-weight: 900; letter-spacing: .06rem; word-spacing: .04rem; color: #828282;
font-family: ‘Lato’; font-size: 1.8rem; line-height: 2.5rem; letter-spacing: .08rem; word-spacing: .04rem; color: #000;
font-family: ‘Lato’; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; color: #646464;
font-family: ‘Lato’; font-size: 1.1rem; line-height: 3rem; letter-spacing: .04rem; text-align: right; text-transform: uppercase; color: #646464;
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 7
styles
Web Typography: Mobile
1 .nav-selected
1 2
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 4 5
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
6
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;
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 8
styles
Grid and Layout: Desktop and Laptop
1
column1
width: 194px;
2
column2
width: 224px;
3
column3
width: 430px;
4
gutter
width: 24px;
1
4
2
4
3
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 9
styles
Grid and Layout: Tablet
1
column1
width: 28%;
2
column2
width: 68%;
3
gutter
width: 4%;
1
3
2
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 10
styles
Grid and Layout: Mobile
1
column1
width: 92%; margin: 0 4%;
1
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 11
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.
Magazine/Book page width:
224px ;
Magazine/Book spread width:
430px ;
poster width: 500px;
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 12
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 13
Mailchimp
Account Settings The Account menu allows you to view and change any of your account information.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 14
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 15
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 16
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 17
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.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 18
Mailchimp
Reports Reports are available after campaigns have been launched and will give statistics about active campaigns.
west michigan graphic design archives awareness site planning & Styles documentation DESIGNPROJECTCENTER COLLEGEOFBUSINESS FERRISSTATEUNIVERSITY
May 1, 2014 19