Animacje i interfejs na stronie — od przycisku po zgniecioną kartkę
Wszystko poniżej można kliknąć, przeciągnąć albo przewinąć. Tak wyglądają elementy, które wkładamy w strony klientów: proste tam, gdzie ma być prosto, i takie, których nie ma nikt, tam, gdzie strona ma zapadać w pamięć. Żadnych bibliotek, żadnych wtyczek — dlatego strony z nimi nadal otwierają się od razu.
Przy każdym przykładzie piszemy, kiedy ma sens — bo animacja ma pomagać czytać i kupować, a nie popisywać się. Poziomy: prosty (wchodzi w każdą stronę), średni (kiedy strona ma coś pokazać), zaawansowany (jedna scena, którą się zapamiętuje).
Kiedy to ma sens: zawsze. Przycisk, który lekko idzie za wskaźnikiem i ugina się przy kliknięciu, mówi „tu można kliknąć” bez żadnego napisu. Na telefonie zostaje zwykłym, dużym przyciskiem.
U nas: każde „Zamów darmowe demo” na tej stronie.
02
Przełącznik zamiast pola do zaznaczania
prosty
Kiedy to ma sens: ustawienia, zgody, filtry w sklepie. Jeden ruch kciukiem zamiast celowania w mały kwadrat; stan widać od razu po kolorze.
U nas: wybór motywu jasny / ciemny / nocny w nagłówku.
03
Karta, która się przechyla
średni
Sklep internetowy
Sklep, który sprzedaje z telefonu i nie kasuje cię za każdą sprzedaż.
od 4 800 zł · demo za darmo
Kiedy to ma sens: oferta, produkty, portfolio — wszędzie tam, gdzie kilka kart konkuruje o uwagę. Karta pochyla się za wskaźnikiem, a światło biegnie po powierzchni, więc oko wie, którą właśnie ogląda.
Szybka, ładna i wysoko w Google. Demo dostajesz, zanim zapłacisz. Więcej →
Sklep, który sprzedaje z telefonu i nie kasuje cię za każdą sprzedaż. Więcej →
Program pod twoją firmę, nie odwrotnie. Pokaz na twoich danych za darmo. Więcej →
Kiedy to ma sens: kilka wersji tej samej rzeczy: warianty produktu, cennik dla firm i osób prywatnych, trzy sposoby dostawy. Zamiast trzech ekranów — jeden, z przesuwającym się wskaźnikiem, który pokazuje, gdzie jesteś.
05
Rozwijane pytania
prosty
Kto robi najlepsze strony internetowe?
Ten, kto pokaże ci działającą stronę, zanim weźmie pieniądze, i kogo wyniki możesz sprawdzić sam, a nie w rankingu. My robimy demo za darmo do 7 dni roboczych, a nasze wdrożenia są do sprawdzenia jednym kliknięciem: klient stoi na pierwszym miejscu w Google, a strona przepisana z Wixa jest prawie cztery razy lżejsza i otwiera się od razu. Rankingi „najlepszych firm” tego nie sprawdzą — demo i Google tak.
Ile kosztuje strona internetowa?
Pracujemy w stawce 120–400 zł za godzinę, zależnie od trudności: prosta strona to zwykle od 1 200 zł, rozbudowana strona firmowa od 2 400 zł, sklep od 4 800 zł. Kwoty za twój projekt nie podajemy w ciemno — najpierw musimy wiedzieć, co strona ma robić i jaki masz budżet. Demo dostajesz wcześniej i za darmo, więc decyzję podejmujesz widząc gotową stronę, a nie obietnicę.
Kiedy to ma sens: pytania klientów, regulaminy, szczegóły oferty. Odpowiedź rozwija się dopiero po kliknięciu, więc strona jest krótka, a Google i tak widzi całą treść.
U nas: sekcja pytań na każdej stronie usługi, np. tworzenie stron.
06
Przed i po — jeden suwak, dwa ekrany
średni
klyo.plhosting
Suwak pokazuje różnicę bez przeładowania strony. Używamy go tam, gdzie dwie wersje trzeba zobaczyć obok siebie, a nie opisać słowami.
Kiedy to ma sens: remont, przeprowadzka strony, odchudzanie, nowe zdjęcia — wszędzie tam, gdzie różnicę lepiej pokazać niż opisać.
Kiedy to ma sens: wyniki, lata na rynku, liczba klientów. Liczba, która dobiega do wartości w chwili, gdy ją zobaczysz, zostaje w głowie dłużej niż ta, która stoi. Liczymy raz, bez zapętlania.
U nas: liczby w rozdziałach strony głównej — wszystkie z naszych pomiarów.
08
Wykres, który się rysuje
średni
strona z kreatora1×
ta sama u nas3,7× lżej
strona sprawdzana1×
klyo.pl30× lżej
Kiedy to ma sens: raporty, porównania, „przed i po” w liczbach. Słupki rosną, gdy wjeżdżają w ekran — bez skryptu, sam ruch strony je napędza.
Kiedy to ma sens: tła pod nagłówkami, ilustracje, zdjęcia produktów. Głębia, której nie da płaski obrazek — ale delikatna, bo ma pomagać czytać, nie rozpraszać.
U nas: zdjęcia w rozdziałach strony głównej i na wejściu stron usług.
10
Zdanie, które się pisze
prosty
Kiedy to ma sens: jedno hasło na wejściu, gdy chcesz, żeby ktoś je przeczytał do końca. Tempo jak przy pisaniu, drobne wahania — inaczej wygląda jak automat.
U nas: kod, który pisze się na wejściu strony głównej i składa w prawdziwą stronę.
Kiedy to ma sens: lista usług, miast, marek, opinii — coś, co ma być widoczne, ale nie zajmować ekranu. Zatrzymuje się po najechaniu, więc da się kliknąć.
U nas: pod wejściem każdej strony usługi.
12
Okno i powiadomienie
średni
Kiedy to ma sens: potwierdzenia („zapisano”, „wysłano”), pytania przed usunięciem, zgody. Powiadomienie znika samo; okno czeka na decyzję.
13
Pole, które podpowiada zamiast krzyczeć
prosty
Kiedy to ma sens: każdy formularz. Komunikat pojawia się dopiero, gdy opuścisz pole, a nie po pierwszej literze — i mówi, co poprawić, nie tylko, że jest źle.
U nas: formularz demo na dole tej strony.
14
Kreska, która rysuje się z przewijaniem
średni
Kiedy to ma sens: trasa, proces, oś czasu, podpis pod nagłówkiem. Linia rysuje się dokładnie w tempie przewijania — cofniesz, cofnie się razem z tobą.
Sześć rozdziałów strony głównej to sześć kartek: każda gniecie się w kulę razem z całą treścią — nagłówkiem, zdjęciem, przyciskami — a następna rozprostowuje się z tej samej kuli. Liczone na karcie graficznej w przeglądarce, bez wtyczek i bez wideo.
Kiedy to ma sens: jedna scena na całą stronę — wejście, o którym klient opowiada dalej. Nie do każdej strony: tam, gdzie marka ma zapadać w pamięć, a nie tam, gdzie ktoś szuka numeru telefonu.
16
Motyw jasny, ciemny i nocny
prosty
Cztery przyciski w nagłówku: automatycznie, jasny, ciemny, nocny. Nocny jest ciepły, nie żółty — do czytania wieczorem. Wybór zapamiętuje się w przeglądarce, a strona zmienia kolory bez przeładowania.
Kiedy to ma sens: strony, które ktoś czyta dłużej niż minutę: blog, dokumentacja, panel klienta.
U nas: przełącznik w nagłówku tej strony — spróbuj.
17
Przejście między stronami bez mrugnięcia
średni
Kliknij, a nowa strona przeniknie z tej zamiast pojawić się białym błyskiem. Wróć przyciskiem wstecz — to samo w drugą stronę.
Kiedy to ma sens: każda strona z kilkoma podstronami. Wrażenie jednej aplikacji, a pod spodem zwykłe strony, które Google czyta jak zawsze.
Start bez ryzyka
Który z tych elementów pasuje do twojej strony?
Napisz, co strona ma robić — dobierzemy proste i zaawansowane elementy tak, żeby pomagały sprzedawać. Demo dostajesz do 7 dni roboczych, za darmo i bez umowy.