10 zasad projektowania grafiki

Boska pro­por­cja, trójpodział czy prawo Fittsa? Wszys­tkie one pomogę Ci w stworze­niu, wery­fikacji lub oce­nie skutecznego pro­jektu graficznego.

Ciekawy jest fakt, że wielu świet­nych pro­jek­tan­tów sto­suje te zasady kom­pozy­cji w prak­tyce, nawet nie zda­jąc sobie sprawy z tego, że takowe w ogóle ist­nieją. Dowiedz się także jak uniknąć kłopotli­wej współpracy z niewłaś­ci­wym zlece­nio­biorcą, poz­na­jąc dziesięć paradok­sów projektanta.

Ist­nieje wiele zasad mówią­cych o tym, jak powinno się pro­jek­tować. Głównym założe­niem jest jed­nak to, aby umieć połączyć użyteczność z odpowied­nimi walo­rami este­ty­cznymi.

Sto­su­jąc jasne i skuteczne prawa możemy w znacznej mierze poprawić nasze pro­jekty. Firmy pro­duku­jące elek­tron­ikę zrozu­mi­ały to już bardzo dawno, sto­su­jąc wiele algo­ryt­mów, które spraw­iają, że fotografie zro­bione aparatem tele­fon­icznym wyglą­dają naprawdę dobrze.

Firmy Apple, Can­non i Nikon poszły nawet jeszcze jeden krok dalej, i zainstalowały na ekranach swoich urządzeń siatkę, będącą rezul­tatem zas­tosowa­nia reguły trójpodzi­ału. Dzięki temu, każdy może użyć tej spry­t­nej tech­niki i sprawić, że fotografie będą wyglą­dały naprawdę dobrze. Poznaj 10 podstawowych zasad projektowania grafiki reklamowej.

Złota Pro­por­cja była uży­wana w wielu roż­nych dziedz­i­nach. Przykładem może być budowa skrzy­p­iec czy architektura Pan­teonu i Stonehenge.

Niewykluczone, że budowniczy wspom­ni­anych form nie zda­wali sobie sprawy z ist­nienia tej zasady i kie­ro­wali się głównie walo­rami wiz­ual­nymi.

Zasada Złotej Pro­por­cji często jest mylona z Zasadą Podzi­ału Na Trzy, jed­nak nie miej­cie złudzeń, są od siebie różne.

Zasada ta opisuje pro­por­cje kom­pozy­cji tak, aby była jak najbardziej atrak­cyjna dla oglą­da­jącego. Pro­por­cja ta była uży­wana w pro­jek­tach, architek­turze i inżynierii od setek lat. Jest nawet pow­iązana z cechami, które zna­j­du­jemy w najbardziej atrak­cyjnych przed­staw­icielach naszego gatunku (mowa o cechach twarzy, jak i budowy całego ciała).

Jeśli zas­to­su­jemy to do pros­tokątów, możemy zauważyć, że będziemy mogli tworzyć coraz to mniejsze pros­tokąty wewnątrz tych, które już pow­stały przy wyko­rzys­ta­niu wyżej wymienionej pro­por­cji, która generuje nat­u­ralny wzór spi­rali. Można to zauważyć w naturze bada­jąc budowę sko­rup morskich.

Złota Pro­por­cja może być opisana w ten sposób, że sto­sunek miedzy ele­men­tami danego ksz­tałtu jak np. wysokość i sze­rokość musi wynosić w przy­bliże­niu 0.618. Jeśli Złota Pro­por­cja jest dobrze użyta w pro­jek­cie, bardzo pomaga w jego pozy­ty­wnym odbiorze.

Zasada podzi­ału na trzy jest metodą kom­pozy­cji, mówiącej o tym, jak powinna być ona wyko­nana, aby odpowiadała najbardziej walorom wzrokowym użytkown­ików.

Fotografowie korzys­tają z tej zasady od lat, tworząc bardzo intere­su­jące wiz­ual­nie kom­pozy­cje. Zasada podzi­ału na trzy mówi o podzie­le­niu pro­jektu na trzy części, zarówno pio­nowo jak i poziomo. Dzięki temu pow­staje siatka przeci­na­ją­cych się ze sobą linii. Zasada ta mówi, ze oglą­da­jący w więk­szości przy­pad­ków będzie oglą­dał te punkty na kom­pozy­cji, miejscu których przeci­nają się linie. Dodatkowo dobrze jest umieszczać bardziej wartoś­ciowe ele­menty pro­jektu równo z tymi liniami.

Powyższy rysunek, daje dokładne wyobraże­nie o skoku “jakości” kom­pozy­cji z wyko­rzys­taniem zasady trójpodzi­ału.

To dlat­ego jest to ulu­biona funkcja, wszys­t­kich pro­du­cen­tów aparatów fotograficznych. Gotowy do poznania kolejnych zasad projektowania?

Prawo Hicka mówi o tym, że każdy wybór, który musi zostać wyko­nany, zwięk­sza jego czas. Oznacza to, że czym więcej użytkownik musi dokonać wyborów tym trud­niejsze jest skorzys­tanie z oferty Two­jej firmy lub jej strony internetowej.

Tak naprawdę to prawo mówi o potrze­bie pros­toty.

Klasy­czny case study prawa Hicka przed­stawia sklep z warzy­wami, który wys­tawił dar­mowy dżem do próbowa­nia przez klien­tów. W jed­nym przykładzie mają oni więcej niż 40 do spróbowa­nia i wyboru, a w drugim tylko kilka. Zaobserwowano,, że klienci kupili więcej dżemów, jeśli prezen­towane były tylko cztery rodzaje zami­ast 40 i więcej. Więk­szość klien­tów decy­dowała się w ogóle na brak zakupu, jeśli miała do wyboru tak ogromną ilość.

Prawo Fittsa można opisać w ten sposób: „Czas potrzebny do dojś­cia do celu jest funkcją wielkości celu i odległości do niego”.

Możemy zas­tosować to prawo do pro­jek­towa­nia stron pod kątem wielkości obiek­tów klikalnych na stronie. Oznacza to po prostu, że czym więk­sze jest pole klikane tym proś­ciej na nie kliknąć. Ist­nieje naprawdę duża grupa osób (często bliska połowie użytkown­ików odwiedza­ją­cych ser­wis),, która ma prob­lemy z odnalezie­niem właś­ci­wej naw­igacji na stronie. Dobrym przykła­dem braku zas­tosowa­nia prawa Fittsa jest pozy­cja w menu, gdzie klikalny jest tylko tekst, a to co go otacza w danym menu już nie. W takim przy­padku należałoby zas­tosować para­metr padding dla tek­stu tak aby wypełnił pozy­cje w menu.

Prawo to również dzi­ała w drugą stronę. Dokładniej mówiąc, pewne ele­menty stron powinny być trud­niejsze do kliknię­cia. Przykła­dem jest przy­cisk lub odnośnik anu­lowa­nia akcji.

Dlat­ego możemy często zauważyć na rożnych stronach duży przy­cisk zapisa­nia, a mały anu­lowa­nia. Word­press bardzo dobrze korzysta z tego prawa.

Słynne odkrycie Pareto mówi o tym, że duży pro­cent użytkown­ików wykona mały pro­cent akcji. No dobrze ale jak to się ma do zasad projektowania graficznego?

Oznacza to, że użytkown­icy Two­jego ser­wisu odwiedzą sto­sunkowo małą ilość stron. W ter­mi­nologii aplikacji webowych oznacza to, że Twoi użytkown­icy wykon­ają mały pro­cent zadań. Zobacz, liczby poniżej, aby dobrze zrozu­mieć tą regułę.

- 20% klien­tów przynosi 80% zysków
- 20% kierow­ców powoduje 80% wypad­ków
- 20% powierzchni dywanu przy­pada na 80% zuży­cia
- 20% mate­ri­ału zaj­muje 80% egza­minu
- 20% ubrań nosimy przez 80% czasu
- 20% pra­cown­ików generuje 80% produktów

Korzys­ta­jąc z tej zasady możemy ziden­ty­fikować ten mały pro­cent akcji, które są wykony­wane i to właśnie na nie możemy położyć więk­szy nacisk, aby były jeszcze łatwiejsze w użytkowa­niu. Cza­sami prowadzi to do zmi­any naw­igacji na stronie lub aktu­al­iza­cji głównej strony w taki sposób, aby było łatwiej znaleźć pewne rzeczy, Wiąże się to z jeszcze łatwiejszym wyko­naniem zadanych zadań.

Stosowanie zasady Pareto jed­nak nie jest takie proste.

Zazwyczaj ciężko jest rozpoz­nać, która część jest tą odpowiedzialną za wyniki. Musimy wyro­bić w sobie postawę anal­i­tyka i zas­tanaw­iać się nad każdym dzi­ałaniem i jego skutkami. A następ­nie wybierać tylko te, które rzeczy­wiś­cie są opty­malne i dadzą nam najwięcej efektów.

Prawo bliskości jest często niedostrze­gane, nawet przez doświad­c­zonych pro­jek­tan­tów.

Prawo to stwierdza, że ele­menty, które są w jakiś sposób ze sobą pow­iązane, przed­staw­iane są w jakiejś relacji i umieszczane blisko siebie. Brzmi to bardzo prosto i wydaje się być oczy­wiste, ale często bywa pomi­jane.

Prawo to oznacza, że musisz być bardzo świadomy, jak wiele przestrzeni jest między ele­men­tami danego pro­jektu. Jeżeli w pro­jek­cie masz zbyt wiele ele­men­tów, które są blisko siebie,

odbiorca stwierdzi, że jest to zro­bione celowo i że te ele­menty są ze sobą pow­iązane.

Na przykład przy­cisk wyszuki­wa­nia, który jest za blisko przy­cisku zapisy­wa­nia czy anu­lowa­nia spowoduje przy­puszcze­nie, że przy­ciski zapisu i anu­lowa­nia są pow­iązane z samym wyszuki­waniem. Warto więc zad­bać o odpowied­nią odległość między takimi ele­men­tami w naszym pro­jek­cie. W bliskim sąsiedztwie stara­jmy się umieszczać takie elementy, które są ze sobą powiązane.

Komu­nikaty zwrotne są tech­niką, opanowaną przez pro­jek­tan­tów prze­mysłowych od wielu dekad.

Komu­nikaty zwrotne przekazują użytkown­ikowi infor­ma­cje o tym, że coś się stało, się dzieje lub się stanie. Komu­nikacja z użytkown­ikiem jest czymś fun­da­men­tal­nym w wielu pro­duk­tach, np. weźmy pod lupę ekspres do kawy. Jeśli nie powiadami­ałby za pomocą świecącej diody o tym, że kawa jest gotowa za pomocą święcącej diody, to bardzo możliwe, ze doszłoby do jej noto­rycznego przepalania.

W związku z tym, że użytkown­icy korzys­tają z naszych stron i aplikacji musimy udostęp­nić im odpowied­nie komu­nikaty zwrotne.

Mowa tu o paskach ład­owa­nia, podświ­et­la­niu odnośników po najecha­niu na nich myszka, korzys­ta­niu z atry­butu odwied­zonego odnośnika (w CSSsie się to ustawia), atry­butu :focus na ele­men­tach for­mu­la­rza czy stanu :active na odnośnikach.

Cza­sami pro­jek­tanci z czystego lenistwa zanied­bują potrzebę posi­ada­nia stanów po najecha­niu myszką na odnośnik z czys­tego lenistwa, jed­nakże to naprawdę ten atry­but poprawia użyteczność i jakość Two­jego projektu.

Dzięki elasty­czności i mocy rozwiązań sieciowych, jak i naszych narzędzi pro­jek­towych, łatwo dać się ponieść. czego wynikiem będzie bardzo skom­p­likowana strona i szablon graficzny, który może zaw­ierać dużo funkcjon­al­ności i infor­ma­cji ale być bardzo trudny w użytkowa­niu, budowa­niu i utrzy­ma­niu. Pomimo tego, co niek­tórzy mogą myśleć, że taka strona zami­ast robić więcej, robi mniej.

Jest to bardzo częsty prob­lem firm, które czują potrzebę umieszcza­nia wszys­tkiego na swo­jej stronie inter­ne­towej.

Oczy­wiś­cie prob­lem pow­staje wtedy, gdy wszystko ma być umieszc­zone na jed­nej stronie w razie jeśli ktoś by potrze­bował tych infor­ma­cji. Ignorowana jest zasada 80/20, mówiąca o tym, że tylko 20% zostanie użyte.

Zasada ta odnośni się do starego powiedzenia, że pro­jekt nie jest skońc­zony w momen­cie, kiedy nie ma nic więcej do doda­nia, a dopiero wtedy kiedy nie ma nic więcej do odję­cia. Pro­jekty proste są ele­ganckie, wysub­limowane i o wiele bardziej efek­ty­wne niż skom­p­likowane udeko­rowane styl­iza­cje, które prze­ważają aktu­al­nie na więk­szości stron. Dlatego dobrym sposobem jest naszkicowanie swoich pomysłów przed etapem projektowym.

Ciąg Fibonac­ciego jest serią liczb, w którym każda kole­jna jest sumą tych poprzed­nich. Dla przykładu jeśli zaczniemy od cyfry 1, będzie on zaczy­nał się w ten sposób:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, itd…

Jest to bardzo ważna zasada, ponieważ została ona użyta w wielu wiz­ual­nych wzor­cach, ksz­tał­tach, organ­icznych fig­u­rach, budowach sieci lub dyk­towa­niu wielkości czy proporcji.

Ciąg Fibonac­ciego jest uważany za jeden z najbardziej wpły­wowych wzor­ców, zarówno w matem­atyce, jak w pro­jek­towa­niu. Przed­staw­iamy prostą instrukcję na zas­tosowanie ciągu Fibonacciego.

1. Zde­cy­duj się, jak dużo szu­flad chcesz mieć w swoim frag­men­cie mebla.

Swoją decyzję bazuj na tym, jak duży jest ten kawałek, jak dużo chcesz w nim trzy­mać rzeczy i do jakiego wyglądu chcesz dążyć.

2. Zapisz Ciąg Fibonac­ciego, zaczy­na­jąc od liczby 1, następ­nie do 1 dodaj 1 co da 2 i twórz kole­jne, sumując dwie poprzed­nie liczby (1,2,3,5,8,13).

Kon­tynuuj, pisząc sek­wencje, dopóki nie dojdziesz do liczby, która odpowiada wysokości najwyższej szu­flady. Podana wysokość będzie wysokoś­cią szu­flady, zna­j­du­jącej się na samym dole pro­jek­towanego mebla.

3. Zacznij się cofać, od liczby wybranej w poprzed­nim punkcie, tak że każda następna liczba będzie oznaczała wysokość każdej kole­jnej szu­flady w pro­jek­towanym meblu.

Dla przykładu jeśli wysokość dol­nej szu­flady to 13 cali, to kole­jna nad nią będzie miała 8 cali, a następna 5 cali. Tworzy to zbal­an­sowany i przy­jazny dla każdego oka mebel.

Prawo Mod­elu Umysłowego mówi o tym, że znacznie proś­ciej jest użytkown­ikom zrozu­mieć lub nauczyć się czegoś nowego, jeśli użytkownik może bazować na czymś, co już zna.

Przykła­dem może być zas­tosowanie sys­temu zakładek na stronach inter­ne­towych lub sys­temy oper­a­cyjne, które buduje się przy wyko­rzys­ta­niu znanych w biu­rach sytu­acji (kat­a­logi, pliki, pul­pit, itd…)

Możemy użyć tej kon­cepcji pod­czas tworzenia naszego pro­jektu, dzięki czemu będzie on prost­szy w uży­ciu, jak i bardziej efek­towny wiz­ual­nie.

Są sytu­acje, w których powin­niśmy bazować w naszych pro­jek­tach na już ist­nieją­cych w rzeczy­wis­tości sytu­ac­jach czy obiek­tach. Zas­tanów­cie się nad imi­tacją pul­pitu, papieru czy biurka. Użytkown­icy mogą uczyć się, rozu­mieć i czer­pać z tego typu rozwiązań w pro­jek­tach, ponieważ mogą się odnieść do ich prawdzi­wych odpowied­ników w rzeczywistości.

Adrian Shaugh­nessy napisał w książkę o paradok­sal­nych aspek­tach pro­jek­towa­nia graficznego.

Słowa paradoks używa on w sen­sie opinii lub oświad­czenia sprzecznego z powszech­nie przyję­tymi mądroś­ci­ami. Mimo że paradok­sów ist­nieje wiele, przed­stawię teraz te, które sam autor uznaje za swoje „TOP10”.

Jestem pro­fesjon­al­istą i dlat­ego wiem najlepiej.

Pro­jek­tanci, którzy wyko­rzys­tują ten argu­ment są najm­niej pro­fesjon­alni. Uważają oni, że lekar­zom nikt nie mówi, co mają robić, więc dlaczego ktoś miałby im mówić. Ale mit wszech­wiedzy zawodowej na szczęś­cie został obalony.

Pomysły zwykle są złe, nie dlat­ego, że są złymi pomysłami, ale że są źle przed­staw­ione.

Umiejęt­ność przed­staw­ienia zamysłu, idei pro­jektu jest równie ważna jak sam pomysł. Należy pamię­tać, że klient przed prezen­tacją pro­jektu zawsze ma pewne wąt­pli­wości i jest prz­er­ażony tym, co może za chwilę zobaczyć. Ma świado­mość, że zapłacił, ale nie ma poję­cia zupełnie za co.

Nie ma czegoś takiego jak zły klient, są tylko źli projektanci.

Gdy pro­jekty są złe, to klienci, a nie my ponosimy kon­sek­wencje. Oczy­wiś­cie, zdarzają się klienci, z którymi pracuje się nad wyraz ciężko, ale najczęś­ciej są oni tymi złymi klien­tami, bo jacyś pro­jek­tanci źle ich potraktowali.

Najlep­szym sposobem na to, aby stać się lep­szym pro­jek­tan­tem, to staw­ianie się w roli klienta.

Autor przy­tacza tutaj myśl Ayn Randa, który mówi, że nie zamierza tworzyć po to, aby mieć klien­tów, ale zamierza mieć klien­tów aby móc tworzyć. Według Adrian Shaughnessy’ego wszyscy pro­jek­tanci w ramach szkole­nia powinni wydać pieniądze na te pro­jekty, które wykonują.

Jeśli chcemy edukować naszych klien­tów na temat pro­jektu, musimy najpierw dok­sz­tał­cić się na temat biz­nesu naszych klientów.

Zami­ast wychowywać naszych klien­tów, musimy sami nauczyć się z nimi roz­maw­iać. Tylko wtedy oni zaczną nas trak­tować poważnie.

Jeśli chcemy zara­biać jako grafik, musimy skon­cen­trować się na pracy, a nie pieniądzach.

Nie znaczy to, że pro­jek­tanci nie powinni być odpowied­nio wyna­gradzani za swoją pracę, ale głównym moty­wem pracy pro­jek­tanta powinna być jakość pro­jektu. Kiedy sku­pi­amy się wyłącznie na pieniądzach, praca jest zazwyczaj słaba.

Dla pro­jek­tan­tów wer­balne umiejęt­ności są równie ważne jak umiejęt­ności wizualne.

Ponieważ grafika powinna być jasna i zrozu­mi­ała, pro­jek­tanci powinni pomyśleć o konieczności zapewnienia sobie ust­nego uza­sad­nienia ich pracy. Prawie nigdy nie zdarzają się klienci, którzy nie chcieliby znać wyjaśnienia każdego ele­mentu pracy, którą zlecili.

Wszys­tkie dobre miejsca zlece­nia trafi­ają się innym projektantom.

Nieprawda. Prawie żad­nego zada­nia nie można na początku określić jako dobre lub złe. Nie ma dobrych czy złych zle­ceń, są tylko dobre lub złe real­iza­cje tych zleceń.

Jeżeli w nic nie wierzymy, nie powin­niśmy się zas­tanaw­iać dlaczego nikt w nas nie wierzy.

W świecie bez zasad, szanowani bywają ludzie, którzy wyz­nają jakieś zasady. Jeżeli wierzymy w etykę, moral­ność, stan­dardy zawodowe, a nawet pref­er­encje este­ty­czne, mamy przewagę nad pro­jek­tan­tem, który nie wierzy w nic.

Po dziesiąte: Gdy klient mówi, że masz pełną swo­bodę w dzi­ała­niu, nigdy nie oznacza pełnej swo­body.

Cokol­wiek pokażesz klien­towi, zawsze może znaleźć prob­lem. Dzieje się tak za każdym razem. To oczy­wiś­cie bardzo subiek­ty­wne spo­jrze­nie na temat reguł, które rządzą pro­jek­towym półświatkiem. Dobrze zdaję sobie sprawę, że byna­jm­niej nie wycz­er­puje to tem­atu, jeśli masz więc ciekawe doświad­czenia w tej kwestii, będzie mi niezmiernie miło, jeśli zechcesz podzielić się nimi z nami w komen­tarzach na samym dole tej strony.

Dziękuję!