Wzornik, identyfikacjaWróć do portfolio

Identyfikacja wizualna, serwis i sklep rowerowy, Gdańsk

Wolnobieg

Przestajesz pedałować i jedziesz dalej. Tak ma wyglądać serwis rowerowy.

Odznaka Wolnobiegu: zębatka z pierścieniami jak koło wolnobiegu

Klient i zadanie

Wolnobieg to serwis i sklep rowerowy we Wrzeszczu, w Gdańsku. Trzech mechaników naprawia rowery miejskie na miejscu, zwykle tego samego dnia, a w małym sklepie obok sprzedaje używane i nowe rowery do jazdy po mieście.

Do tej pory warsztat miał tablicę namalowaną sprayem, cennik pisany flamastrem i kilka naklejek od hurtowni części. Klienci pamiętali mechaników z imienia, ale nie nazwę firmy.

Zadanie: znak i system, które pasują do drzwi warsztatu, do przywieszki na kierownicy i do profilu w mediach. Mają wyglądać jak ciepłe miejsce z historią, a nie jak sieciówka.

Branża
serwis i sklep rowerowy
Miejsce
Gdańsk, Wrzeszcz
Zakres
strategia, logo, system, makiety, animacja, brand book
Odbiorcy
ludzie, którzy jeżdżą rowerem do pracy i na weekend, od studentów po rodziny

Kierunek i strategia

wolnopasykorba

Lata siedemdziesiąte, bo wtedy rower był przyjemnością

W latach siedemdziesiątych rower miejski stał się zwykłą rzeczą: do sklepu, do pracy, do babci. Paleta z tamtych lat jest ciepła i nasycona: przypalona pomarańcza, musztarda, brąz i awokado na kremowym papierze. Nic w niej nie jest zimne ani sportowe.

Styl niosą trzy elementy. Równoległe pasy prowadzone łukami przypominają ślad opony i ruch koła. Okrągła odznaka z koncentrycznych pasów jest znakiem i jednocześnie zębatką wolnobiegu. Gruby, zaokrąglony krój nagłówkowy daje napisowi ciężar dawnego szyldu.

Odbiorca jeździ do pracy i na wycieczki, a rower traktuje jak towarzysza, nie sprzęt. Ciepłe kolory i obłe kształty mówią mu, że w warsztacie nikt nie postraszy go rachunkiem.

  • Naprawiamy, nie wymieniamy

    Zanim zaproponujemy nową część, sprawdzamy, czy starą da się uratować.

  • Jedź wolno

    Rower ma dawać przyjemność, nie wynik. Nikt tu nie mierzy czasu.

  • Po sąsiedzku

    Warsztat stoi w bramie, mechanik zna rowery z całej ulicy i pamięta, co kiedyś w nich naprawiał.

Odbiorcy
Gdańszczanie, którzy jeżdżą rowerem do pracy i na weekend, od studentów po rodziny z dziećmi, oraz kupujący używane i miejskie rowery.
Osobowość
ciepła, wesoła, solidna
Czego unikamy
zimnych błękitów, minimalizmu, fotorealizmu i sportowej agresji
Wolnobieg to serwis i sklep rowerowy w Gdańsku, w którym naprawiamy rowery miejskie na miejscu, a sprzedajemy te, które sami chcielibyśmy jeździć.

Proces

Zaczęliśmy od trzech szkiców, narysowanych szybko i surowo. Każdy odpowiada na inne pytanie: czy znakiem mają być pasy, odznaka z napisem, czy litera.

  1. Odrzucony 1

    Odznaka z napisem po obwodzie

    Okrągła odznaka z napisem WOLNOBIEG · SERWIS · GDAŃSK biegnącym po obwodzie.

    Odpadła, bo napis po obwodzie przy 24 pikselach zamienia się w kropki i powtarza to, co stoi obok w logo. Z odznaki zostało koło, ale bez liter.

  2. Odrzucony 2

    Wstęga zwinięta z pasów

    Litera W zbudowana wyłącznie z trzech zawiniętych pasów.

    Odpadła, bo litera z pasów jest czytelna dopiero od 120 pikseli, a nazwa potrzebuje całego słowa. Pasy zostały jako osobny element systemu.

  3. Wybrany

    Pasy i koło

    Dwa elementy robią dwie różne rzeczy. Okrągła odznaka z pasów jest sygnetem, ikoną i naklejką na ramie. Trzy pasy prowadzone łukiem pod napisem niosą ruch. Razem czytają się jak koło wolnobiegu w jeździe, a osobno każdy działa na swoim poziomie.

Ręczny kerning

Pary Wo i eg zostały ściągnięte, a ol, ln i bi odrobinę rozsunięte, żeby gruby krój tworzył równy rytm w całym słowie.

Napis Wolnobieg bez korekty kerningu
Bez korekty
Napis Wolnobieg po ręcznej korekcie kerningu
Po korekcie

Napis stoi na zboczu minus cztery stopnie, a pasy pod nim prowadzą ten sam łuk. Pasy zaczynają się pod literą W i kończą za literą g, żeby ogonek g miał oddech.

Test czytelności

Pełna odznaka z otworami w piaście działa od 48 pikseli. Poniżej zastępuje ją uproszczony sygnet z dwoma pierścieniami, który w 16 pikselach nadal czyta się jak koło.

  • 16 px
  • 24 px
  • 48 px

Uproszczony sygnet

  • 48 px
  • 96 px
  • 192 px

Pełna odznaka

System identyfikacji

Logo w sześciu wersjach

  • Logo Wolnobieg, wersja główne

    Głównenapis i trzy pasy, gdy jest miejsce

  • Logo Wolnobieg, wersja poziome

    Poziomeodznaka obok napisu, paski i nagłówki

  • Logo Wolnobieg, wersja pionowe

    Pionoweplakaty, naklejki, kwadratowe pola

  • Logo Wolnobieg, wersja sygnet

    Sygnetsama odznaka, awatary i naklejka na ramę

  • Logo Wolnobieg, wersja jednokolorowe

    Jednokoloroweczarne, do druku w jednym kolorze

  • Logo Wolnobieg, wersja negatyw

    Negatywjasne na kakaowym tle

Logo główne otoczone polem ochronnym równym wysokości litery W

Pole ochronne i rozmiary

Pole ochronne jest równe wysokości litery W z napisu Wolnobieg. Żaden tekst ani brzeg strony nie wchodzi w ten obszar.

  • Sygnet: 16 px na ekranie, 6 mm w druku (uproszczony sygnet).
  • Pełna odznaka: 48 px na ekranie, 14 mm w druku.
  • Logo główne: 140 px szerokości, 30 mm w druku.
  • Logo pionowe: 240 px szerokości, 50 mm w druku (hasło pod napisem czyta się od 320 px).

Kolor

  • Brąz#5B2F14napis logo, nagłówki, odznaka
  • Pomarańcz#EC7424pasy, wypełnienia i tło sekcji z ciemnym tekstem
  • Musztarda#E9A81Dpasy, odznaki i jasne tła z ciemnym tekstem
  • Awokado#7C8A2Bpasy i wypełnienia, bez tekstu
  • Oliwka#556020zielony akcent w tekście i tło z jasnym tekstem
  • Rdza#A64A0Dpomarańcz w tekście, linki i przyciski
  • Krem jasny#FBF3DFkarty i okładki
  • Krem#F6E8C8tło strony i papier
  • Piasek#EAD7AEtło tabel i pól
  • Len#CDB27Flinie i faktura, bez tekstu
  • Tytoń#9A7447obrysy elementów, bez tekstu
  • Kawa#6B4528tekst drugorzędny
  • Kakao#3F2411tekst podstawowy i ciemne tło
Kolory marki w zapisie HEX, RGB, OKLCH i przybliżonym CMYK
KolorHEXRGBOKLCHCMYK (przybliżony)
Brąz#5B2F1491 47 20oklch(35.7% 0.075 49.8)C 0 M 48 Y 78 K 64
Pomarańcz#EC7424236 116 36oklch(68.8% 0.171 48.8)C 0 M 51 Y 85 K 7
Musztarda#E9A81D233 168 29oklch(77.4% 0.155 79.4)C 0 M 28 Y 88 K 9
Awokado#7C8A2B124 138 43oklch(60.3% 0.119 117.3)C 10 M 0 Y 69 K 46
Oliwka#55602085 96 32oklch(46.5% 0.088 118.3)C 11 M 0 Y 67 K 62
Rdza#A64A0D166 74 13oklch(52% 0.138 47.1)C 0 M 55 Y 92 K 35
Krem jasny#FBF3DF251 243 223oklch(96.5% 0.028 88.7)C 0 M 3 Y 11 K 2
Krem#F6E8C8246 232 200oklch(93.4% 0.045 87.2)C 0 M 6 Y 19 K 4
Piasek#EAD7AE234 215 174oklch(88.4% 0.058 86)C 0 M 8 Y 26 K 8
Len#CDB27F205 178 127oklch(77.5% 0.074 83)C 0 M 13 Y 38 K 20
Tytoń#9A7447154 116 71oklch(58.6% 0.078 70)C 0 M 25 Y 54 K 40
Kawa#6B4528107 69 40oklch(42.7% 0.068 57)C 0 M 36 Y 63 K 58
Kakao#3F241163 36 17oklch(29.1% 0.051 54.3)C 0 M 43 Y 73 K 75

Kontrast

Każda para tekstu i tła w systemie ma policzony stosunek kontrastu. Teksty spełniają WCAG AA, a elementy dekoracyjne są oznaczone osobno.

Tabela kontrastu, 27 par
Kontrast każdej pary tekst i tło używanej w systemie
UżycieParaKontrastWymógPoziom
tekst podstawowy na tle stronyAa#3F2411 na #F6E8C811,75:14,5:1, tekstAAA
tekst na kartachAa#3F2411 na #FBF3DF12,9:14,5:1, tekstAAA
tekst w tabelach i na polachAa#3F2411 na #EAD7AE10,08:14,5:1, tekstAAA
napis logo i nagłówkiAa#5B2F14 na #F6E8C89,29:14,5:1, tekstAAA
nagłówki na kartachAa#5B2F14 na #FBF3DF10,2:14,5:1, tekstAAA
tekst drugorzędny, podpisyAa#6B4528 na #F6E8C86,9:14,5:1, tekstAA
podpisy na kartachAa#6B4528 na #FBF3DF7,57:14,5:1, tekstAAA
podpisy w tabelachAa#6B4528 na #EAD7AE5,92:14,5:1, tekstAA
linki i pomarańcz w tekścieAa#A64A0D na #F6E8C84,8:14,5:1, tekstAA
linki na kartachAa#A64A0D na #FBF3DF5,26:14,5:1, tekstAA
zielony akcent w tekścieAa#556020 na #F6E8C85,61:14,5:1, tekstAA
zielony akcent na kartachAa#556020 na #FBF3DF6,16:14,5:1, tekstAA
tekst na pomarańczowej sekcjiAa#3F2411 na #EC74244,82:14,5:1, tekstAA
tekst na musztardowej sekcji i odznakachAa#3F2411 na #E9A81D6,85:14,5:1, tekstAA
nagłówki na musztardzieAa#5B2F14 na #E9A81D5,42:14,5:1, tekstAA
jasny tekst na brązowej sekcjiAa#F6E8C8 na #5B2F149,29:14,5:1, tekstAAA
negatyw: jasny tekst na ciemnym tleAa#F6E8C8 na #3F241111,75:14,5:1, tekstAAA
jasny tekst na oliwkowej sekcjiAa#FBF3DF na #5560206,16:14,5:1, tekstAA
jasny tekst na przycisku w kolorze rdzyAa#F6E8C8 na #A64A0D4,8:14,5:1, tekstAA
musztardowy akcent na ciemnym tleAa#E9A81D na #3F24116,85:14,5:1, tekstAA
pomarańczowy duży napis na ciemnym tleAa#EC7424 na #3F24114,82:13:1, duży tekstAA
duże nagłówki Rammetto OneAa#5B2F14 na #F6E8C89,29:13:1, duży tekstAAA
obrys fokusu i ramki pól formularzaAa#A64A0D na #F6E8C84,8:13:1, element interfejsuAA
obrys przełączników i suwakówAa#9A7447 na #F6E8C83,48:13:1, element interfejsuAA large
pasy i łukiAa#EC7424 na #F6E8C82,44:1brakdekoracja
pasy i wypełnieniaAa#7C8A2B na #F6E8C83,13:1brakdekoracja
linie podziału i fakturaAa#CDB27F na #F6E8C81,68:1brakdekoracja

Typografia

Rammetto One

Naprawiamy, nie wymieniamy. Jedź wolno, dojedziesz.

Nagłówki i napis logo. Jedna grubość, 400. Licencja OFL.

Baloo 2

Naprawiamy, nie wymieniamy. Jedź wolno, dojedziesz.

Tekst. Grubości 400, 600 i 800. Licencja OFL.

  • Tytuł56 px, interlinia 1,25. okładki, hasła, nagłówek strony
  • Nagłówek34 px, interlinia 1,2. sekcje i karty
  • Podtytuł22 px, interlinia 1,25. wstępy i lead
  • Tekst18 px, interlinia 1,5. akapity, opisy, cenniki
  • Podpis14 px, interlinia 1,4. podpisy, etykiety, adresy

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż 0123456789 „”·×

Ikony i wzór

  • adres
  • dętka
  • dzwonek
  • kask
  • klucz
  • koło
  • lampka
  • pompka
  • rower
  • telefon
  • zębatka
  • zegar

  • Pasy w łukach

    Trzy pasy w pomarańczy, musztardzie i brązie biegną równolegle po łuku. Wzór w tle składa się z ćwiartek okręgów i nigdy nie robi ostrych zakrętów.

  • Lekkie zużycie

    Drobny wzór wytarcia z szumu, nałożony na kolorowe pola. Tylko na ekranie, nigdy w plikach logo i w plikach do druku.

  • Odznaki i naklejki

    Okrągłe odznaki z jednym słowem i pierścieniem pasów. Powtarzają znak, nie dodają nowych symboli.

  • Rogi zawsze zaokrąglone, promień od 20 do 40 pikseli, nigdy ostre.
  • Pas sekcji idzie łukiem, nie linijką. Tekst nigdy nie leży na łuku.
  • Jeden akapit na jedną kartę, kolor tła z palety, ciemny tekst na jasnym lub jasny na ciemnym.
  • W logo pasy mają trzy kolory i zawsze zaczynają się od pomarańczy. W grafice może ich być do pięciu.

Zdjęcia i ton głosu

Zdjęć w tym projekcie nie generujemy. Opis stylu dla fotografa: ciepłe popołudniowe światło, lekko ziarniste ujęcia z poziomu kierownicy. Rowery stoją pod ścianą warsztatu, na stojaku do naprawy albo na ulicy z kocimi łbami, a dłonie mechanika są widoczne w kadrze. Kolory zbliżamy do palety: kremowe ściany, brązowy metal, pomarańczowe akcenty. Bez chłodnych filtrów, bez sportowych póz i bez przesadnej ostrości.

Mówimy, co naprawimy

Piszemy, co jest zepsute i ile to potrwa, bez straszenia.

TakDętka do wymiany, 25 minut. Zostaw rower i wróć po kawie.

NieKonieczna profesjonalna diagnostyka układu jezdnego.

Jedź wolno

Nikogo nie ścigamy. Zachęcamy do spokojnej jazdy, bez wyniku i bez ambicji.

TakWolno też dojedziesz. Rower będzie gotowy o szóstej.

NiePrzyspiesz z nami i pobij swój rekord!

Po sąsiedzku

Mówimy tak, jak mechanik przez ladę.

TakHamulec do regulacji. Wpadnij w piątek, zrobię od ręki.

NieZapraszamy do skorzystania z naszej oferty serwisowej.

Prosto o cenie

Cenę podajemy przed naprawą i niczego nie dopisujemy po fakcie.

TakWymiana dętki: 30 zł z robocizną.

NieCena do ustalenia po diagnozie.

Animacja

Odznaka toczy się z lewej strony i zatrzymuje na środku, a trzy pasy suną za nią łukiem. Potem wjeżdża napis. Całość trwa trzy sekundy. Przy ustawieniu ograniczenia ruchu strona pokazuje nieruchome logo.

Czas
trzy sekundy
Formaty
MP4 (H.264) i WebM (VP9)
Wymiary
1080 na 1080 px
Użycie
intro filmu, ekran powitalny i okładka relacji

Ułóż własne pasy

Pasy to najważniejszy element systemu. Zmień liczbę, kolory i łuk, a potem pobierz gotowy plik SVG.

3 pasy: Pomarańcz, Musztarda, Brąz. Łuk 55 procent.

Zastosowania

Awers wizytówki Wolnobiegu: odznaka z zębatką i trzy pasy na pomarańczowym tle.
Wizytówka, awersPomarańczowe tło, odznaka i pasy. Druk 85 na 55 mm, spad 3 mm.
Rewers wizytówki Wolnobiegu z nazwiskiem mechanika, adresem i telefonem.
Wizytówka, rewersDane kontaktowe na kremowym papierze i pasy w dolnym rogu.
Papier firmowy Wolnobiegu w formacie A4 z krótkim listem.
Papier firmowy A4Łuk z pasów w rogu, adres w stopce i szeroki margines na list.
Szyld nad drzwiami warsztatu rowerowego Wolnobieg i przywieszka serwisowa z numerem zlecenia.
Szyld i przywieszka serwisowaZastosowanie dla serwisu: szyld nad drzwiami warsztatu i przywieszka serwisowa na kierownicę.
Podpis e-mail Wolnobiegu z poziomym logo, telefonem i adresem.
Podpis e-mailHTML bez obrazków w tle, poziome logo z hostingu, tekst w czcionkach systemowych.

Media społecznościowe

  • Awatar Wolnobiegu: odznaka z zębatką na pomarańczowym tleAwatar
  • Post w mediach społecznościowych: Dętka w 25 minut. Zostaw rower rano, odbierz po pracy.Dętka w 25 minut.
  • Post w mediach społecznościowych: Naprawiamy, nie wymieniamy. Zanim kupisz nowe, pokaż stare.Naprawiamy, nie wymieniamy.
  • Post w mediach społecznościowych: Warsztat czynny pn do pt 9:00 do 18:00, sobota 10:00 do 15:00Warsztat czynny

Pliki do pobrania

Pliki marki leżą w jednej paczce ZIP i osobno na liście poniżej. Animacji logo i makiet nie ma w paczce, pobierasz je z listy. Rozwiń grupę, żeby zobaczyć pliki z wymiarami.

Cała paczka waży 3,9 MB.

wolnobieg-identyfikacja.zip3,9 MB

CMYK w tabeli kolorów jest przybliżony. Do druku zamów próbny wydruk. Odpowiedników Pantone nie podajemy.

Twój biznes też może toczyć się własnym tempem

Opowiedz mi o swojej firmie i o ludziach, którzy ją znają. Zaproponuję kierunek, pokażę trzy szkice logo i dowiozę komplet plików na każdą okazję.

  • Od ciebiekilka zdań o firmie, o ludziach, którzy ją znają, i o miejscach, gdzie ma być widać znak
  • Najpierwtrzy szkice logo i jeden wybrany kierunek, zanim cokolwiek zostanie dopracowane
  • Na końcukomplet plików, brand book i makiety, tak jak w paczce powyżej
Zobacz ofertę dla klientów