Како да го совладате дизајнот на распоред

Како да го совладате дизајнот на распоред
Rick Davis

Целосен водич за учење на основите на визуелниот дизајн.

Прашањето од милион долари: која е тајната на добриот дизајн?

Можеме да се филозофираме за ова , но генерално кажано, пословичната „тајна“ на добриот дизајн лежи во начинот на кој ги организирате вашите визуелни елементи, во однос на вашето платно и едни со други. Во основа, ние штотуку го опишавме дизајнот на распоредот. Што, кога ќе помислите на тоа, е насекаде каде што ќе погледнете.

Земете го изгледот на списанието, на пример. Нивниот дизајн го следи класичниот систем на мрежа (ќе научиме сè за мрежите за една минута). Сè е обично порамнето лево, десно и на дното. Колоните особено имаат јасно оправдано порамнување што ја прави страницата не само визуелно привлечна, туку и лесна за читање и авторитативна. Големите наслови го привлекуваат вниманието на гледачот, додека поднасловот доаѓа како контраст во големината за да создаде визуелна хиерархија на информации.

Linda Gaom, Behance

Сите овие квалитети ја прават страницата дизајнот е чист, структуриран и лесен за читање, и тие се во склад со советите за кои ќе зборуваме следно. Но, прво, ајде да разбереме повеќе за самиот дизајн на распоред.

Што е дизајн на распоред?

Дизајнот на распоредот се однесува на распоредот на графичките елементи со цел да се привлече вниманието на читателот и да се пренесе одредена порака на визуелно привлечен начин .

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

Едноставен начин да се разбере ова е земајќи го примерот на нашата веб-страница, на пример. Графиките се јасно одвоени од текстот, а исто така и повиците за акција, така што вниманието на гледачот се движи од еден кон друг кластер на информации.

Принцип #5. Користете контраст

Погрижете се да имате доволно контраст во дизајнот.

Контрастот помага да се организира вашиот дизајн и ќе воспостави многу потребна хиерархија и ќе стави акцент на она што е важно.

Повеќе од тоа, добрата употреба на контраст, исто така, додава визуелен интерес низ вашиот дизајн. Ајде да се соочиме со тоа, распоредот каде што сè е со иста големина, форма или боја ќе изгледа досадно. Контрастот ги зачинува работите.

Вашата прва мисла може да биде контрастот на бојата, како што е топло наспроти студено, темно наспроти светло, сино наспроти портокалово. Но, иако бојата е исклучително суштински принцип на контраст, постојат и контрасти на типот, усогласувањето и големината. И запомнете, контрастот е исто така релативен. Има значење само во сопоставување со други елементи.

Еве неколку примери на распоред кои го користат ова правило на паметен и убав начин. Забележете го контрастот во типографијата, бојата, па дури и контрастот во големината помеѓу елементите.

Извор: Акционен план за усогласување на IAG

Принцип #6. Повторување, шема, ритам

Кога размислуваме за повторување, размислувамеод ист елемент одново и одново.

Но тоа е различно во дизајнот. Дефинитивно не е досадно како тоа. Кога се користи правилно, повторувањето всушност може да го зајакне вашиот дизајн.

Обидете се да идентификувате и повторно да употребите мотив низ вашиот распоред, така што различни области се чувствуваат поврзани и дел од истиот состав. Ќе ви помогне вашиот дизајн да има тема. Со повторување на елементите, не само што испорачувате според очекувањата на вашата публика, туку и ќе го подобрите корисничкото искуство. Доследноста ги прави корисниците да се чувствуваат поудобно.

Тоа можете да го направите со повторување на облици или симболи. Или дури и шема на бои, фонт и ист стил воопшто.

Добра навика е да користите фонт со големо семејство. Ограничете го различниот број на шаблони, тежини/стилови и бои на линиите и повторете го целото време. Исто така, обидете се да го задржите стилот на сликите и графиките исти. На пример, користете илустрации од истиот уметник.

Извор: Thepentool.co

Тоа е тоа. Ова се шесте принципи кои ќе ви помогнат да го организирате вашиот дизајн и да постигнете почист, попрофесионален и избалансиран распоред.

Но, вашето патување не завршува тука. Графичкиот дизајн не е егзактна наука и не треба да се ограничува на совети и принципи. Како што е точно во сите области на создавањето, не постои тешко правило. Прекинувањето на овие совети на суптилни начини ќе додаде длабочина и разновидноствашите дизајни.

Сепак, тие се одлична почетна точка и ве охрабруваме да ги пробате. И кажете ни како функционирале!

Преземете го Vectornator за да започнете

Однесете ги вашите дизајни на следното ниво.

Преземете ја датотеката за дизајнот на логото овде. Но, дизајнот на печатениот материјал, како весници, списанија, постери и нивните дигитални колеги, како и дизајнот на веб, апликации или UX/UI.

Зборот „распоред“ ни дава многу совети. Тоа значи распоред на однапред одредени елементи на страницата.

Кога распоредот е ефективен, тој изгледа добро и го води гледачот да ја разбере пораката што дизајнот се обидува да ја пренесе. Оттука, разбирањето на распоредот е клучно за создавање привлечни, ефективни, кориснички и пријатни композиции.

Ако распоредот не ја пренесува добро својата порака до публиката, или со други зборови, тој не „чита добро “, дизајнот ќе биде неефикасен колку и да изгледа тренди. Во областа на дизајнот на распоред, содржината ги заменува трендовите и триковите.

Целта на дизајнот на распоредот

За брзо пренесување на пораката

Ова е клучно. Дизајнот на распоред ја воспоставува врската помеѓу графичките средства за да се постигне непречено движење на очите за максимална ефективност и влијание.

Исто така види: Разиграност со Shape Builder: Интервју со Настја

Да се ​​создаде рамнотежа

Користењето на принципите на дизајнот на распоред е наједноставниот начин за создавање чувство на рамнотежа и симетрија во вашите дизајнерски проекти без да станете здодевни.

За да создадете кохезивност

Изгледот ви помага да ги распоредите многуте елементи од вашиот дизајн на лесно сварлив, кохезивен и логичен начин.

Да се ​​создаде убавина

Биланс и структура природно создаваат убавина.Ако дизајнот на вашиот распоред е направен правилно, тој автоматски ќе стане визуелно привлечен за гледачот. Колку помалку напор треба да вложат гледачите за да разберат порака, толку вашиот дизајн ќе изгледа поатрактивен.

Дизајнер од Френк Филипин за неговата книга „Порано бев студент по дизајн: Тогаш - Сега.' Извор: DesignBoom

Елементите на дизајнот на распоредот

Текст

Ова ги вклучува не само телото или параграфите на текстот, туку и насловите, поднасловите, заглавијата и подножјето. Вашиот избор на типографија, боја и големина ќе постигне различни ефекти врз тоа како вашиот распоред ќе се преведе на вашата публика.

Слика

Најчестите типови на слики се фотографии, илустрации или инфографици.

Форми

Облиците можат да бидат геометриски, кои се многу аголни, или можат да бидат органски, имитирајќи го природниот свет. Тие можат да бидат и апстрактни. Апстрактните форми беа многу тренди во изминатата година, бидејќи видовме веб-дизајнери како ги вградуваат во сложени и разновидни композиции.

Облиците можат да ја заменат сликата. Или тие може да се користат за додавање графички елементи на страница, означување текст или разграничување на просторот помеѓу другите визуелни елементи.

Бел простор

Секој дизајн на распоред ќе има одредена количина на бел простор што ќе им овозможи на вашите елементи сами да дишат и да се истакнат.

Златните принципи на дизајнот на распоредот

Ќе забележите дека принципитена дизајнот на распоредот следат многу основни принципи на дизајнот. Како користење на бојата на одреден начин, типографија, повторување, контраст, хиерархија и рамнотежа.

Принцип #1. Користете мрежи

Мрежите им помагаат на дизајнерите да позиционираат различни елементи на дизајнот, како што се текстот и сликите, на начин што изгледа кохерентно и лесно да се следи.

Тие обезбедуваат чувство за ред, ги спречуваат елементите да се надвладеат едни со други , и што е најважно, решетките исто така ќе го поправат вашето порамнување. Направете вашата работа да се чувствува почиста и попрофесионална.

Извор: hgmlegal.com

Анатомијата на мрежите

Можеби мислите дека тоа се само вертикални и хоризонтални линии, но мрежа е составена од неколку делови. Многумина, всушност. Еве ја најважната терминологија што треба да ја знаете во основната мрежа:

  • Формат е целата област на вашиот конечен дизајн. Значи, ако дизајнирате нешто за печатење, форматот е страницата, а ако сте веб-дизајнер, форматот е веб-страницата или прозорецот на прелистувачот.
  • Маргини се намерните празни места помеѓу форматот и дизајнот.
  • Проточните линии се хоризонталните линии што го делат вашиот распоред на паралелни делови. Проточните линии помагаат во читливоста на вашиот дизајн и го водат читателот правилно да ја следи содржината.
  • Модулите се блокови кои се формираат од хоризонталните линии и вертикалатапроточни линии на која било мрежа. Ако размислите за тоа, тие се градежни блокови на секоја мрежа. Сите ваши вертикални модули ги создаваат вашите колони, додека сите ваши хоризонтални мрежи ги создаваат вашите редови.
  • Региони се групи на поврзани модули, било вертикално или хоризонтално. Нема правила за тоа како да одлучите да ги организирате овие.

Извор: Radversity

Видови мрежи

Распоредите за распоред првпат беа користени за уредување ракопис на хартија.

Тие датираат уште од 13 век, кога францускиот уметник Вилар Де го споил системот на мрежа со златниот пресек за да произведе печатени распореди на страници со маргини. Овој мрежен систем можете да го видите до ден-денес, како што докажуваат повеќето распореди на печатени книги и списанија. Издавачите, уредниците и дизајнерите претпочитаат да користат стандардни мрежи не само затоа што изгледаат добро, туку затоа што читателите очекуваат одредени елементи на дизајнот да бидат на одредено место.

Мрежите може да се дизајнираат на два начина: симетрични или асиметрични. Симетричните мрежи следат централна линија, каде што вертикалните и хоризонталните области се еднакви еден со друг; а колоните имаат иста ширина.

Во асиметрична мрежа , како што сугерира името, маргините и колоните не се сите идентични.

Врз основа на оваа класификација, постојат пет главни типови на мрежи за распоред што се користат ширум светот на кои можете да се потпрете:

Ракописрешетки се најчестиот вид мрежа за документи. Тие ги одделуваат заглавието, подножјето и маргините и во основа создаваат правоаголник во форматот (или страницата) што ги обезбедува границите на вашиот текст. Тие се основа за списанија, весници и книги. Значи, тоа е веројатно распоредот со кој најмногу сте запознаени.

Извор: UXplanet

Извор: Radversity

Мрежи на колони се уште еден фаворит во објавувањето на списанијата. Типичен распоред на списанија користи решетки за колони за да го оддели текстот во лесни за читање делови. Но, тие се многу популарни и за веб-страниците. Можете да користите било што од две до шест решетки. Можно е повеќе, но не е вообичаено. Многу важна работа за решетките на колоните е тоа што растојанието помеѓу столбовите, или олуците, се подеднакво оддалечени еден од друг.

Симетричните решетки со колони се користат од весниците, на пример, додека асиметричната мрежа со колони се претпочита во веб дизајнот .

Извор: UX Planet

Извор: Radversity

Модуларни мрежи се слични на мрежата на колоните, но тие исто така ги опфаќаат хоризонталните линии на проток. Овој тип на решетка е потребен кога треба да организирате различни елементи во вашиот распоред, а решетките на колоните едноставно не се доволни.

Модуларните мрежи имаат модули со еднаква големина што го олеснува визуелизирањето на вашите просторни зони на различни начини.

Извор: UXPlanet

Извор: Radversity

Основните мрежи се фантастични за композиции базирани на текст. Основна линија е линијата каде што стои текстот кога пишувате, а водечката линија е растојанието помеѓу две основни линии. Се прашувате колку големи треба да бидат вашите наслови или поднаслови?

Решетките за основна линија се тука за да ви помогнат да му дадете на вашиот текст тековен ритам.

Извор: UX Planet

Извор: Fragaria

Хиерархиските мрежи изгледаат помалку како мрежа од сите нивни колеги. Сепак, тие се многу корисни кога се организираат дизајнерски елементи по нивниот редослед на важност. Хиерархиските мрежи може да се засноваат на модуларни мрежи, или дури можете да креирате свои. Веб-страниците многу ја користат оваа мрежа, особено дигиталните списанија и весници имаат тенденција да се потпираат повеќе на хиерархиски мрежи наместо на мрежи на колони во нивната транзиција да станат дигитални.

Извор: UX Plane

Principle #2. Користете негативен простор

Често мислиме дека празнината, тишината или недостатокот на боја се лоша работа. Но, ние не размислуваме како тие се цврстата основа на контрастот.

Исто така наречен бел простор, негативен простор е онаа област во вашиот дизајн што нема никакви вистински елементи. Тоа е просторот оставен празен. Тоа не само што ги опкружува вашите средства, туку ги создава и потребните врски меѓу нив. Поради тоа, негативниот простор е вистински елемент на дизајнот и има огромно влијание врз ефективноста на вашиот распореддизајнот е.

Добар наспроти лош негативен простор

Негативниот простор ќе помогне да се разделат различни области во вашиот дизајн, а исто така ќе му овозможи на вашиот распоред да дише. Помага при визуелна хиерархија и визуелна рамнотежа; го поставува фокусот на корисникот на основните елементи; го намалува нивото на одвраќање; и конечно, додава стил и елеганција на вашиот дизајн.

Неискусните дизајнери може да имаат тенденција да пополнат што е можно повеќе од своето платно, со зголемување на текстот или разнесување лого или слика. Но, давањето простор за вашите елементи му овозможува на гледачот побрзо и поудобно да одбира одредени информации.

Ако сè бара внимание на вашиот гледач, ништо не се слуша.

– Арон Волтер, „Дизајн за емоции'

Еден лесен начин да се одреди вашиот негативен простор е со користење на модуларна мрежа. Со тоа што ќе го ставите на врвот на вашиот дизајн, тогаш можете лесно да визуелизирате кои модули можат да останат празни, а кои треба да се пополнат.

Designer by Brunswicker, Извор: Codesignmag.com

Исто така види: 8 начини да се искористи моќта на отстранување на позадината

Принцип бр. 3. Изберете единствена фокусна точка

Дали клиент некогаш ве замоли да го направите логото поголемо? А потоа насловот да биде уште поголем?

Не можете се да нагласите. Ја поразува поентата на добриот дизајн. Исто како и времето, фокусот е релативен. За еден елемент да се истакне, друг треба да послужи како позадина. Некои елементи треба да доминираат на други за да може вашиот дизајн да се прикажевизуелна хиерархија.

Фокусната точка во дизајнот е единствениот елемент со најголема визуелна тежина. Тоа е елементот што прво го привлекува погледот, повеќе од било што друго во вашиот распоред.

Фокусната точка ќе и соопшти на вашата публика каде започнува нивното патување за гледање на вашиот дизајн. Значи, тоа е почеток на приказната што ја раскажувате.

Ова обично може да се постигне со користење на голема слика или голем извор на типографија. Забележете колку е ефективна долунаведената фокусна точка

Дизајнирана од Браулио Амадо за Bloomberg Businessweek, Извор: Убаво е што

Но, иако фокусната точка ќе го привлече вниманието на вашата публика, следното правило ќе помогне да се води.

Принцип #4. Размислете за близина и проток

Принципот на близина е едноставен. Уверете се дека елементите што се поврзани едни со други се поставени заедно.

Блиската близина покажува дека визуелните средства се поврзани и стануваат една визуелна единица што помага да се организира вашиот распоред.

Затоа, групирајте ги само средствата за дизајнирање што имаат врска меѓу себе и користете џебови со информации за вашиот дизајн за да ја насочите вашата публика до делот од релевантната содржина што треба да ја консумира. Ова се нарекува и принцип на проток.

Извор: Satori Graphics

Дизајнот со добар проток ќе го води окото на гледачите низ распоредот, од елемент до елемент, лесно. Вашите фокусни точки ќе го привлечат окото и ќе станат




Rick Davis
Rick Davis
Рик Дејвис е искусен графички дизајнер и визуелен уметник со повеќе од 10 години искуство во индустријата. Тој има работено со различни клиенти, од мали стартапи до големи корпорации, помагајќи им да ги постигнат своите дизајнерски цели и да го подигнат својот бренд преку ефективни и влијателни визуелни слики.Дипломиран на Факултетот за визуелни уметности во Њујорк, Рик е страстен за истражување на новите дизајнерски трендови и технологии и постојано ги поместува границите на она што е можно на терен. Тој има длабока експертиза во софтверот за графички дизајн и секогаш е желен да го сподели своето знаење и увид со другите.Покрај неговата работа како дизајнер, Рик е и посветен блогер и е посветен на покривање на најновите трендови и случувања во светот на софтверот за графички дизајн. Тој верува дека споделувањето информации и идеи е клучно за поттикнување силна и енергична заедница за дизајн и секогаш е нестрплив да се поврзе со други дизајнери и креативци онлајн.Без разлика дали дизајнира ново лого за клиент, експериментира со најновите алатки и техники во неговото студио или пишува информативни и привлечни објави на блогот, Рик секогаш е посветен да ја испорача најдобрата можна работа и да им помага на другите да ги постигнат своите дизајнерски цели.