Prezentacja pojedynczych stron internetowych
Projektując stronę internetową z minimalną liczbą stron i niezbyt dużą ilością treści, projekt jednostronicowy może być innowacyjnym sposobem na rozstawienie witryny.
Jednokartkowe witryny często wykorzystują JavaScript i Flash, a także HTML i CSS, aby dopasować więcej treści na stronie bez znacznego wydłużenia czasu ładowania.
Nawigacja musi być szczególnie rozważana, jeśli chodzi o strony z jedną stroną, aby upewnić się, że odwiedzający mogą bez problemu wrócić do strony głównej strony i przejść z dowolnej sekcji do dowolnej innej sekcji. Często osiąga się to za pomocą lepkich nagłówków lub powtarzania nawigacji w każdej sekcji.
Poniższe witryny są doskonałymi przykładami pojedynczych stron internetowych. Są zarówno użyteczne, jak i estetyczne i w pełni wykorzystują jednostronicowy format.
Roaaar
Strona Roaaar zawiera link "powrót do góry" u dołu każdej sekcji, co ułatwia odwiedzającym powrót do nawigacji w nagłówku.
Duplos autorstwa Ricardo Mestre
Strona Duplos przyjmuje inne podejście, umieszczając główną treść na dole strony. Nawigacja prowadzi cię dalej w górę strony, a nie w dół.
Grzegorz Kozak
Motyw latarni morskiej przebiega tutaj na całej długości strony, przechodząc z miejsca na dół do poziomu gruntu. Banery wiszące z okien na latarni powracają na górę strony, na której znajduje się nawigacja.
Kalejdoskop
Strona Kaleidoscope wykorzystuje różne obrazy tła i tekstury za każdą sekcją witryny. To odróżnia każdy obszar zawartości od każdego innego obszaru zawartości.
Dan Scotton
Krótkie strony, takie jak ta z minimalną zawartością, działają szczególnie dobrze. Nawigacja pozostaje na pasku bocznym po przewinięciu strony.
Viktor Shvaiko
Ta strona używa poziomego suwaka, aby załadować nową zawartość, przesuwając się po innej zawartości, aby dotrzeć do strony, do której nawigowałeś. Pasek nawigacji pozostaje na górze niezależnie od strony, na której się znajdujesz.
Jon Rundle
Proste, osobiste witryny profilowe, takie jak ten, doskonale nadają się do projektowania jednej strony. Ikony i akcentowane kolory dodają nieco bardziej wizualnego zainteresowania projektowi, który w przeciwnym razie jest bardzo neutralny.
Jason Reed
Używanie efektu akordeonu do wyświetlania nowych treści działa dobrze, gdy zawartość nie jest zbyt długa. Zilustrowany obraz nagłówka i szara i pomarańczowa kolorystyka sprawiają, że strona jest wyjątkowa.
Ćwierkać CC
Korzystanie z tekstur i prostych ilustracji sprawia, że witryna Tweet CC wygląda atrakcyjnie, a jednocześnie jest prosta w monochromatycznej kolorystyce.
Układ PSD
Witryny oferujące proste usługi mogą działać szczególnie dobrze w formacie jednej strony. Nie ma zbyt wiele informacji do zaoferowania, a przechowywanie wszystkiego na jednej stronie ułatwia potencjalnym klientom szybkie znalezienie potrzebnych informacji.
Feelwire
Witryna Feelwire utrzymuje rzeczy proste i oferuje dodatkowe informacje z podpowiedziami. Białe tło zachowuje minimalistyczny charakter, a odważne ikony dodają wizualnego zainteresowania.
Gorący Meteor
Witryna Hot Meteor wykorzystuje typograficzną, szarą i czerwoną konstrukcję. Nagłówek jest lepki, zachowując nawigację u góry strony.
Mia Makila
Witryna Mia Makila jest nieco inna niż większość innych witryn tutaj użytych, wykorzystując bardziej tradycyjny 3-kolumnowy projekt. JavaScript jest używany do wyświetlania grafiki w każdej kategorii.
Costas Theoharis
Ta strona używa interesującego efektu suwaka, a każda sekcja (nagłówek, główna treść i stopka) przesuwają się niezależnie od siebie.
Javan Makhmali
Zastosowany tutaj wzór siatki nie jest często spotykany w projektach jednostronicowych. Ale z dużą ilością białej przestrzeni dobrze jest uwzględnić wiele różnych treści w bardzo opływowym projekcie.
Team Nomad
Konstrukcja jest prosta i prosta, a 2-kolumnowa konstrukcja dobrze pasuje do większej zawartości na stronie, nie sprawiając, że wygląda ciężko.
Jorge Fino
Strona Jorge Fino skupia się na projektowaniu. Nawigacja nie istnieje (poza przewijaniem), a informacje kontaktowe znajdują się zarówno w nagłówku, jak i stopce.
Moly Yim
Oto kolejna strona bez nawigacji. Jest to jednak rozsądna długość, więc nie jest to problemem.
Justin Tsang
Nawigacja tutaj jest nieco inna. Zamiast przycisków, które przenoszą cię z powrotem na górę, lub nawigacji na każdym ekranie, przyciski są dołączane obok każdego projektu i obszaru treści, aby przejść w górę lub w dół o jeden ekran. Na górze znajduje się również pasek nawigacji, aby przejść do każdej głównej sekcji.
Mogulista
Tymczasowe witryny to świetny czas na korzystanie z jednej strony. Ta strona używa JavaScript do ładowania nowych treści dla każdej "strony" w serwisie.
Chirag Solanki
Nawigacja na tej stronie łączy zarówno główną nawigację, jak i linki na końcu każdej sekcji, aby powrócić użytkowników na górę strony. Ilustrowane doodle łączą ze sobą każdą sekcję, dając poczucie ciągłości całej stronie.
Deluge Studios
Układ strony Deluge Studios jest jednym z najbardziej unikalnych w tym miejscu. Dwie kolumny zawierają pięć obszarów treści, wszystkie połączone z górnej nawigacji. Włączenie głównych sekcji treści w mniejszej kolumnie "sidebar" sprawia, że strona jest znacznie krótsza.
Studio Stage 5
Strona Stage 5 Studio jest krótka, bez nawigacji. Linki "Czytaj więcej" wysuwają więcej informacji o każdym projekcie, podczas gdy inne treści są przechowywane na "pasku bocznym".
SmartCube
Witryna SmartCube używa lepkiego nagłówka, aby utrzymać nawigację na ekranie przez cały czas. Używa również kombinacji układów 1- i 2-kolumnowych, w zależności od zawartości.
Eclectique Designs
Sekcje treści tutaj są zróżnicowane dzięki unikalnym teksturom tła. Typografia ściąga wszystko razem na całej stronie, a JavaScript służy do wyświetlania dodatkowych produktów bez zajmowania większej ilości miejsca.
Inside Secrets do aplikacji na iPhone'a
Jest to jedna z dłuższych stron jednej strony opisywanych tutaj. Używa lepkiego nagłówka z nawigacją, aby ułatwić przejście z jednej sekcji do drugiej.
Kill The Spill
Utrzymywanie takiej witryny charytatywnej, jak ta krótka i na temat, prawie na pewno zwiększy liczbę donacji. Odważna typografia, graficzne obrazy i umieszczenie formularza darowizny na dole działają idealnie razem.
Emily Whitesmith
Oto kolejna strona, która zaczyna się na dole strony. Kliknięcie linku "znajdź więcej" powoduje przewinięcie strony do obszaru portfolio. Okna modalne dają zbliżenia każdej tkaniny.
Ulotka
Witryny z aplikacjami są dobrze dopasowane do pojedynczych projektów stron, ponieważ często mają ograniczoną zawartość i tylko zrzut ekranu lub dwa obrazy.
Hayley Smith
Oto kolejna bardzo długa strona. Nawigacja powtarza się u góry każdej sekcji, a logo przesuwa się po przewijanej stronie.
Conway Anderson
Witryna Conway Anderson wykorzystuje połączenie suwaków (dla informacji o sobie i informacji kontaktowych) i modalnych (dla pracy) do wyświetlania treści. Prosty, oparty na siatce projekt i monochromatyczna kolorystyka sprawiają, że wszystko jest proste i nowoczesne.
Daniel Moir
Witryna Daniela Moira jest prosta z minimalną zawartością i bez nawigacji. Projekt dwukolumnowy organizuje różne rodzaje treści na stronie i zapewnia jej krótsze działanie.
Latte na dzień
Witryny przed uruchomieniem są bardzo dobrze dopasowane do projektów pojedynczych stron, jak pokazano tutaj. Brak wystarczającej ilości treści do uzasadnienia witryny wielostronicowej.
Rynek ula
Oto kolejna dłuższa strona z jedną stroną. Jasnożółte tło i ilustracje pszczół wiążą całą witrynę razem, a nawigacja powtarza się u góry każdej sekcji.
Rubidyna
Witryna Rubidine używa lepkiego nagłówka z przezroczystym tłem, które wtapia się w każdą sekcję treści.
Jakub Szymański
Ta strona używa JavaScript, aby załadować nową zawartość i zjechać na dół strony. Przyklejona stopka pojawia się po "stronie głównej" domu z linkiem "powrót do góry".
Tyler Termini
Strona Tyler Termini jest krótka, z nawigacją tylko w nagłówku. Ponieważ nie jest to bardzo długa strona, nie ma problemu z koniecznością przewijania do góry (lub po prostu przewijania każdej sekcji bez korzystania z nawigacji).
Josh Sender
Schemat kolorów w skali szarości wygląda tutaj świetnie. Wyświetlana praca przechodzi w pełny kolor, kiedy się unosi, a po kliknięciu na modalne okno kolorów otwiera się z większą wersją.
Napisane i opracowane wyłącznie dla WDD przez Cameron Chapman .
Co najbardziej lubisz w pojedynczych stronach? Czy masz jakieś ulubione, które nie były tutaj polecane? Proszę, podziel się w komentarzach poniżej ...