Podstawowe zasady projektowania stron internetowych

Wiesz, że potrzebujesz strony internetowej — a może potrzebujesz przeprojektowania strony internetowej — ale biegniesz krzycząc na słowa HTML, CSS i Java. W końcu to nie są tak naprawdę angielskie słowa. To nazwy zupełnie różnych języków, które dla niewtajemniczonych wyglądają jak zupa alfabetyczna. Cóż, zrelaksuj się. Ponieważ omówione tutaj zasady projektowania stron internetowych nie mają nic wspólnego z kodowaniem.

‌ Te wytyczne pomogą Ci w pełni wykorzystać narzędzie do tworzenia witryn, z którego korzystasz. Skierują Cię w stronę najlepszych szablonów, obrazów i reguł do zapamiętania.

Ten artykuł obejmuje:

• Hierarchia wizualna
• Układy Gutenberga, Z i F
• Złoty podział
• Zasada trójpodziału
• Teoria kolorów
• teoria Gestalt
• Negatywna przestrzeń i minimalizm
• Projekt zoptymalizowany pod kątem urządzeń mobilnych

Niezależnie od tego, czy chcesz stworzyć osobistą stronę internetową, która rozwija Twoją markę, czy chcesz odświeżyć projekt strony internetowej dla małych firm, pamiętaj o tych zasadach.

Hierarchia wizualna

Hierarchia wizualna to względne znaczenie, jakie widz przypisuje do wizualnie zróżnicowanego zestawu obiektów.

To wymyślny sposób na powiedzenie, że kiedy patrzysz na kilka rzeczy, masz tendencję do skupiania się na rzeczach, które się wyróżniają. Zwracasz większą uwagę na eksponowane przedmioty.

Jak to się rozgrywa? Cóż, jeśli przeglądasz grupę obrazów o różnych rozmiarach, naturalnie przypiszesz wagę większym zdjęciom, a nie mniejszym. Jeśli spojrzysz na kilka słów, które są czarne i jedno napisane w kolorze magenta, zwrócisz się ku słowu w kolorze magenta.

Możesz bawić się kilkoma różnymi elementami, aby ustalić hierarchię wizualną i przyciągnąć uwagę widza tam, gdzie tego chcesz. Obejmują one:

• Rozmiar i skala. Względny rozmiar ma znaczenie, ale skala też. Jeśli coś jest wyraźnie większe lub mniejsze niż „powinno” być, zauważysz to.
• Skupiać. Nieostre obrazy i czcionki wydają się być dalej niż te ostro ostre.
• Kolor. Zmiany koloru, odcienia lub intensywności mogą przyciągać wzrok.
• Krój pisma. Rozmiar tekstu, czcionka i efekty ułatwiają uszeregowanie informacji na stronie.
• Ruch. Jeśli jeden obraz odbije się na statycznej stronie, zauważysz ten, który się porusza — ale bądź ostrożny. Zbyt duży ruch może być dezorientujący.
• Negatywna przestrzeń. Możesz wyizolować kluczowe elementy, aby wyróżniały się z bardziej zaludnionych obszarów strony.

Zauważysz, że wiele z tych zasad projektowania witryn internetowych zaczyna się od intuicyjnego miejsca. Skorzystaj z hierarchii wizualnej, wyróżniając ważne informacje i wizualizacje.

Układy Gutenberga, Z i F

Organizacja to kolejny sposób na ustanowienie hierarchii. Możesz wykorzystać naturalne nawyki oglądania, aby umieścić najważniejsze informacje i możliwości — takie jak formularze rejestracji e-mail kluczowe dla strategii marketingowej e-commerce — w których przeglądarki prawdopodobnie się zatrzymają.

Trzy najczęściej używane układy to układ Gutenberga, układ Z i układ F. Każda z nich korzysta z odrębnych zasad projektowania stron internetowych.

Układ Gutenberga

Najprostszy z trzech może być bardzo skuteczny, jeśli zostanie użyty prawidłowo. Układ Gutenberga dzieli stronę na cztery ćwiartki. Ponieważ czytasz od lewej do prawej i od góry do dołu, odpowiednio przypisuje względną wagę każdemu kwadrantowi.

‌ Najważniejsze informacje należy umieścić w lewym górnym i prawym dolnym kwadrancie. Materiał o średnim znaczeniu znajduje się w prawym górnym kwadrancie. W lewym dolnym rogu powinny znajdować się tylko informacje i obrazy, które można szybko zeskanować lub całkowicie zignorować.

Układ Z

Układ Z najlepiej sprawdza się w przypadku minimalistycznych stron, które nie wymagają prezentowania mnóstwa informacji. Wykorzystuje te same ogólne praktyki czytania, ale rysuje przez nie inny wzór.

Przeglądarka skanuje w poziomie (od lewej do prawej) wzdłuż górnej krawędzi strony, tnie po przekątnej od prawego górnego rogu do lewego dolnego rogu, a następnie przesuwa się poziomo do prawego dolnego rogu.

W układzie Z umieszczasz materiał w każdym z czterech rogów i na środku przekątnej.

Układ F

Układ F działa lepiej, gdy chcesz zawrzeć więcej — więcej wszystkiego, ale zwłaszcza więcej tekstu.

Kiedy skanujesz dłuższą, bardziej zapełnioną stronę, będziesz skanować od lewej do prawej i od góry do dołu. Informacje powinny być zorganizowane symetrycznie, wzdłuż linii poziomych.

Złoty podział

Dobre zasady projektowania stron internetowych mogą również pomóc w ustaleniu proporcji dla każdej sekcji strony internetowej. Złoty podział — czasami nazywany boskimi proporcjami lub określany grecką literą phi — odnosi się do stosunku, który ludzie naturalnie uważają za atrakcyjny wizualnie, a nawet piękny.

Występuje, gdy masz segment linii podzielony na dwa fragmenty o różnych rozmiarach. Stosunek większego fragmentu do całości jest równy stosunkowi mniejszego fragmentu do większego.

Ale nie ma potrzeby szukania tego, co pamiętasz o równaniach kwadratowych z siódmej klasy. Wszystko, o czym musisz pamiętać, to liczba 1,618 (a tak naprawdę 1,6 wystarczy).

Jeśli masz całkowitą powierzchnię X i chcesz wiedzieć, jak duża powinna być twoja większa połowa, po prostu podziel X przez 1,618. Bułka z masłem.

Szybka wskazówka: jeśli próbujesz dowiedzieć się, jak duży jest obraz, możesz kliknąć go prawym przyciskiem myszy (Windows) lub kliknąć go z wciśniętym klawiszem Control (Mac) i wybrać „Sprawdź”. Po prawej stronie możesz uzyskać wiele informacji o obrazie, w tym jego rozmiar w pikselach w sekcji „Obliczone”.

Zasada trójpodziału

Czas przyjrzeć się zasadom projektowania stron internetowych dla samych obrazów. Wiesz już, gdzie je umieścić i jaki powinien mieć rozmiar. Zasada trójpodziału to prosta zasada kompozycji zdjęć.

Jeśli podzielisz obraz na trzy równe sekcje w pionie i trzy równe sekcje w poziomie, utworzysz siatkę. Zgodnie z zasadą trójpodziału, chciałbyś umieścić bodźce wzrokowe wzdłuż tych linii i/lub w ich punktach przecięcia.

Tak jak jesteś zaprogramowany, aby znaleźć piękną złotą proporcję, tak jesteś zaprogramowany, aby znajdować obrazy, które wykorzystują zasadę trzech dynamicznych i interesujących.

Teoria kolorów

Teoria kolorów może być przytłaczająca, ponieważ jest tak wiele sposobów, aby zrobić to dobrze — mieć spójny schemat kolorów, który daje właściwe wrażenie. To jeden z tych tematów, które możesz zgłębić.

W przypadku tego przeglądu dla początkujących możesz chcieć mieć pod ręką koło kolorów.

Oto cztery różne sposoby na dobranie harmonizujących kolorów marki i strony internetowej:

1. Idź monochromatycznie. To nie musi być nudne. Użyj różnych odcieni i odcieni, aby stworzyć kontrast.
2. Idź komplementarnie. Dopasuj swój kolor podstawowy do akcentu narysowanego z jego przeciwnego bieguna na kole kolorów — na przykład fioletowy i żółty.
3. Idź analogicznie. Wybierz trzy kolory, które leżą obok siebie na kole kolorów.
4. Przejdź triadę. Narysuj trójkąt równoboczny — jeden o trzech równych bokach — na swoim kole kolorów i użyj kolorów, które znajdziesz w trzech punktach.

Dobierając kolory warto też pomyśleć o ich cieple. Chłodne kolory mają w sobie więcej niebieskiego — mogą wydawać się surowe lub smutne, ale są też kojące. Ciepłe kolory mają więcej czerwieni i żółci — mogą być namiętne i ekscytujące, ale w niektórych zastosowaniach mogą też wydawać się agresywne.

teoria Gestalt

Teoria Gestalt została w rzeczywistości opracowana przez psychologów jako podstawa zrozumienia przetwarzania poznawczego.

‌ Zasadniczo teoria gestalt mówi, że patrząc na złożony zestaw wizualizacji, robisz jedną z dwóch rzeczy:

• Zobacz najpierw spójną całość, a potem zobacz jej części
• Najpierw zobacz mylącą całość, a następnie spróbuj podzielić ją na prostsze części lub grupy

Istnieje siedem zasad projektowania stron internetowych zaczerpniętych z tej podstawowej teorii:

1. Prawo podobieństwa. Grupuj rzeczy według podobieństwa. Podobne rzeczy idą w parze.
2. Prawo bliskości. Grupuj rzeczy według wspólnych regionów lub względnej odległości między nimi. Rzeczy, które są blisko siebie, należą do siebie.
3. Prawo prostoty. Ludzie widzą niejednoznaczne przedmioty w najprostszy możliwy sposób. Na przykład, będziesz postrzegać nakładające się okręgi jako właśnie to — a nie jako zbiór łuków.
4. Prawo ciągłości. Ludzie częściej postrzegają rzeczy jako ciągłe niż jako oddzielne. Będziesz podążać za obiektami wzdłuż ścieżek lub krzywych.
5. Prawo percepcji. Ludzie widzą postacie — lub punkty centralne — i tła. Rzeczy stoją w stosunku do innych rzeczy.
6. Prawo zamknięcia. Ludzie uzupełniają brakujące informacje, aby mieć sens. Linia przerywana to wciąż linia.
7. Prawo symetrii. Ludzie postrzegają rzeczy symetryczne jako powiązane.

Skorzystaj z tych zasad, aby pomóc widzom zinterpretować informacje, które im przekazujesz.

Negatywna przestrzeń i minimalizm

Te dwa elementy pasują do siebie, ponieważ obie są zasadami projektowania stron internetowych zapobiegających bałaganowi.

Ujemna przestrzeń to cała biała — lub w inny sposób pusta — przestrzeń, która sprawia, że ​​Twoja witryna wygląda czysto i elegancko. Nie przytłaczaj widza bodźcami wizualnymi. Upewnij się, że masz dużo bieli, aby rozłożyć różne rzeczy.

Nie chcesz też przytłaczać widza zbyt dużą ilością informacji lub zbyt dużym wyborem. Mniej znaczy zdecydowanie więcej — postaw na minimalizm.

Gdy podasz za dużo informacji, ważne rzeczy zostaną utracone. Gdy podasz zbyt wiele poleceń lub opcji, odwiedzający będzie mniej skłonny do ich wybrania, zamiast tego odskakuje od Twojej witryny.

Projekt zoptymalizowany pod kątem urządzeń mobilnych

Jedną z najważniejszych zasad projektowania stron internetowych jest upewnienie się, że jest ona atrakcyjna i przyjazna dla użytkownika na wszystkich urządzeniach.

Nie zmuszaj odwiedzających do przeciągania się po tej samej statycznej stronie, którą dostaliby na swoim komputerze. Korzystaj z narzędzi, które łatwo dostosowują strony internetowe dla użytkowników mobilnych dzięki łatwym do przewijania interfejsom.

‌ Nie tylko zapobiega to frustracji odwiedzających, ale jest także ważnym czynnikiem optymalizacji wyszukiwarek (SEO). Algorytm Google zdecydowanie uwzględnia optymalizację mobilną.

‌ Jeśli chcesz dotrzeć do nowych klientów w sposób organiczny, potrzebujesz solidnej strategii SEO. Zwróć więc uwagę na zasady projektowania stron internetowych, które wprowadzą Cię na właściwe tory.

Zasady projektowania stron internetowych — możesz to zrobić!

W rzeczywistości, kiedy już zaczniesz, jest to świetna zabawa. To idealne połączenie inteligentnej strategii biznesowej z zabawą w sztuce i rzemiośle.

Masz wiele pomocnych zasad projektowania witryn, które pomogą Ci stworzyć idealną witrynę, ale najważniejsze są następujące:

1. Hierarchia wizualna pomaga przyciągnąć uwagę widza tam, gdzie tego chcesz.
2. Mniej znaczy więcej.
3. Przyjazny dla urządzeń mobilnych już nie wystarczy. Musisz być zoptymalizowany pod kątem urządzeń mobilnych.

Więc wskocz do tego! Nigdy więcej protestów, że nie jesteś projektantem stron internetowych. Wkrótce możesz i będziesz. Po prostu zacznij.