Urok jednej strony | Typografia, edytorstwo i design - Koło Naukowe Edytorów UŁ

W ostatnich latach strony internetowe typu single-page stały się bardzo popularne. Trzeba też przyznać, że są pewnym powiewem świeżości po wszystkich ładujących się w nieskończoność witrynach przepełnionych zawartością, wyposażonych w miliony funkcjonalności i będących swoistymi labiryntami nawigacyjnymi. W przypadku „single-page-ów” cały tzw. content znajduje się — jak sama nazwa wskazuje — na jednej stronie. Od razu po wejściu na witrynę ładują się jej wszystkie działy i są łatwo dostępne czy to przez menu, czy też przez przewijanie myszką.

Przyjrzyjmy się zatem kilku przykładom rozwiązania single-page.

Polecat


W prawym górnym menu znajduje się proste menu, dzięki któremu użytkownik zawsze wie, w jakiej sekcji się znajduje. Strona jest bogato zilustrowana, co czyni ją wyjątkową i jednocześnie angażującą. Dużą zaletą jest tutaj nadanie różnych teł poszczególnym działom, dzięki czemu nie sposób je ze sobą pomylić. Co prawda przy pierwszym „spotkaniu” strona może być nieco przytłaczająca ze względu na graficzne przeładowanie, ale po zagłębieniu się w jej zawartość wrażenie to znika.

Minus: grafika na stronie głównej powoduje, że internauta w pierwszej chwili nie wie, które elementy są interaktywne, w co można kliknąć, a co jest tylko obrazkiem.

CuriousGeneration

W przypadku tej strony mamy do czynienia z zupełnie innym podejściem do tematu, a także inną grafiką. Całość projektu jest tu oparta na eliptycznych kształtach, w które zamknięte są zarówno działy, jak i odnośniki do nich. Na górze znajduje się statyczny pasek z danymi kontaktowymi, odtwarzaczem muzycznym i newsletterem. Każda sekcja strony jest unikalna i odróżnia się kolorystycznie od reszty. Dodatkowo wszystkie są interaktywne, czyli albo otwierają wewnątrz strony kolejne funkcjonalności, albo posiadają odnośniki do zewnętrznych witryn. Menu pojawia się przy każdej sekcji, ale naprzemiennie — raz po prawej, raz po lewej stronie, dzięki czemu udaje się uzyskać płynność przejść, a także zrealizować zamysł „eliptyczności”.

Eric Johansson

Portfolio szwedzkiego grafika realizuje zupełnie inną koncepcję niż w przypadku dwóch powyższych przykładów. Tutaj przewijanie odbywa się w poziomie, a sama strona zawiera wskazówki dotyczące tego, jak się po niej poruszać (pasek do przewijania na dole, napis This site is a drag! oraz strzałki służące do wchodzenia w interakcję z zawartością). Jest to pewna forma zabawy z użytkownikiem, na dodatek utrzymana tu zostaje komiksowa konwencja. Autor jednak wziął pod uwagę, że nie wszyscy odwiedzający mogą być zadowoleni z takiego rozwiązania i dlatego dodał przycisk odsyłający do rozszerzonej i „normalnej” witryny.

Haunted Cathouse

Wracamy do przewijania wertykalnego. Tym razem jednak menu jest zadokowane na dole strony. Można dzięki niemu szybko przełączać pomiędzy poszczególnymi sekcjami. To, co w tej stronie najciekawsze znajduje się właśnie na tych pomijanych przy użyciu menu przejściach. Grafiki, jakie zostały umieszczone między działami wywołują wrażenie płynności, w logiczny sposób łączą następujące po sobie sekcje, jednocześnie ozdabiając i dopełniając graficznie witrynę.

SamWeb

Przenieśmy się na chwilę do Brazylii. Ta strona wykorzystuje ciekawy efekt przewijania horyzontalnego umieszczonego w przewijaniu horyzontalnym. Jest on widoczny w dziale Portfolio. Pierwszy poziom przejść to oczywiście przełączanie pomiędzy działami. W sekcji Portfolio dodatkowo możemy przełączać strony z projektami graficznymi. Wskazówką, że jest taka możliwość, są strzałki znajdujące się po obu stronach galerii. Ponadto jest tu też element nawigacji wertykalnej — po kliknięciu na dział Kontakt strona przesuwa się w dół, gdzie przez cały czas przeglądania zawartości witryny znajduje się formularz kontaktowy i odnośniki do portali społecznościowych.

Denny’s

Na koniec antywzór. Jest to idealny przykład na to, jak można przesadzić, szukając sposobu na zawarcie wielu informacji na jednej stronie. Witryna tej sieci restauracji wykorzystuje kombinację przewijania wertykalnego i horyzontalnego. Nie jest to jednak tak przejrzyste jak w przypadku SamWeb. Tutaj taka mieszanka powoduje raczej dezorientację i wzbudza w użytkowniku poczucie zagubienia. Bez rozwijalnego menu internauta mógłby przeoczyć wiele fragmentów strony, które są ukryte/zwinięte. Każdą poszczególną sekcję w każdym dziale trzeba rozwijać, żeby się dostać do informacji. Wszystko na tej stronie się rusza i zmienia. Nietrudno więc zaginąć w tym nawigacyjnym gąszczu. Wersja mobilna jest co prawda mocno uproszczona w porównaniu do tego, co widać w przeglądarce na komputerze, jednak mimo to nie zyskuje na przyjazności względem użytkownika, który chciałby po prostu szybko dotrzeć do informacji.

Inne przykłady stron typu single-page:

Peter Pearson | Jason Reed | Visual Box | James Garner | Couch Kumaras | Daniel Mart | Made By Grave | Werbungrockt | Legwork Studio | Bullet PR | Vintage Productions | AW Digital | 321 Akce | Deaxon

Skomentuj

  • Spotkania

    Semestr zimowy 2015/2016

    Poniedziałki, 17.30–19.00
    (tydzień B)
    sala -01 (poziom -1), Wydział Filologiczny UŁ
    ul. Pomorska 171/173

    Najbliższe spotkanie wyjątkowo:
    w terenie – "Pozytyvka" o 18:30 w czwartek 17 grudnia

    Dowiedz się więcej o spotkaniach!

  • Polub nas!