Jak tworzyć zrównoważone układy stron

Autor: Peter Berry
Data Utworzenia: 16 Lipiec 2021
Data Aktualizacji: 13 Móc 2024
Anonim
Na pierwszych zdjęciach Plutona znaleźliśmy wieloryba
Wideo: Na pierwszych zdjęciach Plutona znaleźliśmy wieloryba

Zawartość

Głównym celem każdego projektu strony, niezależnie od tego, czy jest to broszura drukowana, czy najnowsza aplikacja internetowa, jest jasne i efektywne przekazywanie informacji czytelnikowi. Jednym z najlepszych sposobów na zapewnienie, że kluczowe informacje dotrą do czytelnika, jest stworzenie wyważonego układu strony.

Projektowanie układu strony zazwyczaj obejmuje wiele rozmieszczania, przestawiania i formatowania elementów. Wielu projektantów podchodzi do tego procesu w sposób naturalny, szukając przyjemnego efektu końcowego. Chociaż może to prowadzić do doskonałych szczęśliwych wypadków, istnieje ryzyko, że użycie metodologii swobodnej może spowodować brak równowagi wizualnej na stronie.

Dobra kompozycja strony powinna być zarówno przyjemna dla oka, jak i jasno przekazywać te kluczowe informacje docelowej publiczności. Zebraliśmy razem kilka najważniejszych wskazówek, które pomogą Ci zadbać o równowagę między projektami układu strony (pomocny będzie również dobry kreator witryn). Te podejścia będą dobrze działać, zapewniając strukturę równowagi, niezależnie od medium, z którym pracujesz.


Aby uzyskać więcej porad dotyczących witryn internetowych, zapoznaj się z naszym przewodnikiem dotyczącym tworzenia doskonałych układów witryn internetowych.

01. Użyj siatki

Jednym z najłatwiejszych sposobów zapewnienia równowagi na stronie jest użycie systemu siatki. Siatki były jedyną domeną drukowanych stron, ale w ciągu ostatnich kilku lat wykonano wiele pracy online, aby pomóc przenieść koncepcję siatki na nośnik cyfrowy.

Używając siatki do informowania o położeniu różnych elementów na stronie, utworzysz połączenie między różnymi elementami tworzącymi stronę. Może to pomóc w zapewnieniu porządku w układzie, zapewniając czytelnikowi wyraźne odniesienie strukturalne, do którego może się odwołać, i zwiększając sukces Twojej strony.

Jest to ważne, ponieważ gdy wszystkie elementy strony mają poczucie, że są ze sobą połączone, ogólny efekt wydaje się czytelnikowi wygodniejszy, pomagając mu rozluźnić się i ułatwiając dostęp do ważnych rzeczy: treści.


02. Wybierz pojedynczy punkt ogniskowy

Jednym z najskuteczniejszych sposobów zapewnienia poczucia równowagi jest wybranie pojedynczego punktu centralnego dla projektu układu. Dobrym przykładem tego w praktyce jest użycie dużego obrazu jako największego pojedynczego elementu na stronie.

Mocna grafika może zapewnić skuteczny sposób na wprowadzenie czytelnika na twoją stronę (podobnie jak ekspercka analiza idealnej usługi hostingowej), a także dostarcza użytecznego elementu strukturalnego, wokół którego uporządkujesz pozostałą treść w układzie. Jeśli masz wiele elementów wizualnych, użyj zasady bliskości teorii Gestalt, aby zgrupować je razem, dopasowując je w ten sam sposób.

Warto również pamiętać, że w ten sam sposób możesz użyć nagłówka lub cytatu; Dobry nagłówek wyświetlacza może zaoferować tyle samo wizualnego zainteresowania, co obraz, jednocześnie zapewniając strukturę, która pomoże zapewnić zrównoważony układ.


03. Użyj zasady trójpodziału

Jednym z najlepszych sposobów na zapewnienie poczucia równowagi jest zastosowanie ulubionej przez projektanta reguły trójpodziału lub złotego podziału. Mówiąc prościej, zasada trójpodziału mówi, że jeśli podzielisz stronę na trzy części zarówno w pionie, jak iw poziomie, punkty, w których przecinają się linie siatki, będą stanowić naturalne punkty ogniskowe kompozycji.

Dopasowując kluczowe elementy do tych czterech punktów, uzyskasz przyjemniejszą kompozycję, niż gdybyś na przykład idealnie wyśrodkował elementy na swojej stronie.

Sama zasada trójpodziału nie zapewni w magiczny sposób równowagi układu, ale rozszerzając tę ​​zasadę, łatwo jest wykorzystać tę tendencję do naturalnego punktu skupienia, aby pomóc w ustaleniu równowagi układu.

Powszechnym podejściem jest umieszczenie najważniejszych elementów strony w górnej (lub dolnej) trzeciej części strony, tak aby główny punkt centralny był wyrównany tak, aby pasował do jednego ze skrzyżowań. Masz wiele zasobów do przechowywania w swojej witrynie? Sprawdź te opcje przechowywania w chmurze.

04. Użyj spacji

Początkujący projektanci często wykorzystują każdy kawałek miejsca na stronie, upychając zawartość, aż wszystkie luki zostaną wypełnione. Bardziej doświadczeni wiedzą, że czasami najlepszy projekt polega na pomijaniu elementów, a nie na ich wpychaniu.

Na nośniku drukowanym najczęstszym sposobem wykorzystania spacji jest powiększenie marginesów i odstępów strony. W Internecie po prostu zapewnienie dużej przestrzeni do oddychania wokół elementów może pomóc w stworzeniu skomponowanego i wyważonego projektu układu.

Użycie ujemnej spacji działa najlepiej, gdy masz przejrzystą strukturę, która zakotwicza zawartość razem (taką jak ta zapewniana przez siatkę), ponieważ ryzyko wystąpienia białych znaków może oznaczać rozłączenie między elementami strony, jeśli zostaną wprowadzone przypadkowo.

05. Powtórz elementy projektu

Powtarzanie może również zapewnić silne poczucie połączonego projektu i równowagi w kompozycji. Chodzi o to, że identyfikując i ponownie wykorzystując motyw lub zabieg projektowy w całym układzie, możesz zapewnić czytelnikowi odniesienie, tak aby różne obszary czuły się połączone i były częścią tej samej ogólnej kompozycji.

Możesz również użyć tej techniki, aby zapewnić centralny punkt w swoim projekcie, zachowując jednocześnie ogólną równowagę, celowo przerywając wzór podobieństwa wprowadzony przez powtórzenia.

06. Użyj hierarchii

Jednym z kluczowych podejść do osiągnięcia nirwany układu strony jest wyraźne poczucie struktury i hierarchii. Omówiliśmy już strukturę, ale ważne jest również, aby przekazać względne znaczenie różnych fragmentów treści na Twojej stronie. Na przykład nagłówek prawie zawsze powinien być wizualnie ważniejszy niż treść tekstu podstawowego.

Przyjrzyj się różnym elementom składającym się na projekt układu i zdecyduj, który element jest najważniejszy. Użyj tego elementu, aby zapewnić strukturalny zaczep dla pozostałych elementów na stronie, zachowując to, co najważniejsze.

07. Użyj skali, kontrastu i harmonii

Wreszcie użycie skali może być bardzo skuteczną metodą osiągnięcia dobrej równowagi wizualnej w układzie. Zwiększając niektóre elementy od innych, wyłoni się poczucie porządku i hierarchii. Pomaga to w stworzeniu wygodnego układu, ponieważ przeglądający najpierw automatycznie spojrzy na większe elementy w układzie, przechodząc do mniejszych elementów w trakcie ich czytania.

Zasada ta działa również przy zwiększonym kontraście, więc wyodrębnienie elementu na stronie poprzez kontrast sprawi, że oko będzie najpierw skupiać się na tym punkcie. Zapewnia to przejście do strony i ponownie daje przydatny punkt strukturalny do opracowania układu.

Zarówno skala, jak i kontrast działają najlepiej, gdy dotyczą jednego elementu, dzięki czemu wyróżniają się na tle innych części układu. Użyj zasad harmonii, aby inni poczuli się połączeni i zaakcentuj centralny punkt.

Radziecki
7 wskazówek, jak katapultować swój statek w projektową stratosferę
Dalej

7 wskazówek, jak katapultować swój statek w projektową stratosferę

tar zy projektant Aardman i twórca z JamFactory, Gavin trange, zarabiał na życie, mówiąc „tak” przy każdej okazji. Mógłby mieć czterometrową rzeźbę Gromita na wy tawie w Hongkongu i ni...
Zawracanie w Microsoft Windows 8 Flash
Dalej

Zawracanie w Microsoft Windows 8 Flash

Firma Micro oft przed tawiła zmiany w woich za adach dotyczących wtyczki Fla h w woim najnow zym y temie operacyjnym Window 8.Wcześniej Fla h był domyślnie uruchamiany w przeglądarce Internet Explorer...
WOKÓŁ BLOQ: Sztuka uliczna w Bristolu, projekty aplikacji na iPhone'a, darmowe oprogramowanie Pixar i wiele więcej!
Dalej

WOKÓŁ BLOQ: Sztuka uliczna w Bristolu, projekty aplikacji na iPhone'a, darmowe oprogramowanie Pixar i wiele więcej!

ee No Evil: 3500 pu zek prayu, 40 globalnych arty tów ulicznych, 12 wielopiętrowych budynków, 7 dni, jedna ulica ... prawdź, o co w tym w zy tkim chodzi!Jak wyróżnia z ię pośród m...