Korzystanie z punktów orientacyjnych Ułatwia układ strony
Projekt może mieć wpływ. Może mieć styl. Ale posiadanie ich nie wystarczy.
Aby dobrze działał, projekt musi mieć elementy, które pomagają sobie nawzajem. Na szczęście każdy element treści ma nieodłączne wskazówki.
Układ lub uporządkowanie treści na stronie internetowej ma kluczowe znaczenie dla sukcesu projektu. Między innymi układ określa priorytety treści, aby prowadzić ludzi z jednego elementu do drugiego.
Jeśli zrobi się to dobrze, ludzie będą tak zainteresowani treścią, że nie zauważą niczego innego.
Czytaj dalej, aby uzyskać więcej informacji i wskazówek dotyczących tworzenia układów, które działają w twoich projektach.
W poniższym przykładzie większość osób zauważy najpierw zdjęcie lub nagłówek, a następnie tekst i linki.
Mogą nie zauważyć, że nagłówek, tekst i wzór twarzy są odpowiednio umieszczane na jednej trzeciej i dwóch trzecich (zgodnie z zasadą trzecią) lub że nagłówek i linki są zapisane w kolorach próbkowanych z ust modela, lub że krzywa jej ramienia prowadzi oko do wezwań do działania.
Tekst, fotografia i nagłówek tworzą kompozycję. Jeśli ktoś wypadnie z miejsca, cały element zawodzi.
Układ oparty na wzajemnym szacunku
Gdzie wkładamy rzeczy? Niech nam powiedzą. Dziwactwa graficzne, zdjęcia i fragmenty tekstu stają się widoczne, kiedy spotykają się na stronie. Niektóre współpracują ze sobą lepiej niż inne, a niektóre działają tylko po umieszczeniu w określony sposób. Na przykład nasz układ działa technicznie na dwa sposoby:
Rysunek 1 pokazuje układ zastosowany w naszym przykładzie powyżej. Szare bloki reprezentują nagłówek, zdjęcie i tekst.
Rysunek 2 pokazuje, jak te same zasady miałyby zastosowanie do jego inwersji: jeden duży element zrównoważony przez dwa mniejsze elementy. To zdjęcie wygląda jednak lepiej po prawej stronie.
Nasz model patrzy w lewo. Na rysunku 1 patrzy na tekst. Na rysunku 2 odwraca wzrok od tekstu. To mogło zadziałać, gdyby patrzyła w kamerę, ale ponieważ odwraca wzrok, traci trochę siły. Nie za dużo, ale wystarczająco dużo, żeby to miało znaczenie.
Model na przemian wykazuje zainteresowanie tekstem, a gdy jest odwrócony, ignoruje go. Układ elementów tworzy postawę pozytywną lub negatywną.
Wyrównanie oparte na punktach orientacyjnych
Czasami rzeczy, które sprawiają, że elementy działają w określony sposób, dostarczają również wskazówek dotyczących przestrzeni i wyrównania. Zauważyliśmy, że oczy modelu wskazują lewą stronę, ale zdjęcie i tekst zawierają inne wskazówki wizualne.
W tej kompozycji występują wyraźne linie między punktami orientacyjnymi w typografii i obrazem:
- Oczom i wargom modela oraz krawędzi jej nosa odpowiadają krawędź prawej kolumny tekstu.
- Lewa kolumna tekstu styka się z lewą krawędzią nagłówka. Prawie osiąga krawędź włosów modelki, ale spada, by pozostać spójną z kolumną po prawej stronie.
- Twarz modela (szczególnie oczy i usta) określa pionową przestrzeń nagłówka.
- Dolna część zdjęcia oznacza dolną trzecią część kompozycji (w regule trzeciej).
- Oczy modela znajdują się na jednej trzeciej od góry kompozycji.
- Środek twarzy modelu i prawy brzeg nagłówka spotykają się w jednej trzeciej i dwóch trzecich punktów szerokości kompozycji.
Niektóre punkty orientacyjne mają większą moc niż inne. Projektanci i fotografowie mogą na przykład zastanawiać się, czy oczy modela mają większy wpływ niż jej sylwetka. Ale układ oparty na punktach orientacyjnych jest lepszy niż układ, który je ignoruje.
Używanie funkcji do tworzenia harmonii
Osoby niebędące projektantami, które próbują swoich sił w układach, czasami układają elementy na podstawie ich dopasowania do strony. Przestrzeń powinna być szanowana, ale nie zawsze prowadzi do najlepszego projektu.
Rysunek 5 wyrównuje elementy do przestrzeni strony i opiera wszystko na granicach płótna.
Ryc. 6 opiera jednak swój układ na punktach ogniskowych na zdjęciu. Rezultatem jest bardziej opływowy wygląd.
Rysunek 5 jest nieefektywny, ponieważ widzowie odbijają się pomiędzy punktami ogniskowymi: do nagłówka, do twarzy, aż do tekstu. Najprostsza linia jest prosta. Stąd figura 6 prowadzi wzrok widza od lewej do prawej, od jednego elementu do drugiego. Istotą drugiego układu jest wąski pas biegnący wzdłuż linii nagłówka.
Na tych obrazach czytniki są rysowane do twarzy modelu, nagłówka i tekstu - zazwyczaj w tej kolejności. To są trzy różne obszary, na które należy patrzeć. Wyrównanie ich daje ostrość układu.
Prawidłowa odpowiedź
Wszystkie trzy poniższe układy wykorzystują te same nagłówki, zdjęcia i elementy tekstowe:
Pierwszy układ ma najbardziej "oddychający pokój". Drugi respektuje tekst. Trzeci układ wykorzystuje ujemną przestrzeń do osiągnięcia równowagi. Wszystkie trzy korzystają z punktów orientacyjnych, ale na różne sposoby. Czy jest najlepszy?
Polowanie na odpowiedź może nas zaślepić na oczywistość: że wiele rozwiązań może być równie ważnych, gdy elementy współpracują ze sobą. Wizualne punkty orientacyjne są szansami, a nie regułami. Przyjrzyj się jeszcze raz pierwszemu projektowi.
Im bardziej elementy odpowiadają niejawnym liniom, tym bardziej element niezgodny będzie się wyróżniał. Tutaj projektant łamie słowo "Punkty orientacyjne" z pionowego wyrównania drugiego tekstu, podkreślając w ten sposób słowo kluczowe.
Nie ma wątpliwości, co strona promuje. Sukces nie mierzy się tym, jak ściśle elementy są zgodne z zasadami projektowania, ale jak dobrze strona przekazuje jej przesłanie.
Napisany specjalnie dla Webdesigner Depot przez Ben Gremillion. Ben jest niezależny pisarz i projektant który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.
W jaki sposób podążasz za punktami orientacyjnymi na swoich projektach? Co działa najlepiej dla Ciebie, a co nie?