Design
GUIDELINES LOGO & IDENTITY FOR BETH ERIKSON created on June 2018
DESIGN STUDIO IMAGEAREA 125 Herold Avenue, Anywhere 5624 Winterland
WWW.DESIGN-STUDIO.COM
DESIGN GUIDELINES
FOR BETH ERIKSON
Design guidelines
CONTENTS
INTRODUCTION About this brand
04 OUR BRAND 3
01 THE LOGO
The letterhead
26
The envelope
27
The business cards
28
Merchandising products
29
The usage of the logo
6
The logo clearspace
8
Color variations
9
05 GRID SYSTEMS
Incorrect use and correct use
8
Mobile web design
32
Sizes and using the artwork
9
Web grid systems
34
Print grid system
35
Place text on photo
36
02 THE COLOR Logo color palette
14
Secondary color palette
15
03 TYPOGRAPHY The primary & secondary typefaces
18
The typography
22
06 ADDITIONAL Image / Design moodboard
40
Corporate icons
44
The checklist
45
Frequently asked questions
46
You never get a second chance to make a first impression. (Andrew Grant, Even)
2
DESIGN GUIDELINES
About this brand This identity guideline is a tool designed to project the image, values, and aspirations behind the brand.
It is the cornerstone of all communication efforts and must be followed carefully to ensure a consistent style and quality of presentation. Every participating institution is responsible for representing or coordinating the use of the brand along with an individual institution’s brand.
Jocelyn Valentine Creative Director
3
DESIGN GUIDELINES
FOR BETH ERIKSON
01. 4
DESIGN GUIDELINES
THE LOGO Our logo is the touchstone of our brand and one of the most valuable assets. We must ensure its proper usage.
5
DESIGN GUIDELINES
FOR BETH ERIKSON
The usage of
THE LOGO
THE BETH ERIKSON LOGO COMBINES 3 ELEMENTS: The 2 initials B & E in the center,the tagline and the grunge circle behind it. These elements should never be changed. Position, size and color, along with the spatial and proportional relationships of the Beth Erikson logo elements, are predetermined and should not be altered. Used consistently, they will reinforce public awareness of the company.
Different versions of the logo
Blush Rose with 70% color
6
Blush Rose 50% color
Logo without background
DESIGN GUIDELINES
The 3 elements of the logo
The logo background
The logo initals
The logo wordmark
THE VISUAL IDENTITY STANDARDS ARE BASED ON THESE PRINCIPALS Logo consistency
Consistency of application
Consistency of quality
Maintaining logo elements typeface, color, proportion, clear space and size guidelines.
Maintaining logo placement and prominence across all communications.
Ensuring that all uses communicate a consistant message of quality and excellence.
7
DESIGN GUIDELINES
FOR BETH ERIKSON
The logo
CLEAR SPACE The BETH ERIKSON logo requires serparation from the other elements around it. The space required on all sides is roughly eqivalent to the initial letters of the logo type. It never should be less than that. The logo must always fit into the clearspace area and can not be intervened by other graphical elements which could hinder legibility of the brand. Please note that text or pictorial figures, which have strong impact or impression, should not be placed near the logo, even though you keep the isolation area blank.
Whenever you use the logo, it must be surrounded with clearspace to ensure its visibility.
8
DESIGN GUIDELINES
The logo
COLOR VARIATION
Reverse logo color
Black and white logo version
Black without background
Sometimes, often due to production costs, you need another color or only one color of ink is available and so the Logo must be reproduced using only one color. In this scenario, the logo must be used following the convention of using a light color type on a dark background or in a dark color type on a light background. You must honor the BETH ERIKSON color palette when possible, using black o rgray if necessary.
9
DESIGN GUIDELINES
FOR BETH ERIKSON
Incorrect and
CORRECT USE Please note: The logo cannot be changed! Although creativity is appreciated please do not alter the logo in anyway!
Don’ts
DON’T use stroke shadows
DON’T use non-approved colors
NEVER change the proportions
Do’s
You CAN rotate the logo, but not more then 7°
10
You CAN use the logo without the background
You CAN use it on a solid background
DESIGN GUIDELINES
Minimum sizes of the logo There are no predeterminded sizes for the logo. Scale and proportion should be determined by the available space, function and visibility. In print the minimum size is 35 mm width, for the logo without background it is 30 mm width.
With background: 35 mm witdh
Without background: 30 mm witdh
Using the artwork This page explains the file naming system for the artwork of the various versions of the logotype. The filename contains all key information to identify the appropriate logo version for each application. The logotype is supplied in EPS and PNG file formats. For printed documents use always the EPS files. PNG files should only be used for the web applications or if you are using Mircosoft Word or Powerpoint. Please make sure that the correct artwork for each application is used.
BETH-ERIKSON_ LOGO_FIRSTCHOICE_CMYK.EPS Logotype version - first choice - second choice
Colorspace File format - CMYK - RGB - grayscale - black
- EPS - PNG -JPG
11
DESIGN GUIDELINES
FOR BETH ERIKSON
02. 12
DESIGN GUIDELINES
THE COLOR With 93% of customers influenced by colors and visual appearance, make sure you pick the right colors for your company.
13
DESIGN GUIDELINES
FOR BETH ERIKSON
Logo
COLOR PALETTE USE OF COLOR FOR THE PRINTED & DIGITAL LOGO. The following palette has been selected for use in BETH ERIKSON communcations. Lighter tints of these colors are also allowed, but the Logotype may only be used with a 100% tint. The primary colors include a blush rose tone, that embodies the feminine site of the company. The additional color is a dark brown wich harmonized perfectly to the rose and gives the whole a warm and gently touch.
14
Color 1
Color 2
BLUSH ROSE
BURNT SIENNA
COLOR CODES
COLOR CODES
CMYK
CMYK
0 / 15 / 6 / 0
58 / 60 / 44 / 44
RGB
RGB
252 / 222 / 222
80 / 70 / 80
HEX
HEX
#fcddde
#50454f
Pantone
Pantone
698 C
439 C
DESIGN GUIDELINES
Secondary
COLORS The palette allows the addition of secondary colors to enrich the BETH ERIKSON visual identity as a whole. Lighter tints of these colors are also allowed. These colors are complementary to our official colors, but are not recognizable identifiers for our company. Use the all colors sparingly, except the fawn color.
FAWN
SOFT PLUM
CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f
CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f
ASH ROSE
DARK GRAY
CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f
CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f
15
DESIGN GUIDELINES
FOR BETH ERIKSON
03. 16
DESIGN GUIDELINES
TYPOGRAPHY Typography is 95% of design – it’s a driving force in all forms of communication art and it is very important
17
DESIGN GUIDELINES
FOR BETH ERIKSON
The primary
TYPEFACE DESIGNER by mistifonts.com (for personal use)
DATE CREATED / RELEASED 13 January 2015
Font Autumn in November
18
Aa 123
DESIGN GUIDELINES
ABCDEFGH IJKLMNOP QRSTUVWX YZ abcdefghijklmnopqrstuvwxyz 1234567890 Autumn in November regular
DOWNLOAD THE FONT
https://www.dafont.com/de/autumn-in-november.font
http://www.fontspace.com/mistis-fonts
19
DESIGN GUIDELINES
FOR BETH ERIKSON
The secondary
TYPEFACE DESIGNER by Julieta Ulanovsky (Principal design)
DATE CREATED / RELEASED Updated November 2017
Font Montserrat
Aa 123 20
DESIGN GUIDELINES
ABCDEFGHIJKL MOPQRSTUVWX YZ ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Montserrat light Montserrat regular Montserrat black
DOWNLOAD THE FONT
https://www.fontsquirrel.com/fonts/montserrat
https://fonts.google.com/specimen/Montserrat
21
DESIGN GUIDELINES
FOR BETH ERIKSON
The
TYPOGRAPHY HEADING TYPOGRAPHY The primary typeface for heading on printed materials is Autumn in November. The alternative for web safe usage is the secondary font Montserrat. For the web the font Autumn in November will only be used as graphic files.
The quick brown fox Autumn in November regular, 44 pt
SUBHEADING TYPOGRAPHY The primary typeface for subheading on printed and online materials is the font Montserrat. With 3 levels of typography, the font size generally starts out largest on top (level one; your most important information) and decreases in size as you move down the page.
THE QUICK BROWN FOX Montserrat light, 30 pt, uppercase
THE QUICK BROWN FOX Montserrat black, 20 pt, uppercase
THE QUICK BROWN FOX Montserrat regular, 14 pt, uppercase, spacing 200
22
DESIGN GUIDELINES
Body typography The primary typeface for body copy on printed materials is the font Roboto condensed. The typeface is to use on all documents. Typical applications include letters, presentations, websites and documents.
Roboto condensed Roboto condensed regular
Roboto condensed italic
Roboto condensed bold
ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
RULES This serif font is available in 4 weights. We use 3 of them. The regular, italic and bold versions.
23
DESIGN GUIDELINES
FOR BETH ERIKSON
04. 24
DESIGN GUIDELINES
THE STATIONARY When it comes to developing the stationery, consistency is the key for all layouts and designs
25
DESIGN GUIDELINES
FOR BETH ERIKSON
The
LETTERHEAD
Clean and simple, we designed our stationary to align with our visual system. The letterhead features the logo in the middle of the top with the business contact information on the opposite site.
26
DESIGN GUIDELINES
The
ENVELOPE
The envelope will be used for all official contact and communication of our company. These are the approved layouts. Other formats are also allowed.
27
DESIGN GUIDELINES
FOR BETH ERIKSON
The
BUSINESS CARD Beth Erikson GRAPHIC DESIGNER 123 Street Name, City 45 +49 123.456.234.56 contact@beth-erikson.com w w w. b e t h - e r i k s o n . c o m
The business card will be used for all official contact and communication of our company. These are the approved layouts. The cards will always be double sided.
28
DESIGN GUIDELINES
Merchandising
PRODUCTS
These are the apporoved layouts for a paper bag, pencil and price tags.
29
DESIGN GUIDELINES
FOR BETH ERIKSON
05. 30
DESIGN GUIDELINES
GRID SYSTEMS Using a grid system is one way to achieve a level of consistency that would be otherwise extremely difficult to master
31
DESIGN GUIDELINES
FOR BETH ERIKSON
Mobile
WEB DESIGN
LOGO PLACEMENT To place the BETH ERIKSON logo please use the approved grid system. It always should be on the top and center.
32
DESIGN GUIDELINES
LOGO PLACEMENT To place the BETH ERIKSON logo please use the approved grid system. It always should be on the top and center.
33
DESIGN GUIDELINES
FOR BETH ERIKSON
Web
GRID SYSTEM Use on different devises. Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here are some examples. The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). Please follow the rules, to have a consistant visual appearance.
The layout is based on a 12 columns bootstrap grid system.
34
DESIGN GUIDELINES
GRID SYSTEM Use on DIN A4 and letter format. The grid is used as a guide for how to place text, photos and advertisements on the page. The font size that you use should be proportionate to the grid. Using a font that is too large will cause odd hyphenation and breaks, which can be difficult to read and using a typeface that is too small can cause strain on a reader trying to get from the start of a line to the end. The 12 column grid is always the basic. For special prints, a 6 column grid is also allowed.
Use 2, 3, 4, 6, 8, 10 or 12 columns for the layout
35
DESIGN GUIDELINES
FOR BETH ERIKSON
Place text
ON PHOTO
36
DESIGN GUIDELINES
Place text on images according to the examples on these pages. It is important to place the text on solid color parts of the background. It is not allowed to use text on complex backgrounds, because it will reduce the readability. Colors for the text are Dark Gray and Burnt Sienna. Other colors are not allowed. Use the background color of the logo like in the examples.
37
DESIGN GUIDELINES
FOR BETH ERIKSON
06. 38
DESIGN GUIDELINES
ADDITIONAL An organization, no matter how well designed, is only as good as the people who live and work in it.
39
DESIGN GUIDELINES
FOR BETH ERIKSON
Image
MOODBOARD
Examples and rules Requirements: Use desaturated colors with a scandinavian feel For photos with people use only single persons (max. 2 persons if required. All photos should be light and minimal. Use pastel and gray colors. Use the optimal image detail, so that it looks like zoomed into the picture. Also allowed are grayscale images for print and web Use of imagery that demonstrates creativity, nature or persons. Use CMYK (RGB for web) modus, when the background is white or the colorscheme fits with the colors of BETH ERIKSON Use grayscale images, when the colorscheme doesn’t fit with the background. Use grayscale images with color overlay, when you want to write some text on it.
40
DESIGN GUIDELINES
BOTTOM: These are the 3 color modes, that are allowed. CMYK (or RGB for web), grayscale and Blush Rose color overlay.
41
DESIGN GUIDELINES
FOR BETH ERIKSON
Design
MOODBOARD GLITTER AND FOIL Palette of Blush Rose glitter, foil and marble textures
BACKGROUND TEXTURES Different blush textures usable as backgrounds
42
DESIGN GUIDELINES
Suitable colorshemes
01 Blush pink
02 Fawn
03 Ash rose
o4 Soft plum
05 Burnt Sienna
06 Dark brown
43
DESIGN GUIDELINES
FOR BETH ERIKSON
Corporate
ICONS The icons are pictograms displayed on the screen or print layout in order to help to navigate through the content. The icon itself is a comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. The icons are used with the square background or without any background in print and web. They are available in 2 different color combinations.
ICON SIZES
100%
125%
150%
200%
ICONS WITHOUT BACKGROUND
ICONS WITH A SOLID BACKGROUND
44
DESIGN GUIDELINES
The
CHECKLIST Best to have a checklist. Then you know you’ve done everything perfectly!
01 The logo Only use approved versions of the logo. Please check that you have respected the minimum size and exclusion zone requirements. The logo should not appear on color backgrounds without being reversed out.
02 Color Please make sure that only your approved primary and secondary colors are used.
03 Typography Use the font Montserrar for all top headings. For body text and smaller headings use font Roboto. Both fonts are also available for web. Only for Print use the font Autumn in November for the main heading.
04 Imagery Use desatured photos with vintage color, grayscale photos or photos with color overlay. Please follow the rules.
05 Print materials Please use the provided grids and approved layouts for all printed products and the stationery.
To provide feedback, share informations or seek answers to questions you may have about this brand, please contact: Jane Whitemore
Eugene Bundy
Brand development manager 125 Herold Avenue, Anywhere 5624 Winterland United States
Brand communication manager 125 Herold Avenue, Anywhere 5624 Winterland United States
Phone Fax E-Mail
Phone Fax E-Mail
+22 (0) 44 34 5678 68 +22 (0) 44 34 5678 70 whitemore@your-company.com
+22 (0) 44 34 5678 69 +22 (0) 44 34 5678 70 bundy@your-company.com
45
DESIGN GUIDELINES
FOR BETH ERIKSON
Frequently asked
QUESTIONS 01 Asked Question Otatiure ribearior solorru mquaerunt et inus sum eic te volutem sequo tem dem harchil ilias moloribus moluptaspit expero endis ma verchil enempel loribusapel min re consequam quam estia cone molorum et lab in plandiatio eum nonsequ untusandae que vid ma sunt.
02 Asked Question Sam dolore est, officaborat expedi ullianis eat re consequi bea nim quis cus as pra provid quas et ex et, quia qui rem est, cusam et volectorum iment alique de ducia sae doluptur, ipsaper speroreium ute cum quas aliquassi tem quatus quasima nit.
03 Asked Question Occusandus abor aniati volorio voluptat apid ut arundis aut acea cori ut erum consed mollicim quae venis estores evel inctior porerem porepud aernatius et am aut escidenisqui odistiorum esequi des eaqui nam venisitio is essusapedit, soluptae experita vid quia inciam que sequi de et as de vit officipsa volupit, cusdaer ibusam quas pro doluptius cusdam lia nemquam fugitionet ate prehent, occus.
04 Asked Question Perum exped modis demolore, es delesti atempor epedis siti cuptatur same estrum quaesci voluptatus minctur audae sitiamet facescient digenda am eos sim re non preperi bercidem sed unt dolorum as in num eum volo ide commolorro ma venim explitatis culleni molesequid quisqui occabo. Occusandus abor aniati volorio voluptat apid ut arundis aut acea cori ut erum consed mollicim quae venis est.
05 Asked Question Am acerest empore es as deria volupta tibero exceate poribus daepudit destiasi nimus volut in perum faccum, te perum exped modis demolore, es delesti atempor epedis siti cuptatur same estrum quaesci voluptatus minctur audae sitiamet facescient digenda am eos sim re non preperi bercidem sed unt dolorum as in num eum .
If you need more help, just contact the support: help@design-studio.com
46
DESIGN GUIDELINES
Work hard in silence. Let success make the noise. Beth Erikson (graphic designer)
47
WWW.DESIGN-STUDIO.COM