Fundacja MultiSport

Strona, marka i duet, który zachęca do ruchu.

Fundacja miała znak, ale nie miała systemu. Zrobiliśmy dla niej identyfikację z design systemem, stronę internetową i dwie postacie brand hero.

Poznaj projekt

Punkt wyjścia

Znak był, systemu nie było

Fundacja miała swój znak, ale bez zasad, jak budować wokół niego komunikację. Każdy, kto robił materiały, czytał markę po swojemu: freelancer inaczej, marketing inaczej, więc posty, prezentacje i druki za każdym razem wyglądały inaczej.

Ułożyliśmy to w jeden system i oddaliśmy go w spójnych plikach. Dzięki nim fundacja sama pilnuje, żeby cała komunikacja mówiła jednym głosem.

Identyfikacja i design system Paleta, typografia, ikony, brandbook i szablony w Figmie
Strona internetowa Projekt i wdrożenie zgodne z WCAG, potem opieka
Brand hero Duet postaci w scenach, animacjach i 3D

Strona www

Najpierw strona, potem marka

Tu kolejność była odwrotna niż zwykle. Najpierw zaprojektowaliśmy i zbudowaliśmy nową stronę fundacji z programami w karuzeli, misją w trzech kartach i formularzami, w wersji na komputer i na telefon.

Dopiero z kolorów i typografii strony powstał key visual, a z niego brandbook i cały system marki.

Cała strona powstała zgodnie z wytycznymi dostępności WCAG. Fundacja ma programy od dzieci po seniorów, więc strona ma działać dla każdego z nich.

Stronę przygotowaliśmy do wdrożenia w infrastrukturze klienta i dalej się nią opiekujemy.

Animacja strony głównej: nagłówek, programy, „Aktywizujemy, włączamy, zmieniamy oblicze sportu”, misja, kontakt, aktualności i stopka.

Kolejność prac

Strona www Projekt na komputer i telefon, wdrożenie
Key visual Kolory i typografia przeniesione ze strony
Brand hero Dwie postacie, sceny i krótkie animacje
Brandbook 21 stron zasad, od palety po szablony
Standaryzacja Design system w Figmie, szablony i druki

Strona główna w oknie przeglądarki: nagłówek „Podnosimy jakość życia poprzez sport wszystkim grupom wiekowym” i karuzela programów. — Programy w karuzeli

Sekcja „Misja” na limonkowym tle i trzy karty z ikonami: pokonywanie barier, dostęp do infrastruktury sportowej, wsparcie i aktywizacja. — Misja w trzech kartach

Key visual i brandbook

Sześć kolorów ze strony

Paletę strony przenieśliśmy do key visual i brandbooka.

Czarne tło: granatowe ręce i nogi postaci zlewają się z czernią, więc na scenie zostają hasło i ikony.Niebieskie tło: niebieska postać schodzi ze sceny, zostaje limonkowa.Pomarańczowe tło: zostają obie postacie.Limonkowe tło: limonkowa postać schodzi ze sceny, zostaje niebieska.Różowe tło: zostają obie postacie.Jasne tło: zostają obie postacie.

Tło sceny

Czerń #161616 Niebieski #3A52BD Pomarańczowy #FF8B2F Limonkowy #E0F16C Różowy #F7CDEF Szary #F7F7F7

Postać stoi na tle w innym kolorze niż jej sylwetka.
Kształt pod ikoną zmienia kolor w obrębie palety.
Główny krój to Articulat CF. Tam, gdzie nie da się go zainstalować, zastępuje go Arial.

Hasło na scenie jest złożone Arialem, krojem zapasowym z brandbooka.

Z brandbooka

Postacie na tłach z palety

Dziesięć ikon liniowych na kolorowych kształtach: gwizdek, książka, serce z dymkiem, rękawica, serce z wykrzyknikiem i cyfry od 1 do 5. — Ikony na kolorowych kształtach

Strona brandbooka o typografii: krój Articulat CF Regular i Medium, alfabet i cyfry na niebieskim tle. — Typografia: Articulat CF

Brand hero

Duet zamiast maskotki

Hart i Wigor zawsze występują razem. Hart pokazuje, że każdy wysiłek ma sens, a Wigor zaraża energią i zachęca do pierwszego kroku.

Sceny nie pokazują samych sukcesów. Jest zadyszka, zwątpienie i doping, a dymki zostawiają miejsce na krótkie teksty.

Bieganie: Radość i zadyszka

Piłka: Gotowi do gry

Joga: Chwila spokoju

Trzepak: Zwątpienie i doping

Meta blisko: Kryzys i wsparcie

Scena Bieganie Piłka Joga Trzepak Meta blisko

W kadrach

Strona programu „Senior w dobrej formie”

Post z serii o misji fundacji: chłopiec na wózku rzuca piłkę do kosza, obok biała karta „Pokonywanie barier” z ikoną rękawicy na limonkowej gwiazdce. — Szablon posta z serii „Misja”

Koncepcja

Od rysunku do 3D

W koncepcji tę samą scenę pokazaliśmy jako rysunek i jako wizualizację 3D. Pięć finalnych scen dostało też 6-sekundowe animacje.

Rysunek 2D

Wizualizacja 3D

Wersja sceny Rysunek 2D Wizualizacja 3D

Trzy slajdy prezentacji fundacji na jasnym tle: cele i misja z niebieską postacią w opasce, wykres działań z limonkową postacią i slajd „Nasza Fundacja w mediach”.

Standaryzacja

Marka w codziennej pracy

Marketing fundacji pracuje w interaktywnym design systemie w Figmie. Ma w nim kroje, style i gotowe szablony do codziennej pracy: okładki na YouTube, posty, prezentacje, raporty i podsumowania.

Postaciom duetu zespół sam podmienia minki i ręce, a do druku czekają wizytówka i papier firmowy.

Szablon posta na różowym tle: hasło „Razem odkrywamy radość z ruchu” i biegnąca limonkowa postać. — Szablon posta

Profil fundacji na LinkedIn: różowa okładka z obiema postaciami i hasłem fundacji. — Profil na LinkedIn

Post programu „Zajęcia Multisportowe” na limonkowym tle z dużą ikoną gwizdka. — Post programu

Prezentacja podsumowująca rok

Dwie wersje papieru firmowego A4 z postaciami, które wychylają się zza krawędzi kartki. — Papier firmowy

Wizytówka fundacji: niebieski awers ze znakiem i różowy rewers z hasłem i kodem QR. — Wizytówka

Strona była dopiero początkiem

W rocznym podsumowaniu fundacja wymieniła nową stronę, nowy key visual i brand heroes wśród swoich działań.

Współpraca trwa: standaryzacja materiałów, aktualności na stronie i opieka nad jej kodem.

Klient: Fundacja MultiSport
Zakres: Branding · Strona www · Ilustracje · Animacje · UI/UX Design · Kodowanie · Panel CMS · Wdrożenie · Social media · Materiały firmowe · Prezentacje PPTX
Technologie: WordPress · ACF PRO · Gravity Forms · Adobe XD · Figma · Adobe Illustrator · PowerPoint
Online: fundacjamultisport.pl

Znak „MultiSport Fundacja” nie jest naszym projektem. W brandbooku opisaliśmy zasady jego użycia.