Star visual standards guide san francisco bicycle safety pages

VISUAL STANDARDS GUIDE

CONTENTS 01 Brand Strategies A. Introduction

05 Photo 1

A. Photo Style

1

B. Original Photos

2

06 Graphic Elements

1

02 Identity A. Description

4

B. Logo Amatomy

6

C. Alternate Versions

7

D. Unacceptable Usages

10

03 Type A. Type Example

11

B. Type Introductions

13

C. Type Scales

14

D. Type In Use

15

04 Color A. Color Source

11

B. Color Palette

13

07 Application A. Grids

4

B. Stationery

6

C. Posters

7

D. App

10

INTRODUCTION

Many streets of San Francisco don’t have bicycle lanes. Safety is a big concern. Bicycle accidents often happen in San Francisco.

San Francisco Bicycle Safety Company will protect cyclists safety on the road. The brand will thought education to protect cyclists.

We aim to reduce the death rate and injuries amongst cyclists in San Francisco.

INTRODUCTION

AUDIENCE

My target Audience is 20 to 35-year-old urban young people in San Francisco. These people have a passion for cycling, and they like the feeling of freedom on the streets. But it’s also easy to break the bicycle rules.

IDENTITY

Our mission is to protect San Francisco urban cyclists safety. Raise awareness of the safety of cycling. The story behind the our logo is the idea come from street sign and yellow and black caution stripe. We separate logo as two parallelograms. First one on the top is yellow background, black color on type “San Francisco”, and the parallelogram has 30-degree shear X angle. The second one on the bottom is black background, yellow color on type “ Bicycle Safety”, parallelogram has 30-degree shear X angle too. An inclination of 30 degrees indicates a body movement when riding a bike.

02

LOGO AMATOMY

Our mission is to protect San Francisco urban cyclists safety. Raise awareness of the safety of cycling. The story behind the our logo is the idea come from street sign and yellow and black caution stripe. We separate logo as two parallelograms. First one on the top is yellow background, black color on type “San Francisco”, and the parallelogram has 30-degree shear X angle. The second one on the bottom is black background, yellow color on type “ Bicycle Safety”, parallelogram has 30-degree shear X angle too. An inclination of 30 degrees indicates a body movement when riding a bike.

53.5X 12.5X

11.5X

X 29X 10.5X

9X

SAN FRANCISCO 10.5X 10.5X

9X

BICYCLE SAFETY 10.5X 29X X

X

30ยบC

30-degree shear X angle

X

X is the empty square and space

Alternate Versions

Minimum Size

Signature

SAN FRANCISCO

SAN FRANCISCO BICYCLE SAFETY

SAN FRANCISCO BICYCLE SAFETY

SAN FRANCISCO BICYCLE SAFETY

Signature on the backgroud

SAN FRANCISCO BICYCLE SAFETY

BICYCLE SAFETY

0.6inch

Alternate Versions

Signature on the backgroud

SAN FRANCISCO

SAN FRANCISCO

BICYCLE SAFETY

BICYCLE SAFETY

SAN FRANCISCO

SAN FRANCISCO

BICYCLE SAFETY

BICYCLE SAFETY

SAN FRANCISCO

SAN FRANCISCO

BICYCLE SAFETY

BICYCLE SAFETY

SAN FRANCISCO

SAN FRANCISCO

BICYCLE SAFETY

BICYCLE SAFETY

Application

Bykzone App

Bykzone

Bykzone

Bicycle Safety Festival

BICYCLE SAFETY FESTIVAL

BICYCLE SAFETY FESTIVAL

BICYCLE SAFETY FESTIVAL

BICYCLE SAFETY FESTIVAL

Unacceptable Usages

SAN FRANCISCO BICYCLE SAFETY

TY

E SAFE

BICYCL

No stretching of the logo.

O

ANCISC

SAN FR

No tilting or re-orientation of the logo.

SAN FRANCISCO BICYCLE SAFETY

Don’t cast a shadow for the logo

SAN FRANCISCO BICYCLE SAFETY

Don’t placement for the logotype.

Don’t use 3D effects on the logo.

SAN FRANCISCO BICYCLE SAFETY

Don’t use random font for logotype.

SAN FRANCISCO

SAN FRANCISCO

BICYCLE SAFETY

BICYCLE SAFETY

Don’t use any other color on the logo.

Don’t put the logo on high contrast texture or imagery.

TYPE

Our mission is to protect San Francisco urban cyclists safety. Raise awareness of the safety of cycling. The story behind the our logo is the idea come from street sign and yellow and black caution stripe. We separate logo as two parallelograms. First one on the top is yellow background, black color on type “San Francisco”, and the parallelogram has 30-degree shear X angle. The second one on the bottom is black background, yellow color on type “ Bicycle Safety”, parallelogram has 30-degree shear X angle too. An inclination of 30 degrees indicates a body movement when riding a bike.

03

Type Example

BICYCLE RULES If you’re moving as fast as traffic, you can ride wherever you want.

DINCond-Bold

Mercury Display

Chaparral Pro

If you’re moving slower than traffic, you can still “take the lane.” The law says that people who ride bikes must ride as close to the right side of the road as practicable except under the following conditions: when passing, preparing for a left turn, avoiding hazards, if the lane is too narrow to share, or if approaching a place where a right turn is authorized. CVC 21202. Unfortunately, some motorists and even police don’t understand cyclists’ right to “take the lane.” If you have a legal problem based on this understanding, consider calling one of the bike-friendly lawyers we identify on our “Crash Help” page.

Use the bicycle lane. On a roadway with a bike lane, bicyclists traveling slower than traffic must use the bike lane except when making a left turn, passing, avoiding hazardous conditions, or approaching a place where a right turn is authorized. CVC 21208 R ide with traffic. Bicyclists must travel on the right side of the roadway in the direction of traffic, except when passing, making a legal left turn, riding on a one-way street, riding on a road that is too narrow, or when the right side of the road is closed due to road construction.

Mopeds and high-speed electric bikes are not like regular bikes.

Gas-powered bicycles and type 3 electric bicycles (with top assisted speeds of 28 mph) may not be used on trails or bike paths or lanes unless allowed by local authorities. They may be used in bike lanes or separated bikeways adjacent to the roadway. CVC 21207.5 They require helmets and may not be operated by people under age 16.

Type Introductions

DINCOND-BOLD DIN 1451 is a sans-serif typeface that is widely used for traffic, administrative and technical applications.

It was defined by the German standards body DIN - Deutsches Institut für Normung (German Institute for Standardization) in the standard sheet DIN 1451-Schriften (typefaces) in 1931.

Originally designed for industrial uses, the first DIN-type fonts were a simplified design that could be applied with limited technical difficulty. Due to the design’s legibility and uncomplicated, unadorned design, it has become popular for general purpose use in signage and display adaptations. Many adaptations and expansions of the original design have been released digitally.

The typeface was adopted by Germany in 1936 as a standard known as DIN 1451 (DIN is an acronym for Deutsches Institut für Normung—in English, the German Institute for Standardization).

The typeface became a standard for traffic signs, street signs, house numbers and license plates. Over the next decades the typeface also found use on various household goods and products, making it synonymous with German design.

DIN Condensed Bold

​‌A​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌) #​‌ DIN Pro

​‌A​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌T​‌U​‌V ​‌W ​‌X ​‌Y ​‌Z​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)#​‌ DIN-BlackItalic

​‌A​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​​‌1​‌2​ ‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz ‘​‌? ​‌’​‌“​‌!​‌”(​‌ ​‌%​‌)#​‌ DIN-MediumItalic

​‌A​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌T​‌U​‌V ​‌W​‌X​‌Y​‌Z​​‌1​‌2​‌3​ ‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz ‘​‌? ​‌’​‌“​‌!​‌”​‌(​‌%)​‌ #​‌ DIN (OTF)

​‌A​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌QRS​‌T​‌U​‌V ​‌W ​‌X ​‌Y ​‌Z ​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvw xyz‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)#​‌

Type Introductions

Mercury Display The signature typeface we designed for Esquire magazine began its life as a would-be historical revival, but developed into one of our most avowedly modern type families. During its initial design exploration, Mercury was envisioned as a revival of the work of Johann Michael Fleischman (1701-1768), a German punchcutter denizened in Amsterdam, whose unrevived typefaces had so expressively captured the drama and tension of the Dutch baroque. As Mercury’s design developed, it began to draw upon the work of other contemporary punchcutters: both the sparkling display faces of Jacques-François Rosart (1714-1774), and the progressive italics of Pierre Simon Fournier (1712-1768), were inspirations in Mercury’s evolving design.

The more time we spent with these historical models, the more it became clear that none of them truly possessed the qualities that were so exciting about the genre as a whole. As a collection, these faces were vibrant: tightly wound, yet quiet, using the tension between introverted and extroverted gestures — and between black letterforms and their white counters — to create a sort of “excited calm” on the page. It was these qualities that we hoped to capture in Mercury, so ultimately we chose to ignore the dictates of historical form and follow a more personal and expressive path instead.

Mercury Display SemiBold

​‌A ​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K ​‌L​‌M​‌N​‌O​‌P​‌Q​ ‌R​‌S​‌T​‌U​‌V ​‌W​‌X​‌Y​‌Z​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz‘​‌? ​‌’​‌“​‌!​‌”​‌(​‌%​‌)#​‌

Mercury Display Italic

​‌ ​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌T​‌U ​‌V ​‌W ​‌X​‌Y​ A ‌Z​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz‘​‌? ​‌’​ ‌“​‌! ​‌”​‌(​‌%​‌)#​‌

Type Introductions

Chaparral Pro Chaparral Pro is a slab-serif typeface designed by Carol Twombly of Adobe Systems and released in 2000. Chaparral Pro is available in 32 fonts, including a huge range of weights and styles such old-style and lining figures.

Chaparral Pro takes us back to the 16th century to the book lettering fonts that were popular in the days when mass printing was in its relative infancy. The slab serif was no accidental design addition of the day; it was a functional feature of the glyphs in a character set that leads the eye along the invisible baseline for the lower serifs.

This functionality applies to any serif font, but even more so to slab serifs. In more recent times, the invention of the typewriter heralded the ability for anyone who could afford one of these cheap machines to print rather than handwrite everything; the typefaces on these machines were invariably serifs and typically used the roman style.

Claude Garamond was among the first to popularize use this typeface design in the 16th century. Printers of the day were moving away from the narrower Jensen-style roman typefaces and exploring wider character glyphs while still retaining the characteristic serifs and ligatures in common use at the time. Twombly captured the essence of this style and design to provide a more contemporary version that has a warmer and more articulate feel to it. This is hardly surprising considering that Twombly has her roots in art and design and regularly enjoys these pursuits such as painting with a passion outside of her award-winning contributions to typography.

Chaparral Pro is true to its origins and still conveys a times sense of class and has now become a popular standard for many print applications. Due to the broad range of available styles, Chaparral Pro performs as a workhorse, succeeding in the smallest optical sizes, up to large heavy headlines that boldly convey their message.

Chaparral Pro Regular

​‌ B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​ A​‌ ‌R​‌S​‌T​‌U​‌V ​‌W ​‌X ​‌Y​‌Z​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz ‘​‌? ​‌’ ​‌“ ​‌! ​‌”​‌(% ​‌ ​‌)#​‌ Chaparral Pro Light Italic

​‌A ​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K ​‌L​‌M​‌N​‌O​‌P​‌Q​‌R ​‌S​‌T ​‌U ​‌V ​‌W ​‌X ​‌Y​‌Z​​ ‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz ‘​‌? ​‌’ ​‌“ ​‌! ​‌”(​‌ ​‌%​‌)#​‌ Chaparral Pro Italic

​‌A ​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌T​‌U ​‌V ​‌W ​‌X ​‌Y​‌Z​​ ‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz ‘​‌? ​‌’ ​‌“ ​‌! ​‌”(​‌ ​‌%​‌)#​‌ Chaparral Pro Bold Italic

​‌A​‌B​‌C​‌D​‌​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​ ‌R​‌S​‌T​‌U​‌V ​‌W ​‌X ​‌Y​‌Z​​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌ abcdefghijknopqrstuvwxyz ‘​‌? ​‌’ ​‌“ ​‌! ​‌”(​‌ ​‌%​‌)#​‌

COLOR

The color palette is extraxted from the street warning sign. Yellow and black stripe from the street sign too. Use the color from the street is make sense for the project. It will attract people pay attention on this project.

04

Color Palette

Safety Yellow

Safety Pink

C= 0 M=10 Y=100 K=0 R= 260 G= 200 B=0

C= 0 M=100 Y=20 K=0 R= 250 G= 30 B=120

Safety Black

Safety Grey

C= 70 M=60 Y=70 K=70 R= 50 G= 40 B=40

C= 50 M=40 Y=40 K=0 R= 140 G= 140 B=140

PHOTO

San Francisco Bicycle Safety is using photo of San Francisco urbran city street and urbran cyclists. All the photos we using are original photography work. Our photo style is blackand-white format combine with yellow color layer with multiply effect on the photo.

05

ORIGINAL PHOTO San Francisco Bicycle Safety is using photo of San Francisco urbran city street and urbran cyclists. All the photos we using are original photography work. Our photo style is blackand-white format combine with yellow color layer with multiply effect on the photo.

SEE AND BE SEEN

PHOTO WITH STYLE San Francisco Bicycle Safety is using photo of San Francisco urbran city street and urbran cyclists. All the photos we using are original photography work. Our photo style is blackand-white format combine with yellow color layer with multiply effect on the photo.

10

GRAPHIC ELEMENTS

06

GRAPHIC ELEMENTS

The pink circle is the pop out color in the bicycle safety visual system. This pink circle represent cyclist’s love and passion of cycling. And also using on the top 10 bicycle laws.

The main graphic elements using in this project is parallelogram. In these two parallelograms all has 30 degree shear X angle. This 30 degree tilt represent the act of leaning forward when people riding a bicycle. Black and yellow color is come from the street sign. Improve people’s awareness of bicycle safety.

Black and yellow color is come from the street sign.

Improve people’s awareness of bicycle safety.

APPLICATION

07

POSTERS

POSTERS

CAMPAIGN Cyclists get together at an outside location. They can talk face to face, get service there and make new friends.

This attracts attention to the need to ensure bicycle safety.

KNOW MORE INFO

KNOW MORE INFO

www.sanfranciscobicyclesafety.com

www.sanfranciscobicyclesafety.com

SF_Bicycle_Safety

SF_Bicycle_Safety

SanFranciscobicycle Safety Project

SanFranciscobicycle Safety Project

BICYCLE SAFETY

BICYCLE SAFETY

SAN FRANCISCO

SAN FRANCISCO

KNOW MORE INFO SanFranciscobicycle Safety Project SF_Bicycle_Safety www.sanfranciscobicyclesafety.com

SAN FRANCISCO BICYCLE SAFETY

Bicycle Safety Pin

PINS

RIDE ON THE RIGHT SIDE OF THE ROAD

RIDE ON THE RIGHT SIDE OF THE ROAD

RIDE ON THE RIGHT SIDE OF THE ROAD

SAN FRANCISCO

SAN FRANCISCO

SAN FRANCISCO

BICYCLE SAFETY

BICYCLE SAFETY

BICYCLE SAFETY

PROUDCTS Bicycle Safety Pin

BICYCLE SAFETY HELMET Flat Paper bicycle helmet

CAMPAIGN ID

GUEST

ALMA Graphic Designer

GUEST

HAMDA Graphic Designer

BROCHURE

TOP 10 BIKE LAWS

SAN FRANCISCO BICYCLE SAFETY

RIDE 2 WITH TRAFFIC

RIDE ON THE RIGHT SIDE OF THE ROAD

CVC is the California Vehicle

Ride in the same direction as traffic. If

Code. The California Vehicle Code contains almost all statutes relating to the operation, ownership and registration of vehicles (including bicycles) in the state of California in

traveling in the opposite direction of a one way street, walk your bicycle on the sidewalk (CVC 21650).

If you are riding as fast as traffic, you can ride in the traffic lane. In most cases, you will be moving slower than traffic. Then you must ride as close as practicable to the right side curb or the edge of the roadway.

CYCLISTS MUST FOLLOW THE CVC 1

the United States. It also contains statutes concerning the California Department of Motor Vehicles and

Several important exceptions in the Vehicle Code allow you to “take the lane.”

These exceptions are : (1) overtaking and

the California Highway Patrol.

passing another bicyclist, (2) preparing to take a left turn, and (3) when “reasonably

As a general rule, bicyclists have the same duties and reponsibilities as

necessary to avoid conditions... that make it unsafe to continue to ride along the righthand curb or edge,” such as pedestrians

vehicle drivers. Thus, stop at stop signs and red lights just like all other vehicles (CVC 21200).

walking in the roadway (CVC 21202).

TOP CALIFORNIA BIKE LAWS

CONTENTS

INTRODUCTION

INTRODUCTION

03

TOP 10 CALIFORNIA BIKE LAWS

06

1. Cyclists must follow the cvc

07

2. Ride with traffic

10

3. Ride on the right side of the road

11

4. Use bike lanes

12

5. Stop at, Not in, the crosswalk

13

6. Yield to pedestrians

14

7. Ride with lights and reflectors at night

15

8. Under 18, Wear a Helmet

16

9. One Ear Not Covered

17

10. No Tall Bikes on Roadways

18

Though this booklet, we hope to raise awareness of the urgent need for motorists to be mindful of bicyclists and pedestrians. We also want to provide information for bicyclists and pedestrians on their legal rights and responsibilities. We all benefit by looking out for each other and sharing the road.

San Francisco Ranks as one of the most walkable cities in the U.S. It’s also a very bicycle friendly city. Tens of thousands of bicyclists take an estimated 82,000 daily bicycle trips. Unfortunately, The city is also home to some of the most dangerous intersections for pedestrians and cyclists in California.

The California Vehicle Code contains almost all statutes relating to the operation, ownership and registration of vehicles (including bicycles) in the state of California in the United States. It also contains statutes concerning the California Department of Motor Vehicles and the California Highway Patrol.

USE BIKE LANES 4

3

10

Each year more than 800 people are hit by cars in The City. In 2015, 31 people were killed in traffic collisions in San Francisco, including 21 pedestrians and 4 cyclists. The top three causes of fatal collisions were drivers failing to yield to pedestrians (29%), drivers speeding (26%), and drivers running red lights (13%).

If you are riding as fast as traffic, you can ride in the traffic lane. In most cases, you will be moving slower than traffic. Then you must ride as close as practicable to the right side curb or the edge of the roadway.

Several important exceptions in the Vehicle Code allow you to “take the lane.”

These exceptions are : (1) overtaking and passing another bicyclist, (2) preparing to take a left turn, and (3) when “reasonably necessary to avoid conditions... that make it unsafe to continue to ride along the righthand curb or edge,” such as pedestrians walking in the roadway (CVC 21202).

5

YIELD TO PEDESTRIANS Pedestrians should always use marked crosswalks when crossing a roadway. But even if they do not, bicyclists must exercise due for the safety of any pedestrian on a roadway (CVC 21954).

BROCHURE

UNDER 18, WEAR A HELMET

7

8

STO NOT CRO

6

RIDE WITH LIGHTS AND REFLECTORS AT NIGHT

When riding at night, you or your bike must be equipped with a white light that is visible from a distance of 300 feet in front of the bike. The bike must also have: A red reflector or a solid or flashing red light with a built-in reflector on the rear that is visible from a distance of 500 feet,

Crosswalks bicycles (CV

If you are under age 18, you must wear an approved helmet when riding. If you are 18 and older, a helmet is not required. Do not risk a life-threatening head injury in a bike crash: always wear a helmet (CVC 21212).

A white or yellow reflector on each pedal, shoe, or ankle visible from the front and rear of the bicycle from a distance of 200 feet, and A white or yellow reflector on each side forward of the center of the bicycle, and a white or red reflector on each side to the rear of the center of the bicycle, unless your bike has front and rear reflectorized tires (CVC 21201(d)).

ONE EAR NOT COVERED

10 The bike must be of a size that the bicyclist can stop, support it in an upright position with at least one foot on the ground, and start in a safe manner (CVC 21201(c)).

9

NO TALL BIKES ON ROADWAYS

PLEA

ht

S

w

Bicyclists are not allowed to wear earplugs in both ears or a headset covering both ears. (CVC 27400).

5

OP AT, T IN THE OSSWALK

are for pedestrians, not cars or VC 21455).

ASE FOLLOW US

ttps://www.facebook.com/sanfranciscobicyclesafe-

f_bicycle_Safety

www.sanfranciscobicyclesafety.com

BYKZONE APP

BYKZONE APP

BYKZONE APP

User Testing

08

User Testing

User Testing

User Testing

Design

Xingchen (Star) Chen 04042031

Course

School of Graphic Design Thesis 2-Exploration- Spring 2017 Academy of Art University

Instructor

Phillip Hamlett

SAN FRANCISCO BICYCLE SAFETY