Як створити збалансовані макети сторінок

Автор: Peter Berry
Дата Створення: 16 Липня 2021
Дата Оновлення: 13 Травень 2024
Anonim
Photobook Indesign #1 Верстка книги || Уроки Виталия Менчуковского
Відеоролик: Photobook Indesign #1 Верстка книги || Уроки Виталия Менчуковского

Зміст

Основною метою будь-якого макета сторінки, який ви розробляєте, будь то для друкованої брошури чи останньої веб-програми, є чітка та ефективна передача інформації читачеві. Одним з найкращих способів забезпечити доставку ключових повідомлень читачеві є створення збалансованого макета сторінки.

Дизайн макета сторінки, як правило, передбачає багато розміщення, перестановки та форматування елементів. Багато дизайнерів підходять до цього процесу органічно, відчуваючи шлях до приємного кінцевого результату. Хоча це може призвести до чудових щасливих аварій, існує ризик того, що використання методології у вільній формі може призвести до відсутності візуального балансу на сторінці.

Хороша композиція сторінки повинна одночасно радувати око, а також чітко передавати ці ключові повідомлення цільовій аудиторії. Ми зібрали разом декілька найкращих порад, які допоможуть вам забезпечити баланс дизайну вашого макета сторінки (хороший конструктор веб-сайтів також допоможе). Ці підходи будуть добре працювати, щоб забезпечити структуру балансу, незалежно від середовища, з яким ви працюєте.


Щоб отримати докладніші поради щодо Інтернету, див. Наш посібник зі створення ідеальних макетів веб-сайтів.

01. Використовуйте сітку

Одним з найпростіших способів забезпечити певну рівновагу на вашій сторінці є використання сіткової системи. Раніше сітки були єдиним резерватом друкованої сторінки, але за останні кілька років в Інтернеті було виконано багато роботи, щоб допомогти перенести концепцію сітки на цифровий носій.

Використовуючи сітку для інформування положення різних елементів на сторінці, ви створите зв’язок між різними елементами, що складають вашу сторінку. Це може допомогти надати відчуття порядку вашому макету, забезпечити читачеві чіткі структурні посилання, на які можна повернутися, і збільшити успіх вашої сторінки.

Це важливо, тому що коли всі елементи вашої сторінки мають відчуття зв’язку між собою, загальний ефект відчувається для читача більш комфортним, допомагаючи полегшити їх та полегшуючи доступ до важливого матеріалу: вмісту.


02. Виберіть єдину фокусну точку

Одним з найефективніших способів забезпечити відчуття рівноваги є вибір єдиного фокусного пункту для вашого дизайну макета. Хорошим прикладом цього на практиці є використання великого зображення як найбільшого окремого елемента на сторінці.

Потужний візуал може забезпечити потужний спосіб залучити читача на вашу сторінку (як і експертний аналіз ідеальної послуги веб-хостингу), а також надає корисний структурний елемент, навколо якого можна розташувати решту вмісту у вашому макеті. Якщо у вас кілька візуальних елементів, використовуйте принцип близькості Гештальт-теорії, щоб згрупувати їх, вирівнюючи однаково.

Також варто пам’ятати, що ти можеш використовувати заголовок або витягнути цитату таким же чином; хороший заголовок відображення може запропонувати стільки ж візуального інтересу, скільки зображення, при цьому продовжуючи надавати структуру, яка допоможе вам забезпечити збалансований макет.


03. Використовуйте правило третіх

Одним з найкращих способів забезпечити відчуття рівноваги є використання улюбленого дизайнером Правила третей або Золотого перетину. Простіше кажучи, правило третин говорить, що якщо розділити сторінку на третини як вертикально, так і горизонтально, точки, в яких перетинаються лінії сітки, забезпечують природні фокусні точки композиції.

Вирівнявши ключові елементи за цими чотирма точками, ви отримаєте більш приємну композицію, ніж якщо ви, наприклад, ідеально центруєте елементи на своїй сторінці.

Саме по собі правило третіх чарівним чином не забезпечить балансу вашому макету, але, поширюючи принцип, легко використовувати цю тенденцію до природного фокусу, щоб допомогти збалансувати баланс вашого макета.

Загальноприйнятим підходом є розміщення найважливіших елементів вашої сторінки у верхній (або нижній) третині сторінки з вирівнюванням первинної фокусної точки відповідно до одного із перехресть. Маєте багато ресурсів для зберігання для вашого сайту? Перевірте ці варіанти хмарного сховища.

04. Використовуйте пробіли

Початківці дизайнери зазвичай використовують кожен окремий простір на сторінці, заповнюючи вміст, доки не заповниться кожен пробіл. Досвідченіші знають, що іноді найкращий біт дизайну передбачає залишення елементів, а не взуття.

У друкованому носії найпоширеніший спосіб використання пробілів - це збільшення полів сторінки та жолобів. В Інтернеті просто забезпечення достатньо місця для дихання навколо елементів може допомогти зробити ваш дизайн макета відчутним витриманим та збалансованим.

Використання негативного пробілу найкраще працює, якщо у вас чітка структура, яка поєднує вміст разом (наприклад, такий, що надається сіткою), оскільки ризик пробілів може спричинити відчуття роз'єднання між елементами сторінки, якщо ввести їх випадково.

05. Повторіть елементи дизайну

Повторення також може забезпечити сильне відчуття пов’язаного дизайну та збалансованості композиції. Ідея полягає в тому, що, виявивши та повторно використовуючи мотив чи дизайнерську обробку у всьому своєму макеті, ви можете надати довідкову інформацію для читача, щоб розрізнені області відчували зв’язок та були частиною однієї загальної композиції.

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

06. Використовуйте ієрархію

Одним із ключових підходів до досягнення макета сторінки нірвани є чітке відчуття структури та ієрархії. Ми вже торкалися структури, але важливо також передати відносну важливість різних частин вмісту на вашій сторінці. Наприклад, заголовок майже завжди повинен бути візуально важливішим за зміст основного тексту.

Подивіться на різні елементи, що складають ваш дизайн макета, і вирішіть, який елемент є найважливішим. Використовуйте цей елемент, щоб забезпечити структурний гачок для інших елементів на сторінці, зберігаючи його найважливішим.

07. Використовуйте масштаб, контраст і гармонію

Нарешті, використання шкали може бути дуже ефективним методом для досягнення гарного візуального балансу у вашому макеті. Зробивши деякі елементи більшими за інші, з’явиться відчуття впорядкованості та ієрархії. Це допомагає створити зручний макет, оскільки глядач автоматично переглядає більші елементи в макеті, переходячи до менших елементів, коли вони читають.

Цей принцип працює також із підвищеною контрастністю, так що, виділяючи елемент на сторінці за допомогою контрасту, око спочатку фокусується на цій точці. Це забезпечує проникнення на сторінку і знову дає корисний структурний підхід для розробки вашого макета.

Як масштаб, так і контраст найкраще працюють, коли вони застосовуються до одного елемента, роблячи його виокремленим серед інших частин вашого макета. Використовуйте принципи гармонії, щоб інші відчували зв’язок та підкреслювали фокусну точку.

Рекомендований
Поглибіться за межі естетики
Читати Далі

Поглибіться за межі естетики

Коли я почав своє перше стажування після закінчення середньої школи в 2002 році, я абсолютно не уявляв, що таке графічний дизайн. Все, що мене цікавило, це маркетинг та економіка. Вирісши в маленькому...
Варіанти та переваги крос-платформного мобільного дизайну
Читати Далі

Варіанти та переваги крос-платформного мобільного дизайну

Слова “крос-платформна розробка” мають дещо негативний відтінок у спільноті мобільних розробників. Коли ми думаємо про крос-платформенність, ми відразу ж замислюємося про компрометуючі конструкції та ...
Типографські секрети візуальної ієрархії
Читати Далі

Типографські секрети візуальної ієрархії

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