aphrodi.pl
Aphrodi przyszła z własnym, rozbudowanym projektem. Wdrożyliśmy go piksel w piksel, razem z CMS do portfolio i usług.
Projektowanie UI/UX z Aphrodi i wdrożenie w kodzie
Identyfikację i projekt ekranów przygotowuje Aphrodi, nasza partnerska agencja brandingowa, a makiety i klikany prototyp robimy razem z nią. Potem przenosimy projekt do kodu jako design system i budujemy na nim Twoją aplikację.
Kto co robi w projekcie
Projekt UI/UX kupujesz u nas razem z wdrożeniem, jako realizację partnerską z Aphrodi. Makiety i klikany prototyp robią obie agencje razem, a każdy etap kończy się rzeczą, którą dostajesz.
Aphrodi
Partnerska agencja brandingowa
- Identyfikacja wizualna
Logo, paleta, kroje i styl grafiki, gdy marka ich jeszcze nie ma.
- Makiety i prototyp
Układ ekranów i klikany prototyp, który pokazuje, co otwiera każdy przycisk. Robią je razem obie agencje.
- Projekt ekranów
Projekt graficzny ekranów aplikacji, w barwach marki.
Ty: projekt ekranów - Grafiki na start
Grafiki do mediów społecznościowych i banery w tej samej identyfikacji, gotowe na dzień startu.
Ty
Decyzje na każdym etapie
- Cel i użytkownicy
Opisujesz, kto korzysta z aplikacji i co ma w niej zrobić.
VulCode: zlecenie - Odbiór projektu
Akceptujesz ekrany, zanim powstanie kod. Późniejsza zmiana zakresu wymaga zgody obu stron i może zmienić wynagrodzenie oraz termin (pkt 3.3 regulaminu).
VulCode: zaakceptowany projekt - Odbiór etapów
Sprawdzasz kolejne etapy aplikacji na wersji testowej.
- Treści i dostępy
Przekazujesz teksty, zdjęcia oraz dostępy do domeny i kont, które podłączamy do aplikacji.
VulCode
Design system i wdrożenie
- Wycena i zlecenie
Na tej podstawie wyceniamy projekt i spisujemy zlecenie z zakresem, terminami i etapami płatności.
- Makiety i prototyp
Układ ekranów i klikany prototyp, który pokazuje, co otwiera każdy przycisk. Robią je razem obie agencje.
- Design system
Kolory, kroje i zaokrąglenia z projektu zapisujemy jako tokeny, a z nich budujemy komponenty interfejsu.
- Wdrożenie
Budujemy aplikację z tych komponentów i oddajemy ją etapami do odbioru na wersji testowej.
Ty: działająca aplikacja
Ten sam ekran w czterech etapach
Jeden ekran aplikacji rezerwacji od szkicu do kodu. Szkic i makietę robimy razem z Aphrodi, projekt graficzny prowadzi Aphrodi, a wdrożenie my.
- SzkicAphrodi
Układ ekranu w szarości: co na nim jest i w jakiej kolejności, jeszcze bez barw marki.
Dostajesz: Układ ekranów
- MakietaAphrodi
Makieta pokazuje, co otwiera każdy przycisk: tu dotknięcie "Umów wizytę" wysuwa formularz.
Dostajesz: Makiety ekranów
- ProjektAphrodi
Ten sam układ w barwach i krojach marki. Ten etap akceptujesz, zanim powstanie kod.
Dostajesz: Zaakceptowany projekt
- WdrożenieVulCode
Ekran w kodzie: tła, kolory i zaokrąglenia biorą wartości z nazwanych tokenów.
Dostajesz: Tokeny i komponenty w repozytorium
Wspólne projekty z Aphrodi
Prawdziwe zrzuty projektów, w których wygląd przyszedł od Aphrodi, a kod od nas.
Panel klienta Aphrodi
Ten sam układ co nasz panel klienta, w kolorach i krojach Aphrodi. Zrzut z konta demonstracyjnego.
vulcode.com
Strona, którą czytasz: projekt wizualny powstał we współpracy z Aphrodi, a aplikacja w React z dwiema wersjami językowymi jest nasza.
Design system zaczyna się od tokenów
Kolory, odstępy i zaokrąglenia mają w projekcie swoje nazwy, a każdy przycisk, pole i karta korzysta z tych nazw. Zmień kolor marki albo zaokrąglenie i zobacz, jak zmienia się cały zestaw naraz.
Wartości projektuKolor markiZaokrąglenie
- Kolor marki
- Tło strony
- Tło karty
- Tekst główny
- Tekst opisów
- Linie i ramki
Komponenty z tych wartości
ZarezerwujZobacz terminy
Pole formularza w trakcie pisaniaJan KowalskiWolne terminyStrzyżenie i modelowanie45 minut, najbliższy wolny termin jutro o 10:30.
Kontrast tekstu na przycisku: 5,9 : 1 czytelny dla każdego
Co sprawdzamy w projekcie, zanim trafi do kodu
Projekt od Aphrodi albo od Twojego grafika przechodzi te sprawdzenia, zanim zaczniemy go budować.
Wszystkie stany
Pusty widok, ładowanie, błąd i brak uprawnień mają swój ekran w projekcie, a nie są dopisywane na końcu.
Kontrast tekstu
Tekst ma co najmniej 4,5:1 kontrastu na swoim tle, według kryterium 1.4.3 WCAG 2.2. Liczymy go wzorem z wartości tokenów, nie na oko.
Biały na brand/accent z projektu6,0:1Biały na brand.accent tej strony5,8:1próg 4,5:1 dla zwykłego tekstuFokus i cele dotyku
Fokus widać na każdym elemencie, do którego da się przejść klawiaturą, a cele dotyku mają co najmniej 24 na 24 piksele, według kryteriów 2.4.7 i 2.5.8 WCAG 2.2.
przycisk z projektu: 148 na 48 pxminimum: 24 na 24 pxPrawdziwe treści
Długie nazwy, polskie znaki i angielska wersja tekstu mieszczą się bez łamania układu.
Najczęstsze pytania o projektowanie UI/UX
Odpowiedzi o podziale pracy z Aphrodi, plikach projektu i wycenie.
Czytaj dalej
Aphrodi i strony o tym, co budujemy na zaakceptowanym projekcie.
Chcesz zaprojektować interfejs przed kodem?
Napisz, kto ma korzystać z aplikacji i co ma w niej robić. Odpowiemy w godzinę z pytaniami i wyceną.