Układy stron internetowych

Najlepsze przykłady i pomysły na układ strony


Układ Twojej witryny może określać jej sukces. Jeśli wybierzesz niewłaściwy projekt, ludzie będą zdezorientowani i zdezorientowani, niszcząc wrażenia użytkownika. Prawdopodobnie przegapią krytyczne treści lub nie zobaczą wezwania do działania.

Ale znaczenie twojego układu idzie dalej. Projekt musi pasować do treści Twojej witryny. Przy odpowiednim układzie Twoje treści mogą świecić, ale przy niewłaściwym jednym mogą stać się zatłoczone, trudne do odczytania i mało inspirujące.

Układ Twojej witryny może określać jej sukces. Jeśli wybierzesz niewłaściwy projekt, ludzie będą zdezorientowani i zdezorientowani, niszcząc wrażenia użytkownika. Prawdopodobnie przegapią krytyczne treści lub nie zobaczą wezwania do działania.

Ale znaczenie twojego układu idzie dalej. Projekt musi pasować do treści Twojej witryny. Przy odpowiednim układzie Twoje treści mogą świecić, ale przy niewłaściwym jednym mogą stać się zatłoczone, trudne do odczytania i mało inspirujące.

Ostatecznie wszystkie strony mają system siatki, który znajduje się pod projektem strony. Te kolumny i wiersze zapewniają porządek w treści i oprowadzają użytkownika po stronie. W ramach tych siatek możesz stworzyć mnóstwo różnych podejść. Każda witryna ma siatkę, na której projektant zbudował układ.

Jednak jeśli chodzi o wybór odpowiedniego projektu układu witryny, istnieje kilka typowych punktów początkowych, z których można zacząć.

Warto powiedzieć, że nie musisz trzymać się jednego podejścia. Możesz łatwo łączyć wiele układów w swojej witrynie lub nawet na jednej stronie, takiej jak strona docelowa.

To powiedziawszy, spójrzmy na najczęstsze dostępne opcje układu.

Zaczynamy od najprostszego ze wszystkich wzorów, pojedynczej kolumny.

1. Układ jednokolumnowy

Chociaż najbardziej nieskomplikowany układ, jaki znajdziesz, zyskał znacznie na popularności od czasu rozwoju mobilnej sieci. Dzieje się tak, ponieważ witryna może używać tego samego projektu na urządzeniach mobilnych, tabletach i komputerach, skracając czas programowania.

Również układy jednokolumnowe działają dobrze, zapewniając wspaniałe wrażenia z czytania, ponieważ skupiają użytkownika na treści bez rozpraszania uwagi po obu stronach. Właśnie dlatego strona blogów Średni przyjmuje to dla wszystkich swoich artykułów.

Medium wykorzystuje układ pojedynczej kolumny, aby poprawić wrażenia z czytania.

Wreszcie, w połączeniu ze zdjęciami, układ pojedynczej kolumny może mieć ogromny wpływ, ponieważ pozwala pokazać te obrazy tak duże, jak to możliwe. The Ocean Resort jest świetnym przykładem tego w akcji.

Ocean Resort wykorzystuje pełną szerokość swojej jednokolumnowej konstrukcji, aby zmaksymalizować wpływ zdjęć.

Mając na uwadze powyższe czynniki, rozważ użycie układu jednokolumnowego, jeśli chcesz, aby ludzie spędzali dużo czasu na czytaniu w Twojej witrynie lub jeśli masz zdjęcia, które potrzebują miejsca, aby świecić.

Ze względu na swoją prostotę istnieje kilka wyzwań dotyczących układu pojedynczej kolumny. Należy jednak dokładnie rozważyć przepływ informacji. Jakiej kolejności potrzebuje użytkownik, aby zobaczyć twoją treść?

Na przykład pomocne jest przekazanie użytkownikom podsumowania tego, co pokrywa strona u góry, w celu ich przyciągnięcia i wyraźnego wezwania do działania pod koniec.

Zastanów się także, jak możesz zminimalizować przewijanie strony przez użytkownika. Układy jednokolumnowe są zwykle dłuższe i nie zawsze jest oczywiste dla użytkownika, że ​​pod fałdą jest więcej treści. Pomocny może być wskaźnik wizualny, taki jak strzałka.

Jeśli układ jednej kolumny wydaje się nieco restrykcyjny, ale nadal masz dużo treści do przekazania, rozważ przyjęcie projektu skupiającego się na treści.

2. Układ skoncentrowany na treści

Projektanci stron internetowych często używają układu zorientowanego na treść w witrynach z wiadomościami lub blogach, i zwykle ma on główną kolumnę z treścią i jedną lub więcej kolumn bocznych z dodatkowymi informacjami.

Zaletą tego układu jest to, że może pomóc w zarządzaniu długością linii środkowej zawartości poprzez zmianę szerokości bocznych kolumn. To ważne, ponieważ jeśli długość linii tekstu jest zbyt długa lub krótka, trudniej jest ją odczytać, ograniczając w ten sposób zrozumienie i zatrzymywanie informacji.

Jednak dobrze zrobione, układ zorientowany na treść jest idealny dla każdej witryny skoncentrowanej na kopiowaniu. Sekret polega na rozbiciu zawartości tego układu na małe, łatwe do strawienia fragmenty.

Wpisy na Boagworld dzielą treść na nagłówki, listy, obrazy i cytaty.

Na przykład, na moim blogu, przekonasz się, że mój średni post jest przerywany nagłówkami, listami, zdjęciami i wyciągniętymi cytatami. Są to wszystkie techniki pomagające użytkownikowi zeskanować artykuł, znajdując interesujące części.

Należy również dokładnie rozważyć kolumny boczne. Konieczne jest, aby projektant stron internetowych umieścił odpowiednią treść w tych kolumnach i aby miał wizualnie prawidłową wagę.

Problem polega na tym, że użytkownicy oczekują, że w bocznych kolumnach będą znajdować się treści wtórne, dlatego mniej uwagi poświęcają. Dlatego jeśli planujesz zawrzeć coś w rodzaju wezwania do działania w bocznej kolumnie, musi ono być wystarczająco silne, aby zwrócić na siebie uwagę.

Na przykład zauważ jak Smashing Magazine używa kolorowej ilustracji kota, aby zwrócić uwagę na formularz zapisania się do newslettera w prawej kolumnie.

Smashing Magazine korzysta z bocznych kolumn, aby podać dodatkowe informacje o poście.

Nie chodzi o to, że układ ukierunkowany na treść jest odpowiedni dla każdej strony Twojej witryny. Strony internetowe często łączą ten układ z wyglądem przypominającym magazyn.

3. Układ magazynu

Jak sama nazwa wskazuje, takie podejście do układu jest szeroko stosowane w czasopismach lub serwisach informacyjnych, aby pokazywać wiele różnych historii.

Zainspirowane układem wydruku, pozwalają na połączenie nagłówków i zdjęć w celu przedstawienia historii. Może to być interesujący sposób na przekazanie listy linków.

Jest to również doskonały układ do podświetlania treści, które regularnie się zmieniają. Właśnie dlatego serwisy informacyjne lubią The Washington Post więc faworyzuj to.

Strony internetowe z wiadomościami preferują układ w stylu magazynu.

Jednak układ nie jest pozbawiony wad. Układ czasopisma może być trudny do spełnienia, często wymagając całkowitej zmiany projektu w przypadku mniejszych urządzeń z ekranem.

Ten styl układu strony może być nieco przytłaczający, a duża liczba zdjęć i nagłówków woła o uwagę.

Najbardziej skutecznym sposobem rozwiązania tego problemu jest stworzenie przejrzystej wizualnej hierarchii. Innymi słowy, spraw, aby niektóre „historie” były większe niż inne.

Zmieniając rozmiary opowieści, kierują wzrokiem użytkowników.

Na przykład zwróć uwagę, jak Moda strona internetowa skupia uwagę na lewym obrazie, czyniąc go znacznie większym. Skutecznie informują użytkownika, gdzie najpierw szukać.

Pomaga także w tym, że reszta interfejsu użytkownika jest prosta, z czystą typografią i prostymi paskami nawigacji. Jeśli zamierzasz korzystać z układu czasopisma, musisz ciężko pracować, aby wszystko było proste.

Innym potencjalnym minusem układu czasopisma jest to, że może wyglądać „pudełkowato”, ponieważ siatka, która się pod nim znajduje, jest tak widoczna. Możesz jednak to złagodzić, czerpiąc inspirację z naszego następnego typu układu.

4. Układ zerwania siatki

Układy, które wydają się łamać podstawową siatkę, mogą być wizualnie znacznie bardziej interesujące niż bardziej tradycyjne podejścia. Doskonale nadają się również do zwrócenia uwagi na poszczególne elementy ekranu, które wybijają się ze zwykłych kolumn.

Weźmy na przykład Strona internetowa festiwalu VR Arles. Zauważ, jak zwracają uwagę na pasek nawigacyjny, nakładając go na dwie kolumny.

VR Arles Festival zwraca uwagę na pasek nawigacyjny, nakładając go na dwie kolumny.

Innym praktycznym zastosowaniem układu podziału siatki jest użycie go do nałożenia tekstu na obraz w taki sposób, aby zwrócić uwagę na kopię. Gdy strona internetowa całkowicie nakłada się na tekst na obrazie, często może zostać utracona. Jednak jak możesz patrz przykład poniżej, jeśli tekst częściowo zachodzi na obraz, wyróżnia się znacznie bardziej.

Ten projekt zwraca uwagę na tekst i wezwanie do działania, nakładając go częściowo na obraz.

Wadą układów z podziałem siatki jest to, że trudno jest je naprawić, zwłaszcza gdy strony internetowe muszą reagować szybko. Prawdę mówiąc, większość projektów, które łamią sieć, nie są tego rodzaju. Wciąż istnieje podstawowa siatka i wszystkie elementy ekranu pasują do niej. Tyle, że siatka jest znacznie bardziej złożona, a więc nie jest to takie oczywiste. To sprawia, że ​​trudno je zaprojektować.

Ich wrodzona złożoność sprawia, że ​​często korzystają z nich firmy projektowe, takie jak agencje projektowe czy marki modowe. Wykazują stopień zaawansowania projektowego, który przemawia do określonej grupy odbiorców.

Jeśli układ łamania siatki wydaje się zbyt skomplikowany dla twojej sytuacji, ale nadal chcesz zrobić coś bardziej innowacyjnego i niezwykłego, rozważ projekt na pełnym ekranie.

5. Układ pełnoekranowy

Układy pełnoekranowe, jak sama nazwa wskazuje, mieszczą się na jednym ekranie bez potrzeby przewijania przez użytkownika. Dzięki temu są idealne do opowiadania historii lub prezentacji.

Weź na przykład, Gatunek w kawałkach. To bogate i interaktywne doświadczenie prezentacyjne opowiada historie 30 zaangażowanych gatunków.

Gatunki i kawałki to bogate, interaktywne doświadczenie, które odbywa się bez potrzeby przewijania.

Jak widać, układy pełnoekranowe są najlepsze, gdy towarzyszą im potężne zdjęcia. To sprawia, że ​​są doskonałym wyborem dla witryn bogatych w fotografię, ilustracje lub wideo.

Nie dlatego, że musisz ściśle przestrzegać podejścia opartego na jednym ekranie. Na pierwszy rzut oka Roux na stronie Parliament Square wydaje się być witryną pełnoekranową w tym samym sensie, co Gatunek w kawałkach. Ich wspaniałe zdjęcia wypełniają całą rzutnię.

Ta strona korzysta z całej rzutni, aby zaprezentować swoje wspaniałe zdjęcia.

Można jednak nawigować dalej w dół strony, aby zobaczyć dodatkową zawartość. Niestety podkreśla to jedną potencjalną wadę tego podejścia do układu. Użytkownicy nie zawsze zdają sobie sprawę, że mogą przewijać, dlatego mogą przegapić cenne treści.

Musisz również dokładnie rozważyć, w jaki sposób układ dostosuje się do różnych rozmiarów. Na przykład, czy podejście pełnoekranowe działa na urządzeniu mobilnym? Czy obrazy będą również przycinane, gdy zmienia się rozmiar ekranu, czy po prostu się zmniejszają? Możesz szybko znaleźć ogniskowe zdjęć przycinanych poza widoczny obszar w mniejszych rozmiarach.

To powiedziawszy, jeśli masz wspaniałe obrazy do pokazania, będziesz miał trudności ze znalezieniem lepszego projektu układu. Ale jeśli chcesz dodać opcję opisu i wezwań do działania obok tych obrazów, możesz rozważyć alternatywny układ.

6. Układ naprzemienny

Naprzemienny wzór układu jest jednym z częściej spotykanych w sieci. Przekonasz się, że składa się z szeregu bloków treści, z których każdy ma układ dwóch kolumn. Bloki zazwyczaj składają się z obrazu z jednej strony i tekstu z drugiej.

To, co nadaje mu nazwę, polega na tym, że obraz zmienia stronę. Tak więc pierwszy blok będzie miał zawartość po lewej stronie, a obraz po prawej, podczas gdy następny blok odwróci ten układ.

Jest to podejście układowe szczególnie preferowane przy wyjaśnianiu funkcji lub zalet produktu. Na przykład produkty takie jak Webydo użyje obrazu, aby pokazać funkcję, a następnie kopię, aby wyjaśnić, jak to działa lub jakie korzyści zapewnia.

Webydo zastępuje tekst i zdjęcia w różnych blokach treści na swojej stronie głównej.

Nie chodzi o to, że te bloki treści są ograniczone do obrazów i tekstu. Czasami witryny zastępują obraz wideo. Podobnie, strona zawartości elementu może obejmować wszystko, od ikon po referencje lub wezwania do działania.

Na przykład, Convertkit zawiera tekst i wezwanie do działania wraz z tekstem w każdym bloku treści.

Convertkit zawiera referencje i wezwania do działania wraz z ich obrazami.

Jednym z powodów, dla których naprzemienne bloki są tak powszechne, jest to, że są prostym podejściem do układu z kilkoma wadami. Jeśli musisz przekazać kilka punktów sprzedaży, prawie zawsze jest to niezawodna opcja układu.

Oczywiście Twoje wymagania mogą być inne, więc inną opcją do rozważenia jest układ oparty na karcie.

7. Układy oparte na kartach

Układy stron oparte na kartach to kolejne powszechne podejście do układu, które można zobaczyć w Internecie.

Układy oparte na kartach to świetny sposób, aby dać użytkownikom szereg opcji do wyboru, przedstawiając im wystarczającą ilość informacji na temat każdego wyboru, aby podjąć decyzję.

To sprawia, że ​​są popularnym wyborem na stronach z listami produktów witryn eCommerce. Pozwala stronie wyświetlać obraz produktu, opis i cenę. Możesz nawet dodać funkcje, takie jak „zapisz na później”, jak widać z Strona internetowa Asos.

Witryny e-commerce, takie jak Asos, preferują układy oparte na kartach do wyświetlania list produktów.

Jednak witryny internetowe korzystające z układów opartych na kartach znajdują się w każdej sytuacji, w której użytkownicy muszą wybierać z listy. Na przykład innym typowym zastosowaniem byłoby wyświetlanie listy artykułów na blogu lub stronie z wiadomościami.

Układ oparty na karcie pozwala wyświetlić obraz historii, tytułu i opisu, a także wszelkie dodatkowe szczegóły dotyczące postu, który chcesz dołączyć. Awwwards blog jest doskonałym przykładem tego rodzaju wykorzystania w akcji.

Awwwards używa układu opartego na karcie, aby wyświetlić listę postów na swoim blogu.

Co najlepsze, układy oparte na kartach działają dobrze reagująco, a liczba kart z rzędu powoli maleje wraz ze spadkiem dostępnej szerokości.

Podejście to ma jednak kilka drobnych wad. Po pierwsze, karty działają najlepiej po dołączeniu obrazu. Oznacza to, że jeśli masz problemy ze znalezieniem odpowiednich zdjęć dla każdego z elementów listy, możesz być lepszy z innym wyglądem.

Drugi niewielki problem dotyczy różnych ilości treści. Jeśli jedna karta ma więcej treści niż inna, może pozostawić białe spacje w obrębie karty lub między każdym rzędem.

Jeśli karty mają różną zawartość, może pozostawić spacje między kartami.

Jednym ze sposobów na złagodzenie tego problemu jest nie trzymanie kart w tym samym rzędzie, jak pokazano w poniższym przykładzie.

Pozwalając kartom wypełnić puste miejsce, otrzymujesz bardziej estetyczny wygląd.

Jest to jednak drobna kwestia, która tłumaczy powszechne przyjęcie tego podejścia do układu.

Innym równie popularnym projektem jest układ obrazu bohatera.

8. Układ bohatera

Układ bohatera jest nazwany na cześć bohaterów, tych dużych obrazów z nakładkami tekstowymi, które dominują na stronach głównych na tak wielu stronach internetowych. Apple dobrze wykorzystuje klasyczny wizerunek bohatera.

Apple dobrze wykorzystuje klasyczny wizerunek bohatera.
Pixave dla MacOS przenosi układ bohatera jeszcze bardziej, ponieważ zdominował projekt strony głównej.
Pixave dla MacOS przenosi układ bohatera jeszcze bardziej, ponieważ zdominował projekt strony głównej.

Tym, co sprawia, że ​​obrazy bohaterów są tak powszechne, jest to, że pozwalają ci układać swoje propozycja wartości w imponujący sposób bezpośrednio w punkcie wejścia witryny.

Jak widać z Pixave i jabłko witryny powyżej składają się zwykle z dużego obrazu tła, tytułu lub paska i opisu. Układy bohaterów często zawierają wyraźne wezwanie do działania.

Jeśli musisz jasno wyjaśnić, co oferujesz na swojej stronie głównej lub stronie docelowej, w sposób, który przyciągnie uwagę, dobrym pomysłem może być obraz bohatera. Jest to jednak prawdopodobnie zakres ich wykorzystania.

Czasami na kolejnych stronach zobaczysz układ bohatera. Ale w większości przypadków obraz bohatera po prostu odwraca uwagę od cenniejszych treści. Więc używaj ostrożnie.

Poza tym, używanie układu bohatera ma pewną wadę. Tak, są powszechne, ale użytkownicy znają je i są skuteczne.

Znacznie mniej powszechną opcją układu jest układ podzielonego ekranu.

9. Układ podzielonego ekranu

Podobnie jak układ pełnoekranowy, podzielony ekran to świetny sposób na zwrócenie uwagi, gdy użytkownicy po raz pierwszy pojawią się w Twojej witrynie, jak widać z strona internetowa firmy projektowej poniżej.

Ta strona używa układu podzielonego ekranu, aby wyjaśnić dwie części swojej oferty.

Powyższy przykład sprawia, że ​​powyższy przykład jest tak skuteczny, że istnieje wyraźny powód dla układu podzielonego ekranu. Witryna wyjaśnia, że ​​ich biznes ma dwie strony – projektowanie i rozwój.

Podobny przykład ma miejsce, gdy chcesz dać użytkownikom jasny wybór binarny. Podział ekranu ma w tej sytuacji sens, ponieważ dzieli ekran równo między dwie opcje.

Na przykład agencja modelek 62 Zarządzanie używa podzielonego ekranu, aby zachęcić użytkowników do określenia, czy szukają modelu męskiego czy żeńskiego.

62 Kierownictwo korzysta z projektu podzielonego ekranu, aby zachęcić użytkowników do dokonania wyboru między dwiema opcjami.

Niestety poza ograniczoną liczbą aplikacji nie ma powodu, aby przyjmować projekt podzielonego ekranu. Jest to stosunkowo ograniczająca opcja układu i po prostu nie ma zbyt wielu scenariuszy, w których jest to właściwe. Jednak w tych przypadkach jest to zdecydowanie najlepszy wybór.

Podobną opcją, która zapewniłaby nieco większą elastyczność, jest układ asymetryczny.

10. Układ asymetryczny

Podczas gdy układ podzielonego ekranu wymusza równe podzielenie środka ekranu, asymetryczna konstrukcja umożliwia podział ekranu według własnego uznania.

Zaletą tego układu w porównaniu z podziałem ekranu jest to, że pozwala on położyć nacisk na określoną stronę strony. Im więcej nieruchomości ma strona, tym większy nacisk kładziesz na nią. To z kolei umożliwia identyfikację treści pierwotnych i wtórnych.

Przy założeniu, że kolumny pierwotne i wtórne są na swoim miejscu, możesz używać tego podejścia na wiele sposobów. Na przykład, Félix Lesouef używa metody na swojej stronie do podziału treści i nawigacji.

Félix Lesouef używa asymetrycznego układu, aby wyróżnić nawigację na swoich stronach.

Natomiast Odżywiaj się Witryna korzysta z drugiej kolumny, aby umożliwić przejście do następnej sekcji swojej witryny.

Nourish Eats wykorzystuje to podejście do projektowania, aby eksponować treści wtórne w bardziej widoczny sposób.

Pod wieloma względami asymetryczny układ jest doskonałym wyborem. Jest elastyczny, stosunkowo łatwy do wdrożenia i rzadziej używany. Jest to wygodny sposób, aby Twoja strona wyglądała inaczej bez problemów z innymi opcjami.

Jak wybrać układ

Czytając ten artykuł, zrobiłeś pierwszy krok w wyborze odpowiedniego układu witryny. Nauczyłeś się, jakie opcje są dla ciebie dostępne.

Następnie musisz dowiedzieć się, które opcje mogą być odpowiednie dla Twojej witryny. Jednym ze sposobów na to jest spojrzenie na konkurentów. Radziłbym jednak, żeby się tam nie zatrzymywać. Niebezpieczeństwo polega na tym, że je skopiujesz, a to zawsze pozostawi cię o krok do tyłu.

Zamiast tego spójrz na witryny w innych sektorach, które mają powiązane rodzaje treści z twoimi. Jeśli masz strona z broszurami skierowana do odbiorców B2B, spójrz na inne podobne strony. Podobnie jeśli masz witrynę eCommerce, spójrz na eCommerce w innych sektorach.

Stamtąd współpracuj z projektantem, aby eksperymentować z różnymi podejściami. Przekształć je w różne pomysły oparte na różnych układach i zobacz, co najlepiej pasuje do twoich treści.

Jeśli nie możesz podjąć decyzji lub nie masz pewności co do właściwego kierunku, spróbuj przedstawić opcje niektórym użytkownikom i uzyskaj ich reakcje. Nie pytaj ich tylko, co wolą, pytaj także, czy zauważyli krytyczne treści, czy zrozumieli, o co chodzi w firmie.

Prawdę mówiąc, prawdopodobnie będziesz wybierać i wybierać spośród różnych podejść do układu różnych części witryny i to jest w porządku. Ponieważ, jeśli chodzi o układ witryny, bardzo ważne jest użycie odpowiedniego w odpowiednim czasie.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map