DES 710A KOFE COFFEE

Design Brief

Philosophy and Vision

KOFE COFFEE is a coffee-based roaster and retailer located in New York. The philosophy of KOFE COFFEE is to work to solve the problem of coffee waste and call on their customers to join them in making efforts for the coffee cycle.

Background

Coffee is one of the most popular drink in people’s daily life. And it plays essential role in people’s daily lives. According to the national coffee association, coffee consumption has reached two-decade high.

With the high coffee consumption, the amount of used coffee grounds are increasing. Typically, coffee grounds are dumped directly into the trash and landfilled in the soil. It causes coffee grounds to release methane, a greenhouse gas that contributes to global warming. So used coffee grounds become a waste problem and environmental problem right now.

In this project, I want to appeal people to do something for the current environment problems in their daily lives. KOFE COFFEE is a coffee roaster and retailer that aims to alleviate this problem of coffee grounds waste and pollution. It sells not only fresh coffee beans, but products made from coffee renewable materials. So the deliverables of this brand includes branding identity, packages, motion graphics, app and so on. I hope the visual system of this brand is minimalist, functional, modern and sustainable. Since Used coffee grounds can be used to replace many materials, I want to use these sustainable materials in my products and packages. So in this brand, all packages and products are related to coffee beans. In addition, I also make an app for this brand. The aim of this app is to let more costumers join in coffee recycling project and do something for the current problems.

Collections and Moodboards

1.1 Moodboard - Visual System

Visual System Moodboard

This is the moodboard for the main branding system. It is modern, minimalist, and functional. The visual system is mainly use typography, geometric shapes and patterns.

1.2 Moodboard - Packaging

Packaging Design Moodboard

This is a moodboard for packaging design of KOFE COFFEE. The packages are used graphic patterns on conveying messages. These patterns are designed to have a consistent visual style.

1.3 Moodboard - App

App Design Moodboard

This is a moodboard for KOFE app. The app has a consistent visual system with illustrations and graphics. The layout is clean and orderly, with modern colors.

Branding System

2.1 Brand Logomark Variation

A B

Logomark and Logotype Variation

A. Logomark black version on white background

B. Logomark white version on black background

C. Logotype black version on white background

D. Logotype white version on black background

2.1 Brand Logotype Variation

C D

Brand Variation

Our brand identity system includes logomark and logotype. These are our brand identity in black and white versions. They represent the visual embodiment of KOFE coffee roaster and retailers. They are applied in all of brand visuals and applications.

2.2 Brand Logomark Clear Space

0.5 height of logomark

Clear Space

To the most effective, the visual identity of KOFE COFFEE should always be surrounded by the precisely minimum amount of clear space. Importantly, there are no other visual elements interfere with the logo clear space. Graphics, layouts, photos, and illustrations should avoid

the space areas shown so that the brand identity can be seen clearly on all collateral. The recommended minimum distances of space defined here are 0.5 height of logomark and logotype.

2.2 Brand Logotype Clear Space

0.5 height of logotype

Typography and Graphic Patterns

3.1 Typeface

Aa

Soleil - Light

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890

Soleil - Book

Aa

Typeface - Soleil

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890

Soleil - Semibold

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890

KOFE COFFEE features a geometric sans-serif typeface, Soleil. It was designed by Wolfgang Homola and published through TypeTogether in 2011. Its design is based on the modernist philosophy of simplicity, clarity and reduction to essential forms. Soleil has asymmetrical counters that sets

it apart from some existing geometric sans serif typefaces like Futura. The asymmetrical counters give Soleil a more fluid, dynamic and contemporary feel.

3.2 Typography Hierarchy

Large Point Size - 24pt | Leading 30pt | Tracking 10pt

KOFECOFFEE

Subtitle - 14pt | Leading 15pt | Tracking 0pt

COFFEERECYCLING

Body Paragraphy - 9pt | Leading 10.8pt | Tracking 0pt

Luptam volendem fugiae labo. Sequi conse rae vitibus andita nulpa num quas et quis nis estis alibus estiam, acerum laboreribus. Genis rae volore volest essi berrume turitib usamenis rerepe lam, volum hiciamus aspernat. Luptatem acesequassit quam, quo bla plitibus nemporepe eum volupta musciende esequati dolorem doluptae.

Vella qui digent aut ma sinihit aut eiciiss impori rem vellore ptassit quam, si incimust estiam qui dolor arum facimaion rent expe non conecerae nus as escipit lacerovidis doluptatia non eum a vel est as vellaut fugitas sandict esequia que pliquo tem rat. Optate maxim comnis quam ut vollesto con none sinust etus. Net faccusa ntibusam ut magnihillaut lautem. Boreritibus sa sum event aspit, coribus aut odipsam dusandu cientec tiberectet lit accus sandamus, ilit lanistibus.Nam etur? Unt vel eles de ersperferit voluptas asimenducid qui voloruptates simaioreiur, ererspera quas magnati.

Typography Hierarchy

The consistent use of fonts and styles make our audiences to easily identify our brand and materials. The typography hierarchy make layout organized and the communication in our material readable.

In typography, leading is the space between adjacent lines of type. Tracking adjusts the spacing between letters evenly across the whole word. Suitable space of leading and tracking can make the information readable and legible. The space of leading and tracking is different when words are applied in different font size.

3.3 Color Palette

Primary Color

Secondary Color

HEX: #F8F7F6

CMYK: 2, 2, 2, 0

RGB: 247, 245, 244

HEX: #D3CEC9

CMYK: 17, 15, 18, 0 RGB: 210, 206, 200

Color Palette

There are colors used in KOFE COFFEE visual system and its various applications. The color palette displays the specific color code of each color, including HEX, RGB, and CMYK. The use of color palette will make the branding consistent and organized. These colors can be applied in all of visuals and applications.

HEX: #1F1D1F

CMYK: 72, 68, 63, 75 RGB: 29, 27, 29

HEX: #B29E8D

CMYK: 32, 36, 44, 1

RGB: 177, 156, 139

3.4 Graphics and Patterns

Graphic Pattern

Graphics and Patterns

The graphics and patterns can make the visual system more consistent and show the personalities and characteristics of the visual identity. These patterns are flexible to apply in various applications.

Applications and Deliverables

4.1 Ground Coffee Packages

Ground Coffee

There are ground coffee packages for KOFE COFFEE. Packaging visual system is consist of visual identity and graphic patterns. These graphic patterns are intended to convey the taste of coffee. The packaging is made from renewable materials, including recycled coffee grounds.

4.1 Ground Coffee Packages

Ground Coffee

Here are the details of ground coffee packages.

4.2 Cold Brew Coffee Packages

Cold Brew Coffee

There are cold brew coffee packages for KOFE COFFEE. Packaging visual system is consist of visual identity and graphic patterns. They have similiar visual system to ground coffee packages. These graphic patterns are intended to convey the taste of coffee. The packaging is made from renewable materials, including recycled coffee grounds.

4.2 Cold Brew Coffee Packages

Cold Brew Coffee

Here are the details of cold brew coffee packages.

4.3 Ground Coffee Deodorant

Ground Coffee Deodorant

There is a model of ground coffee deodorant. Coffee deodorant can be used for removing unpleasant smells. It can be used both home and office. The deodorant is made by coffee grounds and natural source of aroma.

4.4 Ground Coffee Deodorant Packaging

Ground Coffee Deodorant Packaging

There are ground coffee deodorant packages for KOFE COFFEE. Packaging visual system is consist of visual identity and graphic patterns. These graphic patterns are intended to convey the taste of coffee deodorant. The packaging is made from renewable materials.

4.5 Brand Deliverables

Coffee Cups

Coffee cups are significant deliverables in the coffee shop. KOFE COFFEE designs its coffee cups with its visual identities. KOFE coffee cups are made from renewable materials, especially recycled coffee grounds.

4.5 Brand Deliverables

Canvas Bags and Shipping Box

KOFE COFFEE designs its canvas bags and shipping box with its visual identities. These canvas bags and shipping box are made from renewable materials including recycled coffee grounds.

4.6 App Design

User Flow

User flow shows the path a user takes from the beginning of using the product to the final interaction. This is the user flow of the KOFE COFFEE app. It shows the four main functions of the app and the user’s usage path.

4.6 App Design

User Journal

This is three user journals for KOFE app. The user journals provide three different user’s usage path.

4.6 App Design

Wireframes

Wireframes are diagrams representing the skeleton of the app’s user interface and core functionality. Here are wireframes of KOFE COFFEE app. It shows main functions and layouts of the app.

4.6 App Design

App Prototype

Prototype is a simulation or sample version of a final product. Here are prototype of KOFE app. The app screens are used the same visual elements and color palette as the main visual system.

Brand Promotion

5.1 Instagram Posts

Instagram posts

They are two instagram posts for KOFE COFFEE. Owners can post their latest information and products here. It is effective to promote the coffee shop and build connections between costumers and owners.

5.1 Posters

Posters

They are KOFE COFFEE posters. The posters are used to promoted the coffee shop and KOFE’s coffee recycling project. The design of these posters consist of the visual elements and typography.

About

This is a student project for 2022 Fall DES 710A Graduate Studio Visual Language A taught by Pedro Andrade at Pratt Institute. No part of this book or other part of the project was produced for commercial use.

Typeface

Akzidenz-Grotesk Next Soleil

Tools and Software

Adobe Creative Cloud InDesign, Illustrator, Photoshop

Photography

Sourced from Pinterest, Behance and Dribbble