System design dla projektu edukacyjnego „Mówniki”

Zadanie projektu
Materiały kursu (zeszyty robocze, przewodniki, zadania testowe) miały unikalną treść, ale wizualnie wyglądały chaotycznie i były tworzone przez nauczycieli ręcznie „na kolanie”.
Główne zadanie: Opracować koncepcyjny styl wizualny i stworzyć elastyczny, zautomatyzowany system szablonów w Figma dla edukacyjnych PDF-ów (na podstawie materiałów „TYPY JEDNOSKŁADNIKOWYCH ZDAŃ .docx”, „EDYTOWANIE WYMAGA.pdf” oraz „WSZYSTKO O LICZNIKU.pdf”) oraz mediów społecznościowych (Instagram, Telegram).
Główne wymaganie techniczne: System ma być intuicyjny i wygodny, aby klienci mogli samodzielnie zmieniać teksty w szablonach bez pomocy projektanta, a bloki automatycznie dostosowywały się do objętości informacji.
Koncepcja wizualna: „Ekspercki punk / Zoomerski minimalizm”
Aby połączyć niepołączalne — zasady akademickie i surową ironię, wybrano styl Acid Grunge / Modern Retro z elementami cyfrowego minimalizmu.
Paleta kolorów: Sterylne białe tło zastąpiono komfortowym do długiego czytania z ekranów brudno-kremowym i jasnoszarym odcieniem. Jako baza użyto głębokiego grafitowego (ekspertność), a dla głównych akcentów i emocjonalnego wyróżnienia — firmowy neonowy różowy („pukam do twojego serca”) oraz kwasowo-zielony.
Typografia: Kontrastowa para czcionek. Akcyzowy, lekko szorstki grotesk bezszeryfowy dla chwytliwych nagłówków („SZIZA”, „ZASADA FRAJERA”, „GRYBANY KLOP”) oraz maksymalnie czysta, geometryczna czcionka o wysokiej czytelności dla dużych zbiorów zasad, testów i tabel.
Elementy graficzne: Tekstury pomiętego papieru, dymki (speech bubbles) do integracji memów, strzałki i obramowania, które imitują rysunki markerem ręcznie. Integracja ilustrowanych awatarów Jegora i Walerii jako firmowych maskotek marki.
Realizacja techniczna w Figma (Podstawa przypadku)
Zamiast zestawu statycznych obrazków klient otrzymał pełnoprawny system designu:
Auto Layout 5.0 (Inteligentne bloki): Wszystkie tabele, karty zasad i warianty testowe są skonfigurowane tak, że przy dodawaniu lub usuwaniu tekstu ramki, marginesy i sąsiednie bloki automatycznie dostosowują się. Klient nie musi niczego przesuwać ręcznie.
Figma Components (Komponenty): Stworzono podstawowe komponenty master dla płytek, wariantów odpowiedzi w testach oraz elementów dekoracyjnych. Zmiana stylu w jednym miejscu natychmiast aktualizuje wszystkie notatki kursu.
Style kolorów i tekstów: Wszystkie kolory i czcionki są zdefiniowane w systemie, co wyklucza pojawienie się przypadkowych odcieni w przyszłych materiałach.
Zawartość pakietu opracowanych szablonów
Materiały edukacyjne (Format A4 pod PDF-przewodniki i druk):
Okładka bloku teoretycznego.
Szablon strony informacyjnej (zasada teoretyczna + przykład).
Szablon tabeli porównawczej (na przykład dla odmiany liczebników od 200 do 900).
Szablon interaktywnego testu na zgodność (klasyczny format NMT).
Szablony dla Social Media (Instagram / Telegram):
Szablon karuzeli dla postów-kart (Zaczepka/Mem $
ightarrow$ Istota zasady $
ightarrow$ Wezwanie do działania).
Reklamowe makiety dla intensywów, zapowiedzi stories („zdąż zarezerwować miejsce”) oraz płytki dla opinii uczniów.
Wynik projektu
Projekt „Mównicy” zyskał wizualnie drogi, rozpoznawalny i unikalny koncepcyjny styl, który całkowicie wyróżnia ich wśród konkurencji na rynku edukacji online. Chaotyczne prace przekształciły się w profesjonalny system notatek, które uczniom „chce się przeglądać”. Przy tym nauczyciele całkowicie zamknęli kwestię designu — samodzielnie i szybko zbierają nowe materiały w Figma, koncentrując się wyłącznie na treści i metodologii.
Możesz skopiować ten szkielet i spróbować zbudować według niego swój pierwszy ekran w Figma, aby przetestować czcionki i paletę.