--- title: "Fundacja MultiSport: marka i strona z WCAG" description: "Identyfikacja Fundacji MultiSport z design systemem w Figmie, strona zgodna z WCAG i duet brand hero w ilustracjach i animacjach, który zachęca do ruchu." url: https://fluostudio.pl/projekty/fundacja-multisport/ --- ![Niebieska postać brand hero w opasce fundacji, z rękami na biodrach.](https://fluostudio.pl/media/projekty/fundacja-multisport/postac-niebieska-stoi.webp)![Limonkowa postać brand hero w opasce fundacji, z rękami na biodrach.](https://fluostudio.pl/media/projekty/fundacja-multisport/postac-limonkowa-stoi.webp) 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 1. Strona www Projekt na komputer i telefon, wdrożenie 2. Key visual Kolory i typografia przeniesione ze strony 3. Brand hero Dwie postacie, sceny i krótkie animacje 4. Brandbook 21 stron zasad, od palety po szablony 5. 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.](https://fluostudio.pl/media/projekty/fundacja-multisport/strona-www-programy.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/strona-www-programy.webp) Programy w karuzeli [![Sekcja „Misja” na limonkowym tle i trzy karty z ikonami: pokonywanie barier, dostęp do infrastruktury sportowej, wsparcie i aktywizacja.](https://fluostudio.pl/media/projekty/fundacja-multisport/strona-www-misja.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/strona-www-misja.webp) Misja w trzech kartach Key visual i brandbook ## Sześć kolorów ze strony Paletę strony przenieśliśmy do key visual i brandbooka. Tworzymy równe szanse na zdrowe i aktywne życie. 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 [![Pięć kwadratów w kolorach palety. Na niebieskim biegnie tylko limonkowa postać, na limonkowym tylko niebieska, na pozostałych obie.](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-brand-hero-na-tlach.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-brand-hero-na-tlach.webp) 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.](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-ikony.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-ikony.webp) Ikony na kolorowych kształtach [![Strona brandbooka o typografii: krój Articulat CF Regular i Medium, alfabet i cyfry na niebieskim tle.](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-typografia.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-typografia.webp) 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 ![Scena „joga”: niebieska postać medytuje w siadzie skrzyżnym, limonkowa stoi w wykroku z rozłożonymi rękami i zamkniętymi oczami.](https://fluostudio.pl/media/projekty/fundacja-multisport/brand-hero-joga.webp) Joga: Chwila spokoju ![Scena „trzepak”: niebieska postać wisi na drążku i mówi „Nie dam rady...”, limonkowa podciąga się obok i odpowiada „Nie poddawaj się! Ciśniemy!”.](https://fluostudio.pl/media/projekty/fundacja-multisport/brand-hero-trzepak-dymki.webp) Trzepak: Zwątpienie i doping ![Scena „meta blisko”: wyczerpana niebieska postać mówi „Już nie mogę...!”, a limonkowa stoi obok i dopinguje: „Hej, świetnie Ci idzie, dasz radę! Meta już blisko!”.](https://fluostudio.pl/media/projekty/fundacja-multisport/brand-hero-meta-blisko-dymki.webp) 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.](https://fluostudio.pl/media/projekty/fundacja-multisport/linkedin-pokonywanie-barier.webp) 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. ![Scena „piłka” jako płaski rysunek: niebieska i limonkowa postać z piłkami.](https://fluostudio.pl/media/projekty/fundacja-multisport/brand-hero-pilka.webp) Rysunek 2D ![Ta sama scena jako wizualizacja 3D: postacie z miękką fakturą, światłem i cieniem.](https://fluostudio.pl/media/projekty/fundacja-multisport/brand-hero-wizualizacja-3d.webp) 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”.](https://fluostudio.pl/media/projekty/fundacja-multisport/prezentacja-mockup.webp) 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ć.](https://fluostudio.pl/media/projekty/fundacja-multisport/social-media-razem-odkrywamy.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/social-media-razem-odkrywamy.webp) Szablon posta [![Profil fundacji na LinkedIn: różowa okładka z obiema postaciami i hasłem fundacji.](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-linkedin.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-linkedin.webp) Profil na LinkedIn [![Post programu „Zajęcia Multisportowe” na limonkowym tle z dużą ikoną gwizdka.](https://fluostudio.pl/media/projekty/fundacja-multisport/social-media-zajecia-multisportowe.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/social-media-zajecia-multisportowe.webp) Post programu [![Slajd „Co jeszcze zrobiliśmy w 2025 roku?” z listą oznaczoną ikonami cyfr: rozwój social mediów, nowa strona internetowa, nowy key visual i brand heroes.](https://fluostudio.pl/media/projekty/fundacja-multisport/prezentacja-podsumowanie-2025.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/prezentacja-podsumowanie-2025.webp) Prezentacja podsumowująca rok [![Dwie wersje papieru firmowego A4 z postaciami, które wychylają się zza krawędzi kartki.](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-papier-firmowy.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/brandbook-papier-firmowy.webp) Papier firmowy [![Wizytówka fundacji: niebieski awers ze znakiem i różowy rewers z hasłem i kodem QR.](https://fluostudio.pl/media/projekty/fundacja-multisport/wizytowka-awers-rewers.webp)](https://fluostudio.pl/media/projekty/fundacja-multisport/wizytowka-awers-rewers.webp) 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](https://fundacjamultisport.pl/) Znak „MultiSport Fundacja” nie jest naszym projektem. W brandbooku opisaliśmy zasady jego użycia. ## Zobacz inne projekty Widok Duże kadry Siatka - [Biurokoncept Zaprojektowaliśmy i zakodowaliśmy biurokoncept.pl: katalog ponad tysiąca mebli z konfiguratorem pCon i koszykiem zapytań.](https://fluostudio.pl/projekty/biurokoncept/) - [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.](https://fluostudio.pl/projekty/designoptyk/) - [PolTREG Rebranding spółki biotechnologicznej z GPW, strona poltreg.bio dla pacjentów, inwestorów i partnerów oraz stała obsługa.](https://fluostudio.pl/projekty/poltreg/) - [Mily Group Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.](https://fluostudio.pl/projekty/mily-group/) - [Porta Drzwi Design system dla istniejącego znaku: rama z logo, siatki, ikony, rysunki, katalog, porta.com.pl, social media i materiały dla sprzedaży producenta drzwi.](https://fluostudio.pl/projekty/porta-drzwi/) - [Grupa Dawtona Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.](https://fluostudio.pl/projekty/dawtona/) - [Itodi Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.](https://fluostudio.pl/projekty/itodi/) - [Overmax Projekt UX/UI sklepu Overmax: auta RC w filmowych ujęciach, dopracowana karta produktu, menu kategorii i test, który dobiera model.](https://fluostudio.pl/projekty/overmax/) - [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.](https://fluostudio.pl/projekty/petcuisine/) - [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.](https://fluostudio.pl/projekty/zippy-tail/) - [Intima Clinic Sześć marek medycznych w jednej grupie. Warsztaty, nazwy, identyfikacja, oznakowanie placówki, druki, animacje i strona intimaclinic.pl.](https://fluostudio.pl/projekty/intima-clinic/) - [Vee Zaprojektowaliśmy markę Vee z submarkami, stronę vee.ai, aplikacje webowe i materiały na targi, a dla myvee identyfikację i salon.](https://fluostudio.pl/projekty/vee/) ## Stoicie przed podobnym wyzwaniem? Opowiedzcie nam, co chcecie zmienić. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. Porozmawiajmy [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)