20 elementów i zasad projektowania, które powinien znać każdy projektant

Był czas, kiedy projektowanie było zbyt kontrolowane. Zbyt wzorzyste. Zbyt bezpieczne.

Ale ewolucja jest nieunikniona, a projektanci zaczęli trochę więcej eksperymentować.

Stamtąd projekty stały się odważniejsze i lepsze. Projektanci zaczęli głębiej zagłębiać się w naukę stojącą za zachowaniem odbiorców, co pozwoliło im dostosować się do wymagań rynku.

[twitter_link]Dzisiaj projektowanie to coś więcej niż tylko wzory i trendy. Stało się stylem życia.[/twitter_link] Coś, co jest starannie wplecione w każdą ludzką reakcję i rutynę. A pod zawiłościami związanymi z tym stylem życia kryje się 20 różnych zasad projektowania, które sprawiają, że ten świat jest bardziej kreatywnym i pięknym miejscem do życia.

Przyjrzyjmy się tym zasadom i wskazówkom, jak wykorzystać je w swoich projektach.

Linie

Rozejrzyj się gdziekolwiek wokół siebie, a zobaczysz linie. Krawędzie ekranu komputera. Boki każdego klawisza na klawiaturze. Nawet litery na tych klawiszach składają się z linii, niektóre proste, niektóre zakrzywione, niektóre ukośne.

Właśnie tak ważne są linie. Bez nich wszystko po prostu zlewałoby się ze sobą w nieskończoność, czyniąc świat pojedynczą plamą.

Tym, co sprawia, że ​​linie są jeszcze bardziej niesamowite, oprócz tego, że określają formę wszystkiego, jest fakt, że przekładają się również na emocje i idee, które wywołują równoważne reakcje. Na przykład umieść falistą linię obok prostej pionowej, a zaczniesz myśleć o porządku i sile po jednej stronie, a chaosie i zamieszaniu po drugiej. Może to być bardzo przydatne, jeśli zachęcasz odbiorców do odpowiedzi na określone wezwania do działania. W momencie, gdy ich nastroje i emocje zostaną ustalone, łatwiej jest po prostu przejść przez wezwanie do działania.

Inną rolą, jaką odgrywają linie w projektowaniu stron internetowych, jest to, że kierują wzrok odbiorców w stronę głównych punktów każdej strony. Na przykład mocne wiodące wiersze pod nazwą marki w morzu innego mniejszego tekstu pomogą tej nazwie się wyróżnić.

Skala

Skala określa, w jaki sposób będziesz zmieniać rozmiary różnych elementów w jednym projekcie. Zasadniczo wprowadza logikę do kawałka lub ją zabiera. Na przykład, gdybyś miał narysować mrówkę tuż obok psa, sensowne byłoby tylko, gdyby pies był o wiele większy niż mrówka (chyba że projekt wymaga odwrócenia się od rzeczywistości).

Skala to także najlepszy sposób na stworzenie dramaturgii. Jak wspomniano powyżej, będą przypadki, w których będziesz musiał odejść od realizmu i stworzyć oszałamiające efekty, zmieniając rozmiar niektórych elementów na znacznie mniejsze lub większe niż inne.

Skalowanie to także świetny sposób na podkreślenie hierarchii. Weźmy na przykład plakaty filmowe. Aktorzy z głównymi rolami zwykle mają swoje zdjęcia wyróżniające się spośród innych, nie dlatego, że są wyżsi lub więksi niż aktorzy drugoplanowi, ale dlatego, że ich postacie są ważniejsze.

Załóżmy teraz, że pracujesz nad czymś, co zawiera dużo tekstu i mało zdjęć. Skalowanie nadal okazuje się najlepszym sposobem na podkreślenie niektórych szczegółów nad innymi. Statystyki można na przykład znacznie zwiększyć, aby zwrócić uwagę odbiorców bezpośrednio na ten fragment danych.

Kolor

To niewiarygodne, jak duży wpływ ma kolor na wszystko. Było wiele badań nad wpływem kolorów nie tylko na nastroje i emocje ludzi, ale także na ich reakcje i decyzje zakupowe.

Czy możesz sobie wyobrazić firmę zajmującą się ochroną środowiska, która używa tylko czerni i bieli dla swojej marki? A może firma, która chce emanować profesjonalną aurą i tradycyjnymi wartościami za pomocą jasnych, neonowych kolorów? Myślę, że to wystarczające wyjaśnienie pokazujące, jaką rolę odgrywa kolor w projektowaniu.

Konsystencja

Kiedy myślisz o Coca-Coli, czy wyobrażasz sobie kolory zielony czy niebieski? Prawdopodobnie nie – twój umysł automatycznie przeskakuje na kolor czerwony.

Na tym polega spójność.

Projektowanie dla marki polega na spójności. Chodzi o używanie dokładnie tych samych odcieni, tonów i odcieni tego samego koloru, a także dokładnie tych samych typów czcionek. Raporty biurowe, billboardy, banery reklamowe – wszystko, co kojarzy się z marką, powinno być zawsze spójne. W końcu, gdyby Coca-Cola zmieniała swoją kolorystykę mniej więcej co roku, czy myślisz, że nadal przyniosłaby taką samą rozpoznawalność marki, jaką ma teraz? Myślę, że nie.

Biała przestrzeń

Biała przestrzeń niekoniecznie oznacza, że ​​jest biała, ale zawsze oznacza to samo, niezależnie od koloru. To niewykorzystana przestrzeń między Twoimi elementami, ta negatywna przestrzeń, na punkcie której szaleje wielu projektantów.

Niektórym wydaje się, że cała ta niewykorzystana przestrzeń jest marnotrawstwem. Ale poczekaj, aż wykorzystasz tę przestrzeń na swoją korzyść, zostawiając ją strategicznie pustą. Możesz otworzyć zupełnie nowy poziom kreatywności, który zachwyci odbiorców.

Nie wierzysz mi? Sprawdź Niebo i wodę MC Eschera, a zrozumiesz dokładnie, o co mi chodzi.

Symetria

Czy wiesz, że twoje oczy są naturalnie przyciągane do wszystkiego, co jest symetryczne? Jest to koncepcja, z której skorzystały marki takie jak Target i Chanel, dzięki czemu ich logo jest niezwykle niezapomniane.

Symetria to jedna rzecz, która zapewnia poczucie równowagi i porządku w każdym projekcie. Czasami może to nie być takie oczywiste, ale każde wielkie dzieło sztuki ma unikalny sposób tworzenia symetrii, aby cieszyć oko.

Nieprzezroczystość

Nieprzezroczystość elementu projektu pokazuje, jak bardzo jest on „przezroczysty”. Decyduje o tym, jak wszystko jest przejrzyste. Wszystko, co ma niższą nieprzezroczystość, jest zasadniczo jaśniejsze, podczas gdy elementy o wyższej nieprzezroczystości są bardziej solidne dla oka.

Nieprzezroczystość może pomóc w układaniu różnych elementów jeden na drugim bez całkowitego eliminowania obecności tych pod spodem. Służy również do nadania obrazowi wrażenia ruchu.

Tekstura

Bez tekstury każdy projekt mógłby wyglądać na pusty i prosty. Dodaj trochę tekstury, a projekt ożyje, sprawiając wrażenie, jakby był gotowy do wyskoczenia z ekranu lub powierzchni, na której jest wydrukowany.

Nie oznacza to, że każdy element projektu wymaga tekstury. Zawsze będą projekty, które wyglądałyby lepiej, gdyby były czyste i ostre. Jednak będą też przypadki, w których trochę tekstury nie zaszkodzi.

Możesz ożywić teksturę swojego projektu, dodając tło, które dodaje powierzchni głębi. Możesz także spróbować wytłoczyć niektóre elementy.

Balansować

Równowaga może być czasami mylona z symetrią, ale tak naprawdę są to dwie różne rzeczy. Gdy rzeczy są symetryczne, każdy element może kończyć się na tym samym marginesie lub może znajdować się taka sama liczba elementów po obu stronach strony. Chociaż zwykle skutkuje to poczuciem równowagi, można również osiągnąć to uczucie bez stosowania symetrycznego projektu.

Załóżmy na przykład, że chcesz zaprojektować stronę informacyjną z tekstem i obrazem. Możesz znaleźć poczucie równowagi dzięki układowi dwukolumnowemu, nawet jeśli tekst nie jest identycznym elementem obrazu.

Równowaga to po prostu coś, co sprawia, że ​​projekt wygląda na kompletny. Gdy obraz jest niezrównoważony, może wyglądać na niedopracowany lub, co gorsza, pozbawiony inspiracji.

Hierarchia

Hierarchia pokazuje, które elementy są ważniejsze od wszystkich innych. Nie oznacza to, że elementy na końcu hierarchii (że tak powiem, dolne podajniki) są rzeczami, bez których można się obejść. W końcu bez elementów na drugim końcu hierarchii nie byłbyś w stanie uzyskać efektu, do którego dążysz.

Hierarchię można wyrazić na wiele różnych sposobów oprócz skalowania. Możesz użyć jaśniejszych kolorów dla tych na szczycie łańcucha pokarmowego, przy czym kolor staje się jaśniejszy w miarę przesuwania się w dół.

Kontrast

Kontrast to zasada przeciwieństw. Zasadniczo odróżnia światło od ciemności, duże i małe. Dla projektantów, którzy zawsze dążą do tego, aby jeden lub dwa elementy wyskoczyły z ich projektu, kontrast jest zwykle jednym z stosowanych przez nich podejść.

Ale kontrast sięga znacznie głębiej niż tylko estetyka. Kontrast wpływa również na czytelność. Użyj dwóch kolorów, które są prawie takie same dla tekstu i tła, a prawdopodobnie wydrapiesz sobie oczy, próbując przeczytać, co mówi tekst. Dzięki zastosowaniu dwóch kolorów o wysokim kontraście Twoje oczy od razu zobaczą to, co powinny.

Ramy

Widzisz, jak ramka wyznacza granicę wokół umieszczonych w niej zdjęć? Właśnie do tego służy kadrowanie. Zasadniczo pokazuje, co powinno, a czego nie powinno być częścią obrazu.

Zarysy pudełek, marginesy – to wszystko formy kadrowania. Pozwala także wyróżnić niektóre elementy nad innymi, na przykład pojedynczy cytat na środku strony wypełnionej tekstem.

Możesz także wykazać się kreatywnością i użyć innych rzeczy do ramki oprócz zwykłych linii i marginesów. Na przykład plakat o tematyce plażowej może wykorzystywać muszle ułożone wokół tekstu, aby skutecznie je oprawić.

Siatka

Próba wyrównania rzeczy na pustej przestrzeni może być trudna, dlatego siatki są bardzo ważne w projektowaniu.

Siatki pomagają projektantom wyrównywać i rozmieszczać elementy. Doskonałym tego przykładem są kolumny na stronie czasopisma lub gazety. Czy możesz sobie wyobrazić losowe umieszczenie całego tekstu bez pomocy siatki? Próba zrozumienia tego byłaby katastrofą.

Z drugiej strony, jeśli wybierasz projekt, który jest nieco mniej sztywny, przełamanie siatki to wspaniały sposób na natychmiastowe stworzenie poczucia chaosu. Nasze oczy mają tendencję do naturalnego szukania układu i siatki projektu, więc wyrwanie się z tej struktury pomoże stworzyć poczucie nieporządku.

Spontaniczność

Jasne jasne. Potrzebujemy równowagi. Potrzebujemy symetrii. Podążaj za siatką. Użyj linii, aby go oprawić. Ale to wszystko nie oznacza, że ​​​​wszystko należy robić zgodnie z instrukcją. Czasem trochę szaleństwa też jest potrzebne do stworzenia niesamowitego designu.

To, że masz już wyraźny podział na kolumny i wiersze, nie oznacza, że ​​nie możesz nagle umieścić cytatu w środku bez podążania za istniejącymi ramkami. Jeśli to najlepszy sposób na wyróżnienie tej linii, niech tak będzie.

Podczas projektowania zrób sobie przerwę od swoich „zasad” i znajdź miejsce na odrobinę spontaniczności – coś nieoczekiwanego. To może być właśnie to, czego potrzebuje Twój projekt.

Kierunek

Można to również nazwać wskazówkami wizualnymi lub graficznymi. Umieść zdjęcie osoby wskazującej przycisk wezwania do działania, a oczy prawie każdego czytelnika natychmiast skierują się prosto na ten przycisk.

Oczywiście oczy również podążają za pewnymi wzorami, gdy przeglądają stronę. Badania pokazują na przykład, że najczęstszymi wzorami, za którymi podążają oczy, byłyby kształty E, F lub Z. Dlatego najlepiej umieścić najważniejsze treści w lewym górnym rogu strony, ponieważ naturalnym odruchem oczu jest przesuwanie się najpierw od lewego górnego do prawego górnego rogu.

Zasady

Tak, chociaż kreatywność jest często spontaniczna, nadal istnieje wiele zasad projektowania, których należy przestrzegać. Ale z drugiej strony, łamanie tych zasad od czasu do czasu popchnęłoby cię do stworzenia zaskakująco pięknych dzieł.

Skąd więc wiedzieć, kiedy przestrzegać zasad, a kiedy je łamać?

Po pierwsze, musisz być dobrze zaznajomiony z podstawami, aby dokładnie wiedzieć, co psujesz. Następnie upewnij się, że łamanie zasad odpowiada punktowi, który próbujesz osiągnąć.

Ruch

Nie potrzebujesz magii, aby stworzyć ruch na nadrukowanym projekcie. Jest tak wiele efektów, których możesz użyć, aby sprawić wrażenie, że obraz się porusza.

Na przykład na zdjęciu dziecka jadącego na rowerze możesz rozmyć resztę obrazu wokół niego, aby pokazać, że po prostu przemyka obok wszystkiego, co mija. Możesz także użyć linii ruchu, a także efektów fali. Możesz także użyć krycia, aby uzyskać optyczne złudzenie ruchu, jak w przypadku tego logo zaprojektowanego powyżej przez Vladimira Mirzoyana.

Głębokość

Jasne, płaskie projekty są modne od kilku lat. Musisz jednak przyznać, że dodanie głębi do niektórych projektów nadal pasuje lepiej. W końcu, jak niesamowite jest to, że coś fizycznie dwuwymiarowego może wyglądać tak, jakby wyskakiwało prosto ze strony?

Istnieje kilka technik, których można użyć do nadania głębi projektom, takich jak:

• Cienie
• Nakładające się
• Zabawa perspektywą (daje efekt 3D)

Jeśli Twój projekt wygląda, jakby przydało mu się trochę życia, wypróbuj jedno z tych podejść i obejrzyj obraz, zanim podniesiesz się z powierzchni.

Typografia

Możesz mieć wszystkie obrazy, tekstury, tła i inne elementy swojego projektu, ale jeśli twoja typografia wymaga trochę pracy, cały projekt jest zagrożony. Typografia to coś więcej niż tylko style i rozmiary czcionek. Ma to również coś wspólnego ze skalowaniem, odstępami, kolorem i wieloma innymi podstawowymi koncepcjami projektowymi.

Ponieważ typografia obejmuje wiele dziedzin, prawdopodobnie byłbyś bardziej oświecony, gdybyś przeczytał te książki o tym, jak ulepszyć typografię.

Kompozycja

Zamiast być samodzielnym elementem, kompozycja jest w rzeczywistości kombinacją niektórych elementów, o których mówiliśmy wcześniej. Skala, hierarchia, głębia – wszystko to i wiele więcej składa się na ogólną kompozycję projektu.

Kompozycja w najbardziej podstawowym znaczeniu obejmuje ogólną aranżację każdego pojedynczego elementu projektu. Wyobraź sobie wszystkie elementy, o których mówiliśmy – po zmieszaniu, czy efekt końcowy działa, czy nie? W ten sposób mierzy się skład.

20 różnych elementów, 20 różnych sposobów tworzenia lub łamania projektu. Zawsze miej przy sobie listę tych elementów podczas pracy i niech będzie ona twoim przewodnikiem, gdy spróbujesz splatać wyzwania związane z ukończeniem następnego projektu.