10 zasad dobrego projektowania stron internetowych

Zasady projektowania to uniwersalne reguły, które określają sposób rozmieszczenia elementów wizualnych w celu stworzenia przejrzystych, zrównoważonych i przyjaznych dla użytkownika projektów. Stanowią one podstawowe wytyczne oparte na sposobie postrzegania i przetwarzania informacji wizualnych przez ludzi.

Każda z tych zasad sprawdza się najlepiej w określonych kontekstach, więc nie ma potrzeby stosowania ich wszystkich jednocześnie. Należy je stosować w sposób przemyślany, w oparciu o to, co projekt ma przekazać.

Ta zasada działa również w prawdziwym życiu. Na przykład, jeśli znak wisi tuż nad drzwiami, zakładamy, że jest to nazwa sklepu. To samo dzieje się w projektowaniu: Umiejscowienie tworzy znaczenie.

Zasada odstępu wewnętrznego i zewnętrznego (wewnętrzny ≤ zewnętrzny). Odległość wewnątrz obiektu powinna być mniejsza niż odległość na zewnątrz. W przeciwnym razie układ będzie wyglądał na zagmatwany. Na przykład w układzie znajdują się dwa obiekty:

Na przykład, weź artykuł i spójrz na różne przykłady wewnętrznych i zewnętrznych odstępów między obiektami, takimi jak logo, obraz okładki itp.

Zasada bliskości to reguła, którą należy stosować często, aby stała się drugą naturą.

Na pierwszy rzut oka może się to wydawać proste, ale jak dokładnie zastosować tę zasadę w projektowaniu? Jakim celom ona służy? Do jakich rezultatów należy dążyć?

Klasycznym zastosowaniem prawa Fittsa jest nieskończony obszar kliknięć. Jeśli umieścisz przycisk w rogu ekranu, użytkownicy mogą po prostu przesunąć kursor do krawędzi i kliknąć - bez potrzeby precyzji.

Ważne obiekty muszą być widoczne na pierwszy rzut oka. Projektanci nie myślą tylko w kategoriach jasności lub rozmiaru. Myślą w kategoriach nacisku: "Który element przyciąga wzrok jako pierwszy?".

Każdy ekran potrzebuje wyróżniającego się elementu. Jeśli wszystkie elementy wyglądają na równie ważne, projekt wydaje się płaski. Oko użytkownika nie ma się na czym zaczepić, a projekt nie zapada w pamięć.

Nacisk można tworzyć za pomocą koloru, rozmiaru lub kształtu. Kluczem jest hierarchia: Najpierw ważne elementy, potem drugorzędne. Najważniejsze obiekty przyciągają wzrok jako pierwsze, a pozostałe są zauważane później.

Podkreślenie pomaga rozwiązać główne zadanie projektowe. Zwraca uwagę na obiekty, które są najważniejsze dla klienta, projektanta lub firmy. Jeśli nie ma podkreślonych elementów, układ jest słaby.

Biała przestrzeń (zwana również przestrzenią negatywną) to pusty obszar wokół elementu. Pomaga skupić uwagę i sprawia, że układ jest przejrzysty.

Minimalistyczny design często opiera się na dużej ilości białej przestrzeni. Apple od dawna stosuje tę technikę, aby podkreślić swój wizerunek premium.

Biała przestrzeń pomaga stworzyć stylowy i wysokiej jakości projekt nawet przy niewielkiej ilości treści. Podkreśla ważne obiekty bez wizualnego szumu. Przestudiuj przykłady minimalistycznych stron internetowych, aby dowiedzieć się, jak prawidłowo używać negatywnej przestrzeni.

Korzystanie z białej przestrzeni to technika, która wymaga umiejętności. Początkujący często widzą minimalistyczne strony internetowe i próbują je kopiować. Umieszczają kilka obiektów na ekranie i pozostawiają resztę pustą. Ale czy można sobie wyobrazić zbyt dużo białej przestrzeni na stronie marketu lub sklepu odzieżowego?

Kolor buduje skojarzenia z marką. Na przykład, jeśli zobaczysz mieszankę czerwieni i żółci, prawdopodobnie pomyślisz o McDonald's. Zielony i biały? To WhatsApp. Dzięki samym kolorom marki firmy mogą powiedzieć: "Ta reklama jest moja". Nie trzeba nawet czytać tekstu na banerze.

Jeśli zaczynasz projekt od zera, nie masz jeszcze kolorów marki. Musisz je stworzyć lub wybrać, a następnie konsekwentnie używać. Dla początkujących lepiej zacząć od gotowych palet. Oto niezawodne narzędzia:

Kolor jest również sposobem na podkreślenie. Nie używaj wszystkich dostępnych odcieni. Na początku trzymaj się jednego głównego koloru i jednego koloru akcentującego. Dzięki temu układ będzie czysty. Pracuj z odcieniami ostrożnie: Łącz je prawidłowo i wybieraj te, które pasują do ogólnego stylu.

Projektowanie może wydawać się mieszanką wielu elementów, kreatywności i czymś trudnym do opanowania. W rzeczywistości opiera się na trzech podstawach:

Cała reszta to tylko połączenie tych elementów.

Każdy projekt można podzielić na te podstawy. Im więcej zauważysz i przeanalizujesz je na prawdziwych stronach internetowych, tym łatwiej będzie ci tworzyć własne układy.

Spójność to zasada, którą projektanci często łamią, a to rujnuje ogólne wrażenie produktu. Na przykład, jeśli jedna strona używa przycisków z różnymi promieniami narożników lub obrazów z różnymi obramowaniami, cały układ wydaje się niechlujny. Lub jeśli jeden blok ma podkreślone linki, podczas gdy inny podkreśla linki tylko kolorem, wprowadza to zamieszanie.

Spójność oznacza przestrzeganie systemu zasad. Jeśli przeanalizujesz stronę internetową, zauważysz wzorce w odstępach, stylach przycisków, obróbce obrazów i ogólnym układzie. Ten system sprawia, że projekt wygląda spójnie.

Spójność jest również wyraźnym wyznacznikiem jakości. Na przykład, jeśli jeden nagłówek ma 56 pikseli, inny 54 pikseli, a następny 52 pikseli, można powiedzieć, że układ się rozpadł. Nie ma systemu, nie ma zasad - nie ma spójności.

Moduły to prostokąty tworzące dowolną stronę internetową. Elementy w układzie powinny być wyrównane, aby projekt wyglądał schludnie i spójnie. Aby uzyskać prawidłową kompozycję poziomą i pionową, projektanci używają siatki do wyrównania elementów w bloku.

Prawie wszystko ma tendencję do tworzenia prostokątów: Akapit tekstu, nagłówek, obraz, wykres. Nawet okrąg jest zasadniczo prostokątem z mocno zaokrąglonymi rogami. Ostatecznie każdy element wewnątrz bloku nadal staje się częścią większego prostokąta.

Gdy moduły są wyrównane do siatki, układ wydaje się zrównoważony i łatwy do odczytania. Na przykład cały szwajcarski styl projektowania opiera się na modułowości i prostokątnej kompozycji.

Trend projektowania Bento sprawia, że zasada ta jest jeszcze bardziej widoczna: Projektanci po prostu rysują prostokąty i umieszczają w nich wszystkie niezbędne informacje. To modularność w najbardziej przejrzystym wydaniu.

Obiekty zakotwiczenia to najbardziej widoczne elementy na ekranie: Ilustracja, nagłówek lub logo. Zgodnie z zasadą, powinny być one umieszczone w jednym z rogów lub w wizualnym centrum modułu. Sprawia to, że kompozycja wygląda na zrównoważoną i zapobiega "pływaniu" obiektów w układzie.

Ta zasada pomaga również zwalczyć strach przed pustym płótnem. Jeśli nie masz pewności, jak rozmieścić elementy na ekranie, zacznij od umieszczenia ich w rogach modułu. Natychmiast uzyskasz silną kompozycję, którą możesz później udoskonalić.

Obiekty zakotwiczenia kierują ogólną kompozycją i określają, gdzie powinny znajdować się poszczególne elementy. Spróbuj tego: Otwórz swoje ulubione strony internetowe, zarysuj ich moduły i sprawdź, jak ta reguła jest stosowana. Bez niej kompozycja się rozpada.

Większość ludzi czyta od lewej do prawej i od góry do dołu. To samo dotyczy stron internetowych. Użytkownicy nie czytają wszystkiego słowo po słowie - skanują: Ich oczy zatrzymują się na wyróżnionych obiektach i wybierają to, co ważne. Projektanci zidentyfikowali dwa kluczowe wzorce skanowania.

Wzorzec F: Użytkownicy skanują poziomo w poprzek góry, następnie przesuwają się w dół strony i ponownie skanują w poprzek środka, a na koniec skupiają się na lewym dolnym rogu. Rezultat przypomina literę F. Działa to dobrze w przypadku liniowych, bogatych w treść układów, w których informacje muszą być czytane w kolejności.

Główną wadą wzoru F jest to, że gdy strona zawiera dużo tekstu i bardzo mało elementów wizualnych, układ może zacząć wydawać się monotonny. Świetnym sposobem na przeciwdziałanie temu jest użycie techniki lustrzanego odbicia - podejścia, w którym naprzemienne sekcje są odwracane w poziomie.

Wzorzec Z: Użytkownicy skanują od lewej do prawej w poprzek góry, następnie po przekątnej w dół do lewej, a na końcu w poprzek do prawego dolnego rogu. Rezultat wygląda jak litera Z. Działa to najlepiej w przypadku dynamicznych, lekkich stron, na których jest mniej elementów i chcesz strategicznie kierować uwagą użytkownika.

Wzorca F należy używać w przypadku usług i platform, na których użytkownicy muszą przetwarzać wiele informacji w sekwencji. Wzorca Z należy używać w przypadku kreatywnych stron z mniejszą liczbą elementów, gdzie celem jest skierowanie uwagi na konkretne wezwania do działania.