Strona internetowa składająca się z jednej strony nie pozostawia miejsca na chowanie się. Nie ma menu, pod którym można by ukryć słabą sekcję, ani drugiej strony, na której można by umieścić elementy, których nie dało się zmieścić.
Wszystko, czego potrzebuje odwiedzający, znajduje się na jednym zwoju, w jednym porządku. Ten porządek tworzy całość projektu.
Jeśli zrobisz to dobrze, strona będzie się prezentować jak dobra prezentacja. Jeśli zrobisz to źle, będzie się to czytało jak niekończący się ciąg.
Osiem poniższych przykładów jednostronicowych stron internetowych jest udanych, na różne sposoby. Niektóre to strony marki osobistej, stworzone z myślą o zdobyciu pracy. Jedna z nich pozwala zarządzać całym biznesem wnętrzarskim po jednym przewinięciu.
To, co ich łączy, to jasne zadanie dla każdego ekranu. Kradnij części, które pasują do twojej pracy.
Czym jest witryna jednostronicowa?
Witryna jednostronicowa umieszcza całą swoją zawartość na jednej, ciągłej stronie. Zamiast klikać między zakładkami Strona główna, O nas, Praca i Kontakt, odwiedzający przewija te sekcje po kolei.
Stała nawigacja zazwyczaj prowadzi do każdego z nich. Nazywana również witryną jednostronicową lub jednoprzewijalną, jest najprostszą strukturą w sieci: jeden adres URL, jedno ładowanie, jedna ścieżka.
Strony jednostronicowe są odpowiednie dla skoncentrowanego przekazu. Pomyśl o freelancerze sprzedającym jedną usługę, projektancie prezentującym jeden zbiór prac lub studiu, które chce, aby to obrazy mówiły same za siebie.
Jeśli masz pięć różnych usług i 40-postowego bloga, to ten format Cię przerósł. Jeśli masz coś do powiedzenia i chcesz to zrobić dobrze, trudno to przebić.
Najbardziej skoncentrowaną wersją formatu jest strona docelowa, zbudowane wokół jednej akcji, a nie wokół całej historii osobistej lub studyjnej.
Co sprawia, że witryna internetowa jest świetna i składa się z jednej strony?
W każdym mocnym przykładzie pojawia się ta sama garść decyzji:
- Jedna wiadomość, wyświetlana na pierwszym ekranie. Odwiedzający powinien wiedzieć, kim jesteś i co robisz, zanim przewinie stronę. Bez rozgrzewki.
- Kolejność przewijania, która coś oznacza. Najlepsze strony jednostronicowe są skonstruowane w taki sposób, jak argument: wstęp, dowód, osobowość, pytanie.
- Jedna podstawowa czynność. Zatrudnij mnie, zobacz pracę, skontaktuj się ze mną. Jedno powtarzające się wezwanie do działania (CTA) jest lepsze od pięciu konkurencyjnych.
- Przerwy wizualne dzielące przewijanie na fragmenty. Bloki kolorów, obrazy o pełnej szerokości lub duże odstępy sprawiają, że długa strona nie wygląda jak jeden szary pasek.
- Szybkie ładowanie. Jedna strona to jedno pierwsze wrażenie. Przeładowane wideo i nieskompresowane obrazy to czynniki, które powodują, że strony jednostronicowe tracą zainteresowanie.
Podczas czytania porównaj przykłady z tą listą.
Jednostronicowe artykuły o marce osobistej, które zaczynają się od typografii
Gdy produktem jest osoba, to czcionka odgrywa główną rolę. W obu tych serwisach to rola, a nie imię, jest najgłośniejszym elementem strony.
Jon Kirschner
Jon Kirschner jest strategiem ds. marki i rozwoju, a na jego stronie można przeczytać tę informację, napisaną literami cztery razy większymi od jego imienia i nazwiska.
Nazwa jest wyświetlana w małym pasku nawigacyjnym w kształcie pigułki, a ekran wypełniają słowa „Strateg ds. marki i rozwoju”.
Poniżej zagięcia znajduje się prosty wstęp w języku angielskim („Tworzę marki, które konwertują”), nadający ton.
Sekcje takie jak „W czym jestem dobry” i „Co czytam” nadają mu ludzki charakter, który pomija większość stron dla strategów. Czyta się jak osoba, a nie szablon.
Pożycz to: Niech odbiorca zapamięta to lepiej niż Twoja nazwa. Przyszli, żeby dowiedzieć się, czym się zajmujesz, więc zacznij od tego, w tekście, którego nie da się przegapić.
Jordon Melo
Jordon Melo, strateg ds. planowania i zakupu mediów z Toronto, rozwiązuje klasyczny problem pojedynczej strony: jak poruszać się po długim przewijaniu? Numeruje nawigację.
„01. O mnie, 02. Krótki opis CV, 03. Praca, 04. Referencje, 05. Kontakt” odpowiada dokładnie kolejności przewijania, dzięki czemu menu pełni również funkcję spisu treści.
Szeryfowy nagłówek i zakrzywiony portret dodają stronie ciepła, niczym CV. To projekt jednostronicowej witryny, który zachowuje się jak witryna wielostronicowa bez konieczności ładowania strony.
Pożycz to: Ponumeruj pasek nawigacji, aby odpowiadał kolejności przewijania. Długa pojedyncza strona przestaje wydawać się długa, gdy użytkownik widzi, w którym miejscu się znajduje.
Jednostronicowe artykuły w trybie podzielonego ekranu i portretowym
Dwie witryny, jeden pomysł: umieść osobę i akcję na pierwszym ekranie, dzięki czemu zajęty użytkownik nie będzie musiał przewijać strony, aby podjąć działanie.
Simrran Benvait
Simrran Benvait jest specjalistką ds. marketingu w Kolumbii Brytyjskiej, a jej bohater wykonuje całą pracę na jednym ekranie.
Lewą połowę wypełnia portret, wycięty delikatną falą w kremowy panel po prawej stronie. Panel ten zawiera powitanie, rolę i trzy chipy kontaktowe: e-mail, LinkedIn, telefon.
Rekruter może odczytać jej tożsamość i wysłać do niej wiadomość bez przewijania. Przegroda między falami zapobiega skojarzeniu podziału z dwoma sklejonymi taśmą pudełkami.
Pożycz to: Umieść swoją rolę, lokalizację i dane kontaktowe na pierwszym ekranie. Na jednej stronie bohaterem jest Twoja wizytówka, więc traktuj ją jak wizytówkę.
Noor Harajli
Noor Harajli, koordynatorka ds. mediów społecznościowych i marketingu z siedzibą w Londynie, tworzy swój pojedynczy zwój z ogromnych czerwonych kart na czarnym tle.
Każda sekcja, profil, umiejętności, praca znajdują się w osobnym okrągłym bloku, dzięki czemu strona sprawia wrażenie serii pomieszczeń, a nie jednego długiego paska.
Czcionka o stałej szerokości sygnalizuje kreatywno-techniczną tożsamość, a karty „Produkcja treści” i „Grafika i projekt” prowadzą bezpośrednio do rzeczywistych projektów. To dowód na to, że strona internetowa o długości jednego przewijania może pomieścić pełne CV i portfolio, nie sprawiając wrażenia przeładowanej.
Pożycz to: Podziel długi zwój na zaokrąglone bloki kolorów. Wyraźne rozgraniczenie wizualne pozwala jednej stronie przekazać wiele treści, nie gubiąc czytelnika.
Jednostronicowe portfolio z obrazami
Gdy praca jest wyrazem zainteresowania, obrazy zajmują całą stronę, a tekst schodzi na dalszy plan. Oba te podejścia zaczynają się od wizualizacji na całej powierzchni.
Dillan Vanner
Dillan Vanner jest fotografem, a strona otwiera się tak, jak dobry wydruk: jeden obraz na całej powierzchni, od krawędzi do krawędzi, przed pojedynczym słowem tekstu.
Pierwszy ekran wypełnia kadr dokumentalny, logo jest małe i umieszczone centralnie, a hasło „Utrwalanie świata i wszystkiego, co w nim jest” podkreśla istotę sprawy.
Minimalistyczna nawigacja (Strona główna, Portfolio, O mnie) i rząd ikon kontaktów to jedyne chromowane elementy. Zdjęcie jest kluczem do sukcesu.
Pożycz to: W przypadku jednostronicowej fotografii niech jeden mocny obraz wypełni pierwszy ekran. Najlepsza ramka to lepszy haczyk niż jakikolwiek nagłówek.
cmc designworks
cmc designworks, studio architektury i wnętrz, wyrzuca tekst i pozwala, aby to dzieło stało się bohaterem.
Strona główna otwiera się na asymetrycznej siatce zdjęć rozciągającej się od krawędzi do krawędzi: wizualizacje budynków, zdjęcia wnętrz, oznakowania, a nad nimi znajduje się niemal niewidoczny pasek nawigacyjny.
Jeśli chodzi o dyscyplinę wizualną, to jest to właściwy wybór. Obrazy sprzedają, więc nic z nimi nie konkuruje. To jeden z przykładów bardziej przejrzystych, przewijanych stron internetowych, jakie znajdziesz, właśnie dlatego, że opiera się na fotografii.
Pożycz to: Jeśli Twoja praca ma charakter wizualny, wytnij słowa. Siatka obrazów z pełnym spadem, ponieważ bohater mówi więcej niż akapit.
Jednostronicowe broszury na temat usług i talentów
Strona internetowa składająca się z jednej strony nie służy wyłącznie do prezentowania portfolio. Przewijanie tych dwóch stron przebiega jak prezentacja, dzięki czemu cała oferta jest przedstawiona za jednym razem.
Arrowood Design
Arrowood Design, firma z Bay Area zajmująca się wystrojem wnętrz, prowadzi całą działalność usługową na jednej stronie. Przewijanie jest uporządkowane jak prezentacja.
Obietnica „Ponadczasowego luksusu” widnieje nad muralem przedstawiającym płomykówkę, a następnie następują usługi, pozycjonowanie „Nie tylko wystrój”, historia założyciela („Kim jest Lisa?”), projekty i kontakt.
Etykiety redakcyjne pisane wielkimi literami trzymają wszystko w ryzach. Zanim dotrzesz na dół, przeczytasz całą rozmowę sprzedażową, po kolei, bez klikania ani razu.
Pożycz to: Jedna strona może obsłużyć całą firmę usługową. Uporządkuj przewijanie jak ofertę: obietnica, usługi, dowód, osoba, a następnie prośba.
Kaitlyn Barry
Kaitlyn Barry jest aktorem, reżyserem i performerem z Perth. Strona otwiera się od nazwiska w pełnej szerokości na pojedynczym portrecie o złotej godzinie, tak jak zdjęcie portretowe poprzedza profil castingu.
Następnie przechodzimy bezpośrednio do konkretów: krótki profil, a następnie lista ostatnich osiągnięć na ekranie, takich jak The Twelve oraz Cephalopod, następnie skontaktuj się.
Zwój jest uporządkowany tak, jak czyta się brief castingowy: kim są kandydaci, co zrobili, jak do nich dotrzeć. Nic nie stoi temu na przeszkodzie.
Pożycz to: Jeśli ktoś zatrudnia Cię na podstawie CV, umieść je na stronie. Zacznij od roli, wymień swoje osiągnięcia i zadbaj o to, aby adnotacja „dostępny od zaraz” była nie do przeoczenia.
Co łączy najlepsze witryny jednostronicowe
Spójrz na te ósemki razem, a zobaczysz spójny schemat. Najlepsze strony internetowe typu one-page nie są najładniejsze. To takie, w których każdy ekran ma swoje zadanie, a zadania te są wykonywane w odpowiedniej kolejności.
Realizują jeden komunikat i powtarzają jedną czynność. Wykorzystują prawdziwy system wizualny, aby nadać strukturę przewijaniu: numerowaną nawigację, karty z blokami kolorów, siatkę obrazów, podzielonego bohatera.
Na pierwszym miejscu stawiają to, co najważniejsze: rolę i kontakt dla osób poszukujących pracy, pracę dla studiów.
I zachowują lekkość, ponieważ strona jednostronicowa to jedno pobranie i jedno pierwsze wrażenie. Proste przykłady stron internetowych wygrywają tu częściej niż rozbudowane. Umiar to sztuka.
Kiedy witryna jednostronicowa się sprawdza (a kiedy potrzebujesz więcej niż jednej strony)
Format ma swój limit. Strona jednostronicowa sprawdza się, gdy przekaz jest jasny, a treść ograniczona.
W chwili, gdy masz kilka odrębnych grup odbiorców, rozwijającego się bloga lub katalog usług, z których każda zasługuje na osobną prezentację, jedno przewinięcie zaczyna działać na twoją niekorzyść.
Jeśli jesteś tradycyjnym artystą, a nie projektantem, konfiguracja wielostronicowa zazwyczaj lepiej spełnia Twoje oczekiwania. strony z portfolio artystów Roundup obejmuje tę trasę. Oto szczera odpowiedź:
Jeśli znajdujesz się w prawej kolumnie, dodaj dodatkowe strony. Zmieszczenie wszystkiego na jednym przewijaniu, żeby wyglądało minimalistycznie, to decyzja, za którą płacą Twoi odwiedzający.
Jak zbudować własną witrynę jednostronicową
Nie musisz kodować żadnego z nich. Zacznij od napisania zwoju, zanim dotkniesz szablonu.
Wypisz sekcje w kolejności, w jakiej powinien je poznać nieznajomy, a następnie usuń jedną. Większość stron jednostronicowych ma o jedną sekcję za długą.
Jeśli chodzi o budowę, kreator stron internetowych nastawiony na portfolio daje więcej możliwości niż zwykłe witryny, ponieważ jego układy są od razu zaprojektowane pod kątem jednego, przemyślanego przewijania.
Pixpa's szablony witryn jednostronicowych Zapewniają stałą, zakotwiczoną nawigację, sekcje obrazów z pełnym spadem i wbudowany blok kontaktów. Można je zobaczyć w użyciu w portfolio jednostronicowe Galeria.
Jeśli chcesz dostosować tekst lub odstępy, możesz skorzystać z niestandardowego CSS Jon Kirschner oraz Noor Harajli nie.
Jeśli wolisz najpierw porównać dedykowane narzędzia jednostronicowe, nasze zestawienie kreatory stron internetowych jednostronicowych jest użytecznym punktem wyjścia.
Każda powyższa strona została zbudowana na Pixpa, co jest dobrym sygnałem tego, jak format może wyglądać bez wywoływacza.
Cokolwiek budujesz, zachowaj kompresję obrazów i niewielką liczbę sekcji. Powściągliwość jest w projekcie.
Bottom Line
Strona internetowa składająca się z jednej strony to funkcja wymuszająca. Pozwala Ci zdecydować, co jest naprawdę ważne i uporządkować to, ponieważ nie ma drugiej strony, która zasłaniałaby resztę.
Podane przykłady obejmują stratega poszukującego pracy, londyńskiego artystę kreatywnego, fotografa dokumentalnego, studio architektoniczne, firmę zajmującą się luksusowymi wnętrzami i czynnego aktora.
Każdy z nich działa z tego samego powodu: jasny przekaz, przemyślane przewijanie, jedna rzecz do zrobienia dalej.
Napisz swoją notatkę jak argument, zacznij od sedna sprawy, a następnie skróć tekst do tego stopnia, by pozostały tylko najważniejsze elementy.
Często zadawane pytania dotyczące witryn jednostronicowych
Czym jest witryna internetowa typu one-page?
W przypadku witryny jednostronicowej cała treść (o nas, praca, usługi, dane kontaktowe) znajduje się na jednej przewijanej stronie zamiast dzielić ją na oddzielne strony.
Nazywana również witryną jednostronicową lub jednostronicową, jest przeznaczona do skoncentrowanego przekazu: jednej usługi, jednego portfolio lub jednej osobistej oferty. Stała nawigacja zazwyczaj prowadzi użytkownika do każdej sekcji.
Czy witryny jednostronicowe są dobre dla SEO?
Mogą być dobrze pozycjonowane w wynikach wyszukiwania dla Twojego imienia i nazwiska oraz jednej lub dwóch fraz kluczowych, co często odpowiada potrzebom Twojej marki osobistej lub firmy świadczącej pojedynczą usługę.
Ich problemem jest szerokość. Ponieważ Google pozycjonuje głównie strony, a nie witryny, jedna strona może być kierowana tylko na ograniczoną liczbę słów kluczowych, zanim jej treść zacznie ze sobą konkurować. Jeśli chcesz być pozycjonowany w wielu tematach, potrzebujesz więcej stron.
Ile sekcji powinna mieć jednostronicowa witryna internetowa?
Wystarczająco dużo, żeby uzasadnić sprawę i nic więcej. Większość najmocniejszych stron jednostronicowych składa się z pięciu do siedmiu sekcji: głównego tematu, krótkiego opisu, opisu pracy lub usług, dowodów i kontaktu.
Jeśli zauważysz, że dodajesz jedną ósmą, sprawdź, czy witryna rzeczywiście ma być wielostronicowa.
Wersja jednostronicowa czy wielostronicowa: która jest lepsza?
Żadna z nich nie jest lepsza w teorii. Rozwiązują różne problemy.
Jednostronicowa witryna internetowa sprawdza się w przypadku konkretnych komunikatów, szybkich decyzji i wizualnego portfolio.
Wielostronicowe treści sprawdzają się, gdy masz odrębną grupę odbiorców, rozwijającego się bloga lub wiele usług, z których każda zasługuje na osobną stronę. Wybieraj według głębi treści, a nie tego, co wygląda nowocześniej.
Gdzie mogę znaleźć więcej przykładów witryn jednostronicowych?
Poza tymi ośmioma galeriami tutaj, takie jak One Page Love oraz AwwwardsWarto przejrzeć tę jednostronicową kolekcję w poszukiwaniu inspiracji projektowych.
Podczas przeglądania stron nie skupiaj się wyłącznie na elementach wizualnych: zwróć uwagę na kolejność przewijania i wezwanie do działania, ponieważ to właśnie te elementy musisz skopiować.
Ile kosztuje strona internetowa typu one-page?
Jeśli zbudujesz ją samodzielnie w kreatorze stron internetowych, strona jednostronicowa kosztuje tyle samo, co każda mała strona: mniej więcej tyle, ile kosztuje plan plus domena. Sprawdź najnowsze ceny planów dla bieżących liczb.
Zatrudnienie projektanta do stworzenia spersonalizowanej, jednostronicowej ulotki kosztuje od kilkuset do kilku tysięcy, w zależności od zakresu prac. Dla większości osób z tej listy wystarczył szablon.