Aphrodi: strona i panel klienta agencji kreatywnej
Aphrodi to agencja kreatywna: identyfikacja wizualna, projekty interfejsów, wideo i teksty. Zbudowaliśmy jej stronę z własnym zapleczem treści i analityką oraz panel, w którym klienci agencji prowadzą projekty, płatności i polecenia.
Strona Aphrodi
Ciemna, nastrojowa estetyka z projektu Aphrodi, przeniesiona do kodu bez upraszczania: usługi, o agencji, cennik z podstronami kategorii, blog, pytania i kontakt.
Aphrodi
Projekt w kodzie piksel w piksel
Przejścia między podstronami, ruch przy przewijaniu i stany hover z projektu na każdym elemencie.Treści z własnego zaplecza
Usługi, realizacje, pytania, cennik i blog czytane z API, a prerender oddaje gotowy HTML.Po polsku i angielsku
Każda podstrona w obu językach, a każdy wpis na blogu z osobnym adresem, tytułem i opisem dla Google w każdym z nich.
Jedna identyfikacja na stronie i w panelu
Paleta, kroje i zaokrąglenia z projektu Aphrodi są zapisane w kodzie jako jeden zestaw tokenów. Strona i panel klienta mają w kodzie te same wartości, więc każdy ekran wygląda jak ta sama marka.
Paleta
- Tło#1E1511
- Sekcje#2A1C14
- Kafle#3A261A
- Ramki#543826
- Tekst#FDFBF7
- Tekst drugi#D4C5B9
- Złoto#D4AF37
- Złoto przy hover#F1D570
Kroje
- Outfitnagłówki
- Intertekst
- JetBrains Monokody, linki i numery faktur
Zaokrąglenia
- Przyciski6 px
- Karty10 px
- Panele14 px
Blog i treści bez programisty
Zespół Aphrodi prowadzi blog, realizacje i usługi sam, w panelu admina za logowaniem. Strona czyta wszystko z własnego API zaplecza.
Wpis w panelu admina
Jeden formularz na obie wersje językowe.
- Tytuł, podtytuł, zajawka i treść po polsku i angielsku
- Okładka z plików wgranych na serwer
- Kategorie bloga, które zespół tworzy sam
Szkic, potem publikacja
Wpis czeka jako szkic, dopóki zespół go nie opublikuje.
- Data publikacji ustawiana przy wpisie
- Osobny adres wpisu w każdym języku
- Tytuł i opis dla Google w każdym języku
Gotowa strona
Zaplecze podaje treści przez API, a prerender oddaje gotowy HTML.
- Usługi, realizacje, pytania, cennik i blog z jednego API
- Mapa strony generowana przez zaplecze
- Plik llms.txt i wersje JSON stron dla asystentów AI
Oferta rozpisana na podstrony
Każda z ośmiu usług Aphrodi ma podstronę z opisem i listą tego, co obejmuje, a cennik osobną kategorię z pakietami. Wszystko w obu językach.
Identyfikacja wizualna
- Logo w wersji podstawowej, monochromatycznej i negatywowej
- Paleta kolorów z kodami RGB, CMYK i HEX
- Księga znaku w PDF i pliku edytowalnym
Web design (UI/UX)
- Architektura informacji i mapa strony
- Interaktywny prototyp w Figmie
- Design system z komponentami wielokrotnego użytku
Druk i merchandising
- Projekt DTP gotowy do druku
- Projekty plakatów, roll-upów i katalogów
- Projekty koszulek, toreb, kubków i opakowań
Social media
- Szablony postów i relacji
- Kreacje reklamowe do kampanii
- Edytowalne pliki w Canvie lub Figmie
Grafiki i ilustracje
- Ilustracje wektorowe w stylu marki
- Infografiki i key visuale kampanii
- Postacie i maskotki marek
Montaż wideo
- Rolki w formacie 9:16
- Spoty reklamowe i filmy produktowe
- Korekcja kolorów, napisy i dźwięk
Modele 3D
- Modele produktów i obiektów
- Fotorealistyczne rendery i packshoty
- Modele przygotowane pod druk 3D
Copywriting
- Teksty na stronę internetową
- Opisy produktów i kategorii
- Artykuły na blog pisane pod SEO
Analityka bez skryptów z zewnątrz
Strona zapisuje swój ruch na naszym serwerze, a zespół Aphrodi czyta wyniki w panelu admina, za ostatnie 7, 30 albo 90 dni.
Co zapisuje każda odsłona
- Podstrona i język
Adres odwiedzonej podstrony i jej wersja językowa.
- Skąd przyszedł odwiedzający
Witryna, z której nastąpiło wejście.
- Kod polecający
Kod partnera, gdy wizyta zaczęła się od linku z kodem.
- Przewinięcie
Jak głęboko odwiedzający przewinął podstronę.
- Czas
Ile czasu został na podstronie.
- Sesja
Odsłony jednej wizyty połączone w całość.
Co widzi zespół w panelu admina
- Ruch w czasie
Sesje i odsłony dzień po dniu na wykresie.
- Najczęściej oglądane podstrony
Każda ze średnim przewinięciem i czasem.
- Ścieżki
Najczęstsze trasy odwiedzających przez kolejne podstrony.
- Pytania FAQ
Kliknięcia każdego pytania, według sekcji.
- Zdarzenia
Zdarzenia ze strony zliczane według typu i szczegółów.
- Ostatnia doba
Odsłony w odcinkach po pięć minut i najnowsze zdarzenia.
Panel klienta Aphrodi
Klient agencji loguje się do panelu w identyfikacji Aphrodi i ma w nim wszystko, co dotyczy jego zleceń: projekty, płatności, rozmowy z zespołem i nowości.
Pulpit
Saldo portfela, aktywne projekty, nieprzeczytane odpowiedzi i ostatnia aktywność na jednym ekranie.
Projekty
Budżet i postęp każdego projektu, a w nim informacje, harmonogram, raporty, czat z zespołem i dokumenty.
Rozliczenia
Faktury i transakcje, portfel doładowywany płatnością online i faktury opłacane z portfela.
Wsparcie
Zgłoszenia z historią rozmowy, treścią w Markdownie, załącznikami i dodatkowymi uczestnikami.
Nowości
Ogłoszenia, blog, lista zmian i plan rozwoju, z licznikiem nieprzeczytanych w menu.
Program partnerski w panelu
Każdy klient Aphrodi może polecać agencję dalej. Panel prowadzi całe polecenie, od linku po prowizję na portfelu.
Link z własnym kodem
Klient kopiuje z panelu link polecający i może zmienić kod w nim na własny.
Zniżka dla poleconego
Polecony dostaje zniżkę procentową albo kwotową, a polecenie jest ważne przez ustalony czas albo bez limitu.
Prowizja z płatności
Za płatności poleconego klienta naliczana jest prowizja, a zespół może ustawić osobną regułę dla wybranej osoby.
Portfel i historia
Prowizja trafia na portfel, z którego klient opłaca faktury, a panel pokazuje kliknięcia, poleconych i historię prowizji.
Konto i bezpieczeństwo klienta
Klient prowadzi swoje konto w panelu sam, a każda wrażliwa zmiana wymaga hasła albo linku z e-maila.
Konto
- Rejestracja
Konto zakładane adresem e-mail, który klient potwierdza linkiem.
- Dane do faktury
Nazwa firmy, NIP i adres w ustawieniach konta.
- Powiadomienia
Dla projektów, zgłoszeń, rozliczeń i nowości klient wybiera, czy dostaje je w panelu, czy e-mailem.
- Usunięcie konta
Potwierdzane hasłem i linkiem z e-maila, z czasem na anulowanie.
Bezpieczeństwo
- Reset hasła
Link na adres e-mail, gdy klient zapomni hasła.
- Zmiana hasła
Tylko z aktualnym hasłem, a nowe ma co najmniej 8 znaków.
- Zmiana adresu e-mail
Działa dopiero po kliknięciu linku wysłanego na nowy adres.
- Historia logowań
Ostatnie logowania na koncie, z urządzeniem i adresem IP.
Pytania o ten projekt
Czytaj dalej
Pozostałe case studies i usługi, w których korzystamy z tego doświadczenia.
