7 zasad tworzenia prostego projektu
Niech to będzie możliwie proste. Ta koncepcja pochodzi z 1960 roku, kiedy Marynarka Wojenna Stanów Zjednoczonych wdrożyła zasadę KISS, która utrzymuje, że większość systemów działa najlepiej, jeśli są proste, a nie skomplikowane. To samo dotyczy praktycznie każdego projektu.
Większość grafików dowiaduje się o KISS na początku swojej kariery. Jak możesz to zrobić? Stworzenie prostego projektu jest nieco bardziej skomplikowane, niż mogłoby się wydawać. Oto siedem zasad projektowania, które pomogą ci odciąć się od bałaganu i stworzyć pięknie proste konto.
Przeglądaj zasoby projektowe
1. Ustaw jeden cel na stronę
Początek prostego projektu zaczyna się od celu projektu i konkretnych celów dla każdej strony witryny. Każda strona powinna prowadzić użytkowników do jednej akcji, wyłączając nawigację i stopkę.
Może to być wszystko, od kliknięcia linku, wprowadzenia informacji w formularzu, oglądania filmu lub grania w grę. Ale każda strona powinna koncentrować się na pojedynczym działaniu użytkownika lub konwersji.
Zbyt wiele rzeczy do zrobienia może przytłoczyć użytkowników. Mogą stracić z oczu, jakie działania należy wykonać, i mogą dokonać mniej pożądanego wyboru. Zaplanuj projekt tak, aby każda strona prowadziła użytkowników do jednego celu. Każdy aktywny przycisk powyżej zwoju i poniżej zwoju na tej samej stronie powinien zrobić to samo. Ta spójność pomaga użytkownikom zrozumieć, dlaczego są w Twojej witrynie i co powinni zrobić; prostota tych wyborów sprawia, że konstrukcja jest łatwa i wciągająca.
2. Trzymaj się dwóch rodzin typu
Jest tak wiele wytycznych projektowych, które zalecają trzy kroje pisma dla projektu. Możesz usprawnić to jeszcze bardziej dzięki dwóm solidnym rodzinom typów.
Poszukaj rodziny typów, która obejmuje wiele obciążników z dużym kontrastem między opcjami zwykłymi i pogrubionymi lub czarnymi. Aby uzyskać jeszcze więcej stylu, wybierz opcję wyświetlania, która zawiera kilka alternatywnych znaków, których możesz użyć w zbyt dużych nagłówkach.
Następnie wszystko, co musisz zrobić, to wymieszać i dopasować z kroju pisma głównego i kroju pisma, aby uzyskać świetne kombinacje liter dla całego projektu. Użyj dwóch rodzin typów, tak jak w przypadku wybrania większej liczby opcji o określonych zastosowaniach dla określonych wag lub stylów.
Przekonasz się, że może to pomóc w stworzeniu czytelnej i łatwej w użyciu palety typografii, która jest łatwa w zarządzaniu i ma spójność wizualną.
3. Użyj spójnego wyrównania
Lewy, środkowy lub nawet w prawo - bez względu na to, jakie ustawienie chcesz, trzymaj się go przez cały projekt. Obejmuje to wyrównywanie podobnych elementów, takich jak pola tekstowe i elementy, które nie są do siebie podobne, ale pasują do siebie w grupach.
Adaptable świetnie sobie z tym radzi dzięki tekstowi na suwaku strony głównej. Pomimo tekstu z różną liczbą linii na obrazie, każdy nagłówek jest w jednej linii z przyciskiem wezwania do działania. Odstępy między elementami są również spójne.
Co więcej, to spójne wyrównanie odbywa się na zwoju z innymi parami nagłówka i CTA.
Wyrównanie odpowiada przepływowi suwaka, który również porusza się w kierunku komplementarnym. Wyrównanie do lewej i do środka są najczęstszymi opcjami, jeśli chodzi o elementy tekstowe, ponieważ są najbardziej czytelne. Przy dłuższym tekście preferowane jest wyrównanie do lewej.
4. Ustal hierarchię
Użytkownicy nie powinni myśleć o tym, na co patrzeć ani jak poruszać się po projekcie. Nawet najprostsze kompozycje wizualne powinny mieć wyraźną hierarchię.
Zaczyna się od dominującej grafiki. Może to być obraz, wideo lub tekst lub cokolwiek innego, co zrobi pierwsze wrażenie.
Następnie powinien pojawić się tekst informujący użytkownika o tym, co projekt i strona internetowa próbują przekazać. Zwykle ma to postać prostego nagłówka, który działa z dominującym obrazem.
Trzeci to dodatkowy fragment tekstu lub akcji do wykonania przez użytkowników. Ostatnim elementem wizualnym jest menu nawigacyjne. Użytkownicy oczekują, że znajdą wszystkie te elementy, a oko jest wyszkolone do poruszania się po elementach w tej samej kolejności. Ułatw im to, projektując w ten sposób.
5. Daj elementom dużo miejsca
Jeśli jeszcze tego nie wiesz, zapamiętaj to: biała przestrzeń jest twoim przyjacielem.
Daj każdemu elementowi w projekcie dużo miejsca. Przestrzeń pomoże zwrócić uwagę na poszczególne elementy, zajmie „przestrzeń”, abyś nie miał ochoty zaśmiecać płótna i pomagał stworzyć ogólny projekt, który będzie się skupiał.
Sztuką dobrego wykorzystania przestrzeni jest spójność. Ustaw reguły dotyczące ilości miejsca, które będzie otaczać poszczególne elementy lub mieścić się między wierszami tekstu. Jeśli projekt wydaje się zbyt jałowy, być może trzeba nieco cofnąć odstępy. Przekonasz się, że odstępy są odpowiednie, gdy otworzysz projekt od nowa i przejdziesz do miejsc, które użytkownicy powinni widzieć jako pierwsi. (Nie jesteś pewien, czym one są? Wróć do nr 4 - Ustal hierarchię).
6. Wzmocnienie kontrastu
Elementy projektu o wysokim kontraście - od wyboru kolorów po rozmiar elementów - mogą zapewnić projektowi odpowiednią ilość finezji wizualnej, której potrzebuje, nawet w najbardziej minimalistycznych ramach.
Aby uzyskać modną opcję, wypróbuj jasną kontrastową paletę kolorów, aby przyciągnąć uwagę użytkowników. Odważne kolory sprawią, że prosty projekt będzie bardziej złożony i interesujący niż opcja czarno-biała. Aby maksymalnie wykorzystać kontrastowe kolory, wybierz odcienie z przeciwnych pozycji na kole kolorów o podobnych nasyceniach. Jeśli ta opcja jest dla ciebie za duża, wypróbuj inne pary oparte na kole kolorów. (Możesz nawet znaleźć nieoczekiwanego nowego ulubieńca, takiego jak kombinacja fioletu i turkusu powyżej).
7. Używaj spójnych ikon i elementów
Konsekwencja w projektowaniu jest jedną z najlepiej (i najgorszych) tajemnic morderczego projektu. Jest to jedna z tych rzeczy, które są zbyt często zapominane, ponieważ projekty są zaśmiecone wieloma stylami przycisków lub ikonami mediów społecznościowych, które po prostu nie pasują do reszty ikonografii witryny.
Elementy interfejsu użytkownika nie powinny być późniejszym przemyśleniem.
Ważne jest, aby utworzyć zestaw ikon i interfejs użytkownika oraz reguły i używać ich w całym projekcie w ten sam sposób. (Możesz nawet kupić lub pobrać czcionkę ikony lub zestaw elementów interfejsu użytkownika, jeśli nie chcesz ich tworzyć od podstaw.)
Wybierz kolor dla elementów, użyj tej samej akcji lub efektu na każdym z nich (jeden dla elementów, które można kliknąć, a drugi dla elementów, które nie są dostępne) i rozmiar elementów w zależności od użycia. (Dopuszczalne jest posiadanie zarówno rozmiaru ikony, jak i zbyt dużej opcji dla elementów, które są nieco bardziej graficzne.)
Automaty Praticca używają ponadwymiarowych ikon, na przykład, aby zwrócić uwagę użytkowników na to, że jest więcej informacji. Znak + znajduje się wewnątrz kolorowej ikony. Wszystkie trzy ikony są identyczne oprócz koloru. Wszystkie robią to samo po najechaniu myszą i działają tak samo, gdy użytkownik kliknie. Ta sama ikona jest mniejsza w całej witrynie, aby rozpocząć nowe fragmenty treści i pomóc użytkownikom zeskanować kopię.
Wniosek
Prosta konstrukcja nie musi być całkowicie minimalna, nie może zawierać zabawnych elementów ani dodatków interfejsu użytkownika. Prosta konstrukcja to taka, która jest wysoce użyteczna i intuicyjna, umożliwiając użytkownikom angażowanie się bez pytania lub skomplikowanych instrukcji.
Chociaż istnieje miejsce na bardziej złożone strony internetowe lub interakcje z użytkownikami, większość projektów stron internetowych może korzystać z podejścia KISS. Nie przemyśl tego, a użytkownicy nie będą musieli.
