Moodboard – niezbędne narzędzie w procesie projektowym

„Nowoczesna”, „premium”, „minimalistyczna” czy „przyjazna” to określenia, które podczas rozmowy o projekcie mogą znaczyć zupełnie coś innego dla każdej osoby. Moodboard pomaga zamienić takie abstrakcyjne pojęcia w konkretny kierunek wizualny jeszcze zanim powstanie logo, strona internetowa, opakowanie czy kampania.

Dobrze przygotowana tablica inspiracji nie jest jednak przypadkowym kolażem ładnych zdjęć z Pinteresta. Każdy element powinien pomagać odpowiedzieć na pytanie: jak ten projekt ma wyglądać i jakie wrażenie ma wywoływać?

W tym poradniku pokazuję, czym dokładnie jest moodboard, co warto na nim umieścić, jak przygotować go krok po kroku oraz jak wykorzystuję taki kierunek przy projektowaniu stron internetowych i budowaniu identyfikacji marki.

Co to jest moodboard?

Moodboard, czyli tablica inspiracji, to uporządkowany zestaw materiałów wizualnych, których zadaniem jest określenie atmosfery i estetycznego kierunku projektu.

Może obejmować między innymi:

• fotografie,
• kolory,
• przykłady typografii,
• tekstury,
• wzory,
• ilustracje,
• ikony,
• kształty i linie,
• fragmenty layoutów,
• pojedyncze słowa opisujące charakter projektu.

Najważniejsza jest jednak nie liczba materiałów, ale wspólny kierunek, który z nich wynika.

Moodboard to nie zbiór wszystkich obrazków, które mi się podobają

Najczęstszy błąd pojawia się już podczas zbierania inspiracji.

Znajduję elegancką stronę kancelarii, kolorowy branding restauracji, futurystyczną aplikację, rustykalne opakowanie i trzy modne fotografie.

Każdy element osobno wygląda dobrze, ale razem nie tworzą jednego kierunku.

Po co tworzyć moodboard przed rozpoczęciem projektu?

Projektant i klient mogą używać tych samych słów, a wyobrażać sobie coś całkowicie innego.

Dobrym przykładem jest określenie:

Dla jednej osoby oznacza to:

• dużo białej przestrzeni,
• prostą typografię,
• minimalną liczbę kolorów,
• bardzo oszczędne animacje.

Dla innej:

• gradienty,
• ciemne tło,
• animacje 3D,
• futurystyczną typografię.

Oba podejścia mogą zostać nazwane „nowoczesnymi”. Moodboard pozwala ustalić różnicę jeszcze zanim poświęcę czas na projektowanie całego interfejsu.

Co konkretnie daje dobrze przygotowana tablica inspiracji?

W procesie projektowym wykorzystuję ją przede wszystkim do ograniczenia liczby decyzji, które później trzeba podejmować od zera.

Moodboard może pomóc:

• określić wizualny charakter marki,
• porównać kilka możliwych kierunków,
• uzgodnić estetykę z klientem,
• zawęzić paletę kolorystyczną,
• wybrać odpowiedni styl fotografii,
• ustalić charakter typografii,
• ograniczyć przypadkowe decyzje podczas dalszego projektowania,
• przekazać wspólny kierunek kilku osobom pracującym nad marką.

Nie oznacza to, że po zaakceptowaniu moodboardu nie można już niczego zmienić. Jest to kierunek, a nie techniczna specyfikacja gotowego projektu.

Co powinien zawierać dobry moodboard?

Nie istnieje jedna obowiązkowa lista. Zawartość dostosowuję do rodzaju projektu.

Zdjęcia i fotografie referencyjne

Fotografie bardzo szybko określają ogólną atmosferę.

Mogą pokazywać między innymi:

• rodzaj światła,
• kadrowanie,
• temperaturę kolorystyczną,
• ludzi lub produkty,
• poziom formalności,
• styl wnętrz lub otoczenia.

Dla marki premium mogę szukać zupełnie innych fotografii niż dla rodzinnej restauracji czy aplikacji skierowanej do nastolatków.

Paleta kolorystyczna

Nie musi jeszcze przedstawiać ostatecznych kolorów marki.

Na etapie moodboardu bardziej interesuje mnie kierunek:

Konkretne wartości HEX mogę ustalić później, gdy przechodzę z inspiracji do właściwego systemu wizualnego.

Typografia

Font jest jednym z elementów, które najmocniej zmieniają charakter projektu.

Moodboard może pokazywać np. kierunek:

• geometryczny sans-serif,
• klasyczny serif,
• duże kontrastowe nagłówki,
• delikatną typografię editorial,
• bardziej techniczny charakter,
• ekspresyjne liternictwo.

Nie oznacza to, że font widoczny na tablicy automatycznie stanie się krojem używanym w gotowym projekcie.

Tekstury, materiały i detale

Szczególnie przy brandingu, opakowaniach i projektach premium przydatne mogą być:

• papier,
• drewno,
• metal,
• szkło,
• tkaniny,
• ziarno fotograficzne,
• organiczne struktury.

Kształty i elementy graficzne

Moodboard może również określać, czy marka ma korzystać bardziej z:

Takie decyzje mogą później wpływać na ikony, przyciski, patterny czy konstrukcję sekcji strony.

Słowa określające kierunek

Lubię dodać do moodboardu kilka krótkich określeń, które pomagają sprawdzić, czy obraz faktycznie odpowiada strategii.

Przykładowo:

Jeśli któryś element tablicy zupełnie nie pasuje do tych określeń, mam dobry powód, żeby ponownie zastanowić się nad jego obecnością.

Ile elementów powinien zawierać moodboard?

Nie istnieje poprawna liczba, ale nie próbuję wypełnić tablicy setką inspiracji.

Na początku mogę zebrać bardzo dużo materiału, natomiast później robię selekcję.

Ostateczna tablica ma przede wszystkim komunikować kierunek. Jeśli zawiera za dużo podobnych zdjęć, wcale nie staje się przez to bardziej precyzyjna.

Jak stworzyć moodboard krok po kroku?

Proces zaczynam wcześniej niż samo przeciąganie zdjęć na planszę.

Gdzie szukać inspiracji do moodboardu?

Nie ograniczam się wyłącznie do projektów z tej samej branży.

Inspiracji mogę szukać w:

• Pinterest,
• Behance,
• Dribbble,
• magazynach i książkach,
• fotografii,
• architekturze,
• modzie,
• projektach opakowań,
• plakatach,
• naturze i otoczeniu,
• własnych zdjęciach i materiałach marki.

Jeśli tworzę stronę kancelarii, nie muszę więc oglądać wyłącznie innych stron kancelarii.

Mogę zaczerpnąć sposób używania typografii z magazynu, kolorystykę z architektury i sposób fotografowania ludzi z kampanii zupełnie innej branży.

Inspiracja nie oznacza kopiowania projektu

Moodboard ma pomagać określić język wizualny, a nie służyć jako lista elementów, które później odtworzę jeden do jednego.

Moodboard a prawa do zdjęć i grafik

To temat, o którym łatwo zapomnieć.

Fakt, że zdjęcie znajduje się na Pintereście, Behance, Instagramie czy w wynikach wyszukiwania, nie oznacza automatycznie, że można wykorzystać je w publicznym projekcie lub reklamie.

Trzeba rozróżnić:

Jeśli dana fotografia, ilustracja albo inny zasób ma później trafić do finalnego projektu, sprawdzam jego licencję i zakres dozwolonego wykorzystania.

W jakim programie zrobić moodboard?

Nie potrzebuję specjalistycznego programu. Najlepsze narzędzie to takie, w którym łatwo zbieram, przesuwam i porządkuję materiały.

Nie wybieram narzędzia tylko dlatego, że jest najbardziej rozbudowane. Moodboard ma przyspieszać proces, a nie stać się oddzielnym projektem wymagającym kilku dni dopieszczania.

Moodboard cyfrowy czy fizyczny?

Obie formy mają sens.

W pracy przy stronach internetowych najczęściej wygodniejsza jest wersja cyfrowa.

Łatwo ją:

• edytować,
• udostępnić klientowi,
• komentować,
• uzupełnić o linki,
• wykorzystać podczas dalszej pracy projektowej.

Moodboard fizyczny ma natomiast szczególną wartość, gdy ważne są rzeczywiste materiały, powierzchnie i faktury.

Może więc być dobrym rozwiązaniem np. przy projektowaniu wnętrz, opakowań, produktów czy materiałów drukowanych.

Moodboard w projektowaniu strony internetowej

Przy stronie WWW wykorzystuję moodboard głównie do określenia języka wizualnego, zanim zacznie powstawać właściwy design.

Mogę ustalić:

• ogólny charakter kolorystyczny,
• styl fotografii,
• kierunek typograficzny,
• charakter ikon,
• geometrię elementów,
• stopień minimalizmu,
• rodzaj wizualnych akcentów.

Przykładowo moodboard strony premium może wskazywać:

Nie określa jednak jeszcze, gdzie ma znajdować się przycisk, jaki będzie układ menu czy ile pól otrzyma formularz.

Moodboard, wireframe i projekt strony to trzy różne rzeczy

To rozróżnienie jest szczególnie ważne przy web designie.

Moodboard nie powinien więc zastępować struktury strony.

Przy projektowaniu stron internetowych estetykę łączę później z hierarchią treści, wersją mobilną, CTA i funkcjonalnością.

Piękny moodboard nie gwarantuje dobrej strony

To bardzo ważne.

Mogę stworzyć świetną tablicę pełną dużych fotografii, delikatnych szarych napisów i eksperymentalnej typografii.

Nie oznacza to, że wszystkie te rozwiązania można bezrefleksyjnie przenieść do interfejsu.

Strona nadal musi być:

• czytelna,
• logiczna,
• responsywna,
• wygodna w obsłudze,
• dostosowana do celu użytkownika,
• zaprojektowana z odpowiednim kontrastem i hierarchią.

Jeśli problem dotyczy już działającej witryny, zamiast tworzyć kolejną warstwę estetyczną warto czasami najpierw wykonać audyt UX strony i sprawdzić, gdzie użytkownik rzeczywiście napotyka bariery.

Moodboard przy tworzeniu marki

Przy brandingu tablica inspiracji pomaga przejść od ogólnych założeń do bardziej konkretnego języka wizualnego.

Proces może wyglądać tak:

Moodboard nie jest więc jeszcze identyfikacją. Jest pomostem pomiędzy opisem marki a konkretnym projektowaniem.

Jak moodboard pomaga przy projektowaniu logo?

Logo nie powinno powstawać jako całkowicie oderwany element.

Jeśli wcześniej ustalę, że marka ma być:

łatwiej mi później ocenić, czy bardzo kolorowy, kreskówkowy i dynamiczny znak rzeczywiście zmierza w dobrym kierunku.

Dlatego moodboard dobrze łączy się z późniejszym procesem projektowania logo .

Moodboard w komunikacji z klientem

Największą wartością tablicy nie zawsze jest sama inspiracja.

Czasem najważniejsza jest możliwość bardzo wczesnego powiedzenia:

Taka korekta jest dużo tańsza na etapie kilkunastu inspiracji niż po zaprojektowaniu całej strony internetowej.

Jak zbierać feedback do moodboardu?

Pytanie:

jest zbyt szerokie.

Wolę pytać:

• Który z tych elementów najlepiej oddaje charakter firmy?
• Czy zdjęcia są zbyt formalne czy odpowiednie?
• Czy ten kierunek wygląda wystarczająco profesjonalnie?
• Czy kolorystyka pasuje do obecnych klientów?
• Które elementy zupełnie nie pasują do marki?
• Czy całość wydaje się bardziej premium, dostępna czy techniczna?

Im bardziej konkretne pytanie, tym bardziej użyteczna odpowiedź.

Czy warto przygotować kilka moodboardów?

Tak, szczególnie jeśli na początku istnieją dwa lub trzy sensowne kierunki.

Mogę przygotować np.:

Takie porównanie jest często bardziej użyteczne niż wrzucenie wszystkich trzech estetyk na jedną tablicę.

Po wyborze można rozwinąć jeden kierunek znacznie dokładniej.

Moodboard a style tile – jaka jest różnica?

Moodboard jest bardziej koncepcyjny. Pokazuje klimat i inspiracje.

Style tile jest już bliżej finalnego designu. Może przedstawiać:

• konkretne kolory,
• rzeczywiste fonty,
• wygląd przycisków,
• pola formularza,
• ikony,
• przykładowe nagłówki.

W prostym projekcie nie zawsze potrzebuję każdego z tych etapów osobno, ale warto rozumieć ich funkcje.

Moodboard a brand book – to również nie jest to samo

Moodboard służy przede wszystkim do poszukiwania i ustalania kierunku.

Brand book powstaje wtedy, gdy elementy marki są już ustalone i trzeba opisać zasady ich używania.

Jeśli marka jest już zaprojektowana, kolejnym krokiem może być więc przygotowanie brand booka , który porządkuje logo, typografię, kolory i sposób używania identyfikacji.

Moodboard w social mediach

Tablica inspiracji może być również dobrym punktem wyjścia do stworzenia spójnego profilu.

Mogę określić:

• styl zdjęć,
• rodzaj grafik edukacyjnych,
• kolorystykę,
• sposób używania typografii,
• stopień minimalizmu,
• format elementów dekoracyjnych.

Nie oznacza to, że każdy post musi wyglądać identycznie.

Przy prowadzeniu social media dla firm spójność rozumiem raczej jako zestaw zasad, dzięki którym różne materiały nadal wyglądają jak komunikacja tej samej marki.

Moodboard może być osobny dla konkretnej kampanii

Marka może mieć stałą identyfikację, a jednocześnie tworzyć dodatkowy moodboard dla konkretnej:

• sesji zdjęciowej,
• kampanii produktowej,
• premiery,
• eventu,
• kolekcji,
• kampanii sezonowej.

Taki kierunek powinien jednak nadal pozostawać rozpoznawalnie związany z główną marką, jeśli taki jest cel kampanii.

Moodboard przed sesją zdjęciową

To jedno z bardzo praktycznych zastosowań.

Zamiast przekazać fotografowi informację:

mogę pokazać:

• preferowane kadry,
• rodzaj światła,
• kolorystykę,
• ubiór,
• tło,
• poziom formalności,
• zbliżenia i szersze ujęcia.

Dzięki temu moodboard staje się narzędziem komunikacji, a nie tylko inspiracją projektanta.

Czy AI może pomóc stworzyć moodboard?

Tak. Narzędzia generatywne mogą być przydatne podczas poszukiwania wizualnych kierunków, których trudno znaleźć w gotowych materiałach.

Mogę przykładowo testować:

• rodzaj fotografii,
• połączenie materiałów,
• styl wnętrza,
• ogólną atmosferę kampanii,
• nietypowe zestawienia kolorystyczne.

AI nie zastępuje jednak decyzji, jaki kierunek jest właściwy dla marki.

Dziesięć efektownych obrazów wygenerowanych w różnych stylach nadal może stworzyć bardzo niespójny moodboard.

Moodboard nie zastępuje późniejszego testowania czytelności i dostępności

Na tablicy świetnie może wyglądać jasnoszary tekst na kremowym tle.

W gotowym interfejsie taki zestaw może jednak nie zapewniać odpowiedniej czytelności.

Dlatego na dalszym etapie osobno sprawdzam:

• kontrast tekstów,
• wielkość fontów,
• hierarchię,
• stany przycisków i linków,
• wersję mobilną,
• czytelność formularzy.

Moodboard określa kierunek wizualny. Nie powinien być traktowany jako dowód, że wszystkie pokazane na nim rozwiązania są gotowe do bezpośredniego wdrożenia.

Najczęstsze błędy przy tworzeniu moodboardu

• Zbieranie wyłącznie rzeczy, które osobiście mi się podobają.
• Brak określenia odbiorcy projektu.
• Mieszanie kilku zupełnie różnych stylów na jednej tablicy.
• Umieszczanie zbyt dużej liczby niemal identycznych zdjęć.
• Skupienie wyłącznie na kolorach.
• Brak typografii lub kierunku fotograficznego.
• Traktowanie moodboardu jak gotowego projektu.
• Kopiowanie jednego projektu zamiast wyciągania z niego inspiracji.
• Brak selekcji po pierwszym etapie zbierania materiałów.
• Brak krótkiego opisu, dlaczego dane elementy zostały wybrane.
• Projektowanie strony według moodboardu bez uwzględnienia UX.
• Zakładanie, że każde zdjęcie znalezione w internecie można później wykorzystać komercyjnie.
• Dopracowywanie samej tablicy bardziej niż właściwego projektu.

Przykład: moodboard dla marki dietetycznej

Załóżmy, że marka ma kierować ofertę do osób, które chcą poprawić sposób odżywiania, ale nie interesuje ich komunikacja oparta na restrykcyjnych dietach.

Najpierw określam charakter:

Na moodboardzie mogą pojawić się:

• jasne naturalne fotografie jedzenia,
• dużo światła dziennego,
• ciepłe neutralne tła,
• delikatne akcenty kolorystyczne,
• czytelna nowoczesna typografia,
• zaokrąglone organiczne formy.

Celowo mogę natomiast odrzucić:

• agresywną czerwień,
• ciemne sportowe fotografie,
• krzykliwe napisy „TRANSFORMACJA”,
• estetykę kojarzącą się z ekstremalną dietą.

Dzięki temu moodboard nie tylko pokazuje, co chcę wykorzystać, ale również pomaga ustalić, czego świadomie unikam.

Przykład: moodboard dla strony eksperta B2B

W przypadku konsultanta lub specjalisty charakter może być zupełnie inny:

Kierunek może wtedy wykorzystywać:

• duże nagłówki,
• portretowe zdjęcia eksperta,
• ograniczoną paletę,
• dużo przestrzeni,
• mocne liczby i dane,
• proste geometryczne akcenty.

To daje mi znacznie konkretniejszą bazę do projektowania niż samo zdanie: „strona ma wyglądać profesjonalnie”.

Czy moodboard jest potrzebny przy każdym projekcie?

Nie traktuję go jako obowiązkowego dokumentu, który musi powstać zawsze.

Jeśli klient ma już:

• dobrze opracowany brand book,
• ustaloną identyfikację,
• gotowy system UI,
• jasne zasady fotografii i komunikacji,

osobny moodboard może niewiele wnosić.

Jest szczególnie użyteczny wtedy, gdy:

• marka powstaje od początku,
• planowany jest rebranding,
• klientowi trudno opisać oczekiwany styl,
• rozważamy kilka różnych kierunków,
• dużo osób ma pracować nad jednym projektem.

Moja checklista dobrego moodboardu

• Wiem, jaki projekt ma powstać.
• Znam główną grupę odbiorców.
• Mam kilka słów opisujących charakter projektu.
• Materiały tworzą jeden czytelny kierunek.
• Nie ograniczyłem się wyłącznie do konkurencji.
• Na tablicy znajdują się przykłady fotografii.
• Widać kierunek kolorystyczny.
• Widać charakter typografii.
• Elementy graficzne są ze sobą spójne.
• Nie mam kilkudziesięciu prawie identycznych inspiracji.
• Potrafię wyjaśnić, dlaczego wybrałem najważniejsze elementy.
• Wiem również, czego w projekcie chcę unikać.
• Moodboard nie kopiuje jednego konkretnego projektu.
• Nie traktuję zdjęć referencyjnych automatycznie jako materiałów do publikacji.
• Mogę pokazać tablicę innej osobie i wyjaśnić kierunek bez długiego tłumaczenia.
• Moodboard pasuje do celu biznesowego, a nie tylko do mojego gustu.
• Po jego zaakceptowaniu wiem, jaki powinien być następny etap projektu.

Dobry moodboard zamienia „podoba mi się” w konkretny kierunek

Największą wartością tablicy inspiracji nie jest samo zebranie estetycznych zdjęć.

Chodzi o przejście:

Dzięki temu późniejsze decyzje nie muszą powstawać całkowicie od zera.

Moodboard daje punkt odniesienia, ale nie zastępuje projektowania. Dopiero kolejne etapy przekładają wybraną atmosferę na logo, stronę internetową, social media i pozostałe materiały marki.

Moodboard – najczęstsze pytania