Как да овладеете дизайна на оформлението

Как да овладеете дизайна на оформлението
Rick Davis

Пълно ръководство за усвояване на основите на визуалния дизайн.

Въпросът за милион долара: каква е тайната на добрия дизайн?

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

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

Линда Гаом, Behance

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

Какво представлява дизайнът на оформлението?

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

Тук не става дума за дизайн на лого, а за дизайн на печатни материали, като вестници, списания, плакати и техните цифрови аналози, както и за дизайн на уебсайтове, приложения или UX/UI.

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

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

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

Целта на дизайна на оформлението

Бързо предаване на съобщение

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

Създаване на баланс

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

Създаване на сплотеност

Оформлението ви помага да подредите многото елементи на вашия дизайн по лесно усвоим, съгласуван и логичен начин.

Да създаваш красота

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

Дизайнер от Франк Филипин за книгата му "Бях студент по дизайн: тогава - сега" Източник: DesignBoom

Елементи на дизайна на оформлението

Текст

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

Изображение

Най-често срещаните видове изображения са снимки, илюстрации или инфографики.

Вижте също: Как да нарисуваме цвете

Форми

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

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

Бяло пространство

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

Златните принципи на дизайна на оформлението

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

Принцип #1. Използвайте решетки

Мрежите помагат на дизайнерите да разположат различни елементи на дизайна, като текст и изображения, по начин, който изглежда последователен и лесен за проследяване.

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

Източник: hgmlegal.com

Анатомия на решетките

Може би си мислите, че това са само вертикални и хоризонтални линии, но мрежата се състои от няколко части. Всъщност от много. Ето най-важната терминология, която трябва да знаете за основната мрежа:

  • Формат Така че, ако проектирате нещо за печат, форматът е страницата, а ако сте уеб дизайнер, форматът е уеб страницата или прозорецът на браузъра.
  • Маржове са умишлените празни пространства между формата и дизайна.
  • Поточни линии са хоризонталните линии, които разделят оформлението ви на паралелни секции. Flowlines помагат за четливостта на дизайна ви и насочват читателя да следва правилно съдържанието.
  • Модули са блоковете, които се образуват от хоризонталните линии и вертикалните поточни линии на всяка решетка. Ако се замислите, те са градивните елементи на всяка решетка. Всички ваши вертикални модули създават колоните, а всички хоризонтални решетки - редовете.
  • Региони са групи от свързани модули, вертикални или хоризонтални. Няма правила за това как да решите да ги организирате.

Източник: Radversity

Видове решетки

Мрежите за оформление са използвани за първи път за подреждане на ръкописни текстове върху хартия.

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

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

В асиметрична мрежа , както подсказва името, полетата и колоните не са еднакви.

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

Решетки за ръкописи са най-разпространеният вид решетка за документи. Те разделят заглавието, колонтитула и полетата и по същество създават правоъгълник вътре във формата (или страницата), който осигурява границите на вашия текст. Те са основата за списания, вестници и книги. Така че вероятно това е оформлението, което ви е най-познато.

Източник: UXplanet

Източник: Radversity

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

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

Източник: UX Planet

Източник: Radversity

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

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

Източник: UX Planet

Източник: Radversity

Базови решетки Основната линия е линията, на която се намира текстът при писане, а водещата линия е разстоянието между две основни линии. Чудите се колко големи да бъдат заглавията и подзаглавията ви?

Мрежите с изходни линии са тук, за да придадат на текста ви плавен ритъм.

Източник: UX Planet

Източник: Fragaria

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

Източник: UX Plane

Принцип № 2. Използване на негативно пространство

Често си мислим, че празнотата, тишината или липсата на цвят са нещо лошо. Но не се замисляме как те са здравата основа на контраста.

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

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

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

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

Ако всичко крещи за вниманието на зрителя, нищо не се чува.

- Aaron Walter, "Дизайн за емоции

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

Дизайнер от Brunswicker, източник: Codesignmag.com

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

Случвало ли ви се е клиент да ви помоли да уголемите логото, а след това да уголемите още повече заглавието?

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

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

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

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

Проектирано от Браулио Амадо за Bloomberg Businessweek, Източник: Хубаво е, че

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

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

Принципът на близост е прост. Уверете се, че елементите, които са свързани помежду си, са разположени заедно.

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

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

Източник: Satori Graphics

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

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

Принцип № 5. Използвайте контраст

Уверете се, че дизайнът ви е достатъчно контрастен.

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

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

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

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

Източник: План за действие на ИАГ за съгласуване

Принцип № 6. Повторение, модел, ритъм

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

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

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

Можете да направите това, като повтаряте форми или символи. Или дори цветова схема, шрифт и един и същ стил като цяло.

Добър навик е да използвате шрифт с голямо семейство. Ограничете различния брой модели, тегла/стилове на линиите и цветове и ги повтаряйте навсякъде. Също така се опитайте да запазите стила на изображенията и графиките един и същ. Например използвайте илюстрации от един и същ художник.

Източник: Thepentool.co

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

Вижте също: Стилове за изписване на татуировки, които да опитате във Vectornator

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

Въпреки това те са чудесна отправна точка и ви препоръчваме да ги изпробвате. И ни кажете как са ви подействали!

Изтеглете Vectornator, за да започнете

Преминете на следващото ниво на дизайна си.

Изтегляне на файл



Rick Davis
Rick Davis
Рик Дейвис е опитен графичен дизайнер и визуален артист с над 10 години опит в индустрията. Той е работил с различни клиенти, от малки стартиращи фирми до големи корпорации, като им е помагал да постигнат своите дизайнерски цели и да издигнат марката си чрез ефективни и въздействащи визуални ефекти.Възпитаник на Училището за визуални изкуства в Ню Йорк, Рик е запален по изследването на нови тенденции и технологии в дизайна и непрекъснато разширява границите на възможното в тази област. Той има задълбочен опит в софтуера за графичен дизайн и винаги е нетърпелив да сподели знанията и прозренията си с другите.В допълнение към работата си като дизайнер, Рик е и отдаден блогър и е посветен на отразяването на най-новите тенденции и разработки в света на софтуера за графичен дизайн. Той вярва, че споделянето на информация и идеи е от ключово значение за насърчаването на силна и жизнена дизайнерска общност и винаги е нетърпелив да се свърже с други дизайнери и творци онлайн.Независимо дали проектира ново лого за клиент, експериментира с най-новите инструменти и техники в студиото си или пише информативни и ангажиращи публикации в блогове, Рик винаги се е ангажирал да предоставя възможно най-добрата работа и да помага на другите да постигнат своите дизайнерски цели.