Skip to content
klyosoftware house
Demo Napisz
  • Start
  • Animacje i interfejs

Pokaz — wszystko działa naprawdę

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.

Siedemnaście przykładów

Od prostego do zaawansowanego

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).

01

Przycisk, który reaguje

prosty

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.

U nas: karty projektów na stronie realizacji.

04

Zakładki z suwakiem

prosty

Szybka, ładna i wysoko w Google. Demo dostajesz, zanim zapłacisz. 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
Strona klyo.pl — widok, który czytasz
hosting.klyo.pl — nasz drugi serwis
klyo.pl hosting

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ć.

U nas: przeprowadzka z Wixa i prześwietlarka stron.

07

Liczby, które rosną na oczach

prosty
lżejsza od strony, którą sprawdzaliśmy
lżejsza po przeprowadzce z Wixa
0.miejsce w Google dla klienta

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

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.

U nas: porównania w artykule o Wixie.

09

Paralaksa — warstwy z różną prędkością

prosty

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ę.

11

Przewijany pasek

prosty

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

Tak wygląda okno, które nie przeszkadza

Jedna decyzja, jeden przycisk, reszta strony przyciemniona. Zamyka się klawiszem Esc i kliknięciem obok.

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ą.

U nas: trasy w projekcie Routence.

15

Zgnieciona kartka i kula z papieru

zaawansowany

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.

Zobacz na stronie głównej

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ę.

Przejdź do usług

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.

Pierwszy krok
0 zł
Widzisz efekt
do 7 dni
Odpowiadamy w
1 dzień roboczy

Kreator otworzy się tutaj, z już zaznaczoną usługą. Kilka pytań, z których większość to jedno kliknięcie — bez telefonu i bez zakładania konta.

Zaktualizowano