Przykład realizacji · madetobetouched
System komunikacji wewnętrznej dla sieci sprzedaży
Sześć kategorii komunikatów, które pracownik salonu rozpoznaje w pół sekundy — po kolorze, ikonie i etykiecie. Z tego jednego systemu wynikają szablony e-mail pod Outlook, cykliczny newsletter i one-pager z instrukcją.
Marka NOVEL i wszystkie treści są fikcyjne — przygotowane jako próbka dla Państwa zlecenia.
Państwa brief → gdzie to zobaczyć w próbce
1. System wizualny 6 kategoriikolory, ikona i etykieta PL/ENG, test bez koloru01 Biblioteka ikon pomocniczych16 ikon na wspólnej siatce + 6 ikon kategorii03 2. Szablony e-mail (krótki / długi)kliknij kategorię i wariant — to działający kod pod Outlook04 3. Newsletter zbiorczyzmiany, zadania z terminami, wiedza, linki05 4. One-pagerco się zmienia, kogo dotyczy, co zrobić, od kiedy06 Pliki Figmazmienne, komponenty i wszystkie szablony — link do podglądu07Kategorie komunikatów
Każda kategoria ma kolor, unikalny kształt ikony i etykietę PL+ENG. Kolor pomaga, ale nie jest konieczny: przełącz podgląd na czarno-biały — kategorie nadal się rozróżniają.
Typografia i siatka
W mailach Outlook nie wczyta fontów z sieci, więc system opiera się na bezpiecznej parze: Segoe UI / Arial w wiadomościach i Manrope w materiałach PDF i one-pagerach. Siatka 600 px, 6 kolumn, marginesy 40 px.
Szkielet wiadomości · 600 px
Pasek kategorii zawsze na górze, potem tytuł, „co zrobić” i termin. Najważniejsza informacja mieści się w podglądzie Outlooka bez przewijania.
Ikony
6 ikon kategorii i 16 ikon pomocniczych na wspólnej siatce 24 px, linia 1,75 px, zaokrąglone końce. Eksport SVG i PNG (@1x/@2x do maili), w Figmie jako komponenty.
Skala · 16 / 20 / 24 / 32 / 48 px
Szablony e-mail
Wariant krótki (jedna sprawa, jedna akcja) i długi (Było / Jest, kroki, linki) dla każdej z 6 kategorii. Podgląd poniżej to prawdziwy kod HTML: tabele, style inline, przycisk bez obrazków — tak, jak wymaga Outlook.
One-pager z instrukcją
Odpowiada na cztery pytania: co się zmienia, kogo dotyczy, co zrobić i od kiedy. Modułowy: podsumowanie, „Było / Jest”, kroki, checklista i linki — edytowalny w Figmie.
Pliki i sposób pracy
Wszystko powyżej powstaje jako jeden system: tokeny kolorów, komponenty i szablony w Figmie, a z nich — kod HTML wiadomości.
- Figma: zmienne kolorów, komponenty ikon i etykiet (warianty dla 6 kategorii), szablony na auto layout
- Eksport ikon SVG + PNG @1x/@2x
- Mini-brandbook PDF: kiedy jaka kategoria, zasady pisania tytułów, czego nie robić
- Opcjonalnie: gotowy kod HTML wiadomości, przetestowany pod Outlook (desktop i web)
- Kick-off online i 2 rundy korekt
Wykonanie
Lulu · madetobetouched
Projektowanie stron, identyfikacji i systemów wizualnych. Projekt i kod w jednych rękach.