Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Невидимите сили: Подравняване, Посока и Фокус

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

Bulgarian (Български) translation by Steliana Kozareva (you can also view the original English article)

Дизайнът е пълен с "невидими сили", всички от които помагат за изчистена и ясна комуникация. Колкото и да бъдете изкушени да се съсредоточите само над правилния шрифт или избора на подходяща комбинация от цветове, вашият дизайн ще се провали с гръм и трясък, ако не обърнете внимание на тези невидими сили.

Това е първата от три части за тези сили, затова нека започнем с подравняване, посока и фокус.

Представяне на "Елементите"

За да наистина осмислите невидимите сили на дизайна, трябва да спрете да приемате дизайна си като шрифтове, цветове, изображения и текст и да започнете да мислите за тези неща като "елементи".

Всяко едно от заглавията ви е "елемент", всеки параграф от главния текст е един голям "елемент" и всяко изображение е "елемент".

Във всеки от тези елементи има друг елемент - може да ги наричате "поделементи". Вашето лого може да има елемент "символ" и "текстови" елемент. А всяка буква в текста може да се счита като собствен елемент.

Цялото това говорене за елементи ме подсеща за курс по химия (който никога не съм карал), но всъщност е подходящо. Когато подредите елементите правилно, получавате нещо експлозивно, което изскача от страницата. Когато ги подредите случайно, получавате нещо калпаво.

Подравняване

Правенето на дизайна е предизвикателство, защото трябва да вземете скучно двумерно пространство и да го направите интересно, като същевременно е лесно разбираемо. Особено днес, с миниатюрните телефони и екрани, е важно това да се направи, колкото се може по-ефикасно. Всеки малък пискел трябва да си върши работата.

Затова подравняването е толкова важно. Подравнявайки елементите един с друг, можете да кажете доста.

Например, тези квардатчета са подравнени едно с друго.

И ако променим начина им на подравняване, това променя композицията напълно.

И ако развалим това подравняване, изглежда хаотично.

Ако вместо квадратчета използваме икони на социалните мрежи, виждате как точно подравняването е полезно. Какво щеше да е, ако тези икони на социалните мрежи:

Изглеждаха така:

Посока

Когато подравнявате елементи, създавате чувство на насоченост чрез въображаема линия. Наистина професионалните дизайнери наричат тази линия "ос". Мислете за нея като ос на колело: цялата тежест на колелото се върти около тази ос. Тя трябва да бъде балансирана. По подобен начин, оста помага да се контролира баланса в композицията.

Виждате ли тези елементи, които са наредени? Можете да ги наречете ос на композицията.

Ако подредите други елементи близо до тази ос, тя все още доминира и контролира композицията.

Дядо ви е бил прав: трябва да внимавате с осите си (англ. axes - ос, брадва). Например, избягвайте да смесвате центрирано подравнен текст с "асиметрична" композиция.

Както и да подравните текста си: центрирано, ляво или дясно (избягвайте двустранното подравняване за уеб), вие създавате ос по това подравняване.

Когато центрирате текст, вие създавате ос и цялата тежест на текста се върти около нея. Останалата част на композицията иска да бъде центрирана около тази ос също.

Затова, ако поставите ляво подравнен текст до центрирания, композицията става объркваща. Сега имате две оси, които се бият една с друга. Не е ли страшна гледка?

Изключението към това е, когато центрирано подравнен елемент обхваща ширината на композицията и ляво или дясно подравнени елементи са в самата композиция. Тогава осите не се бият една с друга.

Забележете как двете колони са зададени с ляво подравнение.

Този шаблон се вижда често при мобилния дизайн. На този скрийншот от приложението Yelp горната и долната лента с менюта имат централна ориентация, докато останалата част от екрата е зададена в ляво.

Или можете да създадете ос от гутера, като подравните едната колона дясно, а другата - ляво.

Фокус

До тук се концентрирах върху вертикалните оси. Можете да имате хоризонтални оси също (или диагонални, но това е рядкост при уеб и мобилния дизайн).

Когато две силни оси се пресекат, се генерира област на фокус. Окото по подразбиране следва всяка силна ос, затова ако две оси се засекат, окото ще отдели доста време на това място.

В даден момент при уеб или мобилен дизайн, е вероятно да поискате потребителя да се концентрира върху нещо, така че може да използвате пресичащи се оси, за да привлечете вниманието към това място като в тази ландинг страница:

Ляво подравнения текст създава една ос, а подравнението на бутона "купи сега" с изображението създава друга. Там, където се пресичат, се е създала фокус област.

Заключение

Като използвате подравняване, за да създавате оси, контролирате посоката и установявате фокус области, можете да постигнете целите на дизайна си по-добре: независимо дали това е подобряване на четимостта или управление на разговора.

Оглеждайте се за следващата ми статия, където ще говоря за това, как да оразмерите елементите си, за да създадете хармоничен, красив и ясен дизайн.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.