2
3
4
TABLE OF CONTENTS Introduction
Project Brief Design Overview
Basic Elements Color Typeface Logo
Stationery Design
Letterhead Envelope Folder Business Card CD
Signage Design
Entrance Menu Tools & Utensils Indicational Informational
User Interface Design Flat Design Simulation
Packaging Design Flat Design Dieline Simulation
3
Project Brief Design Overview
7
Color Typeface Logo
17
Letterhead Envelope Folder Business Card CD
27
Entrance Menu Tools & Utensils Indicational Informational
39
Flat Design Simulation
47
Flat Design Dieline Simulation
5
PROJECT BRIEF
Hello and welcome to the official ArtCafe styleguide. Here you’ll find everything you need to know to stay in line with the design requirements that make up what ArtCafe is. ArtCafe is an artists home in which customers are supplied with various materials such as papers, a selection of pens, pencils, markers, and other drawing materials. The main goal for ArtCafe is to establish a space with which artists are supplied with these materials to create art that they wish, while also supplying a warm and welcoming environment with its coffee and other refreshments.
6
DESIGN OVERVIEW
The overall design elements of ArtCafe are made with intention to grasp the audiences attention and have them create a relationship with what ArtCafe does. From the color palette to the logo design, all of these decisions are made to ensure audiences will look at it and think of a nice and warm place to come to and create artwork. In regards to art, at some point or another, every artist has owned their very own sketchbook. Relating to that experience is essential for communicating the “art� aspect of ArtCafe. This is accomplished through sketch like designs, and including illustration throughout signage designs. The coffee shop/bakery aspect is something that can be conveyed with icons relating to coffee beans, coffee cups, cakes, rolls, etc. Color schemes that can also accomplish the same goal could involve tones of brown, which gives off a very organic feel of and relating to coffee beans. 7
8
BASIC ELEMENTS Color Typeface Logo
Symbol Description Black and White Logo + Ratio Primary Version Variations Minimum Size Clear Space Restrictions Mockups
9
COLORS
R: 255 G: 243 B: 227 C: 28.32 M: 51.6 Y: 70.1 K: 7.93 #AF7C58
R: 255 G: 243 B: 227 C: 0 M: 4 Y: 10 K: 0 #FFF3E3
The intention for the colors was to choose colors that conveyed a sense of warmth and comfort. The use of brown and a light tan color was chosen because it gives off a very organic feel of and relating to coffee beans.
10
TYPEFACE Gill Sans Nova 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ The GIll Sans Nova sans serif font was made with the intention of being a very simple to read font and being versatile as well, being that it has a fairly large family ranging from Ultralight, to Ultrabold
Handwriting
Hand writing was intended to be used to convey a sense of authenticity and to relate with the experience that would be had in stores: freehand drawing.
11
LOGO SYMBOL DESCRIPTION
Coffee Cup
The symbols/icons used in this logo are a coffee cup, and a drawing pencil. The coffee cup is used to relate to the Cafe aspect of the shop while the drawing pencil was intended to create a relationship with the drawing side of the Cafe.
12
Pencil
BLACK AND WHITE LOGO + RATIO
x
1/10x 1/10x
1 1/3x
1/8x
2x
13
PRIMARY VERSION LOGOS
14
VARIATIONS
15
CLEAR SPACE
1/10x 1/10x
1/10x
x
1/10x
x
16
MINIMUM SIZE
1.25 in
0.5 in
1.605 in
0.82 in
17
18
STATIONERY DESIGN Letterhead Envelope Business Card Folder CD Case
19
LETTERHEAD 0.5 in 0.5 in
Art Cafe: Drawing & Coffee Shop 3655 S Las Vegas Blvd Las Vegas, NV 89109 702.679.8367 info@artcafe.com
artcafe.com
11 in
0.325 in 0.35 in
8.5 in
20
ENVELOPE 0.125 in
0.3 in
Art Cafe: Drawing & Coffee Shop 3655 S Las Vegas Blvd, Las Vegas, NV 89109
4.125 in
Johnathan Doestar
Las Vegas, NV 89140 8409 S Capitol Rock St.
2.986 in
9.5 in 0.95 in
1.085 in
5.372 in www.artcafe.com
0.69 in
21
BUSINESS CARD 0.7 in
0.7 in
0.67 in
2 in
0.7 in
3.5 in
0.45 in
Saul David Clavano Graphic Designer | 3D Artist
0.25 in 0.2 in
0.13 in
0.45 in
0.19 in
3.5 in 22
2 in
phone: 702.885.1546 email: saul.clavano@gmail.com instagram: @saul.art.design twitter: @saul.artcafe website: www.artcafe.com
FOLDER
4.4 in
1.1 in
1.4 in
12 in
2.35 in
2 in 3.105 in
9 in
8.938 in
3.5 in
4.25 in
18 in
23
CD & CD COVER
1.76 in
4.75 in 0.775 in 0.55 in
0.426 in
1.4 in
4.75 in 24
4.72 in
4.72 in 25
26
27
28
SIGNAGE DESIGN Entrance Menu Tools & Utensils Indicational Informational
29
ENTRANCE
3 ft
2 ft
5.5 ft 2 ft
30
31
MENU 8 ft
ESPRESSO & BREWED COFFEE Freshly Brewed Coffee Caramel Macchiato White Chocolate Mocha Flat White Cafe Mocha Cafe Latte Iced Coffee
FRAPPUCCINO Caramel Strawberry Triple Mocha Coffee Java Chip Vanilla Bean Double Chocolate Chip
Small
Medium
Large
2.55 5.40 5.40 4.20 4.99 4.99 4.99
3.00 6.20 6.20 6.20 5.65 5.65 5.65
3.20 7.50 7.50 7.50 6.20 6.20 6.20
Small
Medium
Large
2.55 5.40 5.40 4.20 4.99 4.99 4.99
3.00 6.20 6.20 6.20 5.65 5.65 5.65
3.20 7.50 7.50 7.50 6.20 6.20 6.20
3.95 ft FOOD
EXTRAS
Pastrys and Cookies Cakes (flavors vary) Crepes (flavors vary)
.89 1.50 1.30
Flavor per pump Espresso Shot Venti Iced
.50 .80 .30
Java Chips Whipped Cream
.50 .30
Substitutions
.30
(organic soymilk or almond milk)
2 ft
3.4 in
ESPRESSO & BREWED COFFEE Freshly Brewed Coffee Caramel Macchiato White Chocolate Mocha Flat White Cafe Mocha Cafe Latte Iced Coffee
FRAPPUCCINO Caramel Strawberry Triple Mocha Coffee Java Chip Vanilla Bean Double Chocolate Chip
4 in
32
Small
Medium
Large
2.55 5.40 5.40 4.20 4.99 4.99 4.99
3.00 6.20 6.20 6.20 5.65 5.65 5.65
3.20 7.50 7.50 7.50 6.20 6.20 6.20
Small
Medium
Large
2.55 5.40 5.40 4.20 4.99 4.99 4.99
3.00 6.20 6.20 6.20 5.65 5.65 5.65
3.20 7.50 7.50 7.50 6.20 6.20 6.20
5.5 ft
FOOD Pastrys and Cookies Cakes (flavors vary) Crepes (flavors vary)
EXTRAS .89 1.50 1.30
Flavor per pump Espresso Shot Venti Iced
.50 .80 .30
Java Chips Whipped Cream
.50 .30
Substitutions (organic soymilk or almond milk)
.30
33
TOOLS & UTENSILS 6 ft SELECT YOUR WEAPON OF CHOICE
3.7 ft
Pencil
Pen
Marker
Brush
The pencil is the most diverse and basic tool in creating art. Different pencil grades will offer a wide range of values in your designs!
The pen is used for creating defined lines and adding weight in your drawings. Use crosshatching to create a sense of depth and value!
The marker is used to create strong and thick strokes. Use it to cover large portions of the page and to have thick outlines on your designs!
The brush can be used to soften pencil marks or to spread ink across the page. Use with caution! Brushing with ink can get messy!
SELECT YOUR WEAPON OF CHOICE
5.5 ft 3 ft
2.2 in
Pencil
Pen
Marker
Brush
The pencil is the most diverse and basic tool in creating art. Different pencil grades will offer a wide range of values in your designs!
The pen is used for creating defined lines and adding weight in your drawings. Use crosshatching to create a sense of depth and value!
The marker is used to create strong and thick strokes. Use it to cover large portions of the page and to have thick outlines on your designs!
The brush can be used to soften pencil marks or to spread ink across the page. Use with caution! Brushing with ink can get messy!
3.375 in
34
35
INDICATIONAL WORKSPACE & LOUNGE
RESTROOMS
ORDER HERE
PICKUP
4 ft
3.58 in
PICKUP
4.35 in
4.5 ft
36
2.33 ft
5.5 ft
37
INFORMATIONAL
Value Value deals with the lightness or darkness of a color. Since we see objects and understand objects because of how dark or light they are, value is incredible important to art. (I'll remind you that drawing and painting is about seeing.) Value deals directly to light.
Value Value deals with the lightness or darkness of a color. Since we see objects and understand objects because of how dark or light they are, value is incredible important to art. (I'll remind you that drawing and painting is about seeing.) Value deals directly to light.
Crosshatching
Crosshatching
5.9 ft
Crosshatching is an extension of hatching, which uses fine parallel lines drawn closely together to create the illusion of shade or texture in a drawing. Crosshatching is often used to create tonal effects, by varying the spacing of lines or by adding additional layers of lines. Crosshatching is used in pencil drawing, but is particularly useful with pen and ink drawing.
Crosshatching is an extension of hatching, which uses fine parallel lines drawn closely together to create the illusion of shade or texture in a drawing. Crosshatching is often used to create tonal effects, by varying the spacing of lines or by adding additional layers of lines. Crosshatching is used in pencil drawing, but is particularly useful with pen and ink drawing.
3 in
Pencil Grade - HB Scale The amount of graphite effects how light or dark the pencil can mark a surface. A commonly known way pencil grade is called out is “HB” scale. The higher the H number the lighter, and the higher the B number the darker.
4H
3H
2H
H
F
HB
B
2B
Pencil Grade - HB Scale The amount of graphite effects how light or dark the pencil can mark a surface. A commonly known way pencil grade is called out is “HB” scale. The higher the H number the lighter, and the higher the B number the darker.
4H
3H
2H
H
F
HB
B
2B
3B
4B
5B
6B
3 ft
2.9 ft 38
3B
4B
5B
6B
5.5 ft
39
40
UI DESIGN Flat Designs
Header and Slideshow Body Content Community Highlights Footer
Simulation Images
41
FLAT DESIGN
HEADER AND SLIDESHOW
The header consists of the main logo along with the navigation bar that leads to a page talking “about” the store, a “menu” showing what the store offers, “events” one can participate in and “tools” one could use.
42
FLAT DESIGN
BODY CONTENT
The body gives small previews to the pages that are available to click on. There are brief descriptions of what the pages include.
43
FLAT DESIGN
COMMUNITY HIGHLIGHTS
The community highlights section offers an area where patrons of the art cafe show their work and participate to build a stronger community. The section includes an the user/artist, a brief description about them and the highlighted art piece that they had created.
44
FLAT DESIGN
FOOTER
The footer includes the ArtCafe logo along with social media handles including facebook, instagram, and twitter. There are tabs of what the navigation bar would drop down into and there is a seperate “newsletter� section for users to find out more where the site would reach out to whoever signs up individually.
45
46
47
48
PACKAGING DESIGN Flat Design Dieline Simulation Images
49
FLAT DESIGN
50
DIELINE
8.1 in
8 in
6.85 in
6.75 in
51
52
53
54
55
Designed by Saul David Clavano @saul.art.design saul.clavano@gmail.com
56