Slider ( baner ) na stronie internetowej ? 21 przykładów jak to zrobić bez niego

Jaka jest najlepsza alternatywa dla slideru na stronie głównej ?

Właściwie można powiedzieć jakie są typy konstrukcji strony gdyż wybór ten definiuje cały projekt strony internetowej pociągając za sobą konkretne rozwiązania. Zapraszamy do zapoznania się z poniższą listą gdzie mamy nadzieję te kilka przykładów pozwolą wyjść poza ramy slideru na stronie głównej.

 

I. Grafika obok tekstu – zyskaj na wysokości

 

Zaplanowanie powierzchni baneru tak by zestawić zdjęcie / przedmiot lub produkt obok hasła czy tekstu. Zyskujemy na wysokości, dodatkowo bez potrzeby przewijania strony komunikujemy to co dla nas istotne, jednocześnie całość jest czytelna i przejrzysta.

 

11_oliverbrewingco

http://oliverbrewingco.com – animowana puszka w zależności od ustawienia kursora

 

12_beamlabsinc

http://beamlabsinc.com/

 

13_primeunion

http://primeunion.io

 

14_playmag

http://www.playmag.fr/heroesoftomorrow + animacja na koszuli męższczyzny

 

15_branduber

https://brand.uber.com/ – pionowy baner – wideo, które ciekawie się ogląda również ze względu na format 🙂 , dużo miejsca na komunikację po lewej stronie, niecodzienna koncepcja ale przejrzysta i bardzo czytelna z zachowaniem dobrego usability.

 

16_healthcarecosmetics

http://healthcarecosmetics.pl/ – fantastyczna polska produkcja, właściwie nie ma się do czego przyczepić, popularny temat na stronę w idealniej formie. Dodatkowo ciekawie rozwiązana kwestia pozostawienia logo podczas przewijania strony.

 

16_lingbe

http://www.lingbe.com – pasuje również do punktu II – stron z obrazkiem w tle, w tej koncepcji dużą rolę odgrywa zestawienie zdjęcie – produkt.

 

17_elivo

http://elivo.pl/ – można i bez grafik, dlaczego by nie 🙂

 

18_ikano

http://ikano.ge/ – czysto i elegancko

 

19_memory

http://memorymirror.com/

 

199_harrys

https://www.harrys.com/

 

 

 

II. Statyczny obrazek w tle

 

Stosując odpowiedni kontrast zyskujemy dużą powierzchnię do umieszczenia krótkiego bloku tekstu, hasła, guzika wywołującego akcję u użytkownika. Zwykle stosuje się w tym rozwiązaniu dużą grafikę w tle na całą wysokość (na wzór landingpage), jednak lepszą opcją było by jej skrócenie do np. maksymalnie 60% wysokości, tak by dać użytkownikowi jeszcze dodatkowe informacje widoczne poniżej. W tej opcji również można zestawić w tle zdjęcia osobę, przedmiot po jednej stronie, hasła, teksty, guzik po drugiej.

 

21_tenslife

https://www.tenslife.com/

 

22_riiotlabs

http://riiotlabs.com/

 

23_adobe

http://adobe.com

 

24_lunarway

https://lunarway.com/

 

25_sunscreencompany

https://www.thesunscreencompany.com/

 

26_motorola

https://www.motorola.com/us/products/moto-360

 

III. Zestawienie kliku obrazków / grafik obok siebie

 

To rozwiązanie sprawdzi się jeżeli absolutnie potrzebujemy komunikować kilka odrębnych haseł, pokazać kilka działów firmy na stronie głównej. Wtedy dajemy taką możliwość użytkownikowi od razu ‘na strat’ po wejściu na stronę główną, szansa że doczeka do slajdu numer 3 jest znikoma.

 

31_airforce

https://www.airforce.com/

 

32_kinoteka

http://kinoteka.org.uk/

 

33_spa

https://www.spa.nl/

 

34_rialba

http://www.rialba.com/

 

35_motorola

http://www.motorolapolska.pl/ – strona główna stanowi stronę rozbiegową dla użytkownika, który ma możliwość od razu przejść do działu który go interesuje – proste rozwiązanie i skuteczne, głównie dla firm mających do przedstawienia bogatą ofertę czy kilka filarów działalności

 

 

IV. Inne pomysły ? czemu nie

 

Przykłady nieklasyfikujące się jednoznacznie z powyższym podziałem ale z zachowaniem wysokiej użyteczności i czytelności strony głównej.

 

41_internetowe_biuro_tlumaczen

https://dogadamycie.pl/

 

42_goodthink

http://www.goodthink.com.pl/ – strona podzielona na cztery części jednak z zachowaniem czytelności, całości dopełniają delikatne animacje po najechaniu na poszczególne bloki dające więcej informacji o danym dziale.

 

 

44_rumchata

http://www.rumchata.com/

 

45_grainandmortar

http://grainandmortar.com/ – ciekawe video w tle również przyciągnie uwagę i zatrzyma na dłużej, choć nie wszędzie się sprawdzi

 

 

46_nurturedesign

http://www.nurturedigital.com/

 

47_baseblue

http://www.baseblu.com/ – ciekawie rozwiązana kwestia baneru prostą interakcją

 

7 komentarzy
Write a comment

15 − twelve =