Robisz, nie oglądasz
Pierwszą linijkę kodu piszesz w pierwszy wieczór, a w trzecim tygodniu publikujesz swoją stronę.
Identyfikacja wizualna
Klamra
Szkoła, która od pierwszego dnia pokazuje, że kod się pisze, a nie ogląda.
- Branża
- szkoła programowania online
- Zasięg
- cała Polska, zajęcia na żywo przez internet
- Zakres
- strategia, logo, system, makiety, animacja, brand book
Zadanie
Klamra to nowa szkoła programowania online. Uczy dorosłych, którzy chcą zmienić pracę, oraz maturzystów, którzy wolą mentora niż pięć lat studiów. Grupy mają do ośmiu osób, zajęcia odbywają się dwa wieczory w tygodniu, a kurs trwa cztery miesiące.
Wszyscy konkurenci wyglądają tak samo: granatowe tło, fioletowy gradient, uśmiechnięty człowiek z laptopem. Klamra nie ma budżetu na reklamę, więc musi być rozpoznawalna w jednym kadrze, na naklejce przyklejonej do laptopa kursanta.
Zadanie: identyfikacja, która jest głośna, uczciwa i łatwa do powielenia bez projektanta, w którą można zapakować cały kurs: stronę, certyfikat, posty i naklejki.
- Branża
- szkoła programowania online
- Zasięg
- cała Polska, zajęcia na żywo przez internet
- Zakres
- strategia, logo, system, makiety, animacja, brand book
- Odbiorcy
- dorośli zmieniający zawód i maturzyści, 18 do 45 lat
Kierunek
Surowo, głośno i bez wstydu
Kod jest surowy: nawiasy, średniki, błąd w linii dwudziestej trzeciej. Neobrutalizm robi z tej surowości styl. Grube czarne obrysy pokazują konstrukcję, twarde cienie bez rozmycia dają wrażenie przedmiotu, a cztery płaskie kolory krzyczą tam, gdzie konkurencja szepcze.
Dla odbiorcy, który boi się, że programowanie jest dla innych, to jest zaproszenie: tu nikt niczego nie udaje. Klamra to nawias, który otwiera blok kodu, i zapięcie, które trzyma grupę razem. Znak jest naklejką, a naklejkę się przykleja, nie ogląda w gablocie.
klamracommitsurowo
Małe grupy
Do ośmiu osób na jednego mentora. Mentor zna twój kod i twoje błędy po imieniu.
Uczciwa cena
Jedna cena podana z góry, bez ukrytych modułów i bez raty, której nie widać na stronie.
- Odbiorcy
- Dorośli, którzy chcą przejść do pracy w kodzie, i maturzyści, którzy wolą pracować z mentorem niż studiować. Czytają w telefonie, porównują trzy szkoły naraz i nie ufają obietnicom.
- Osobowość
- bezpośrednia, żywa, trochę szalona
- Czego unikamy
- luksusu, pastelowej miękkości, miękkich cieni i startupowego połysku
Klamra to szkoła programowania online, w której w małej grupie, w cztery miesiące i na prawdziwym projekcie przechodzisz od zera do pierwszej pracy w kodzie.
Proces
Zaczęliśmy od trzech szkiców, narysowanych szybko i surowo. Każdy odpowiada na inne pytanie: czy znak ma być nawiasem, literą, czy ekranem terminala.
K zbudowane z klamer
Pionowa kreska i dwa ramiona w kształcie połówek klamry składają się w literę K.
Odpadło, bo ramiona klamer przy 24 pikselach zlewają się w zwykłe K, a właśnie klamra miała być rozpoznawalna. Znak czyta się jako litera, nie jako kod.
Terminal z kursorem
Napis Klamra, za nim migający blok kursora, całość w ramce okna terminala.
Odpadł, bo bez klamer przypomina każdą szkołę z konsolą w tle, a w roli ikony strony jest za szeroki. Kursor został, ale przeniósł się do środka klamer.
Klamry i kursor
Dwie grube klamry z różowym blokiem kursora w środku mówią dwie rzeczy naraz: to jest kod i tu coś się zaraz zacznie. Żółta ramka z twardym cieniem robi z nich naklejkę, którą da się przykleić na laptopie, wydrukować na koszulce i zmniejszyć do ikony strony.
Ręczny kerning
Pary Kl i ra zostały ściągnięte, am i mr odrobinę rozsunięte, żeby w grubym kroju Epilogue 900 kolor tekstu w słowie Klamra był równy.
Test czytelności
Pełny znak z ramką i cieniem działa od 24 pikseli. Do 16 pikseli ikona strony dostaje grubsze klamry i mniejszy kursor, a ramka i cień zostają.
ikona strony, 16 px- 32 px
pełny sygnet, 24 px- 48 px
- 96 px
- 192 px
Kursor jest niższy od wersalika K o jedną piątą, a spiczaste czubki klamer wchodzą w pole ochronne o połowę grubości kreski. Napis stoi na środku optycznym ramki, nie na geometrycznym.
System
Logo w sześciu wersjach
Główneklamry, kursor i napis, gdy jest miejsce
Poziomesygnet i napis obok siebie, paski i nagłówki
Pionowesygnet nad napisem, naklejki i kwadratowe pola
Sygnetsama ramka z klamrami, awatary i ikony
Jednokoloroweczarne, do druku w jednym kolorze
Negatywna atramencie, żółta ramka zostaje
Pole ochronne i rozmiary
Pole ochronne jest równe szerokości kursora w znaku. Żaden tekst ani brzeg strony nie wchodzi w ten obszar. Cień liczy się do znaku, więc margines mierzymy od jego krawędzi.
- Sygnet: 16 px na ekranie, 6 mm w druku (ikona strony z grubszymi klamrami).
- Pełny znak: 24 px na ekranie, 9 mm w druku.
- Logo główne: 120 px szerokości, 32 mm w druku.
Kolor
- Atrament#111111tekst, obrysy, cienie i znak
- Cytryna#FFE14Akolor marki, tło znaku i pierwszego planu
- Róż#FF5FA8akcent, kursor, ostrzeżenia, wypełnienia
- Mięta#3DDC97akcent, potwierdzenia, wypełnienia
- Niebo#5CC8FFakcent, odnośniki w ramkach, wypełnienia
- Biel#FFFFFFtło strony i kart, jedyny jasny tekst na atramencie
- Mgła#F2F2F2tło tabel i pól kodu
- Beton#D9D9D9linie pomocnicze, wyłączone pola, bez tekstu
- Kamień#8F8F8Framki pomocnicze, bez tekstu
- Grafit#4A4A4Atekst drugorzędny
Tabela kolorów: HEX, RGB, OKLCH, CMYK
| Kolor | HEX | RGB | OKLCH | CMYK (przybliżony) |
|---|---|---|---|---|
| Atrament | #111111 | 17 17 17 | oklch(17.8% 0 0) | C 0 M 0 Y 0 K 93 |
| Cytryna | #FFE14A | 255 225 74 | oklch(90.9% 0.165 97.6) | C 0 M 12 Y 71 K 0 |
| Róż | #FF5FA8 | 255 95 168 | oklch(71.3% 0.205 355.3) | C 0 M 63 Y 34 K 0 |
| Mięta | #3DDC97 | 61 220 151 | oklch(79.7% 0.164 159.7) | C 72 M 0 Y 31 K 14 |
| Niebo | #5CC8FF | 92 200 255 | oklch(79.1% 0.126 233.7) | C 64 M 22 Y 0 K 0 |
| Biel | #FFFFFF | 255 255 255 | oklch(100% 0 0) | C 0 M 0 Y 0 K 0 |
| Mgła | #F2F2F2 | 242 242 242 | oklch(96.1% 0 0) | C 0 M 0 Y 0 K 5 |
| Beton | #D9D9D9 | 217 217 217 | oklch(88.5% 0 0) | C 0 M 0 Y 0 K 15 |
| Kamień | #8F8F8F | 143 143 143 | oklch(65% 0 0) | C 0 M 0 Y 0 K 44 |
| Grafit | #4A4A4A | 74 74 74 | oklch(40.9% 0 0) | C 0 M 0 Y 0 K 71 |
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, 18 par
| Użycie | Para | Kontrast | Wymóg | Poziom |
|---|---|---|---|---|
| tekst podstawowy na tle strony i na kartach | Aa#111111 na #FFFFFF | 18,88:1 | 4,5:1, tekst | AAA |
| tekst w tabelach i polach kodu | Aa#111111 na #F2F2F2 | 16,87:1 | 4,5:1, tekst | AAA |
| tekst na kolorze marki i na znaku | Aa#111111 na #FFE14A | 14,5:1 | 4,5:1, tekst | AAA |
| tekst na różowych blokach i naklejkach | Aa#111111 na #FF5FA8 | 6,7:1 | 4,5:1, tekst | AA |
| tekst na miętowych blokach i naklejkach | Aa#111111 na #3DDC97 | 10,68:1 | 4,5:1, tekst | AAA |
| tekst na niebieskich blokach i naklejkach | Aa#111111 na #5CC8FF | 10,04:1 | 4,5:1, tekst | AAA |
| negatyw: biały tekst na atramencie | Aa#FFFFFF na #111111 | 18,88:1 | 4,5:1, tekst | AAA |
| etykiety i akcenty na atramencie | Aa#FFE14A na #111111 | 14,5:1 | 4,5:1, tekst | AAA |
| tekst drugorzędny, podpisy | Aa#4A4A4A na #FFFFFF | 8,86:1 | 4,5:1, tekst | AAA |
| podpisy w tabelach i na polach kodu | Aa#4A4A4A na #F2F2F2 | 7,92:1 | 4,5:1, tekst | AAA |
| tekst drugorzędny na kolorze marki | Aa#4A4A4A na #FFE14A | 6,8:1 | 4,5:1, tekst | AA |
| duże nagłówki i napisy na plakatach | Aa#111111 na #FFFFFF | 18,88:1 | 3:1, duży tekst | AAA |
| obrys fokusu i ramki na kolorze marki | Aa#111111 na #FFE14A | 14,5:1 | 3:1, element interfejsu | AAA |
| obrysy kart, pól formularza i przycisków | Aa#111111 na #FFFFFF | 18,88:1 | 3:1, element interfejsu | AAA |
| kursor w znaku, kształty wzoru i naklejki | Aa#FF5FA8 na #FFFFFF | 2,82:1 | brak | dekoracja |
| kształty wzoru i naklejki | Aa#3DDC97 na #FFFFFF | 1,77:1 | brak | dekoracja |
| kształty wzoru i naklejki | Aa#5CC8FF na #FFFFFF | 1,88:1 | brak | dekoracja |
| linie pomocnicze na planszach | Aa#8F8F8F na #FFFFFF | 3,23:1 | brak | dekoracja |
Typografia
Epilogue
Pierwszą linijkę kodu piszesz pierwszego wieczoru.
Nagłówki i tekst. Grubości 900 i 800 do tytułów, 700 i 500 do tekstu. Licencja OFL.
JetBrains Mono
Pierwszą linijkę kodu piszesz pierwszego wieczoru.
Etykiety, naklejki, numery i kod. Grubości 400, 700 i 800. Licencja OFL.
- Tytuł64 px, interlinia 1. okładki, hasła, nagłówek strony
- Nagłówek36 px, interlinia 1,1. sekcje i karty
- Podtytuł20 px, interlinia 1,35. wstępy i lead
- Tekst17 px, interlinia 1,55. akapity, opisy
- Etykieta13 px, interlinia 1,3. naklejki, numery, kod
ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż 0123456789 {}[]()<>;
Ikony i wzór
błąd
certyfikat
commit
gałąź
grupa
kalendarz
kod
kontakt
laptop
mentor
projekt
terminal
Wzór z klocków
Cztery płaskie kształty w czterech kolorach, każdy z grubym obrysem i twardym cieniem, ułożone na siatce. Wzór nie ma przejść ani gradientów.
Twardy cień
Przesunięty o stałą wartość w prawo i w dół, w kolorze atramentu, bez rozmycia. Cień jest zawsze pełny i zawsze w tym samym kierunku.
Naklejki i etykiety
Etykiety w kroju mono, wersalikami, na płaskim kolorze z obrysem. Naklejki wolno przechylić o kilka stopni, treści strony nigdy.
- Jedna siatka prostokątnych bloków. Każdy blok ma obrys, każdy większy blok ma cień.
- Cztery kolory na wypełnienia, atrament na tekst i obrysy. Tekst biały tylko na atramencie.
- Obrys ma grubość 3 do 5 pikseli na ekranie, cień przesunięcie 6 do 10 pikseli.
- Naklejki nie zakrywają tekstu. Wokół przycisku zostaje miejsce na jego cień.
Zdjęcia i ton głosu
Zdjęć w tym projekcie nie generujemy. Opis stylu dla fotografa: jednolite, płaskie tło w jednym z czterech kolorów marki, światło z lampy błyskowej prosto z przodu, twardy cień za obiektem. Laptop, ręce na klawiaturze, naklejki w kadrze z bliska. Ludzie patrzą w ekran albo w obiektyw, nigdy w niebo. Kolory nasycone, bez filtrów i bez rozmycia tła. Kadr ciasny, od pasa w górę, ekran czytelny.
Mówimy wprost
Co się stanie, kiedy, ile to kosztuje. Bez przymiotników, które niczego nie znaczą.
TakPo czterech miesiącach masz napisaną własną aplikację.
NieRewolucyjna transformacja twojej kariery w świecie technologii.
Żargon tłumaczymy, nie chowamy
Używamy prawdziwych nazw, ale przy pierwszym użyciu mówimy, co znaczą.
TakCommit to zapisany krok w historii projektu. Robisz ich dziesiątki.
NieWykorzystaj synergię nowoczesnych technologii.
Pokazujemy robotę, nie obietnice
Zamiast gwarancji opisujemy, co kursant zrobi w danym tygodniu.
TakW trzecim tygodniu publikujesz pierwszą stronę.
NieGwarantujemy pracę marzeń.
Krótko, na ty, bez krzyku
Mówimy głośno wizualnie, ale zdania są spokojne. Jedna myśl, jeden wykrzyknik na całą stronę, najlepiej żaden.
TakZacznij od pierwszej linijki.
NieDołącz do nas już dziś i zmień swoje życie!!!
Animacja
Ramka znaku spada na kartę, klamry wjeżdżają z dwóch stron i uderzają o siebie, a cień wyskakuje spod spodu. Potem pisze się słowo Klamra, litera po literze, a kursor mruga dwa razy. Całość trwa trzy sekundy. Przy ustawieniu ograniczenia ruchu strona pokazuje nieruchome logo.
Okleń laptopa
Znak jest naklejką, więc przykleiliśmy dziesięć. Przeciągaj je po pokrywie laptopa, wymieszaj albo ułóż w rzędach.
Zastosowania
Media społecznościowe
Awatar
Pierwsza linijka kodu.
Osiem miejsc w grupie.
Co to jest klamra?
Pliki
W jednej paczce ZIP leżą logo, kolory, kroje, ikony, druk, media społecznościowe i brand book. Animacja i makiety są tylko na liście poniżej. Rozwiń grupę, żeby zobaczyć pliki z wymiarami.
Cała paczka waży 1,5 MB.
klamra-identyfikacja.zip1,5 MB
LogoSVG, PDF, PNG, PNG 512, 1024, 2048 px30 plików427 KB
- klamra-horizontal.svg1,9 KB
- klamra-mono-black.svg1,8 KB
- klamra-negative.svg1,9 KB
- klamra-primary.svg1,9 KB
- klamra-symbol.svg437 B
- klamra-vertical.svg1,9 KB
- klamra-horizontal.pdf1 str.2,3 KB
- klamra-mono-black.pdf1 str.2,3 KB
- klamra-negative.pdf1 str.2,3 KB
- klamra-primary.pdf1 str.2,3 KB
- klamra-symbol.pdf1 str.1,1 KB
- klamra-vertical.pdf1 str.2,3 KB
- klamra-horizontal-1024.png1024×298 px16 KB
- klamra-horizontal-2048.png2048×597 px39 KB
- klamra-horizontal-512.png512×149 px7,4 KB
- klamra-mono-black-1024.png1024×274 px16 KB
- klamra-mono-black-2048.png2048×548 px33 KB
- klamra-mono-black-512.png512×137 px7,6 KB
- klamra-negative-1024.png1024×274 px13 KB
- klamra-negative-2048.png2048×548 px31 KB
- klamra-negative-512.png512×137 px5,9 KB
- klamra-primary-1024.png1024×274 px14 KB
- klamra-primary-2048.png2048×548 px31 KB
- klamra-primary-512.png512×137 px5,9 KB
- klamra-symbol-1024.png1024×1024 px17 KB
- klamra-symbol-2048.png2048×2048 px54 KB
- klamra-symbol-512.png512×512 px7,9 KB
- klamra-vertical-1024.png1024×770 px30 KB
- klamra-vertical-2048.png2048×1540 px65 KB
- klamra-vertical-512.png512×385 px13 KB
Ikona stronyPNG, ICO, SVG, PNG 180 px3 pliki3,1 KB
- apple-touch-icon.png180×180 px1,8 KB
- favicon.ico16, 32, 48 px751 B
- favicon.svg566 B
KolorJSON, CSS2 pliki8,2 KB
- klamra-palette.json7,9 KB
- klamra-tokens.css282 B
KrojeWOFF2, TXT9 plików153 KB
- Epilogue-500.woff220 KB
- Epilogue-700.woff220 KB
- Epilogue-800.woff220 KB
- Epilogue-900.woff219 KB
- JetBrainsMono-400.woff222 KB
- JetBrainsMono-700.woff223 KB
- JetBrainsMono-800.woff222 KB
- OFL-Epilogue.txt4,3 KB
- OFL-JetBrainsMono.txt4,3 KB
WzórSVG1 plik597 B
- klamra-pattern.svg597 B
IkonySVG13 plików2,7 KB
- klamra-icons.svg111 B
- klamra-icon-blad.svg226 B
- klamra-icon-certyfikat.svg220 B
- klamra-icon-commit.svg204 B
- klamra-icon-galaz.svg282 B
- klamra-icon-grupa.svg239 B
- klamra-icon-kalendarz.svg232 B
- klamra-icon-kod.svg210 B
- klamra-icon-kontakt.svg207 B
- klamra-icon-laptop.svg190 B
- klamra-icon-mentor.svg207 B
- klamra-icon-projekt.svg207 B
- klamra-icon-terminal.svg214 B
DrukPDF2 pliki32 KB
- klamra-business-card.pdf2 str.13 KB
- klamra-letterhead.pdf1 str.18 KB
Media społecznościowePNG, PNG 1080 px4 pliki126 KB
- klamra-avatar.png1080×1080 px11 KB
- klamra-post-1.png1080×1350 px42 KB
- klamra-post-2.png1080×1350 px40 KB
- klamra-post-3.png1080×1350 px33 KB
Podpis e-mailHTML1 plik1,3 KB
MakietyJPG5 plików627 KB
- klamra-application.jpg216 KB
- klamra-card-back.jpg107 KB
- klamra-card-front.jpg83 KB
- klamra-email-signature.jpg83 KB
- klamra-letterhead.jpg137 KB
Animacja logoMP4, WEBM2 pliki109 KB
- klamra-logo.mp41080×1080 px50 KB
- klamra-logo.webm1080×1080 px60 KB
Brand bookPDF1 plik1,2 MB
- klamra-brandbook.pdf28 str.1,2 MB
CMYK w tabeli kolorów jest przybliżony. Do druku zamów próbny wydruk. Odpowiedników Pantone nie podajemy.
Twoja marka też może być głośna
Opowiedz mi, kogo uczysz i co ma być widać z drugiego końca sali. Zaproponuję kierunek, pokażę trzy szkice logo i dowiozę komplet plików na każdą okazję.
Zobacz ofertę dla klientów