KonceptProjekt koncepcyjny · konto firmowe online
Nurt: strona konta firmowego z pulpitem, który sam się składa.
To projekt pokazowy ALUK, nie zlecenie. Konto „Nurt” nie istnieje. Wymyśliłem je, żeby pokazać stronę produktu, na której ekran aplikacji jest częścią animacji, a nie zrzutem. Strona działa na nurt.madebyaluk.pl. Samą stronę wyceniam indywidualnie, po rozmowie i darmowym szkicu. Jak wyceniam. Aplikację za nią buduję osobno.
01Założenia
Co zobaczysz na stronie.
Konto dla małych firm: prognoza pieniędzy na koncie, karty dla zespołu, faktury. Produkt najlepiej tłumaczy jego ekran. Strona ma pokazać pulpit w ruchu. Ma też dać poczucie, że aplikacja jest lekka, zanim ktoś założy konto.
Założenie: jasne kolory i pastelowe przejścia. Pulpit zbudowany w kodzie, z tych samych części, które mogą trafić do aplikacji. Liczby i cennik na stronie. To najlżejsza z animowanych prezentacji, bo na starcie nie ma wideo.
01Ruchome tło z kolorów.
Tło to kilka rozmytych plam koloru, rysowanych na żywo. Stają, gdy znikną z ekranu. Tylko kolory marki, bez obrazka w tle.
02Pulpit, który się składa.
Kafelki pulpitu (saldo, prognoza, operacje, karty, faktury) na starcie luźno pływają. Gdy przewijasz, układają się w ekran aplikacji w oknie przeglądarki. Pulpit to prawdziwy kod, nie zrzut ekranu.
03Trzy funkcje i wykres.
Prognoza, karty zespołu i faktury KSeF zmieniają się twardym cięciem, gdy przewijasz. Lista stoi po lewej. Niżej wykres prognozy rysuje się, gdy przewijasz: linia, pole, dołek i druga ścieżka „po decyzji”.
04Liczniki i przełącznik cen.
Liczby dochodzą do wyniku raz, gdy je zobaczysz. Przełącznik miesięcznie/rocznie zmienia kwoty bez przeładowania strony.
02Prawdziwa strona
Jak zrobię to u Ciebie.
Prezentacja to zwykły HTML. Biblioteka animacji ładuje się z zewnętrznego serwera. Twoją stronę buduję tak, żeby łatwo było ją zmieniać i utrzymać.
Strona gotowa do rozbudowy
Dla prawdziwej firmy dokładam formularz, edycję treści albo sklep. Kod i dostępy są Twoje. Zakres ustalam z Tobą przed startem.
Skromniej niż w prezentacji
Firmom, które sprzedają innym firmom, radzę mniej ruchu. Prawdziwe ekrany, liczby i drobne reakcje na kliknięcie. Bez skaczących liter i przejmowania przewijania. Prezentacja pokazuje sufit, zwykle schodzę niżej.
Ruch z wyłącznikiem
Gdy ktoś wyłączył animacje w systemie, tło stoi w miejscu. Liczby, pulpit i wykres widać od razu. Treść działa bez JavaScriptu.
Telefon z połową efektów
Mniej kafelków, krótsza sekcja, lżejsze tło. Sprawdzam na ekranie 390 px.
03Zastosowanie
Dla kogo jest ten styl?
Strona produktu cyfrowego ma pokazać ekran i zbudować zaufanie. Prezentacja idzie w stronę pokazu. Gdy sprzedajesz firmom, zostawiam pulpit w ruchu, liczniki i wykres. Resztę wyciszam.
Ten styl pasuje
- programy w abonamencie i konta firmowe, które najlepiej tłumaczy ekran
- aplikacje przed premierą: pulpit w ruchu zamiast makiet
- narzędzia z cennikiem na stronie, gdzie liczby przekonują
Tu radzę inaczej
- produkty dla instytucji, gdzie decyduje dział zgodności: bez płynnego przewijania i długich sekcji
- strony, na których klient chce się od razu zalogować, nie oglądać
- skaczące litery i przejmowanie przewijania przy sprzedaży firmom: umiem, ale odradzam
Fakty: tylko to, co zmierzyłem
Marka jest wymyślona. Nie ma sprzedaży ani zapytań, więc ich nie podaję.- Waga przy pierwszym wejściu (1600×1000, po ekranie ładowania)
- 0,54 MB
- Biblioteki animacji
- GSAP + Lenis
04Kontakt
Taka strona dla Twojej marki?
Napisz, co robi Twój produkt i jakie masz ekrany. Dostaniesz zakres strony, termin i cenę. Jeśli potrzebujesz też aplikacji, powiem, jak to podzielić.
- Szkic jest bezpłatny i do niczego nie zobowiązuje
- Raty 30%, 40% i 30%, pierwsza dopiero po akceptacji szkicu
- Domena i hosting na Ciebie, 30 dni poprawek po starcie
Zacznij od darmowego szkicu
Kilka zdań o firmie wystarczy, resztę dopytam. Odpisuję osobiście, tego samego dnia.
Zamów darmowy szkic Umów rozmowę online