:: Branding Design Process

March 31st, 2008

This project is an example of a brand system: © Copyright 2006, The City of Saint Petersburg, all rights reserved. For internal city design use only. Graphic Identity Manual created by Okay Samurai Multimedia.
http://okaydave.com/projects/saintpetersburg/stpetersburg.html

——————————————————————————————-

I. Brand Platform

A. Brand Vision

A single city defines Russia. The city of Dostoevsky and Tchaikovsky. The city of unrivaled architecture and the magnificent white nights. The city of inspirational endurance. Saint Petersburg will build upon Peter the Great’s vision as “Russia’s Gateway to Europe” and become “Russia’s Gateway to the world.”

B. Brand Mission

By modernizing Saint Petersburg through technological advances while continuing to promote the city’s rich history and art, it will rival the global stature and significance of major European cities while remaining distinctly Russian. Saint Petersburg is the past and present voice of Russia, and will continue to be Russia’s financial and cultural leader for the future.

C. Brand Values

Saint Petersburg is Progressive.
Saint Petersburg must always act in the best interest of advancing Russian culture worldwide. It must not fear innovation in technology or the arts. Decisions are always made with the future in mind.

Saint Petersburg is Historic.
Saint Petersburg must remember the history that made it so culturally powerful. It is a city defined by its challenges; battles and hardships have helped it rebuild and grow. Three hundred years of art and architecture located in Saint Petersburg enrich the city environment.

Saint Petersburg is Unified.
Saint Petersburg must be the voice of Russia, serving both the government and the people. At its most difficult moments in history, citizens of Saint Petersburg have always stood together to overcome their problems. Decisions are never made with just one class or neighborhood in mind.

D. Brand Personality

Strong and innovative, artistic and welcoming.

E. Brand Tone of Voice

Firm, distinguished, powerful, expressive.

——————————————————————————————-

II. Aesthetics

A. Challenges

Saint Petersburg’s biggest challenge lies in finding a single, bold identity. In over three hundred years of existence, the city has faced numerous renamings, revolutions, governments and leaders. With so many changes, Saint Petersburg has struggled to present itself coherently to the world.

Poverty and unemployment have hurt the morale of Saint Petersburg’s citizens. A distinct middle class is emerging, but the transition from communism to capitalism has not been an easy one. Often times several families will share common areas in a building, like kitchens or bathrooms. The city is home to roughly five million people, a number that has stayed relatively static in the past few decades. This is due to a declining birth rate in Russia’s urban areas and a lower mortality rate due to poor health standards.

Fortunately, the resources are already in place for a new identity. There are great architectural triumphs such as the Winter Palace, unparalleled art such as Dostoevsky’s writings and Tchaikovsky’s music, and natural beauty inherent in the Neva River and the white nights. As the northernmost major city on earth, Saint Petersburg is placed in a unique location; it remains close to the major cities of both Russia and Europe.

B. History

When addressed with the complex problem of creating a new visual identity system for Saint Petersburg, the history was not ignored. Part of what makes the city special is its time-tested ability to survive and adapt no matter what the circumstances. Strength, therefore, was championed as one of the major aesthetic values. Strength has always been a word associated with Russia as a whole, but it seems to fit Saint Petersburg in a distinct way.

Strength is shown in several ways throughout the city branding, including bold colors and vertical designs that emulate a column. This idea carries across in banners, the trademark, layouts and more. The city is relatively flat, lacking the towering skyscrapers found in many modern cities. Yet since Saint Petersburg is Russia’s window to the world, the vertical designs can also symbolize a lighthouse or beacon. At a tertiary level, the vertical arrangements represent a rising cultural advancement rooted in the city’s history.

The color palette was selected after looking at hundreds of photographs of Saint Petersburg and selecting several recurring colors. The most prominent of these was a dark gold color, usually seen mixed with a stone texture, reminiscent of the hundreds of city buildings and statues that continue to stand the test of time. The actual gold color is based off a statue known as “The Angel” that sits atop a spire in the Peter and Paul Cathedral. Because it sits at the highest point in downtown Saint Petersburg, the symbolic angel is seen as a guardian overseeing and protecting the city. This yellow/brown color, combined with stone textures and column-based designs, was selected to symbolize the attributes of strength and history.

C. Culture

Another key attribute lies in the Neva River, which splits Saint Petersburg into four regions. It is one of the city’s most beloved icons, appearing in countless pieces of Russian literature and art. Saint Petersburg is sometimes called the “Venice of the north” because of the way the Neva slices through the city. It is another important element that unifies the city, which fits into the search for a singular identity rather nicely. The river is represented by a series of curves. This contrasts the rigidity of the elements used to represent the city’s strength and gives designers several visual elements to work with. These curves were also chosen to serve as an identity for the city’s artistic culture. Brushstrokes, plucked cello strings, ballet steps: the curve embodies this graceful, free-flowing motion found in Saint Petersburg’s diverse art forms. It establishes a welcoming, friendly tone and implies kinetic movement.

The harmony established between the unflinching, dedicated strength and fluid, progressive culture creates a well-rounded identity for Saint Petersburg. This helps distinguish it from other Russian cities like Moscow, which is seen today more as a political center.

D. External Links

Saint Petersburg Guide: This travel guide is the single best Saint Petersburg online resource.
Saint Petersburg Times: Updated daily; helpful for current news events.
State Hermitage Museum: Official museum site.

——————————————————————————————-

III. Trademark

A. Signature

The official trademark of Saint Petersburg depicts a flame silhouetting one of the famous Rostral Columns. These crimson towers with ever-burning signal flames have served as city landmarks for hundreds of years to sailors and travellers alike. The vertical column symbolizes strength with its sturdy, upright form. The flame it sits inside, as well as the implied smaller flame created by the negative space above the column, represents the perseverance and hope of the city.

The symbol of the rostral column was chosen due to its welcoming nature, while remaining unique to Saint Petersburg. The columns have often been the first and last thing a sailor would see during a visit to the city. This fits in well with Peter the Great’s vision; the column is Saint Petersburg’s beacon to the world, a permanent signal of Russian culture and beauty.

Download Vector Logo (.ai, 256 KB)

B. Logo

The logo and type always need a minimum amount of surrounding blank space to keep their integrity. Use the above guide to note the correct proportions and spacing of the logo. When sizing the logo, note that smaller sizes tend to lose some of the features of the column. A good judge for correct sizing is if there is a visible separation between the smaller internal flame and the silhouetted column. If the two elements seem to merge together, the logo is too small.

C. Color Treatments

When placing the signature on a colored background, the logo and accompanying type should all be one color; this is typically white. On a white background, the mark and type should be the same color value, but the type should be 50% darker than the mark. Do not break the symbol into separate colors, such as giving the flame a different color than the type. This breaks the concept of unity. Be wary of using lighter colors, as the lack of contrast will not carry the impact necessary in the logo. Never fill in the column or implied white space flame at the top of the mark.

D. Improper Uses of Logo

DO NOT split the city names into two separate lines.
DO NOT color in the negative space of the mark.
DO NOT adjust the spacing between the mark and city name.
DO NOT abbreviate Saint.
DO NOT use two entirely different colors for the mark and type.
DO NOT split the city name with the mark.

——————————————————————————————-

IV. Color

Primary Palette

Three colors describe the city of Saint Petersburg. Artist Crimson was selected since red has long been associated with Russian history and culture. Similar shades of red appear in art and architecture scattered around the city. This is a brighter version of the red used for the former Soviet Union flag. The Angel Gold color is taken from the famous angel sculpture located on top of the central spire in the Peter and Paul Fortress. The deep blue/violet of the Neva River rounds out the group as a darker tone, based on the waters and reflections of the city’s main waterway. By using various shades and values of each color, there are several possible palettes to choose from. Note that the values on your screen may appear different from the actual Pantone colors.

When combining colors, you may use these palettes as suggestions. Any of these combinations works well with white or black as a neutral accent. Note that the current colors of the Russian flag are white, red and blue, which can be recreated with several types of combinations. Also note that certain applications will have color preferences; for example, the metro system is almost exclusively red, while the city letterhead suite is primarily brown and gold.

——————————————————————————————-

V. Typography

A. Sabon

Sabon is a strong, dignified font that captures Saint Petersburg’s powerful history. This is the default typeface for headlines and should usually be applied with all capital letters. Sabon is used for the logotype as well. The strict serifs and bold strokes give it a distinguished feel that works well with the Saint Petersburg’s elements of strength. The vertical strokes are thick, emulating the column found in the city trademark. In the majority of applications, the normal weight of the font will be sufficient. In instances of questionable hierarchy with multiple lines in a document, bolds and italics may be used to differentiate between lines. Emphasis: history and strength.

B. Gill Sans

Gill Sans is a rich sans-serif that reflects the city as the cultural center of Russia. The lighter, wider letters compliment the bolder letters in Sabon. Smooth curves and no contrast in stroke weight make Gill Sans an excellent choice for presenting a sense of unified art. Gill Sans is used primarily for body copy. The light and bold typefaces in particular add variety to this typeface’s uses. The light can be used for page headers, numbers, and stylized headlines. The bold can be used for subheads and emphasis within body copy such as special announcements. Emphasis: culture and art.

C. Default Screen Font

Georgia should be used as a default font when Sabon and Gill Sans are not available (for example, office computers without the correct display fonts, web use and simple word processing programs). It still carries a distinguished feel, but should only be used if no other options are open.

——————————————————————————————-

VI. Imagery

A. Patterns

Download Pattern Packet (.zip, 884 KB)

B. Photography

PHOTOGRAPHY: ENVIRONMENT
Environmental photographs should not look cold and stagnant, but not overly bright either. The cityÌs natural features, like the Neva River and clusters of trees, can add a light, warm feel to many pictures. Showing falling snow or ice on the ground is fine as long as they give off an effect of beauty instead of cold.

City photography should never show any trash, run-down buildings or areas under construction. Saint Petersburg is currently going through its biggest renovations in over three hundred years, but the photography should not suggest the city is in need of repair or is falling apart. There are enough other engaging man-made and natural features to highlight instead.

PHOTOGRAPHY: PEOPLE
The worldÌs stereotypical Russian is an elderly bearded man wearing a thick winter hat and coat, dancing while guzzling down pint after pint of vodka. To break this stereotype, photos should seek to show a diversity of genders and ages, since Saint Petersburg is one of RussiaÌs most culturally diverse cities. When showing Russian people to help promote the city, they should be smiling or have a sense of national beauty about them (especially in photos of children).

Pictures of Saint Petersburg citizens should not show them bundled up or giving off an expression of feeling cold. They may be wearing some heavy clothing, but the cold must not be the central focus of the picture or detract from the face of the person.

——————————————————————————————-

VII. Print

A. Print Advertisements

Grayscale and full color print advertisements for the city appear in magazines, newspapers and other publications across the world. These examples show several possible interpretations of the brand ideals by using the correct elements as specified in this guide. In this case, the Neva curves and Angel Gold mix with a large Sabon headline, but even these limited selections can lead to thousands of creative layout ideas.

Typically, the 2006 promotional materials use Angel Gold as the primary color, including a sepia tone for the photography. Although designers may use other dominant colors or photography tones, there must be a special reason for doing so. For example, if a tourist ad is focusing on boats on the Neva River, the use of Neva River Blue makes sense. When designing multiple pieces for the same campaign, make sure than several elements remain consistent to help connect the messages, such as using the same fonts, colors, curves, photos or textures.

B. Promotional Brochures

Full-color brochures may be used for tourism promotions worldwide, metro information, exhibition schedules and more. These are some examples of using the correct elements, as outlined in this guide, to create an effective piece. The same basic thinking behind the above ads are apparent here. The inside spreads make use of Gill Sans for the body copy, as well as keeping the flowing Neva River curves running across many of the pages to create a smooth, continuous feel.

In any brochure, a diversity of subjects in the photographs should be readily apparent. A mix of monuments and nature, people and vehicles, night and day, and depth of field should be implemented. This gives the brochure and the city a well-rounded look. Again, the designs below are just examples and should not be literally copied.


C. Letterhead

The city letterhead is clean, simple, and flexible. Different colors may be substituted for the gold bar at the top to help distinguish between departments or branches; this may be decided on a case-by-case basis. The general layout, however, will always remain consistent. Keeping the colors and department name at the top of the letterhead allows for quick identification when sorting through a stack of papers. Business cards may have the flame embossed or add a gloss for more impact.

D. Environmental

Environmental graphics such as wayfinding signs, kiosks and banners should incorporate a signifying graphical mark (with the city logo as a default) and the main information set in Sabon. Permanent signs will be cast in bronze, while temporary signs will use a faux finish that serves as a close match. By keeping these colors consistent, visitors will immediately identify signage throughout the city. In case of multiple languages, stack the titles vertically, not horizontally, unless constrained by the physical space.


A.Sabon

Sabon is a strong, dignified font that captures Saint Petersburg’s powerful history. This is the default typeface for headlines and should usually be applied with all capital letters. Sabon is used for the logotype as well. The strict serifs and bold strokes give it a distinguished feel that works well with the Saint Petersburg’s elements of strength. The vertical strokes are thick, emulating the column found in the city trademark. In the majority of applications, the normal weight of the font will be sufficient. In instances of questionable hierarchy with multiple lines in a document, bolds and italics may be used to differentiate between lines. Emphasis: history and strength.

B. Gill Sans

Gill Sans is a rich sans-serif that reflects the city as the cultural center of Russia. The lighter, wider letters compliment the bolder letters in Sabon. Smooth curves and no contrast in stroke weight make Gill Sans an excellent choice for presenting a sense of unified art. Gill Sans is used primarily for body copy. The light and bold typefaces in particular add variety to this typeface’s uses. The light can be used for page headers, numbers, and stylized headlines. The bold can be used for subheads and emphasis within body copy such as special announcements. Emphasis: culture and art.

C. Default Screen Font

Georgia should be used as a default font when Sabon and Gill Sans are not available (for example, office computers without the correct display fonts, web use and simple word processing programs). It still carries a distinguished feel, but should only be used if no other options are open.

——————————————————————————————-

VIII. Screen-Based Media

A. Website

Rollover the templates to see a wireframed outline of the site structure.

The official Saint Petersburg website must present the environment and culture in an engaging, entertaining way; this is the primary connection many people will have with the city. The goals of the site are to a) raise worldwide awareness of Saint Petersburg, b) promote tourism, and c) serve as a knowledge base and information resource.

By keeping the homepage dynamic, users will get a fresh look at Saint Petersburg upon each visit. The interactive Flash gallery highlights many of the city’s best offerings randomly from a central database. News headlines and features are updated often to establish a sense of progressiveness and make the site feel less static. Inside pages should be clear and follow the basic structure in the above wireframe. The main navigation is always at the top, the main content is always on the right, and Informational sidebars add related facts.

B. Motion

A uniform quality of animation across motion graphic pieces for Saint Petersburg helps re-emphasize the brand attributes of strength and progression. When animating the logo, it should always be rising (not falling) and scaling up (never scaling down). When fading the elements in together they should follow a sense of hierarchy: the mark should fade first, followed by the city name, and then followed by any additional text.

In most motion graphic applications, at least one element should remain moving at all times; the screen should never be static or seemingly slow. Whether this is the logo, background patterns or various supplemental graphics or video clips, they should always feel dynamic, free-flowing, and in a state of continual forward motion.
——————————————————————————————-

IX. Transportation

A. Vehicles

Saint Petersburg’s public transportation ranks among the best in the world. With efficient paths, clean stations, and innovative technological advances, thousands of residents and visitors alike use public transportation daily. The dominant color for public transportation is red, usually with gold and white as accents. Using the Neva Curves creates a sense of dynamic motion that compliments the vehicles nicely. Clicking on the animation below shows how the curves seem to flow as the train picks up speed. Since these vehicles will be present above, on, and below the city streets, consistency in design is important. All vehicles should be clean of advertisements or any additional graphics, and the Metro logo should be visible from every side and angle on the ground transportation. City-branded planes carry the rostral column mark instead, the beacon flame rising above the tail, making a strong brand statement as the plane enters different countries. Due to the damage Saint Petersburg’s cold climate can have on these exterior graphics, most vehicles should be re-painted once every 2-3 years to make sure they don’t fade too badly over time.

B. Uniforms

City uniforms must first be comfortable for employees to wear daily. Therefore, many of the uniforms are conditioned especially for the cold weather. Jackets, long-sleeve cotton shirts, sweatshirts and accompanying hats will help keep the city employees warm while working outside. The jackets should allow for maximum flexibility and movement.

These are examples of the standard issue uniform for the metro system. Front and side pockets should be put in all jackets as a place to keep hands warm in when they are not needed. Thicker, warmer hats without logo may be substituted for the standard city offerings, but their color should compliment or stay neutral against the main jacket colors.

C. Metro

The Saint Petersburg metro system is world renowned for its beautiful, elegant stations that seem to belong in a mansion instead of underground. Crystal chandeliers hang from the ceilings, artwork graces the walls, and tiled floors lead passengers through 60 stops across four different lines. No wonder it is the most popular form of public transportation in the city.

The metro logo is divided into four sections, symbolizing the four main sections of Saint Petersburg that the system extensively covers. The central curve represents the Neva River, which the metro system goes underneath. The logo is basically a stylized miniature map of the city while retaining the look and feel of the main city identity.

The crimson color from the city palette is used in all metro-related materials. Since riding a metro can be a frustrating experience in some cities, the Saint Petersburg metro must always strive to be an elegant and above-average way to travel.

The standard metro map is a clearer, modified version of previous maps. By slightly distorting the directions of the lines instead of drawing the map perfectly to scale, the map is easier to read and more simple in figuring out how to reach any given destination. The map is accented by two illustrated curves and a light rendition of the Neva River underneath.

This map will appear on displays in every station, as well as brochures and posters. Do not adjust the text size of the stops when resizing the map, since many stations have long names and will either be too small to see or run into the colored lines. As seen in the previous page, each stop will have its name on several large signs, so people of any language will be able to recognize where they need to get off even if they canÌt understand the conductorÌs voice.

Inside the subway, each car will have a horizontal map of their carÌs colored line above eye level (usually around or above the door). This ensures that even in heavy crowds, passengers can look up and clearly see how many stops are left until their destination or when to transfer to another line. The station names are slightly tilted, which allows them to fit and remain legible in the limited space. The maps read from left to right, northbound to southbound. They should be accompanied by the full standard map somewhere in the car as well to allow passengers multiple ways to plan their stops accordingly. When attached to light fixtures, these maps illuminate in the undergroundÌs low-light conditions.

The Saint Petersburg stations were among the first in the world to utilize smartcard technology. In this system, a tiny chip is placed inside each card that allows it to be easily read by waving it over a scanning bar. The cards actually save money because they diminish the need for tokens, paper cards or magnetic strips. Many passengers will buy one card that lasts them several months or even an entire year.

The cards display a pair of illustrated Neva curves on the front, with a single curve taking up the negative space between them on the back. Simple instructions direct users who might be unfamiliar with this new technology how to scan their card and refill it with more money. Cards are distributed at kiosks that are located at stations and various city businesses above ground, and are available in a variety of languages.

Leave a Reply

You must be logged in to post a comment.