Зміст
Повний посібник з вивчення основ візуального дизайну.
Питання на мільйон доларів: у чому секрет гарного дизайну?
Ми можемо пофілософствувати на цю тему, але загалом, горезвісний "секрет" гарного дизайну полягає в тому, як ви організовуєте візуальні елементи відносно полотна та один одного. По суті, ми щойно описали дизайн макетів, який, якщо подумати, є скрізь, куди б ви не подивилися.
Візьмемо, наприклад, макет журналу. Його дизайн відповідає класичній сітковій системі (про сітки ми дізнаємося все за хвилину). Зазвичай все вирівнюється зліва, справа і знизу. Колонки особливо мають чітке виправдане вирівнювання, що робить сторінку не тільки візуально привабливою, але і легкою для читання, і авторитетною. Великі заголовки привертають увагу глядача.увагу, тоді як підзаголовок контрастує за розміром, створюючи візуальну ієрархію інформації.
Лінда Гаом, Behance
Всі ці якості роблять дизайн сторінки чистим, структурованим і легким для читання, і вони співзвучні з порадами, про які ми поговоримо далі. Але спочатку давайте розберемося в самому дизайні макета.
Що таке дизайн макета?
Дизайн макета стосується розташування графічних елементів з метою привернути увагу читача та передати певне повідомлення у візуально привабливий спосіб.Отже, ми говоримо не про дизайн логотипів, а про дизайн друкованих матеріалів, таких як газети, журнали, плакати та їхні цифрові аналоги, а також про дизайн веб-сайтів, додатків чи UX/UI.
Дивіться також: 12 стилів ілюстрацій, які повинен знати кожен ілюстраторСлово "макет" дає нам багато підказок. Воно означає розташування заздалегідь визначених елементів на сторінці.
Коли макет ефективний, він має гарний вигляд і допомагає глядачеві зрозуміти повідомлення, яке дизайн намагається передати. Тому розуміння макета є ключовим у створенні привабливих, ефективних, зручних і приємних композицій.
Якщо макет погано доносить своє повідомлення до аудиторії, або, іншими словами, погано "читається", дизайн буде неефективним, незалежно від того, наскільки трендовим він виглядає. У сфері дизайну макетів контент витісняє тренди і трюки.
Мета дизайну макета
Щоб швидко передати повідомлення
Дизайн макета встановлює взаємозв'язок між графічними ресурсами, щоб досягти плавного руху очей для максимальної ефективності та впливу.
Для створення балансу
Використання принципів макетування - це найпростіший спосіб створити відчуття балансу та симетрії у ваших дизайн-проектах, не роблячи їх нудними.
Для створення згуртованості
Макет допоможе вам розташувати численні елементи вашого дизайну в легко сприйманий, цілісний і логічний спосіб.
Творити красу
Баланс і структура природним чином створюють красу. Якщо дизайн вашого макета виконаний правильно, він автоматично стає візуально привабливим для глядача. Чим менше зусиль потрібно докласти глядачеві, щоб зрозуміти повідомлення, тим привабливішим здаватиметься ваш дизайн.
Дизайнер Френк Філіппін для своєї книги "Я був студентом-дизайнером: тоді - тепер" Джерело: DesignBoom
Елементи дизайну макета
Текст
Це стосується не лише тексту або абзаців, але й заголовків, підзаголовків, верхніх і нижніх колонтитулів. Ваш вибір шрифту, кольору та розміру впливатиме на те, як ваш макет буде сприйматися аудиторією.
Зображення
Найпоширенішими типами зображень є фотографії, ілюстрації та інфографіка.
Форми
Форми можуть бути геометричними, дуже кутастими, або органічними, що імітують світ природи. Вони також можуть бути абстрактними. Абстрактні форми були дуже модними в минулому році, оскільки ми бачили, як веб-дизайнери включали їх у складні та розлогі композиції.
Фігури можуть замінити зображення, а можуть бути використані для додавання графічних елементів на сторінку, виділення тексту або розмежування простору між іншими візуальними елементами.
Пробіл
Будь-який дизайн макета матиме певну кількість білого простору, який дозволить вашим елементам дихати і виділятися самостійно.
Золоті принципи дизайну макетів
Ви помітите, що принципи дизайну макетів відповідають багатьом фундаментальним принципам дизайну. Наприклад, використання кольору певним чином, типографіка, повторення, контраст, ієрархія та баланс.
Принцип №1. Використовуйте сітки
Сітки допомагають дизайнерам позиціонувати різні елементи дизайну, такі як текст і зображення, так, щоб вони виглядали цілісними і легко сприймалися.
Вони надають відчуття порядку, не дають елементам переважати один одного, і, що найважливіше, сітки також коригують ваше вирівнювання. Роблячи вашу роботу чистішою та професійнішою.
Джерело: hgmlegal.com
Анатомія сіток
Ви можете подумати, що це просто вертикальні та горизонтальні лінії, але сітка складається з декількох частин. Насправді з багатьох. Ось найважливіша термінологія, яку вам потрібно знати в базовій сітці:
- Формат Якщо ви розробляєте щось для друку, формат - це сторінка, а якщо ви веб-дизайнер, формат - це веб-сторінка або вікно браузера.
- Маржинальність це навмисні порожні проміжки між форматом і дизайном.
- Потокові лінії це горизонтальні лінії, які розділяють ваш макет на паралельні частини. Лінії потоку допомагають зробити ваш дизайн більш читабельним і спрямовують читача на правильне відстеження змісту.
- Модулі це блоки, утворені горизонтальними лініями та вертикальними лініями потоку будь-якої сітки. Якщо подумати, то це будівельні блоки будь-якої сітки. Всі ваші вертикальні модулі створюють ваші стовпчики, а всі ваші горизонтальні сітки створюють ваші рядки.
- Регіони це групи пов'язаних між собою модулів, вертикальних або горизонтальних. Немає ніяких правил щодо того, як ви вирішите їх організувати.
Джерело: Radversity
Типи решіток
Сітки для макетування вперше були використані для впорядкування рукописного тексту на папері.
Вони беруть свій початок ще в 13 столітті, коли французький художник Віллар Де поєднав систему сітки із золотим перетином для створення макетів друкованих сторінок з полями. Цю систему сітки можна побачити і сьогодні, про що свідчить більшість друкованих макетів книг і журналів. Видавці, редактори та дизайнери вважають за краще використовувати стандартні сітки не тільки тому, що вони добре виглядають, але й тому, що читачі звикли до них.очікувати, що певні елементи дизайну будуть знаходитися в певному місці.
Сітки можуть бути спроектовані двома способами: симетричними або асиметричними. Симетричні сітки слідувати центральній лінії, де вертикальні та горизонтальні області рівні між собою, а стовпчики мають однакову ширину.
В одному з них асиметрична сітка Як випливає з назви, поля і стовпці не є ідентичними.
На основі цієї класифікації існує п'ять основних типів макетних сіток, що використовуються у всьому світі, на які ви можете покластися:
Сітки для рукописів найпоширеніший тип сітки для документів. Вона відокремлює верхній, нижній колонтитул і поля, і, по суті, створює прямокутник всередині формату (або сторінки), який визначає межі вашого тексту. Це основа для журналів, газет і книг. Тож це, мабуть, найбільш знайомий вам макет.
Джерело: UXplanet
Джерело: Radversity
Решітки для колон ще один фаворит журнальної верстки. Типова журнальна верстка використовує сітки колонок для розділення тексту на зручні для читання розділи. Але вони дуже популярні і для веб-сайтів. Ви можете використовувати від двох до шести сіток. Більше можливо, але не часто. Дуже важливим у сітках колонок є те, що інтервали між колонками, або жолоби, знаходяться на однаковій відстані від кожної з них.інший.
Симетричні сітки стовпчиків використовуються, наприклад, у газетах, тоді як у веб-дизайні перевага надається асиметричній сітці стовпчиків.
Джерело: UX Planet
Джерело: Radversity
Модульні решітки схожі на сітку стовпчиків, але вони також враховують горизонтальні лінії потоку. Цей тип сітки потрібен, коли вам потрібно впорядкувати різні елементи в макеті, а сітки стовпчиків просто недостатньо.
Модульні сітки мають однакові за розміром модулі, що дозволяє дуже легко візуалізувати ваші просторові зони різними способами.
Джерело: UX Planet
Джерело: Radversity
Базові сітки фантастично підходять для текстових композицій. Основний рядок - це рядок, на який спирається текст, коли ви друкуєте, а вирівнювання - це інтервал між двома основними рядками. Не знаєте, якого розміру повинен бути ваш заголовок або підзаголовок?
Базові сітки допоможуть надати тексту плавного ритму.
Джерело: UX Planet
Джерело: Fragaria
Ієрархічні сітки виглядають менш схожими на сітку, ніж всі їхні аналоги. Тим не менш, вони дуже корисні при організації елементів дизайну в порядку їхньої важливості. Ієрархічні сітки можуть базуватися на модульних сітках, або ви навіть можете створити власну. Веб-сайти часто використовують цю сітку, особливо цифрові журнали та газети, які, як правило, більше покладаються на ієрархічні сітки, ніж на сітки стовпців, при переході від стовпчикової сітки доцифровий.
Джерело: UX Plane
Принцип №2: використовуйте від'ємний пробіл
Ми часто думаємо, що порожнеча, тиша або відсутність кольору - це погано. Але ми не замислюємося над тим, що вони є міцною основою контрасту.
Також званий білим простором, негативний простір - це область у вашому дизайні, яка не містить жодних елементів. Це область, що залишилася порожньою. Вона не просто оточує ваші об'єкти, але й створює необхідні зв'язки між ними. Тому негативний простір є повноправним елементом дизайну і має величезний вплив на ефективність вашого макета.
Хороший чи поганий негативний простір
Негативний простір допоможе відокремити різні зони у вашому дизайні, водночас дозволяючи макету "дихати". Він допомагає створити візуальну ієрархію та візуальний баланс, фокусує увагу користувача на основних елементах, зменшує рівень відволікання і, зрештою, додає дизайну стилю та елегантності.
Недосвідчені дизайнери можуть мати тенденцію заповнювати якомога більшу частину полотна, збільшуючи текст або збільшуючи логотип чи зображення. Але якщо залишити елементам достатньо місця, глядач зможе швидше і зручніше вловлювати певні інформаційні сигнали.
Якщо все кричить про увагу глядача, його нічого не чути.- Аарон Волтер, "Дизайн для емоцій
Простий спосіб визначити від'ємний простір - використати модульну сітку. Помістивши її поверх дизайну, ви зможете легко візуалізувати, які модулі можуть залишатися порожніми, а які слід заповнити.
Дизайнер: Brunswicker, Джерело: Codesignmag.com
Принцип №3: оберіть єдиного координатора
Чи просив вас коли-небудь клієнт зробити логотип більшим? А потім зробити заголовок ще більшим?
Ви не можете підкреслити все. Це суперечить сенсу хорошого дизайну. Як і час, фокус відносний. Щоб один елемент виділявся, інший повинен служити фоном. Деякі елементи повинні домінувати над іншими, щоб ваш дизайн відображав візуальну ієрархію.
Фокусна точка в дизайні - це елемент, що має найбільшу візуальну вагу. Це елемент, який привертає увагу в першу чергу, більше, ніж будь-що інше у вашому макеті.Фокусна точка оголосить вашій аудиторії, де починається їхня подорож на вашому дизайні. Це початок історії, яку ви розповідаєте.
Зазвичай цього можна досягти, використовуючи велике зображення або велике джерело типографіки. Зверніть увагу, наскільки ефективною є фокусна точка нижче
Розроблено Брауліо Амадо для Bloomberg Businessweek, Джерело: Приємно, що
Але в той час як фокусна точка приверне увагу вашої аудиторії, наступне правило допоможе спрямувати її.
Принцип №4: думайте про близькість і потік
Принцип близькості простий: переконайтеся, що елементи, які пов'язані один з одним, розміщені разом.
Дивіться також: Малювання векторами Близьке розташування вказує на те, що візуальні ресурси пов'язані між собою і стають однією візуальною одиницею, яка допомагає організувати ваш макет.Тож лише ті ресурси кластерного дизайну, які пов'язані між собою, можуть використовувати інформаційні кишені вашого дизайну, щоб спрямовувати вашу аудиторію до релевантного контенту, який їй потрібно споживати. Це також називається принципом потоку.
Джерело: Satori Graphics
Дизайн з хорошим перетіканням легко проведе погляд глядача по всьому макету, від елемента до елемента. Ваші фокусні точки притягуватимуть погляд і стануть місцем відпочинку, в той час як інші елементи задаватимуть напрямок.
Простий спосіб зрозуміти це, наприклад, на прикладі нашого сайту. Графіка чітко відокремлена від тексту, так само як і заклики до дії, тому увага глядача переходить від одного блоку інформації до іншого.
Принцип №5: використовуйте контраст
Переконайтеся, що у вашому дизайні достатньо контрасту.
Контраст допомагає впорядкувати дизайн, встановити необхідну ієрархію та розставити акценти на головному.Більше того, вдале використання контрасту також додає візуального інтересу до вашого дизайну. Погляньмо правді в очі, макет, де все має однаковий розмір, форму або колір, буде виглядати нудно. Контраст оживляє речі.
Першою думкою може бути кольоровий контраст, наприклад, теплий проти холодного, темний проти світлого, синій проти помаранчевого. Але хоча колір є надзвичайно важливим принципом контрасту, існують також контрасти типу, вирівнювання та розміру. І пам'ятайте, що контраст також відносний. Він має сенс лише в поєднанні з іншими елементами.
Ось кілька прикладів макетів, які розумно і красиво використовують це правило. Зверніть увагу на контраст у типографіці, кольорах і навіть контраст у розмірах між елементами.
Джерело: План дій з примирення НЗФ
Принцип №6: Повторення, візерунок, ритм
Коли ми думаємо про повторення, ми думаємо про той самий елемент знову і знову.
Але в дизайні все по-іншому. Він точно не такий нудний. При правильному використанні повторення може насправді підсилити ваш дизайн.
Спробуйте визначити і повторно використати мотив у вашому макеті, щоб різні області відчували себе пов'язаними і частиною однієї композиції. Це допоможе вашому дизайну мати тему. Повторюючи елементи, ви не тільки відповідаєте очікуванням вашої аудиторії, але й покращуєте користувацький досвід. Послідовність дозволяє користувачам відчувати себе більш комфортно.
Ви можете зробити це, повторюючи форми або символи. Або навіть колірну гамму, шрифт і той самий стиль загалом.
Хороша звичка - використовувати шрифти з великою сім'єю. Обмежте різну кількість візерунків, товщину/стилі ліній і кольори, а також повторюйте їх в усьому. Також намагайтеся дотримуватися однакового стилю зображень і графіки. Наприклад, використовуйте ілюстрації одного і того ж художника.
Джерело: Thepentool.co
Ось і все. Це шість принципів, які допоможуть вам організувати дизайн і досягти більш чистого, професійного та збалансованого макета.
Але на цьому ваша подорож не закінчується. Графічний дизайн - це не точна наука, і його не варто обмежувати порадами та принципами. Як і у всіх сферах творчості, тут не існує жорстких правил. Відступаючи від цих порад, ви зможете додати глибини та різноманітності вашим проектам.
Тим не менш, вони є чудовою відправною точкою, і ми закликаємо вас спробувати їх. І дайте нам знати, як вони спрацювали!
Завантажте Vectornator, щоб розпочати роботу
Підніміть свій дизайн на новий рівень.
Завантажити файл
