Kolorystyka

Kolory są istotnym elementem Systemu Identyfikacji Wizualnej Otodom. Nie tylko potraﬁą one wzbudzać emocje, ale także przekazać informacje, dlatego System posiada rozwiniętą gamę kolorów do wykorzystania. Wprowadzenie kolorów dodatkowych powinno zawsze iść w parze z określeniem funkcjonalności ich używania.

Wybór właściwego trybu kolorów

Specyfikacje kolorów są różne w zależności od zastosowanych mediów, dlatego ważne jest, aby używać ich właściwego trybu dla konkretnego zastosowania, aby uzyskać zamierzone wartości. Wszystkie kolory zostały opisane w najważniejszych systemach kolorów:

RGB

Do stosowania w internecie

HEX

Do stosowania w internecie

CMYK

Do stosowania w druku

PANTONE®

Do stosowania w druku

Pobierz pliki

Ostatnia aktualizacja: 2022-01-26

Paleta podstawowa

Nowa wizualność przyjęła zastany, zielono-granatowy kod kolorystyczny, z akcentem pomarańczowym i rozwinęła paletę możliwości kolorystycznych. Podstawową parą kolorów nadal pozostał Green i Navy, a kolor Orange został określony jako kolor funkcyjny, do stosowania w akcentach.

Podstawowy Green

RGB 60/210/120
CMYK 75/00/70/00
HEX 3cd278
Pantone® 3395C

Podstawowy Navy

RGB 28 / 38 / 55

CMYK 65 / 45 / 00 / 80

HEX 1c2637

Pantone® 2766 C

Funcyjny Orange

RGB 255 / 120 / 65

CMYK 00 / 60 / 75 / 00

HEX ff7841

Pantone® 165 C

Paleta dodatkowa

Paleta dodatkowa ma charakter wymienny i uzupełniający. Wprowadzenia dodatkowych kolorów powinno być przemyślane i nieść za sobą funkcjonalność. Kolor funkcyjny Orange może być wymieniany z innymi kolorami palety dodatkowej według zdefiniowanych kodów kolorystycznych, które zostały określone w kodach kolorystycznych.

Dodatkowy Violet

RGB 150 / 125 / 235

CMYK 55 / 50 / 00 / 00

HEX 967deb

Pantone® 265 C

Dodatkowy Blue

RGB 60 / 190 / 210

CMYK 70 / 00 / 20 / 00

HEX 3cbed2

Pantone® 298 C

Dodatkowy Yellow

RGB 255 / 210 / 85

CMYK 00 / 15 / 80 / 00

HEX ffd255

Pantone® 122 C

Dodatkowy Deep Teal

RGB 33 / 126 / 140

CMYK 83 / 36 / 39 / 6

HEX 217e8c

Pantone® PQ-19-4914TCX

Kody kolorystyczne

Poniższy schemat przedstawia dopuszczalne kombinacje kolorystyczne, sposoby ich łączenia oraz kolorowania akcentów i innych szczegółów.

Podstawową parą kolorów Otodom jest zielony na granatowym tle i powinien być stosowany priorytetowo, ponieważ najlepiej reprezentuje markę.

W uzupełniających kodach kolorystycznych zielony może być wymienialny na kolory funkcyjne i dodatkowe. Mogą one również służyć jako akcent, czy podkreślenie innego detalu w kontekście podstawowego kodu kolorów.

Nie wolno łączyć kolorów w inny sposób niż określony w Brandbooku. Poniższe schematy określają też zabronione parowanie kolorów.

Typografia

Drugim niezwykle ważnym elementem, który służy identyﬁkacji wizualnej jest typografia. W Identyfikacji wizualnej Otodom został użyty prosty, ale charakterystyczny i nowoczesny font bezszeryfowy Sora z biblioteki Google Fonts.

Font podstawowy: Sora

Krój pisma Sora został zaprojektowany tak, aby uchwycić ducha digitalu, czego efektem jest rodzina czcionek z elementami estetyki w niskiej rozdzielczości i wczesną typograﬁą ekranową, ale bez nostalgii, ponieważ każda decyzja była rozważana w kierunku dzisiejszego środowiska cyfrowego.

Font Stora staje się świetnym narzędziem dla interfejsów aplikacji i stron internetowych, gdzie przejrzystość i skuteczność w każdym rozmiarze jest koniecznością.

Identyfikacja wykorzystuje przede wszystkim wariant Regular do tekstów pisanych i w małej skali, oraz Semibold, który sprawdza się w nagłówkach.

Sora Thin

Thin

Sora Light

Regular

Sora Semi-bold

Semi-bold

Sora Bold

Bold

Sora Extra-bold

Extra-bold

Pobierz pliki

Google Fonts

Style typograficzne

Poniższy schemat przedstawia rekomendowane wielkości fontów do stosowania w przestrzeni cyfrowej. Może też stanowić bazę do określania wielkości fontów w materiałach drukowanych. Wydruki jednak należy zawsze sprawdzić pod kątem czytelności, a podane wielkości są tylko rekomendacją. W dobieraniu wielkości oraz krojów należy kierować się przede wszytkim czytelnością tekstów i hierarchizacją informacji.

H1 / Sora Regular + Semi-bold / Rozmiar: 72 pt / Interlinia: 87 pt

Lorem ipsum
dolor sit amet.

H2 / Sora Regular + Semi-bold / Rozmiar: 48 pt / Interlinia: 56 pt

Lorem ipsum dolor
sit amet.

H3 / Sora Regular + Semi-bold / Rozmiar: 36 pt / Interlinia: 44 pt

Lorem ipsum dolor
sit amet.

T1 / Sora Regular + Semi-bold / Rozmiar: 24 pt / Interlinia: 28 pt

Ut non ligula gravida,

commodo libero et,

elementum massa.

T2 / Sora Semi-bold / Rozmiar: 16 pt / Interlinia: 26 pt

• Aliquam non ante sed felis dictum.

• Vestibulum mollis nisi ut dui egestas.

• Sed fringilla ligula eu risus lacinia.

T3 / Sora Semi-bold / Rozmiar: 14 pt / Interlinia: 18 pt

Donec tempor neque facilisis suscipit elementum. Vestibulum pharetra rutrum
odio, at ullamcorper nisi efficitur at. Quisque ac nisi id neque iaculis viverra.

Font systemowy: Arial

W przypadku nośników lub mediów, w których wybór czcionki jest ograniczony (np. prezentacja Power Point, dokumenty Word, itp.) dopuszczalne jest używanie czcionki systemowej Arial.

Arial Regular

Regular

Arial Italic

Italic

Arial Bold

Bold

Arial Bold Italic

Bold Italic

Ikony

Istotnym elementem nowej strategii Otodom są emocje i wartości dodane, które się z nimi wiążą. Dlatego nowa Identyfikacja Wizualna również przewiduje narzędzie do ich wyrażenia. Ikony nawiązujące w sposób bezpośredni, czy też symboliczny do kluczowych wartości, fraz, czy haseł, które wyznaczają kierunek rozwoju marki Otodom i otwierają nową komunikację z odbiorcą.

Pobierz pliki

Ostatnia aktualizacja: 2022-01-26

Styl ikon

Nowy styl ikon cechuje się elastycznością i łatwością stosowania. Nadrzędną zasadą jest budowanie ikon z obłych kształtów i płaszczyzn. Ikony mogą być piktogramami, czyli bezpośrednio przedstawiać swoje znaczenie, (np. ikony kategorii) lub mogą przekazywać informację w sposób symboliczny, (np. ikona drzewa może informować o zielonych obszarach lub symbolizować działkę), a nawet przekazywać emocje poprzez stoso wanie abstrakcji (np. serce, gwiazda).

Stylistyka ikon powinna być spójna w obszarze tworzonego zestawu. Zasady zostały określone w bardzo elastyczny sposób, aby zachować możliwości tworzenia nowych ikon w przyszłości.

Ikony kategorii

Ikony kategorii są bardziej specyficzne ponieważ przekazują konkretną informację użytkownikom serwisu, lub innych podmiotów Otodom.

Ikony zostały zaprojektowane tak, aby w jasny (piktogramowy) sposób definiowały daną kategorię.

Dodatkowo kategorie zostały uzupełnione o kody kolorystyczne, które wykraczają poza dodatkową palete kolorów. Kolory te powinny być używane tylko do podkreślania kategorii i nie powinny być stosowane w szerszym zakresie.

Pobierz pliki

Ostatnia aktualizacja: 2022-01-26

Tła

Ikony i kształty mają bepośrednie zastosowanie w budowaniu teł, które będą powszechnie występowały w Identyfikacji wizualnej.

Tła wykorzystujące powierzchnie wypełnione kolorem są przełamane wykadrowanym kształtem, czy ikoną zabarwioną jaśniejszą tonacją danego koloru (90-80% nasycenia).

Pobierz pliki

Ostatnia aktualizacja: 2022-01-26

Rodzaje teł

Tło przekazuje wizualne cechy marki i jest nieodłącznym narzędziem brandingu. Identyfikacja wizualna Otodom posiada zestaw teł, które wynikają bezpośrednio z genezy symbolu.

Tła są zestawieniem 2 kształtów: prostokąta, który określa pole tła, oraz koła, które jest wkadrowane w pole.

Rozszerzenie tego mechnizmu dokonuje się przez wprowadzenie kolorów dodatkowych oraz ikon emocji zamiast wykadrowanego koła.

Tło prostokątnego pola powinno być zawsze nasycone w 100%, gdy sam kształt oscyluje pomiędzy 80-90% w zależności od kontrastu, jaki chcemy osiągnąć między tymi elementami.

Formaty teł

Tła mogą mieć dowolne rozmiary i być tworzone według uznania projektanta. Należy się kierować potrzebą wynikającą z treści, jaka ma się znaleźć na polu czy formacie.

Po zakomponowaniu potrzebnych elementów można określić pole tła, jakie będzie potrzebne do zaprojektowania kreacji.

Poniżej kompozycje rożnych formatów z uwzględnieniem przykładowych kodów kolorystycznych i teł.

Fotografie

Fotografie są potężnym nośnikiem informacji, emocji, czy nawet uczuć. Dlatego jest niezwykle istotne, aby w Identyfikacji Wizualnej używać zdjęć w sposób świadomy i przemyślany.

Zdjęcie może nieść główny przekaz, a osadzone w layoucie identyfikacji idealnie przekaże odpowiedni komunikat i podkreśli charakter marki, która go wystosowała. Warto używać słów kluczy, które zostały określone na następnych stronach, aby móc dobrać odpowiednie zdjęcie.

Nieruchomości

Podstawowym tematem przedstawianym przez zdjęcia w Identyfikacji Wizualnej Otodom są oczywiście nieruchomości. W komunikacji i brand design’ie powinny się znajdować klimatyczne fotografie mieszkań, domów, czy też apartamentowców. Pokazujmy wnętrza, ogrody, tak by uchwycić ducha każdego budynku, ponieważ mają one swój charakter. Tak samo, jak ma go osoba, która tam mieszka.

Poniżej znadziesz hasła-klucze, które pomogą CI znaleźć odpowiednie zdjęcie:

Mieszkańcy

Drugim ważnym motywem są mieszkańcy nieruchomości i sposób, w jaki doświadczają przestrzeni mieszkalnej. Każdy domator ma swój charakter, który rezonuje i przechodzi na mieszkanie, dom czy nawet ogród. Zdjęcia występujące w Identyfikacji Wizualnej powinny w oryginalny sposób uchwycić tę relację między człowiekiem a przestrzenią, w jakiej żyje.

Poniżej znadziesz hasła-klucze, które pomogą CI znaleźć odpowiednie zdjęcie:

Ilustracje

Identyfikacja Wizualna Otodom przewiduje używanie ilustracji, a nawet sposób na adaptacje rysunków, aby reprezentowały Otodom. Użycie ilustracji powinno spełniać funkcje praktyczne, ale także może być użyte dekoracyjnie.

Kategorie

Spośród ilustracji wytypowano kilka kategorii tematycznych, które są skierowane do różnych grup docelowych. Poza standardowymi ilustracjami, które przedstawiają abstrakcyjnie, lub symbolicznie dany temat, głównie w Identyfikacji Wizualnej występują scenki ilustracyjne.

Ludzie poszukujący nowego mieszkania, lub wprowadzający się już do nowego domu to główna tematyka ilustracji Otodom. Ilustracje mogą także przedstawiać agentów nieruchomości lub deweloperów w różnych ujęciach rodzajowych. Naturalną tematyką ilustracji Otodom jest architektura. Również przedstawione w charaktrerystyczny sposób ilustracje domów, szeregowców, czy innego rodzaju nieruchomości.

POszukujący

Agenci

Architektura

Inne

Wskazówki

Ilustracje przedstawione w Brandbooku są propozycją stylistyczną.

Dopuszczalne jest korzystanie z innych stylistyk ilustracyjnych przy zachowaniu kilku elementarnych wskazówek, aby zachować spójność brandingu Otodom.

Krok #1.

Krok #2.

Krok #3.

Krok #4.

Zastosowanie apli koła jako tła kompozycji.

W urządzonym pomieszczeniu scenki umieść centralnie postacie jako główni bohaterowie.

Wprowadź elementy dodatkowe pasujące do tematyki ilustracji. Wykorzystaj kolory dodatkowe.

Uzupełnij paletą kolorów pozostałe elementy sceny.

Pobierz pliki

Ostatnia aktualizacja: 2022-01-26

Kolorystyka

Wybór właściwego trybu kolorów

RGB

HEX

CMYK

PANTONE®

Paleta podstawowa

Podstawowy Green

Podstawowy Navy

Funcyjny Orange

Paleta dodatkowa

Dodatkowy Violet

Dodatkowy Blue

Dodatkowy Yellow

Dodatkowy Deep Teal

Kody kolorystyczne

Typografia

Font podstawowy: Sora

Style typograficzne

Font systemowy: Arial

Ikony

Styl ikon

Ikony kategorii

Tła

Rodzaje teł

Formaty teł

Fotografie

Nieruchomości

Mieszkańcy

Ilustracje

Kategorie

Wskazówki

Layouty