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

by hauerpower on 04/8/2016

strona-internetowa-z-banerem-czym-zastapic

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ą

 

Hauer Mateusz - webdesigner / grafik / projektant. Pasjonat minimalizmu i funkcjonalności w projektowanych stronach internetowych.



7 komentarzy

  1. 04/13/2016Maciek says:

    Spoko zestawienie. Rozwijając temat polecam http://www.headerlove.com

  2. 04/13/2016hauerpower says:

    dzięki za linka – przyda się 🙂

  3. 04/13/2016Artur says:

    XXI wiek a Wy nadal nie nauczyliście się poprawnie tworzyć hiperłączy…

  4. 04/13/2016hauerpower says:

    nie miało być ich 🙂 ale może jednak się dodadzą

  5. 05/14/2016niepelnosprawny.org says:

    wiel z tych stron jest malo czytelnych, grafika zajmuje glowną wartosc,
    google czyta tekst

  6. 06/5/2016zeki says:

    Mimo wszystko nie znalazłem pomysłu jak pozbyć się slidera ze strony typowo informacyjnej. Jest kilka kategorii i ciężko inaczej wyeksponować nowości niż właśnie sliderem. A szukanie treści po stronie może być już uciążliwe. Ludzie wbijają na główna i muszą znaleźć nowy artykuł bez problemu, a nie przewijać stronę.

    Część pomysłów jest ciekawa choć chyba wszystkie już wcześniej gdzieś widziałem 🙂

  7. 12/14/2016Mateusz says:

    A ja już się łudziłem, że poza przykładami będzie tez bonus w postaci tutoriala, jak ciekawie zastąpić slider. Może w kolejnym artykule? ; >

Napisz: