Zasady projektowania i ich znaczenie

Posłuchaj wersji audio tego artykułu

Jedną z najtrudniejszych części mówienia o zasadach projektowania jest ustalenie, ile zasad faktycznie istnieje (czy jest ich pięć? Siedem? 10?). A kiedy już to wyjaśnimy, które z tych rzekomych podstaw projektowania należy uwzględnić?

Wyszukaj „zasady projektowania”, a Google zwróci wyniki dla artykułów zawierających od pięciu do kilkunastu indywidualnych zasad. Nawet artykuły, które zgadzają się z liczbą, niekoniecznie zgadzają się, które z nich powinny być uwzględnione w tej liczbie.

W rzeczywistości istnieje około tuzina podstawowych zasad projektowania, o których zarówno początkujący, jak i doświadczeni projektanci powinni pamiętać podczas pracy nad swoimi projektami. Ponadto istnieje jeszcze kilkanaście „drugorzędnych” zasad projektowania, które czasami są uwzględniane jako podstawowe (na przykład zasady Gestalt, typografia, kolor i kadrowanie). Główne zasady projektowania wyjaśniono i zilustrowano poniżej.

Podstawowe zasady projektowania

Jak już wspomniano, w społeczności projektantów nie ma prawdziwego konsensusu co do głównych zasad projektowania. To powiedziawszy, następujące dwanaście zasad to te, które są najczęściej wymieniane w artykułach i książkach na ten temat.

Kontrast

Jedna z najczęstszych skarg projektantów na opinie klientów często dotyczy klientów, którzy twierdzą, że projekt musi bardziej „wyskakiwać”. Choć brzmi to jak całkowicie arbitralny termin, klient ogólnie ma na myśli to, że projekt wymaga większego kontrastu.

Kontrast odnosi się do tego, jak różne elementy są w projekcie, w szczególności sąsiednie elementy. Te różnice wyróżniają różne elementy. Kontrast jest również bardzo ważnym aspektem tworzenia przystępnych projektów. Niewystarczający kontrast może sprawić, że treść tekstu będzie bardzo trudna do odczytania, zwłaszcza dla osób z wadami wzroku.

Balansować

Każdy element projektu — typografia, kolory, obrazy, kształty, wzory itp. — niesie ze sobą wagę wizualną. Niektóre elementy są ciężkie i przyciągają wzrok, inne są lżejsze. Sposób rozmieszczenia tych elementów na stronie powinien stwarzać poczucie równowagi.

Istnieją dwa podstawowe rodzaje balansu: symetryczne i asymetryczne. Symetrycznie projektuje elementy układu o równej wadze po obu stronach wyobrażonej linii środkowej. Równowaga asymetryczna wykorzystuje elementy o różnej wadze, często ułożone w odniesieniu do linii, która nie jest wyśrodkowana w całym projekcie.

Podkreślenie

Nacisk dotyczy części projektu, które mają się wyróżniać. W większości przypadków oznacza to najważniejsze informacje, które projekt ma przekazać.

Nacisk można również wykorzystać do zmniejszenia wpływu niektórych informacji. Jest to najbardziej widoczne w przypadkach, w których „drobny druk” jest używany do informacji pomocniczych w projekcie. Drobna typografia schowana na dole strony ma znacznie mniejszą wagę niż prawie wszystko inne w projekcie i dlatego jest słabiej podkreślona.

Proporcja

Proporcja jest jedną z łatwiejszych do zrozumienia zasad projektowania. Mówiąc najprościej, to wielkość elementów w stosunku do siebie. Proporcja sygnalizuje, co jest ważne w projekcie, a co nie. Większe elementy są ważniejsze, mniejsze mniej.

Hierarchia

Hierarchia to kolejna zasada projektowania, która bezpośrednio odnosi się do tego, jak dobrze treści mogą być przetwarzane przez osoby korzystające z witryny. Odnosi się do znaczenia elementów w projekcie. Najważniejsze elementy (lub treść) powinny być najważniejsze.

Hierarchię najłatwiej zilustrować za pomocą tytułów i nagłówków w projekcie. Tytuł strony powinien mieć najważniejsze znaczenie, dlatego powinien być natychmiast rozpoznawalny jako najważniejszy element na stronie. Nagłówki i podtytuły powinny być sformatowane w sposób, który pokazuje ich znaczenie w stosunku do siebie, a także w stosunku do tytułu i treści.

Powtórzenie

Powtarzanie to świetny sposób na wzmocnienie pomysłu. To także świetny sposób na ujednolicenie projektu, który łączy w sobie wiele różnych elementów. Powtórzenia można wykonać na wiele sposobów: poprzez powtarzanie tych samych kolorów, krojów pisma, kształtów lub innych elementów projektu.

Na przykład w tym artykule zastosowano powtórzenia w formacie nagłówków. Każda zasada projektowania jest sformatowana tak samo jak pozostałe w tej sekcji, sygnalizując czytelnikom, że wszystkie są równie ważne i wszystkie są ze sobą powiązane. Spójne nagłówki ujednolicają te elementy na całej stronie.

Rytm

Przestrzenie między powtarzającymi się elementami mogą powodować tworzenie poczucia rytmu, podobnie jak przestrzeń między nutami w kompozycji muzycznej tworzy rytm. Istnieje pięć podstawowych rodzajów rytmu wizualnego, które projektanci mogą tworzyć: losowy, regularny, naprzemienny, płynny i progresywny.

Rytmy losowe nie mają dostrzegalnego wzoru. Regularne rytmy mają takie same odstępy między każdym elementem, bez zmian. Rytmy naprzemienne podążają za ustalonym wzorem, który się powtarza, ale istnieją różnice między rzeczywistymi elementami (takie jak schemat 1-2-3-1-2-3). Płynące rytmy podążają za zakrętami i zakrętami, podobnie jak falujące wydmy lub fale. Progresywne rytmy zmieniają się w miarę upływu czasu, a każda zmiana dodaje się do poprzednich iteracji.

Rytmy mogą być używane do tworzenia wielu uczuć. Mogą tworzyć podekscytowanie (szczególnie płynne i progresywne rytmy) lub tworzyć pewność i spójność. Wszystko zależy od sposobu ich realizacji.

Wzór

Wzory to nic innego jak powtórzenie wielu współpracujących ze sobą elementów projektu. Wzory tapet to najbardziej wszechobecny przykład wzorów, które znają praktycznie wszyscy.

Jednak w projektowaniu wzory mogą również odnosić się do ustalonych standardów projektowania niektórych elementów. Na przykład górna nawigacja to wzorzec projektowy, z którym weszła w interakcję większość użytkowników Internetu.

Biała przestrzeń

Biała przestrzeń — określana również jako „przestrzeń ujemna” — to obszary projektu, które nie zawierają żadnych elementów projektu. Przestrzeń jest faktycznie pusta.

Wielu początkujących projektantów odczuwa potrzebę upakowania każdego piksela jakimś rodzajem „projektu” i pomija wartość białej przestrzeni. Ale biała przestrzeń służy wielu ważnym celom w projekcie, przede wszystkim umożliwia oddychanie elementom pomieszczenia projektowego. Negatywna przestrzeń może również pomóc w podkreśleniu określonej zawartości lub określonych części projektu.

Może również ułatwić dostrzeżenie elementów projektu. Dlatego typografia jest bardziej czytelna, gdy używa się wielkich i małych liter, ponieważ ujemna przestrzeń jest bardziej zróżnicowana wokół małych liter, co pozwala ludziom szybciej je zinterpretować.

W niektórych przypadkach przestrzeń ujemna jest używana do tworzenia obrazów wtórnych, które mogą nie być od razu widoczne dla widza. Może to być cenną częścią brandingu, która może zachwycić klientów. Weźmy na przykład ukrytą strzałkę w logo FedEx.

Ruch

Ruch odnosi się do sposobu, w jaki oko porusza się po projekcie. Najważniejszy element powinien prowadzić do następnego najważniejszego i tak dalej. Odbywa się to poprzez pozycjonowanie (oczy naturalnie najpierw pada na pewne obszary projektu), nacisk i inne elementy projektu, o których już wspomniano.

Różnorodność

Różnorodność w projektowaniu służy do tworzenia zainteresowania wizualnego. Bez różnorodności projekt może bardzo szybko stać się monotonny, powodując utratę zainteresowania użytkownika. Różnorodność można tworzyć na wiele sposobów, poprzez kolor, typografię, obrazy, kształty i praktycznie każdy inny element projektu.

Jednak różnorodność ze względu na różnorodność nie ma sensu. Różnorodność powinna wzmacniać inne elementy projektu i być używana razem z nimi, aby stworzyć bardziej interesujący i estetyczny efekt, który poprawia wrażenia użytkownika.

Jedność

Każdy widział stronę internetową lub inny projekt, który wydawał się po prostu wrzucać elementy na stronę bez względu na to, jak ze sobą współpracowały. Niemal od razu przychodzą na myśl ogłoszenia prasowe, które używają dziesięciu różnych czcionek.

Jedność odnosi się do tego, jak dobrze współpracują ze sobą elementy projektu. Elementy wizualne powinny mieć ze sobą jasne relacje w projekcie. Unity pomaga również zapewnić, że koncepcje są przekazywane w jasny, spójny sposób. Projekty o dobrej jedności również wydają się być lepiej zorganizowane, o wyższej jakości i autorytecie niż projekty o słabej jedności.

Inne zasady projektowania

Inne zasady projektowania są również poruszane w różnych artykułach na ten temat. Należą do nich typografia, kolor, zasady Gestalt, siatka i wyrównanie, kadrowanie i kształt. Niektóre zdecydowanie pasują do definicji „zasad”, podczas gdy inne bardziej przypominają elementy projektowania.

Typografia odnosi się do sposobu ułożenia tekstu w projekcie. Obejmuje to używane czcionki, ich odstępy, rozmiar i wagę oraz sposób, w jaki różne elementy tekstowe są ze sobą powiązane. Na dobry projekt typograficzny duży wpływ mają wszystkie inne zasady projektowania wymienione wcześniej w tym artykule.

Wykorzystanie koloru w projekcie jest jedną z najważniejszych psychologicznie części projektu i ma ogromny wpływ na wrażenia użytkownika. Psychologia i teoria kolorów w dużym stopniu wpływa na niektóre z pozostałych zasad wspomnianych wcześniej.

Zasady Gestalt obejmują podobieństwo, kontynuację, zamknięcie, bliskość, figurę/podstawę oraz symetrię i porządek (zwane również pragnanz). Niektóre z tych zasad są ściśle związane z zasadami wymienionymi powyżej.

Siatka i wyrównanie są ściśle związane z równowagą i odnoszą się do sposobu ułożenia elementów w stosunku do niewidocznej siatki na stronie.

Ramki odnoszą się do tego, jak główny temat projektu jest umieszczony w stosunku do innych elementów na stronie. Najczęściej słyszy się o tym w kinematografii lub fotografii, z tym, jak główny nacisk obrazu jest umieszczony w ogólnym obrazie. Ale ta zasada znajduje zastosowanie w projektowaniu.

Kształt jest również główną częścią każdego projektu, zarówno pod względem określonych kształtów używanych jako elementy w projekcie, jak i ogólnego kształtu samego projektu. Różne kształty mogą wywoływać różne uczucia, np. koła są organiczne i płynne, kwadraty są bardziej sztywne i formalne, a trójkąty dają poczucie energii lub ruchu.

Te „zasady” lub elementy projektowania są ważnymi aspektami dobrego projektowania i należy je rozpatrywać wraz z innymi podstawowymi zasadami, aby stworzyć jak najlepsze wrażenia użytkownika.

Wniosek

To, co składa się na „podstawowe” zasady projektowania, jest z pewnością przedmiotem dyskusji. Jednak zrozumienie i wdrożenie zasad opisanych powyżej ma kluczowe znaczenie dla powodzenia każdego projektu projektowego.

Projektanci powinni starać się zrozumieć, w jaki sposób każda z tych zasad projektowania faktycznie wpływa na ich pracę. Badanie, w jaki sposób inni projektanci wdrożyli te pomysły w celu ustrukturyzowania własnych projektów, jest również niezwykle cennym narzędziem w nauce tworzenia lepszych projektów.

Stworzenie dobrego projektu jest całkowicie możliwe bez dokładnego zrozumienia tych elementów i zasad projektowania. Jednak zazwyczaj robi się to dzięki „intuicji projektanta” i może wymagać wielu prób i błędów, aby stworzyć coś, co faktycznie wygląda dobrze i zapewnia optymalne wrażenia użytkownika. Projektanci mogliby zaoszczędzić dużo czasu i energii, ćwicząc zasady, które omówiliśmy, aż staną się drugą naturą.

Dalsza lektura na blogu Toptal Design:

• Zasady projektowania: wprowadzenie do hierarchii
• Popraw swój UX dzięki zasadom udanego projektowania interakcji
• Odkrywanie zasad projektowania Gestalt
• Projekt perswazyjny: efektywne wykorzystanie zaawansowanej psychologii
• The Ultimate UX Hook – projektowanie przewidujące, przekonujące i emocjonalne w UX