Korzyści wynikające ze stworzenia moodboardu, określmy - czym jest mooboard?
Moodboard to z ang. „tablica nastroju”, czyli najogólniej rzecz ujmując – to co mamy w głowie, w kontekście projektowania graficznego czy chociażby stron internetowych. Jest to zbiór inspiracji, które w mniejszy lub większy sposób powinny określać styl wizualny do którego dążymy. Moodboard to także doskonałe narzędzie komunikacji wizualnej pomiędzy Klientem a projektantem. W konkretny sposób twórczy, pozwala nam przejść od „suchego” briefu w bardziej zawężone oczekiwania stylistyczne. W największym skrócie możemy przyjąć, że jest to „kolaż” tego co nam się podoba.
Dlaczego warto poświęcić czas na moodobard zanim zabierzemy się za właściwy projekt strony www?
Dobrze przygotowany moodboard pozwala określić cel projektu, czyli to, co docelowa strona ma osiągnąć i na jakich odbiorców jest nastawiona. Stworzenie takiej tablicy inspiracji pozwala nam jasno sprecyzować oczekiwania względem projektu wizualnego i niewątpliwie pozwoli na szybkie wypracowanie określonego stylu. Spójność stylistyczna jest w projektowaniu stron internetowych niezwykle kluczowa i przekłada się na profesjonalny wygląd gotowej strony www. Umożliwia także wypracowanie klarownej wizji, co w dalszej perspektywie ułatwia zrozumienie pomiędzy projektantem a klientem. Moodboard to opowieść, przedstawienie nastroju w sposób namacalny, który ma przemawiać do odczuć odbiorcy docelowego.
W przypadku pracy kilku osób nad jednym projektem, moodboard jasno pokazuje czy ogólne wizje do siebie pasują i ze sobą współgrają. Jeśli tak się jednak nie dzieje, jest to widoczne gołym okiem, że różne elementy nie pasują do siebie i będzie konieczna ich weryfikacja lub selekcja.
Opracowanie moodboardu to także oszczędność czasu, a co za tym idzie – finansów. Sama konstrukcja tablicy jest „nieformalna” i w dowolny sposób może być szybko edytowana, czy rozbudowywana zarówno przez projektanta, jak i klienta (w zależności od przyjętego procesu projektowego). Stworzenie moodboardu pozwala także uniknąć niepotrzebnych kosztów związanych z poprawkami nad zaprojektowanym „w ciemno” dużym układem wizualnym strony www.
Dlaczego warto przeglądać i inspirować się projektami innych?
Nie trzeba zawsze wymyślać koła na nowo, zwłaszcza jeśli już istnieje coś, co jest bliskie naszym oczkiwaniom. Oczywiście inspirując się innymi projektami nie kopiujemy, a jedynie szukamy czegoś, co jest bliskie oczekiwanemu stylowi, a następnie dopasowujemy to pod nasze cele tworząc zupełnie nową jakość. Kreatywne podejście do inspirowania się (nie tworzenia plagiatu) pozwala nam spojrzeć nieco szerzej na temat, przełamać pewne ograniczenia, stereotypy i być może również naszą wcześniejszą wizję. To pozwoli nam na bardzo dużą oszczędność czasu i szybsze wypracowanie oczekiwanej wizji projektu strony internetowej.
Jakie cenne informacje powinien zawierać moodboard dla projektanta odpowiedzialnego za projektowanie strony internetowej?
„Tablica inspiracji” powinna zawierać takie elementy jak:
Obrazy, fotografie, infografiki, grafiki wektorowe, ikony, które dobrze odzwierciedlają naszym zdaniem „atmosferę” towarzyszącą danemu produktowi lub usłudze.
Kolorystyka – czyli paleta barw pierwszo i drugoplanowa. Konkretne kolory symbolizują różne emocje i mogą mieć różny przekaz, dlatego tak ważny jest ich przemyślany dobór. W przypadku moodboardu przydatną praktyką może okazać się umieszczenie fragmentów lub całych zdjęć i grafik, na których są zawarte przestrzenie barwne, które chcielibyśmy odwzorować w projekcie docelowej strony internetowej.
Typografia, czyli przykłady „czcionek” (a precyzyjnie mówiąc – fontów), które również będą pasowały do naszej koncepcji. Bez względu na to czy wybrany font będzie w nowoczesnym stylu lub bardziej klasycznym, dekoracyjnym, ważne jest, aby pamiętać o wyborze nie więcej niż 2 rodzajów fontów. Oczywiście we wstępnej fazie może być ich więcej, jednak w filnalnej wersji musi nastąpić ich selekcja. Większa ilość fontów wpłynie negatywnie na czytelność i przejrzystość naszej strony internetowej.
Już na tym etapie ważne jest również pochodzenie fontu – czy jest on zaprojektowany z myślą o użyciu w internecie, czy jest darmowy, a jeśli nie – to ile będzie kosztował zakup licencji na jego wykorzystanie. Dobrą praktyką w przypadku zastosowania typografii w projektowaniu stron internetowych jest wskazanie fontów alternatywnych, jakie mają zostać użyte w przypadku, jeśli z jakiegoś powodu nasze fonty nie będą mogły zostać załadowane.
W przypadku moodboardu możemy wskazać nie tylko rodzaj pisma, ale i jego wielkość/proporcje względem np. nagłówka, czy tekstu uzupełniającego (body).
Właściwy dobór fontów pozwoli nam zachować czytelność, przejrzystość projektu strony internetowej i w znacznym stopniu wpłynąć na jej atrakcyjność wizualną.
Wzory, tekstury, które stanowią elementy uzupełniające, takie jak np. tło czy elementy dekoracyjne. Również w tym przypadku można się oprzeć na już istniejących elementach oddających przede wszystkim styl na jakim nam zależy. Może to być dosłownie wszystko co nas otacza – tekstura tkaniny, zdjęcie wzoru znajdującego się na ozdobnej poduszce, cokolwiek, co zwróciło naszą uwagę i uważamy, że może dobrze komponować z pozostałymi elementami moodboardu.
Inne inspiracje
Pozostałymi elementami może być absolutnie wszystko, co naszym zdaniem dobrze oddaje „mood” projektu. Mogą to być nie tylko „wycinki” tekstu czy grafik, fragmenty interfaceów konkretnych portali czy aplikacji, ale nawet utwór muzyczny czy videoklip. I choć przeważnie strony są pozbawione ścieżek dźwiękowych, to jednak ten rodzaj oddawania klimatu może być również bardzo przydatny dla projektanta przy tworzeniu stylu wizualnego strony internetowej.
Pomysły do tablicy inspiracji można czerpać zewsząd. Może to być np. zrobione smartfonem zdjęcie konkretnej reklamy w sklepie, opakowania pasty do zębów, koloru owocu czy fotografia oddająca konkretne emocje. To może być absolutnie wszystko. Ważne jest, aby były to pomysły spójne zmierzające w jednym kierunku. Jeśli zależy nam na minimalistycznym wyglądzie strony www, nie zamieszczajmy na moodboardzie kolorowych motywów pełnych detali i ornamentów.
Dobrym źródłem inspiracji mogą być ilustrowane magazyny czy książki. Jednak jeśli poruszamy się głównie w cyfrowym świecie przydatne będą takie portale jak popularny Instagram, Pinterest, Behance, Dribble, SiteInspire, Awwwards lub przeglądanie wybranych realizacji. Tutaj lista inspiracji jest nieskończona.
W przypadku banków zdjęć, tzw. serwisów stockowych, również mamy szeroki wybór. Od płatnych typu Shuttersock, po serwisy zawierające w dużej mierze bezpłatne grafiki i fotografie, takie jak: Freepik, Pixabay, Pexels czy Unshplash. Szczerze polecamy zaglądać do tych dwóch ostatnich serwisów, ponieważ zawierają one nieco więcej zdjęć z innym podejściem do fotografii komercyjnej.
Przy wyborze kolorystyki mogą być przydatne takie narzędzia jak Coolors, które generują konkretne zestawienia kolorystyczne na podstawie wskazanego koloru głównego lub zdjęcia.
Szukając konkretnych wzorów typografii można się inspirować fontami od Google, DaFont, MyFonts, Adobe Fonts, Fontesk, Font Squirrel czy konkretnych studiów specjalizujących się w tworzeniu typografii jak Atipo Foundry, TypeType i wielu innych. Polecamy poświęcenie temu zajęciu trochę czasu i poeksperymentowanie na tym polu.
Skąd brać inspiracje do moodboaru?
Z samego moodboardu można wydzielić konkretne 3 elementy, takie jak: moodboard (tablicę nastroju), styleboard (konkretniejsze przykłady pasujące do moodboardu, które można zastosować w opracowaniu projektu) i colorboard (czyli określone zestawienia kolorystyczne – również pasujące do moodboardu). W naszej definicji moodboardu, możemy jednak przyjąć, że wszystkie 3 elementy, mogą być zawarte na jednej tablicy.
Bez względu na załączone materiały, pamiętajmy by moodboardu nie traktować dosłownie. Np. w przypadku obrazów, nie wybieramy konkretnych, a jedynie te, które odzwierciedlają scenerię jaką chcemy przez niego wykreować. Zbyt dosłowne podejście do tematu moodboardu mogłoby stać się przeszkodą w stworzeniu czegoś zupełnie nowego i świeżego. Pamiętajmy, że to „wzory”, a nie zero jedynkowe wytyczne.
Spójrzmy na przykładowy moodboard, co zawiera i jakie elementy mogą być istotne dla projektanta przy tworzeniu strony www
Poniżej zamieszczamy przykład moodboardu oczami projektanta, czyli jakie praktyczne informacje można wydobyć z ogólnej koncepcji wypracowanej z Klientem. W tym przypadku są to takie rzeczy takie jak konkretny wybór typografii, określenie kolorystyki, stylistyki zdjęć, a nawet kształtu kursora.
W jakim programie stworzyć moodboard? Jakie narzędzia mogą być przydatne?
Moodboard może powstać dosłownie nawet na kartce papieru, przy użyciu nożyczek, kleju i kilku magazynów, z których powycinamy konkretne elementy. Możemy także wykorzystać tablicę kortową lub inne podobne narzędzie. Oczywiście oba powyższe rozwiązania wiążą się z problemem przeniesienia do świata cyfrowego, więc potraktujmy to bardziej jako przykład :). Z racji szybkiej możliwości edycji zachęcamy jednak do tworzenia moodboardu w wersji cyfrowej.
Gdy już korzystamy z urządzeń typu tablet, laptop, smartfon, przyda się takie narzędzie jak Photoshop, Illustrator lub darmowe rozwiązania – Canva, Figma czy Miro. Większość projektantów stron internetowych korzysta właśnie z programu Figma, stąd zalecamy przyjrzenie się bliżej temu rozwiązaniu. Jego intuicyjny interface pozwoli każdemu klientowi już po kilku chwilach sprawnie się w nim poruszać. Skoro można pracować na jednym narzędziu razem z projektantem, to z całą pewnością jest to pomysł godny przemyślenia.
Prezentacja, feedback i akceptacja projektu moodboard
Gdy moodboard jest już spójny i zawiera wszystkie porządane przez nas elementy, dobrze jest jeszcze raz spotkać się z klientem i go omówić. Sam moodboard to świetny punkt wyjścia do jasnego określenia i wypracowania właściwego stylu strony internetowej. Konstruktywny feedback ze strony klienta pozwala szybko i sprawnie edytować naszą tablicę. Pamiętajmy, że równie istotnym elementem co konsultacje z klientem, jest finalna akceptacja przez klienta wypracowanego stylu.
Konkretne korzyści wynikające z użycia moodboardu w procesie tworzenia strony internetowej
Pierwszą korzyścią jest niewątpliwie jasna i klarowna wizja stylistyczna, która pozwoli projektantowi dobrze odzwierciedlić oczekiwania klienta, a klientowi da pewność, że dobrze się zrozumiał z agencją lub osobą odpowiedzialną za wygląd naszej przyszłej strony www. Transparentna komunikacja pomiędzy projektantem a klientem oparta na konkretnych przykładach jest nie do przecenienia.
Moodboard jako „elastyczna” tablica pozwala szybko eksperymentować z różnymi koncepcjami wizualnymi, nawet z poziomu smartfona na spacerze lub przy kawie na mieście.
Bezsporną zaletą moodboardu jest również jego prosta i niesformalizowana konstrukcja. Na etapie tworzenia moodboardu nikt nie oczekuje, że będzie on pixel perfect.
Podsumowanie - moodboard to lepsze zrozumienie projektanta z klientem, a także oszczędność czasu i pieniędzy
Moodboard to nie tylko przydatne narzędzie, ale przede wszystkim kreatywny proces, który pozwala nadać właściwy kierunek projektowaniu strony internetowej. Dobrze zaprojektowany i zaakceptowany przez klienta moodboard, to jasne wskazówki dla projektanta i pewność dla klienta, że projektant dobrze poczuł nasze oczekiwania.
Projektując stronę www w oparciu o wcześniej przygotowany moodboard możemy uniknąć także niepotrzebnych kosztów związanych z przeprojektowaniem dużego layoutu, który nie powstał w oparciu o żadne jasne wytyczne wizualne.
