Porta
Znak został. Wokół niego zbudowaliśmy nowy język marki.
Porta produkuje drzwi w fabrykach w Polsce i w Rumunii i sprzedaje je w ponad 2 500 punktach. Przyszła do nas w czasie dużych zmian w ofercie: razem z projektantką Mają Ganszyniec porządkowała ofertę i dzieliła ją na 10 linii wzorniczych. Nowa oferta potrzebowała nowej komunikacji. Logo było rozpoznawalne, więc zostało, a całą resztę zbudowaliśmy wokół niego.
Zobacz, co zrobiliśmy- Cel
- Uporządkować komunikację pod nowy podział oferty. Katalog miał być jednocześnie narzędziem sprzedaży, przewodnikiem z inspiracjami dla klientów i podręcznikiem dla sprzedawców.
- Rozwiązanie
- Logo i zieleń zostały. Z ramki znaku zrobiliśmy główny element identyfikacji, a wokół niej powstały siatki, ikony, rysunki, oznaczenia i szablony. Katalog odszedł od budowlanego stylu na rzecz zdjęć z codziennego życia.
- Efekt
- Design system dla znaku, który już był, opisany w obszernym brandbooku w Figmie. Według niego powstają katalog, porta.com.pl, social media i materiały dla sprzedaży.
Identyfikacja w ruchu
Cały system w jednym filmie
Film zaczyna się od samych nawiasów, z których składa się znak. Potem pokazuje okładki katalogu, rozkładówki, stronę, posty, wizytówki, wobblery i naklejki do salonów.
Współpraca
Ponad 20 projektów dla jednej marki
- 280 stron katalogu w trzech częściach, od inspiracji po dane techniczne
- 4 wersje katalogu: drukowana, angielska, interaktywna i dla inwestorów
- 4 serwisy i strony: porta.com.pl, strona katalogu, kariera i Porta PRO
- 30+ materiałów na jubileusz w Rumunii, każdy w dwóch językach
- 5 języków animowanego zaproszenia na jubileusz
- 1 design system: brandbook w Figmie, ikony, rysunki, szablony postów i prezentacji
Do tego stała obsługa: posty, banery i materiały na bieżąco.
Misja marki z warsztatów
Nasze produkty są cichymi bohaterami Twojej codzienności.
Warsztaty
Jeden katalog, trzech różnych czytelników
Na warsztatach z zespołem Porta opisaliśmy misję, wartości i osobowość marki, a potem ludzi, którzy biorą katalog do ręki. Każdy z nich czyta go inaczej, więc katalog prowadzi od lekkich stron z inspiracjami do coraz bardziej technicznych.
Urządza mieszkanie. Zaczyna od zdjęć wnętrz i dopiero potem wybiera linię i wykończenie.
Stoi z klientem w salonie. Od razu przechodzi do linii wzorniczych, wymiarów i danych technicznych.
Dopiero poznaje ofertę. Czyta katalog od początku do końca i uczy się z niego całej marki.
-
01 Inspiracje
-
02 Linie wzornicze
-
03 Produkty i dane
Big idea
Znak na części
Logo zostało bez zmian. Rozłożyliśmy je na elementy i z nich zbudowaliśmy cały system.
-
01
Znak
Logo Porta to napis zamknięty w dwóch zielonych nawiasach. Klienci i sprzedawcy dobrze je znają, więc niczego w nim nie zmienialiśmy.
„Charakterystyczna dla logo PORTA jest minimalistyczna ramka (symbolizująca skrzydła drzwiowe) zamykająca logotyp w zwartej bryle.”
-
02
Dwa skrzydła
Każdy nawias to skrzydło drzwi. Odsunęliśmy je od napisu i wydłużyliśmy, tak że razem tworzą ramę. Mieści się w niej zdjęcie, ikona, slajd albo cała okładka.
„Motyw został wykorzystany w postaci samego kształtu (bez zmian), delikatnej ramki wokół grafiki (np. ikonek) lub jako ramka wokół kompozycji.”
-
03
Klamka nowego otwarcia
Do dwóch skrzydeł dołożyliśmy koło ze strzałką. Na rysunkach drzwi jest tam, gdzie klamka, i pokazuje kierunek otwierania. Na stronie, w postach i prezentacjach to przycisk, który zaprasza dalej.
„Możliwe jest używanie koła, które na zasadzie kontrastu stosowane jest w CTA.”
-
04
Siatka
Rama wyznacza siatkę. Okładka ma pięć kolumn, a odstęp między nimi i margines mają grubość ramy. Rama może objąć jedną kolumnę albo trzy.
„Dobrą praktyką jest zastosowanie tej samej grubości dla ramki i odległości pomiędzy kolumnami.”
-
05
Okładka
Z tych elementów składa się okładka katalogu: zdjęcie z codziennego życia, rama na trzech kolumnach i znak nad dwiema pozostałymi.
„Okładka katalogu zaprojektowana jest na układzie 5-kolumnowym.”
Zostało
- Logo
- Zieleń Porta
Doszło
- Rama i cienka rama
- Siatki na 5 i 12 kolumn
- Koło ze strzałką
- System ikon
- Rysunki drzwi
- Oznaczenia produktów
- Taśma reklamowa
- Zasady zdjęć
- Szablony postów i prezentacji
- Styleguide strony
Rama
Rama pracuje wszędzie
Raz jest samym znakiem, raz cienką ramą wokół ikony albo zdjęcia, raz obejmuje całą okładkę, slajd albo kartę wzornika.
Siatka
Pięć kolumn w poście, dwanaście w prezentacji
Siatka wynika z ramy. Posty i okładki stoją na pięciu kolumnach, a materiały z dużą ilością treści, takie jak prezentacje, na dwunastu. Włącz siatkę i zobacz, jak układ trzyma się kolumn.
„Podstawą jest układ 5-kolumnowy i wynika on z zastosowania nawiasu po obu stronach w kompozycji symetrycznej.”
Katalog
Katalog, który prowadzi jak dobry sprzedawca
Najważniejszy materiał marki. Odeszliśmy od budowlanego stylu na rzecz zdjęć z codziennego życia. Pierwsze strony są lekkie, kolejne coraz bardziej techniczne, a na końcu sprzedawca znajduje każdy wymiar i wykończenie.
- 280
- stron w trzech częściach
- PL i EN
- dwie edycje językowe
- Online
- wersja interaktywna z animowanymi zdjęciami produktów
Katalog online
Wersja interaktywna prowadzi prosto do produktu, pozwala powiększać próbki kolorów i zdjęcia drzwi, a wybrane zdjęcia są animowane.
Przed i po
Ta sama oferta, nowy katalog
Stary katalog dzielił ofertę na 17 rozdziałów według rodzaju drzwi. Nowy zaczyna od potrzeb, takich jak cisza w domu, swoboda aranżacji czy życie ze zwierzakiem, a potem prowadzi przez 10 linii wzorniczych.
Po
Przed
Po
Przed
Po
Przed
Po
Przed
Strony potrzeb
Dla sprzedaży
Ten sam język w ponad 2 500 punktach sprzedaży
Nowy podział oferty trzeba było wytłumaczyć sprzedawcom. Zaprojektowaliśmy prezentację o nowej segmentacji i szablon do kolejnych, wzornik próbek, który klient może wziąć do ręki, i naklejki wyróżniające najważniejsze kolekcje w salonie.
Strony
porta.com.pl w nowym języku
Zaprojektowaliśmy menu według nowego podziału oferty, strony linii wzorniczych, stronę katalogu i stronę kariery. To zrzuty strony, która dziś działa, z dopiskiem „Designed by fluostudio” w stopce.
Drzwi w domu
Katalog i strona mówią zdjęciami z codziennego życia, a nie z hurtowni budowlanej.
Brandbook
Obszerny brandbook w Figmie
Obok katalogu to najważniejsze narzędzie marki. Ma pięć rozdziałów: logo, identyfikacja, kompozycje, katalog i elementy marki. Każda zasada ma przykład, więc każdy, kto projektuje dla Porta, wie, jak użyć ramy, siatki, zdjęć i ikon.
Ikony i rysunki
Ikony i rysunki zbudowane jak znak
Ikony tłumaczą techniczne cechy drzwi: rodzaj ościeżnicy, wymiary i kierunek otwierania skrzydła, odporność na ogień, dym i wilgoć. Rysunki pokazują drzwi cienką linią, a zielone koło w miejscu klamki mówi, w którą stronę się otwierają.
„Minimalistyczne ikony zbudowane cienką linią podkreślają techniczny aspekt marki. Ikony zaprojektowane zostały na siatce. Subtelnym detalem nawiązującym do marki jest przecięta linia (na wzór logo).”
Ościeżnica
Skrzydło
Właściwości i dodatki
Najedź na ikonę, żeby narysować ją jeszcze raz.
Animacje
Ruch w tym samym systemie
Animacje stały się ważną częścią nowej komunikacji. W prosty i szybki sposób pokazują, co zmieniło się w katalogu i na stronie: ramy się otwierają, okładka składa się z kolumn, a produkty pokazują się w ruchu.
Wydarzenia
A potem 20 lat Porta w Rumunii
Fabryka w Aradzie świętowała jubileusz. Zaprojektowaliśmy identyfikację i oprawę trzech dni: zaproszenie w pięciu językach, ekrany na scenę, galę i album o historii marki.
Zobacz jubileusz
Design system dla znaku, który już był.
Logo zostało takie, jakie znają klienci. Dołożyliśmy do niego ramę, siatki, koło ze strzałką, system ikon i rysunków, oznaczenia, taśmę reklamową, zasady zdjęć i szablony.
Wszystko jest nowe i dopracowane, a przede wszystkim działa w codziennej pracy: według tych zasad powstają kolejne katalogi, posty, prezentacje i strony.
- Klient
- Porta
- Zakres
- Warsztaty, identyfikacja, brandbook, katalogi, strony, animacje, social media, materiały dla sprzedaży, wydarzenia
- Online
- porta.com.pl
Zobacz inne projekty
-
Grupa Dawtona
Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.
-
Regamet
Odświeżony znak, księga znaku z 48 ikonami i 56-stronicowy katalog pokryć dachowych dla producenta z Mielca.
-
Itrons
System pięciu submarek zbudowany z jednego heksagonu, identyfikacja wizualna i strona itrons.pl dla krakowskiej firmy instalacyjnej.
-
Septima Design
Odświeżyliśmy logo krakowskiej pracowni wnętrz i zaprojektowaliśmy jej identyfikację, stronę oraz katalog 26 kart produktów.
-
Mily Group
Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.
-
Itodi
Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.
-
Overmax
Projekt UX/UI sklepu Overmax: auta RC w filmowych ujęciach, dopracowana karta produktu, menu kategorii i test, który dobiera model.
-
Design Optyk
Rodzinna sieć salonów optycznych premium: identyfikacja bez złota, materiały do salonów i nowy sklep połączony z magazynami sześciu z siedmiu salonów.
-
Fundacja MultiSport
Identyfikacja z design systemem w Figmie, strona zgodna z WCAG i duet brand hero, który zachęca do ruchu.
-
PetCuisine
Zbudowaliśmy od zera markę producenta karmy z Grupy Dawtona: od nazwy i hasła, przez opakowania w 12 smakach i stronę, po stoiska na targach w Europie.
-
Zippy Tail
Zbudowaliśmy markę Zippy Tail od zera: nazwę, strategię, etykiety ośmiu suplementów dla psów i kotów, paczkę i projekt sklepu.
-
Intima Clinic
Sześć marek medycznych w jednej grupie. Warsztaty, nazwy, identyfikacja, oznakowanie placówki, druki, animacje i strona intimaclinic.pl.
Stoicie przed podobnym wyzwaniem?
Opowiedzcie nam, co chcecie zmienić. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.
Social media
Seria zamiast pojedynczych postów
Posty stoją na tej samej siatce co okładka katalogu. Rama raz jest widoczna, raz tylko wyznacza miejsce na tekst. Dzięki temu posty o różnych liniach i funkcjach wyglądają jak jedna seria.