7 porad dotyczących projektowania spójności
Spójność sprawi, że Twój projekt będzie lepszy, łatwiejszy w użyciu i praktycznie niewidoczny. Daje to użytkownikowi dużo miejsca, aby doświadczyć projektu zgodnie z twoimi oczekiwaniami.
Projektowanie spójności jest w niektórych przypadkach oczywiste, a w innych trudniejsze do zrozumienia. Po prostu spójność to nić, która łączy ze sobą elementy w jednym projekcie. Łączy również projekty w ramach jednej kampanii lub marki, tworząc produkt wyróżniający się, użyteczny i skuteczny. Zwróć szczególną uwagę na wszystkie poniższe przykłady, każda marka jest liderem, jeśli chodzi o spójny i użyteczny design.
1. Dominujące i wtórne kolory i odcienie
Jest powód, dla którego dostępnych jest tyle informacji na temat tworzenia świetnych palet kolorów. Kolor może być jednym z kluczowych czynników wizualnych łączących markę z obróbką wizualną.
Specjalny identyfikator koloru może informować użytkowników, kim jesteś na pierwszy rzut oka. Pomyśl tylko o tym, jak niektóre z największych marek na świecie - Coca-Cola, Facebook, T-Mobile - są oznaczone kolorem. Czy rozpoznałbyś te marki bez ich charakterystycznego odcienia?
Dobre wykorzystanie kolorów pomaga również użytkownikom poruszać się po witrynie i wiedzieć, że nadal znajdują się we właściwej lokalizacji. Gdyby każde kliknięcie prowadziło do strony z nową paletą kolorów, czy zastanawiałbyś się, czy jesteś we właściwym miejscu?
Aby stworzyć świetną paletę kolorów, wybierz dominujący kolor i użyj koncepcji teorii kolorów, aby dodać drugi lub dwa kolory. Następnie zanotuj szybki zestaw stylów i zasad użytkowania dla każdego koloru oraz sposobu, w jaki będzie on używany w całym projekcie. Trzymaj się zasad i masz spójną kolorystykę. (Bonus: Stwórz zabawną letnią paletę kolorów.)
2. Rozmiar, odstępy i pozycja typografii
Tak jak kolor powinien opierać się na palecie z regułami stylu, tak typografia wymaga takiego samego traktowania. I łatwe dla ciebie, koncepcja jest taka sama jak w przypadku koloru.
- Wybierz dominujący krój i rozmiar.
- Wybierz dodatkowe kroje i rozmiary.
Może to być nieco bardziej skomplikowane niż w przypadku typografii internetowej, ale masz pomysł, prawda? Jeśli chodzi o style internetowe, powinieneś skojarzyć określone typy czcionek, rozmiar, odstępy i pozycjonowanie z CSS, tak aby każdy znacznik (np. H1, h2, h3, body itp.) Wywoływał prawidłową opcję typu.
Dalszy typ używany w jednym miejscu - na przykład nawigacja - powinien być spójny w całym tym elemencie. Użytkownicy będą raczej zdezorientowani, jeśli każdy element nawigacyjny będzie używał innego kroju pisma. Ta spójność dotyczy całej witryny; wszystkie podobne przedmioty powinny używać tych samych tekstów.
3. Rozmiar i relacje elementów
Jak duże są elementy w twoim projekcie? Czy wszystkie przyciski mają ten sam rozmiar? Co powiesz na nagłówki i zdjęcia?
Rozmiar elementów powinien być podyktowany stylem i pozostać taki sam dla każdego zastosowania. (Pomyśl tylko, jak zabawnie będzie wyglądał twój suwak, jeśli spróbujesz wstawić zdjęcia o różnych kształtach. To nie zadziała.)
Wspólny rozmiar i relacje między elementami pomagają użytkownikom zobaczyć wzorce i stworzyć wizualny przepływ. Te cechy wspólne tworzą harmonię i równowagę, dzięki czemu projekt jest łatwy do strawienia i zapewnia zaangażowanie użytkowników.
4. Przestrzeń i sposób jej wykorzystania
Równie ważna jak wielkość elementów jest przestrzeń między nimi. Nie ma nic bardziej rozpraszającego niż projekt, w którym elementy wydają się po prostu wyrzucane na płótno bez organizacji lub zasad - niektóre zdjęcia nakładają się, podczas gdy inne mogą mieć dużo miejsca między nimi.
Najlepszym sposobem na ustanowienie - i trzymanie się - wspólnych zasad dotyczących odstępów jest użycie systemu siatki. Ten zestaw niewidzialnych linii pomoże ci określić, gdzie i jak umieścić elementy, aby bardzo pojedynczy blok, od tekstu po przyciski i obrazy, wpadł w idealną harmonię.
Myśląc o przestrzeni, pamiętaj o sprawdzeniu spójnych odstępów zarówno w pionie, jak iw poziomie. Obejmuje to spojrzenie na związek między podobnymi elementami a tymi, które są różne. (Można stosować reguły odstępów dla każdego).
5. Wizualne efekty krzyżujące się z mediami
Elementy wizualne marki, takie jak obrazy i ilustracje, powinny być przenoszone przez media. Niezależnie od tego, czy projektujesz stronę internetową, broszurę, billboard czy media społecznościowe, tożsamość wizualna marki nie powinna ulec zmianie.
Często wymaga to użycia wspólnego zestawu zdjęć. Niektóre marki mają szczegółowe zasady korzystania z wizualizacji - od kolorowych nakładek lub znaków wodnych na wszystkich obrazach do określonego współczynnika kształtu dla wszystkich zdjęć. Niezależnie od tego, jaki styl ma być, ważne jest, aby używać niezależnie od lokalizacji.
Aby to zrobić najskuteczniej, ważne jest, aby mieć świetną talię wizualną wypełnioną obrazami o wysokiej jakości i wysokiej rozdzielczości, których można używać i których można używać ponownie.
6. Wzorce użytkownika, które działają naturalnie
Twój projekt musi działać podobnie jak inne podobne projekty i postępować zgodnie z przyjętymi wzorcami użytkowników. Zbyt często projektanci chcą zrobić coś innego ze sposobem działania; nie wpadnij w tę pułapkę.
Jeśli witryna, aplikacja lub element drukowany działają tak, jak oczekują użytkownicy, mogą z łatwością z nimi korzystać. Będą wiedzieć, co robić, a projekt stanie się nieco niewidoczny, gdy przejrzy się użyteczność. (To jest twój rzeczywisty cel jako projektanta).
Są cztery rodzaje powszechnie akceptowanych wzorców do przemyślenia:
- Wzorce treści: styl i ton treści i Twojej marki
- Wzorce znaczników: HTML i CSS, które należy zaprojektować na stronach i w całej witrynie
- Wzory projektowe: wygląd każdego elementu w projekcie i wszystkich powiązanych stylów
- Wzorce użytkownika: sposób interakcji użytkowników z elementami projektu, takimi jak przyciski, menu lub ikony
7. Elementy interfejsu użytkownika, które się przyklejają
To nie jest lepka nawigacja, ale podobny pomysł.
Każda interakcja i element interfejsu powinny zachowywać się w ten sam sposób.
- Linki otwierają się bezpośrednio lub w nowej karcie (wybierz jedną dla każdego linku)
- Przyciski są w tym samym kolorze
- Nawigacja pozostaje w tej samej lokalizacji i zawiera te same opcje
- Stopki i paski boczne powinny zawierać określoną lokalizację i rozmiar (nie zwiększaj stopki na jednej stronie, a małej na następnej
- Ikony są rozpoznawalne i robią to, czego oczekują użytkownicy
- Elementy, które można kliknąć, są zawsze klikalne (takie jak zdjęcia, które zawierają linki)
Lista jest trampoliną, która pokazuje wszystkie drobne szczegóły, o których należy pomyśleć pod względem lepkości i użyteczności. Pamiętaj, że jeśli pozwolisz elementowi wykonać akcję, prawdopodobnie powinna być uniwersalna.
Wniosek
Spójność projektu tworzy strukturę pożądaną przez użytkowników. Tworzy również ramy, które użytkownicy rozumieją, przyczyniając się do ogólnej użyteczności i zaangażowania.
Zaczyna się od zestawu zasad i przewodnika po stylu dla każdego projektu. Nawet jeśli pracujesz sam, utwórz listę reguł dotyczących wykorzystania koloru, typu, rozmiaru, przestrzeni, elementów interfejsu użytkownika i interakcji w projekcie. Przyspieszy to proces projektowania i doprowadzi do lepszego, bardziej użytecznego projektu.
