Artroom Style Guide by Kaitlin R

ARTROOM

STYLE GUIDE

THIS IS ARTROOMâ&#x20AC;&#x2122;S STYLEGUIDE It contains all you need to about our branding guidlines.

CONTENT 1.0 INTRO............................................03 2.0 LOGO..............................................05 2.1 Concept 2.2 Color 2.3 Color Usage 2.4 Exceptions 2.5 Sizes 2.6 Typography 2.7 Usage

3.0 TYPOGRAPHY.............................19 4.0 STATIONARY...............................23 5.0 BRANDED MERCHANDISE......27 6.0 MOODBOARDS...........................31 7.0THE WEBSITE...............................33 7.1 Wireframes 7.2 Sitemap

1.0 INTRO THE GUIDELINES Artroomâ&#x20AC;&#x2122;s identity has always been established around creativity and positive energy. However, our CI can only make a positive impact if it is used consistently and correctly. The Artroom Style Guide has been developed to provide a comprehensive understanding of its identity. It shows how to correctly implement its design elements on paper and the web.

PRIMARY COLORS

These are our primary colors used in both web and print. Slate is used for our logoâ&#x20AC;&#x2DC;s name and all of our print, display and header text. Our famous Orange color is used mainly for our Logo Mark when combined with the logo name.

2.0 LOGO 2.1 THE CONCEPT The original ″a″ symbol in our logo has come to be seen as the heart of our brand. It is the most immediate representation of our company and our brand to the world. It is a valuable asset that must be treated with utmost care.

However, the company name should rarely be used without the symbol.

The Artroom symbol is designed in the shape of an ″a″ with paint dripping off of it. Its primary color is bright orange. However, it can adapt its color and texture to match artworks from our Gallery. It is distinctive, innovative and memorable. The ″a″ symbol can be used alone or paired with our company name.

PRIMARY COLORS

SECONDARY COLORS

These are our primary colors used in both web and print. Slate is used for our logoâ&#x20AC;&#x2122;s name and all of our print, display and header text. Our famous orange color is used mainly for our logo mark when combined with the logo name.

Our two secondary colors, white and mint, are used for both print and web. White is mainly used as a background color while mint is for accents.

SLATE

RGB: 70,70,70 CMYK: 64,54,52,52 HEX: #464646

ORANGE

RGB: 243,146,0 CMYK: 0,50,97,0 HEX: #f39200

WHITE

RGB: 255,255,255 CMYK: 0,0,0,0 HEX: #ffffff

MINT

RGB: 45,172,141 CMYK: 74,03,55,0 HEX: #v

LOGO 2.2 COLORS These colors are what really gives Artroom itâ&#x20AC;&#x2122;s personality. They are bright and confident, drawing in peoples attention while maintaining a modern, professional look. Orange is one of our greatest distinguishing features. It is an essential part of our brand and is the dominant color for our logo mark. Combined with white and slate it creates a powerful and distinct style.

When darker background colors are used please use white as your text color. However, headers may be more colorful. For example, a slate background could have a paragraph with a mint colored header and white body text.

Our primary colors, slate and orange, should almost always be paired with white. For backgrounds, white should be the base color for areas with lots of text or images.

ARTROOM

LOGO 2.3 COLOR USAGE The primary colors slate and grey should be used as much as possible when combined with our logo. As you can see with the examples on the left the company name ″ARTROOM″ should always be combined with the symbol mark.

PRIMARY COLORS

LOGO 2.4 EXCEPTIONS The â&#x20AC;łaâ&#x20AC;ł in our logo may also be combined with artworks to create a custom look. The logo mark is constantly evolving as new artists visit the gallery. The artistic logo marks should be scaled large enough so that the artwork can clearly be seen across the entire symbol. The symbol must still be clearly distinguishable. As an example, any light colored art pieces can not be used with a light or white background.

The artistic marks are often used in marketing campaigns and product designs. Note that when used in this fashion the mark is not combined with the company name, rather alone and prominent. Remember.. Be creative.

It is important to use dynamic and bright colors and avoid using paintings or photos with people.

FOR PRINT

FOR WEB

The mark and name should be used together for print materials. For stationary, letters and newsletters a standard size of 12mm x 47mm is recommended.

The standard website logo should be 31px high and 120px wide. If the â&#x20AC;łaâ&#x20AC;ł is used alone the dimensions should be 31px high and 24px wide. Again, do not skew or distort the logo.

FAVICON 47mm

ARTROOM

12mm

37.5mm

9.5mm

The favicon is just the logo mark seated on an orange background. 16px by 16px.

LOGO 2.5 LOGO SIZING The logo should always be clearly visible and never stretched or skewed. It is also important not to place the logo on top of busy photos with lots of visual clutter. Make sure to give it plenty of space to breathe. For advertising materials, accessories, apparel and posters the sizing of the logo can be much larger, especially when using just the symbol mark.

ARTROOM 14

LOGO 2.6 TYPOGRAPHY Artroom uses Source Sans Pro as it’s logo name. The font weight is black to ensure a bold, eyecatching appearance. Standard letter-spacing is applied. The size between the mark and name is very important. As you can see in the image to the right. The font size should be 24pt with a 0.34 mm gap between the icon and the first letter.

0.34mm

24pt (5.5mm)

ARTR

The ″a″ mark should be 12mm high. It is easiest to download the complete logo from the Artroom website rather than try to position it youself. www.artroom.com

ARTROOM 3

ARTROOM

ARTROOM 2

O TR R A

ARTROOM

LOGO 2.7 EXAMPLES 01. Do not place the logo mark above the name. 02. Do not add embellishments like drop-shadows, outlines, embossings, etc around the logo. 03. Do not outline any part of the logo.

06. Always leave lots of room around the logo. Color usage is also important! 07. Again, leave lots of room around the logo. It is OK to use without the company name.

04. Do not use neon or drab colors on the company name. Especially when combined with the symbol mark. 05. Do not slant, skew or rotate the logo.

SOURCE SANS PRO BLACK

SOURCE SANS PRO LIGHT

Used for headers and titles but never for body text. #464646 Web 16px - 26px Print 18px - 36pt

Used for all body text. Sometimes used as a subheader for banners/posters. #464646 Web 14px - 18px Print 12px -14px.

Aa Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (.,:;?!@#$%^&*()0123456789

3.0 TYPOGRAPHY 3.1 OUR FONT Artroom uses Source Sans Pro as its one and only typeface. The use of this Open Source font creates a unique, contemporary and consistent look for the company. The different font weights and sizes give structure and impact to the content.

EXAMPLE PARAGRAPH *Header text should always be uppercase. Avoid headers longer than one line.

EXAMPLE BANNER *Both header and subheader should be all caps.

I AM A BODY TEXT HEADER! I am a body text. I should be 12px when printed and 16px on screen I should have a light font weight! Donâ&#x20AC;&#x2DC;t forget proper line height of 1.5x and paragraph widths around 45-90 characters.

A AM A BANNER HEADER I AM A BANNER SUBHEADER

TYPOGRAPHY 3.2 EXAMPLES The headers and subheaders should be either double or triple the size of the body text. This is general rule of thumb for design but more liberty can be taken if it enhances the design. Drop shadows and strokes around characters should not be used. In most cases the text should be justified to the left. This will present the brand in the cleanest and most straight forward way. For body content there is no subheader. Just use a strong all upcaps header and light body text.

4.0 STATIONARY

STATIONARY

5.0 BRANDED MERCHANDISE

BRANDED MERCHANDISE

ARTROOM

14 AUG

I AM A PARAGRAPH HEADER

Lorem ipsu dex mundi torquatos, est erat dicat adipisci cu, scripta legendos incorruest. Eum ex mundi torquatos.

I AM A HEADLINE! I AM A SUBLINE

BUTTON

6.0 MOODBOARD

MODERN INNOVATIVE Creative

Inviting

7.0 THE WEBSITE 7.1 WIREFRAMES Artroomâ&#x20AC;&#x2122;s website is a central part of the company. Having a modern, easy to use website is key to its success. Its primary goal is to make upcoming exhibit information available to the community. It is also important for tourists and new visitors to be able to gain information about the gallery, including opening hours and the location. Additionally, the online shop allows people to quickly and easily order gift shop merchandise online. By registering the user can log in and view order and cart information.

Logo

Home

Exhibits

The Galler

THE HOMEPAGE The navigation section is full width and contains the Logo, Home, Exhibits, The Gallery, Shop, Contact and Login menu links. The menu links will have a dropdown hover effect with info regarding each link. The first section is an eye catching banner image with a large banner text welcoming the user to Artroom and a central call to action leading to more info. The following sections (Current Exhibits, Local Artist Info, Location Info) contain important need-to-know info including current exhibit info, artist booking, hours and location. This allows the user to scroll down without having to click to find important information.

Section 1

Jumbotron/banner

Section 2

Current Exhibits

Section 3

Local Artist Info

Section 4

Location Info

Footer

Shop

Contact

Logo

Home

Exhibits

The Galler

Shop

Contact

THE GALLERY PAGE Instead of an about page the website combines info about the gallery and upcoming special events into one page to make it easier for users to find info.

Section Section 2 1

Upcoming exhibits Banner + Image

Section 2 Gallery Info

Section 4

Gallery Special Events

The first section is a large full width banner showing a beautiful image of the gallery with the company slogan in the middle. The next section contains an image slider of the gallery and a quick synopsis about the gallery. Section 4 is a news section showing info and images of upcoming special community events.

Footer

Logo

Home

Exhibits

The Galler

EXHIBIT PAGE The exhibit page contains all the important information concerning current, past and upcoming exhibits. These include dates, artist information and photos. The header section contains the current featured exhibit followed by section 2 which contains upcoming and previous exhibit information. The user can simply click the right and left arrows to view more exhibits. Each exhibit is clickable with slide-in/ slide-out info so the user does not have to leave the page to click through events. This section will contain a search field in the upper right corner. Section 3 will contain artist info and a contact button for artists who are interested in booking the gallery.

Section 1 Featured Exhibit

Section 2

Upcoming exhibits

Section 3

Local artist info

Footer

Shop

Contact

Logo

Home

Exhibits

The Galler

Shop

Contact

Logout

CHECKOUT ORDER CONFIRMATION The primary goal of the checkout is to make it as clear and efficient as possible for the user. Large bold buttons and text with little clutter helps direct the user through the purchasing process.

Checkout progress bar

Back

Shipping Info

Billing Info

Order Summary

The checkout steps are made large and visible with the progress bar in the header.

Purchase

Footer

Homepage

Footer

(Main Nav)

Exhibits

The Gallery

Shop

Special Events

Contact

Customer Serivce

Accessories

My Account

Prints

My Order

Apparel My Cart

Returns My Cart My Cart

Overview Your Details Delivery Payment Order

Legal

Sitemap

Shipping Account Details Username/ Password Re-Login

Social Media

THE WEBSITE 7.2 SITEMAP The sitemap clearly shows where each link leads. If the user goes to ″My Cart″ or ″Login″ the site will proceed to a login or register screen. If the user does not yet have an account they must register to proceed. To the bottom right you will see the simple registration process.

users to view their account and order information. The lines connecting to the Login block indicate that they must first log in to view that particular page.

The footer also contains all the links that the Hompage navigation menu contains but also a few addition options. (Thus the dashed line pointing towards the homepage links) These include Legal, Sitemap, Customer Service and all the Social Media links. The customer service section allows