9 inspirujących stron typu one-page
21 wrz 2014

9 inspirujących stron typu one-page

21 wrz 2014

Nie trudno zorientować się, że jestem fanem tego typu rozwiązań (vide strona www, na której jesteś). Kiedyś strony tego typu były nie do pomyślenia. Dziś okazuje się, że poza świetnym wyglądem, dają pole do popisu dla efektów, których nie da się zastosować na typowych stronach. Co więcej, okazuje się powoli, że one-page także da się pozycjonować… Poniżej znajduje się krótka lista wybranych przeze mnie witryn, w których coś mnie ostatnio urzekło.

1. Sony – promo firmy

http://discover.store.sony.com/be-moved/

Ciekawe elementy

Bezsprzecznie najefektowniejsze są animacje składania produktów Sony z elementów, umieszczone w formie przejścia między sekcjami strony. Właściwie trudno wskazać najfajniejszą, choć mi osobiście najbardziej podoba się animacja składania głośnika.

Ogólne wrażenia

Według mnie – idealny pokaz tego, co można osiągnąć przy nielimitowanym budżecie. Sony stworzyło prawdziwie pionierską stronę, ale już na pierwszy rzut oka widać, że pracował nad nią sztab ludzi, głównie animatorów. Prawdę mówiąc, to dzieło zasługuje na osobną analizę – coś do zrobienia w przyszłości.

2. Relatos Salvajes – promo filmu

http://www.relatos-salvajes.com/

Ciekawe elementy

Na ekranie startowym (i nie tylko) – efekt paralaksy reagujący na ruch myszą, czyli coś znajomego (możesz coś podobnego zobaczyć na mojej stronie głównej). Poza tym ciekawie umieszczono obok siebie dwie wstawki filmowe i świetnie dobrano zrzuty klatek filmowych umieszczone w tłach sekcji.

Ogólne wrażenia

Widać, że efekty paralaksy polegające na kilku warstwach obrazu poruszających się w różnym tempie stają się popularne.

3. Union – strona firmowa

http://union.co/

Ciekawe elementy

Od innych stron wyróżnia ją to, że używanie kółka myszy nie powoduje przesuwania strony tak, jak w typowym oknie, ale płynnie przesuwa stronę między sekcjami.

Ogólne wrażenia

Schludnie, fajna typografia, chociaż trochę mało treści.

4. Case study aplikacji randkowej Apple

http://www.sourcebits.com/case-studies/mobile-development-iOS-dating-app-twine

Ciekawe elementy

Praktycznie każdy element na stronie posiada jakiś efekt wejścia w pole widzenia. Można by się domyślać, że to za dużo, ale tutaj jakoś pasuje…

Ogólne wrażenia

Mam wrażenie, że efekty mogłyby się zaczynać i kończyć ciut wcześniej – sprawiają czasem wrażenie trochę opóźnionych. Poza tym jest super lekko i czytelnie.

5. Amanda Conti – portfolio tancerki

http://amandaconti.com.au/

Ciekawe elementy

Wyjątkowym elementem jest oczywiście animacja Amandy na szarfie, znajdująca się po lewej stronie i sprzężona ze scrollem.

Ogólne wrażenia

Oryginalny pomysł. Poza tym ciekawe podejście do wąskich ekranów urządzeń przenośnych – użytkownik jest proszony o obrócenie ekranu o 90 stopni i oglądanie strony w trybie landscape.

6. Life of Pi – promo filmu

http://journey.lifeofpimovie.com/#!/

Ciekawe elementy

Efekty przejścia dobrane w taki sposób, że idealnie zachowana jest ciągłość opowiadanej historii.

Ogólne wrażenia

Kolejny po stronie Sony przykład tego, co można mieć za duże pieniądze. Druga sprawa – strona pokazuje, ile w dzisiejszych czasach można już upchnąć na stronie grafiki, zdjęć i animacji. Strona jest naprawdę ogromna, jak na one-page.

7. Kaber – promo firmy

http://kabertech.com/

Ciekawe elementy

Jest tu coś, co daje dużo do myślenia, jeśli chodzi o upychanie treści na tego typu stronie: lightboxy o dużej zawartości, dostępne po kliknięciu na dany produkt. zawierają opis, mnóstwo zdjęć i film.

Ogólne wrażenia

Fajny pomysł na treściwe lightboxy.

8. Lincoln – promo filmu

http://www.thelincolnmovie.com/

Ciekawe elementy

Strona one-page, która wcale nie takiej nie przypomina! Generalnie widać tu klasyczną strukturę z menu i sekcjami dogrywanymi Ajax’em. Co wyróżnia tę stronę, to fakt, że scrollowanie w dół także powoduje przejście do kolejnej sekcji.

Ogólne wrażenia

Cóż, ciekawe.

9. Red Monkeys – portfolio firmy

http://red-monkeys.de/

Ciekawe elementy

Znów dobrze znany efekt animowania warstw obrazu w różnym tempie, by wywołać efekt paralaksy. Wykorzystano tutaj narysowane elementy graficzne, zamiast powycinanych kawałków zdjęć.

Ogólne wrażenia

Bardzo przyjemny, lekki design, ALE… niestety zero responsywności – treść nieczytelna na komórce.

Zostaw komentarz
Więcej wpisów
Komentarze
  1. Yosami Luty 17th, 2016 1:07PM

    Porównanie strony typu onpage (landing page) do pełnowymiarowej strony reklamowej: http://fusionlandingpage.pl/bhje/landing-page-vs-strona-reklamowa.html

  2. Bartosz Czerwiec 29th, 2016 7:34AM

    Ze wszystkich stron właśnie ta animacja na stronie tancerki najbardziej mi się spodobała. Prosty, fajny efekt i bardzo dobre wykonanie.

Trackbacks

  1. Czy strona firmowa typu one page to dobre rozwiązanie? | EACTIVE
Komentarz

Leave a Reply to Yosami Zrezygnuj