Porta.

Design system dla znaku, który Porta już miała. Na nim powstały katalog, porta.com.pl, social media i materiały dla sprzedaży.

Warsztaty strategiczne
Branding
Katalog
Strona www
UI/UX Design
Animacje
Social media
Prezentacje PPTX
Kodowanie

Klient: Porta
Branże: Architektura, Budownictwo, Projekty domów
Strona: porta.com.pl

O projekcie

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: razem z projektantką Mają Ganszyniec dzieliła ofertę 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.

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: Z ramki logo zrobiliśmy główny element identyfikacji, a wokół niej powstały siatki, ikony, rysunki i szablony. Katalog odszedł od budowlanego stylu na rzecz zdjęć z codziennego życia.
Rezultat: Design system opisany w obszernym brandbooku w Figmie. Według niego powstają katalog, porta.com.pl, social media, prezentacje i materiały do salonów.

280: stron katalogu w trzech częściach, od inspiracji po dane techniczne
10: linii wzorniczych w nowym podziale oferty
20+: projektów dla jednej marki, od warsztatów po jubileusz w Rumunii
2 500+: punktów sprzedaży, w których działa ten sam język marki

Otwarty katalog Porta na drewnianym stole, obok zielone krzesło

Dwie okładki katalogu Porta w zielonych ramach na grafitowym tle

Białe drzwi z ramiakami w jasnym przedpokoju, za nimi kuchnia z okrągłym stołem

Znak

Z nawiasów w logo zrobiliśmy ramę

Logo zostało bez zmian. Dwa zielone nawiasy pracują teraz same i obejmują zdjęcie, ikonę, slajd albo całą okładkę.

Osiem rozkładówek katalogu z liniami Modern Classic, Basic Home, Natura i innymi

Rozkładówka katalogu z linią Geometric: zdjęcie drzwi, wykończenia i rysunki

Zwinięty katalog otwarty na stronie linii Modern Classic

Okładka katalogu: Drzwi do Domu i Mieszkania — Katalog online i katalog interaktywny z animowanymi zdjęciami produktów.

Rozkładówka z liczbami o Porta i mapą Europy — Katalog online i katalog interaktywny z animowanymi zdjęciami produktów.

Rozkładówka katalogu „Drzwi stworzone do życia ze zwierzakiem”

Strona produktowa katalogu z wymiarami i wykończeniami, na niej telefon z katalogiem online

Katalog Porta otwarty na telefonie, który leży na drewnianym stole w smugach słońca

Kobieta w progu jasnego mieszkania, obok uchylone białe drzwi do sypialni

Post z nowością: białe drzwi w salonie, oznaczenia „Nowość” wzdłuż krawędzi

Post „Witaj w Strefie Architekta Porta PRO” w zielonej ramie

Ikony

22 ikony rysowane cienką linią

Ikony tłumaczą techniczne cechy drzwi: rodzaj ościeżnicy, wymiary i kierunek otwierania skrzydła, odporność na ogień, dym i wilgoć. Każda stoi na tej samej siatce, a przecięta linia nawiązuje do logo.

Przesuń kursor nad ikonami.

Zestaw ikon Porta rysowanych cienką linią

Rysunki z brandbooka: sześcioro drzwi cienką linią z zielonymi kołami ze strzałką i rysunki techniczne ościeżnic

Strona główna porta.com.pl: nowości, linie wzornicze i mapa sprzedaży — Działająca strona porta.com.pl z dopiskiem „Designed by fluostudio” w stopce.

Projekty stron porta.com.pl ułożone obok siebie — Działająca strona porta.com.pl z dopiskiem „Designed by fluostudio” w stopce.

Laptop ze stroną porta.com.pl i hasłem „Drzwi dobrze zaprojektowane”

Laptop ze stroną linii wzorniczej porta.com.pl

Plansze brandbooka Porta ułożone w siatce

Budowa znaku: logotyp w nawiasach i sygnet z literą P

Slajdy prezentacji o segmentacji oferty w zielonych ramach

Zielona karta wzornika z hasłem „Otwórz, dotknij, wybierz” na próbce okleiny

Slajd „Grid” z prezentacji koncepcji: dwie okładki na pięciu kolumnach, w jednej rama obejmuje trzy kolumny

Okładka prezentacji „Segmentacja oferty PORTA” ze zdjęciem kobiety przy stole, rama po lewej stronie

Czarne naklejki „Top kolekcje” na krawędziach drzwi w salonie

Telefon z postem Porta: zdjęcie w zielonej ramie i okładka katalogu

Dwie okładki „Strefa Architekta Porta PRO” w zielonych ramach

Drzwi z jasnego dębu na końcu korytarza z łukowym przejściem

Białe gładkie drzwi w pokoju z biurkiem i półkami

Białe drzwi ze złotą klamką w salonie z jasną boazerią i roślinami

Dębowe drzwi w wiejskiej kuchni z belkami pod sufitem

Kobieta w jasnym mieszkaniu, za nią otwarte białe drzwi — Zdjęcie z sesji do katalogu.

Mailing z hasłem „Unlock the experience” w zielonej dziurce od klucza

Wydarzenia A potem 20 lat Porta w Rumunii Identyfikacja i oprawa trzech dni jubileuszu: zaproszenie w pięciu językach, ekrany na scenę, gala i album o historii marki.

Jak to działa

Znak, siatki i katalog przed i po

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.”

Brandbook
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.”

Prezentacja koncepcji
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.”

Brandbook
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.”

Brandbook
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.”

Brandbook

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

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.”
Brandbook

Projekt Post Prezentacja Okładka

Pokaż siatkę

Post „Witaj w Strefie Architekta Porta PRO” z zieloną ramą na dwóch ostatnich kolumnach

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.

Porównaj Okładka Spis treści Drzwi ukryte Te same drzwi

Nowa okładka katalogu: kobieta oparta o ścianę obok białych drzwi, zielona rama po krawędzi — **Przed** Zdjęcie drzwi w salonie i dużo tekstu Po Człowiek w domu, rama na siatce i znak

Stara okładka katalogu: białe drzwi dwuskrzydłowe w jasnym salonie, duży napis z nazwą katalogu — **Przed** Zdjęcie drzwi w salonie i dużo tekstu Po Człowiek w domu, rama na siatce i znak

Nowy spis: 10 linii wzorniczych, każda ze zdjęciem, listą modeli i numerem strony — **Przed** 17 rozdziałów według rodzaju drzwi Po 10 linii wzorniczych ze zdjęciem każdej linii

Stary spis treści: 17 rozdziałów według rodzaju drzwi i strona z miniaturami modeli — **Przed** 17 rozdziałów według rodzaju drzwi Po 10 linii wzorniczych ze zdjęciem każdej linii

Nowa rozkładówka „Drzwi, które znikają, by uwydatnić przestrzeń” z poradami i zdjęciami aranżacji — **Przed** Rozdział o produkcie Po Potrzeba: swoboda aranżacji, z poradami

Stary rozdział o drzwiach ukrytych: zdjęcie i karta produktu — **Przed** Rozdział o produkcie Po Potrzeba: swoboda aranżacji, z poradami

Nowe otwarcie linii Modern Classic z tymi samymi drzwiami we wnętrzu — **Przed** Tabela wariantów Po Linia wzornicza i drzwi we wnętrzu

Stara strona produktu: drzwi Powietrze w tabeli wariantów — **Przed** Tabela wariantów Po Linia wzornicza i drzwi we wnętrzu

Strony potrzeb

Rozkładówka „Drzwi, które pozwalają usłyszeć siebie” o wyciszeniu wnętrza

Rozkładówka „Drzwi stworzone do życia ze zwierzakiem” z rysunkiem drzwi i zielonym kołem

Pytania i odpowiedzi

Porta i fluostudio

Co zrobiliśmy, jak i dlaczego, w krótkich odpowiedziach.

Pytania o współpracę i usługi

Co fluostudio zrobiło dla firmy Porta?

Zbudowaliśmy design system dla znaku, który Porta już miała, i zaprojektowaliśmy na nim materiały marki. Współpraca objęła ponad 20 projektów:

warsztaty strategiczne z zespołem Porta
design system: rama z logo, siatki, ikony, rysunki i oznaczenia
brandbook w Figmie
katalog drzwi na 280 stron: drukowany, angielski, interaktywny i dla inwestorów
projekt stron porta.com.pl, strony katalogu i strony kariery
social media i animacje
prezentacja o nowym podziale oferty, wzornik próbek i naklejki do salonów
Strefa Architekta Porta PRO
jubileusz 20 lat Porta w Rumunii

Jak nowa identyfikacja wpłynęła na wizerunek marki Porta?

Porta mówi dziś jednym językiem w każdym kanale: w katalogu w salonie, na porta.com.pl, w postach i w prezentacjach dla sprzedawców. Rama z logo, siatki i ikony sprawiają, że materiał Porta rozpoznaje się, zanim przeczyta się nazwę.

Katalog odszedł od budowlanego stylu na rzecz zdjęć z codziennego życia, więc marka mówi do ludzi, którzy urządzają dom. Ten sam język marki działa w ponad 2 500 punktach sprzedaży.

Czy Porta zmieniła logo?

Nie. Logo Porta jest rozpoznawalne, więc zostało bez zmian. Rozłożyliśmy je na elementy: z dwóch zielonych nawiasów zrobiliśmy ramę, w której mieści się zdjęcie, ikona, slajd albo cała okładka, a wokół niej zbudowaliśmy resztę systemu.

Kto zaprojektował katalog Porta?

Katalog drzwi Porta zaprojektowało fluostudio. Ma 280 stron w trzech częściach: od inspiracji, przez 10 linii wzorniczych, po wymiary i dane techniczne. Powstał w wersji drukowanej, angielskiej, interaktywnej z animowanymi zdjęciami produktów i w wersji dla inwestorów.

Kto zaprojektował stronę porta.com.pl?

Menu według nowego podziału oferty, strony linii wzorniczych, stronę katalogu i stronę kariery zaprojektowało fluostudio. W stopce działającej strony jest dopisek „Designed by fluostudio”.

Jak zbudować design system dla logo, które już istnieje?

Tak jak w Porta: najpierw warsztaty, na których opisujemy markę i ludzi, którzy z niej korzystają. Potem rozkładamy znak na elementy i sprawdzamy, które z nich mogą pracować same. Z nich powstają rama, siatki, ikony i zasady zdjęć, a na końcu brandbook z przykładem przy każdej zasadzie.

Czy zespół Porta może sam tworzyć nowe materiały?

Tak. Brandbook w Figmie ma pięć rozdziałów: logo, identyfikacja, kompozycje, katalog i elementy marki, a każda zasada ma przykład. Do tego są szablony postów i prezentacji, więc kolejne materiały powstają według tych samych zasad.