Typ projektu: edukacyjny / stworzony w ramach własnej praktyki
Zakres: logo, identyfikacja wizualna, mockupy, strona internetowa
Opis projektu
Projekt stworzony w ramach własnej praktyki i nauki projektowania graficznego. Celem było zaprojektowanie spójnej identyfikacji wizualnej oraz strony internetowej dla fikcyjnej marki „Catfee” – kawiarni inspirowanej koncepcją tzw. kocich kawiarni, w których goście mogą spędzać czas w towarzystwie kotów.
Nazwa marki łączy w sobie słowo cat (kot) oraz końcówkę słowa coffee, tworząc przyjazne i zapadające w pamięć brzmienie. Projekt miał oddać klimat miejsca, które jest jednocześnie relaksujące, przytulne i nietuzinkowe.Charakterystyka logo
Logo przedstawia sylwetkę kota z zawiniętym ogonem, który służy jako podstawka dla filiżanki kawy. To połączenie dwóch kluczowych elementów marki – kotów i kawy – w jednej, spójnej graficznej metaforze. Logo zostało zaprojektowane w stylu minimalistycznym, przy użyciu czerni jako koloru bazowego, co dodaje mu elegancji i kontrastu. Font w logotypie jest miękki, zaokrąglony i lekko retro, co podkreśla przyjazny charakter marki.
Paleta kolorystyczna
W projekcie zastosowano ciepłą, naturalną kolorystykę, inspirowaną kawą i wnętrzami kawiarni:
#212121
#505050
#F5E9DA
Typografia
Typografia została dobrana z myślą o zrównoważeniu klimatu retro i nowoczesności: Forte.
Strona internetowa
Strona została zaprojektowana jako one page, z prostym, przejrzystym układem. Składa się z następujących sekcji:
- O nas – krótka informacja o idei kawiarni.
- Menu – aktualne ceny kaw i przekąsek.
- Galeria – zdjęcia domowych ciast.
- Kontakt – dane kontaktowe, godziny otwarcia, media społecznościowe.
Strona została w pełni zakodowana ręcznie w HTML, CSS i Bootstrapie, a następnie opublikowana na GitHub Pages. Projekt nie korzystał z kreatorów stron, co pozwoliło na pełną kontrolę nad kodem i estetyką. https://magdalenakita.github.io/Catfee/
Proces projektowy
- Wybór branży i analiza konkurencji.
- Opracowanie palety kolorystycznej.
- Projekt logo – praca nad symbolem i typografią.
- Stworzenie wizualnych materiałów marki (wizytówka, papier firmowy, inne zastosowania).
- Zaprojektowanie wyglądu strony.
- Zakodowanie strony w HTML, CSS i Bootstrap.
Efekty
Projekt został zaprezentowany na różnorodnych mockupach, aby pokazać potencjalne zastosowanie logo i strony internetowej. Logo przedstawiono na kubkach, szybie, czy papierze firmowym. Strona została pokazana na różnych urządzeniach, aby pokazać, że jest przystosowana do różnych urządzeń.
