Błękit marki
#4989E6
Znak, akcenty i identyfikacja
Łączy logo z ilustracyjnymi detalami i wyróżnieniami. Przyciski korzystają z ciemniejszego odcienia #1E5BB5.
← Powrót do realizacji
BrandingWeb designUX/UIDevelopmentTea with Asia2026
Tea with Asia - osobista marka, dobry początek nauki
Marka i strona nauczycielki angielskiego dla dzieci i młodzieży. Wyrazisty błękit, autentyczne zdjęcia Asi i czytelna oferta prowadzą do rozmowy o pierwszej lekcji.
- Identyfikacja i osobisty ton komunikacji
- Logo, paleta kolorów i typografia
- Architektura informacji i UX/UI
- Projekt strony głównej i podstron
- Responsywna implementacja w React
- Formularze kontaktowe i wdrożenie na Netlify
Projekt w skrócie
Tea with Asia przedstawia indywidualne lekcje angielskiego w Krakowie i online. Aktualna odsłona łączy znak filiżanki i książki z nagłówkami Lora, typografią DM Sans oraz osobistymi zdjęciami Asi. Cztery strony porządkują ofertę, sposób pracy, historię nauczycielki i doświadczenie. Dwie ścieżki kontaktu pozwalają zapytać o bezpłatną pierwszą lekcję lub zadać własne pytanie.
Kontekst i problem
Tea with Asia to osobista marka nauczycielki prowadzącej indywidualne lekcje angielskiego dla dzieci i młodzieży. Jej aktualna strona łączy spokojne podejście do nauki z energią hasła „Małe kroki. Wielkie «I can!»”.
Projekt łączy identyfikację, osobisty język komunikacji, projekt interfejsu i wdrożenie. Motyw filiżanki na książce wraca w logo, błękitna paleta spaja sekcje, a prawdziwe zdjęcia Asi pozwalają poznać osobę stojącą za ofertą.
Strona główna pokazuje najważniejsze informacje. Oferta rozwija ceny i sposób prowadzenia lekcji, O mnie przedstawia historię Asi, a Doświadczenie porządkuje jej przygotowanie i praktykę. Wszystkie cztery strony prowadzą do wspólnego formularza kontaktowego.
Rodzic lub uczeń może zapytać o bezpłatne pierwsze spotkanie albo wybrać krótszą ścieżkę ogólnego pytania. Formularz zbiera dane potrzebne do rozmowy; termin lekcji jest ustalany indywidualnie.
Ograniczenia
- Osobista marka nauczycielki i oferta kierowana do rodziców oraz uczniów
- Trzy grupy wiekowe z różnym czasem i ceną zajęć
- Spójny kontakt ze strony głównej i każdej podstrony
- Wysyłka formularza zależy od konfiguracji Formspree; dostępne są także e-mail i telefon
Założenia strategiczne
- 01
Najpierw osoba
Imię, własne zdjęcia i wypowiedzi w pierwszej osobie nadają ofercie konkretną twarz. Podstrony rozwijają tę historię bez zmiany tonu na formalny życiorys.
- 02
Ciepło i konkret
Miękkiej oprawie towarzyszą ceny, długość zajęć, grupy wiekowe i opis współpracy. Rodzic może sprawdzić podstawowe warunki przed pierwszą wiadomością.
- 03
Pierwszy krok we własnym tempie
Zapytanie o bezpłatną lekcję i ogólne pytanie mają osobne warianty formularza. Użytkownik wybiera zakres rozmowy, od którego chce zacząć.
Kierunek kreatywny
Angielski przy herbacie to metafora spokojnej, regularnej rozmowy. Aktualna oprawa dodaje do niej energiczny błękit, łukowe kadry zdjęć i duże, miękkie nagłówki. Marka pozostaje osobista, ale potrafi pomieścić konkretną ofertę i doświadczenie nauczycielki.
Charakter marki
- Osobista
- Ciepła
- Cierpliwa
- Pogodna
- Czytelna
Ton komunikacji
Krótkie wypowiedzi w pierwszej osobie tłumaczą sposób pracy Asi. Hasła o małych krokach i własnym tempie przechodzą w konkretne opisy zajęć, kontaktu i współpracy z rodzicem.
Czego świadomie unikaliśmy
- Formalny ton szkolnego regulaminu
- Przeładowanie strony dekoracjami
- Presja wyboru długiego pakietu
Historia logo
Filiżanka wyrasta z otwartej książki. Para w kształcie serca i dymek rozmowy łączą ciepło spotkania z nauką oraz mówieniem. Logotyp składa nazwę krojem Lora, z wyróżnionym kursywą słowem „with”.
Książka i filiżanka
Wiedza spotyka się z codziennym rytuałem. Symbol bezpośrednio łączy nazwę marki z jej ofertą.
Serce i rozmowa
Lekka para, dymek i trzy kropki przenoszą uwagę na relację z uczniem i swobodę wypowiedzi.
Błękit z ciepłym detalem
Kilka odcieni błękitu spaja znak z interfejsem. Drobne złote elementy ocieplają kompozycję.
Znak jest zapisany wektorowo jako SVG. Pełny układ z nazwą i podpisem działa w nawigacji i stopce, a sam symbol ma osobny wariant ikony strony.
Kolorystyka
Wyrazisty błękit pozostaje kolorem rozpoznawczym. Jaśniejsze odcienie budują powierzchnie, granat porządkuje tekst, a ciepłe akcenty pojawiają się w drobnych detalach.
Granat tekstu
#15345C
Tekst i hierarchia informacji
Ciemna baza stabilizuje jasny interfejs. Pozwala zachować wyraźny tekst przy miękkiej, błękitnej oprawie.
Jasny błękit
#F2F6FD
Tło strony i jasne powierzchnie
Wraz z #DEE9FB i #A8C8F5 tworzy łagodne różnice pomiędzy sekcjami i kartami.
Ciepły akcent
#EFD182
Drobne wyróżnienia
Ociepla błękitną paletę. Jasne złote tła i niewielkie różowe oraz szałwiowe detale urozmaicają ikony i karty.
Typografia
Lora nadaje nagłówkom osobisty, spokojny ton. DM Sans przejmuje dłuższe opisy, etykiety, nawigację i formularze.
Lora
400 · 500 · 600
Nagłówki i logotyp
Małe kroki. Wielkie „I can!”
Szeryfy i kursywne akcenty podkreślają rozmowny charakter komunikacji. Duże stopnie pisma budują hierarchię wokół krótkich fraz.
DM Sans
400 · 500 · 600 · 700
Treść i interfejs
Indywidualnie. W Krakowie lub online.
Prosty krój utrzymuje czytelność kart oferty i pól formularza. Różne grubości oddzielają etykiety od dłuższych wyjaśnień.
Ścieżka użytkownika
Strona prowadzi od poznania nauczycielki do sprawdzenia warunków i wyboru formy kontaktu. Szczegóły są dostępne na podstronach bez utraty dostępu do głównego działania.
- 01
Poznaj Asię
Hero z własnym zdjęciem i hasłem o małych krokach wprowadza osobisty charakter lekcji.
- 02
Sprawdź ofertę
Trzy karty pokazują grupę wiekową, cenę i czas: 60 zł za 45 minut, 70 zł za 60 minut i 80 zł za 60 minut.
- 03
Zrozum współpracę
Trzy kroki rozpoczęcia współpracy, opis rytmu lekcji oraz FAQ wyjaśniają przebieg zajęć i kontakt z rodzicem.
- 04
Zacznij rozmowę
Wspólny dialog otwiera formularz pierwszej lekcji lub ogólnego pytania. Wybór „dla dziecka” albo „dla siebie” dopasowuje etykiety pól.
Decyzje UX/UI
- Problem
- Osobista opowieść potrzebuje konkretnych informacji o warunkach nauki.
- Decyzja
- Trzy karty cenowe: 5-9 lat / 60 zł / 45 minut, 10-13 lat / 70 zł / 60 minut i 14-19 lat / 80 zł / 60 minut.
- Uzasadnienie
- Wiek, czas i cena odpowiadają na różne pytania rodzica, dlatego są pokazane razem.
- Wpływ
- Podstawowe warunki można porównać na stronie głównej i sprawdzić szerzej w ofercie.
- Problem
- Nie każdy odwiedzający jest gotowy od razu rozmawiać o pierwszej lekcji.
- Decyzja
- Dwie akcje: zapytanie o bezpłatną lekcję i osobny formularz ogólnego pytania.
- Uzasadnienie
- Pytanie o szczegóły potrzebuje mniej pól niż zgłoszenie zainteresowania zajęciami.
- Wpływ
- Użytkownik wybiera odpowiedni zakres formularza, pozostając na przeglądanej stronie.
- Problem
- Informacje o osobie, ofercie i doświadczeniu mają różną głębokość.
- Decyzja
- Zwięzła strona główna prowadzi do trzech podstron z rozwinięciem tematów, wspólną nawigacją i kontaktem.
- Uzasadnienie
- Odwiedzający może szybko poznać całość lub zatrzymać się przy wybranym temacie.
- Wpływ
- Historia Asi, cennik i doświadczenie mają własne adresy oraz spójną oprawę.
Kluczowe sekcje
Na telefonie hierarchia treści i identyfikacja pozostają czytelne w jednej kolumnie.
Oferta na telefonie zachowuje duże nagłówki, zdjęcie i dostęp do zapytania o lekcję.
Od projektu do wdrożenia
React i Vite obsługują serwis z czterema trasami. Wspólne komponenty łączą nawigację, karty, dialogi i formularze w jeden system.
- React 19 + TypeScript + ViteKomponentowa struktura i współdzielone treści utrzymują spójność oferty oraz wariantów kontaktu.
- React Router + SEOCztery polskie adresy mają własne metadane. Angielskie aliasy prowadzą do polskich tras, a build generuje sitemapę i robots.txt.
- Tailwind CSS + Framer MotionTokeny kolorów i typografii łączą stronę główną z podstronami. Animacje uwzględniają preferencję ograniczonego ruchu.
- Dialogi i obsługa klawiaturyDialog zarządza fokusem, zamyka się klawiszem Escape i przywraca fokus po zamknięciu. FAQ korzysta z natywnych elementów details.
- FormspreePo konfiguracji formularz wysyła POST i pokazuje sukces dopiero po poprawnej odpowiedzi. Brak konfiguracji udostępnia kontakt przez e-mail i telefon.
- NetlifyOpublikowany serwis korzysta z konfiguracji hostingu SPA dla bezpośredniego otwierania podstron.
Co dostarczyliśmy
- 01Spójna marka osobista z logo filiżanki i otwartej książki
- 02System błękitów, ciepłe detale oraz typografia Lora i DM Sans
- 03Strona główna i podstrony Oferta, O mnie, Doświadczenie
- 04Trzy karty cenowe z grupą wiekową i długością lekcji
- 05Prezentacja Asi z oryginalnymi zdjęciami i opisem sposobu pracy
- 06FAQ oraz osobne warianty zapytania o lekcję i ogólnego pytania
- 07Responsywna implementacja i publikacja na Netlify
Najważniejsza decyzja
Najważniejsza była spójność osobistego tonu z praktyczną stroną oferty. Własne zdjęcia, błękit i szeryfowe nagłówki budują charakter, a ceny, długość lekcji oraz dwie ścieżki kontaktu pomagają zrozumieć następny krok. Rozwinięcie serwisu o osobne podstrony pozwoliło zachować tę samą markę przy większej ilości treści.
Strona na żywo
Tea with Asia
Następny projektHighlander - od marki do wdrożonej strony szkoły językowej
Logo, identyfikacja i strona szkoły angielskiego pod hasłem „Twój język. Twój szczyt.”. Od leśnej zieleni i typografii po interaktywny dobór kursu oraz publikację serwisu.
POROZMAWIAJMY
Porozmawiajmy o Twoim projekcie
Chcesz połączyć osobisty charakter marki z czytelną ofertą? Porozmawiajmy o Twojej stronie.