Давимо дизайнера аргументами! Вчимося доводити, що дизайн поганий

аргументами

Сперечатись про дизайн, політику та релігію – справа не вдячна. Тут немає чітких правил, а значить можна парирувати будь-який аргумент. Тому щойно мова заходить про смаки та погляди на ці речі, я погоджуюсь із співрозмовником і змінюю тему. Але інша річ, коли від цього залежить якість майбутнього сайту. Тут доведеться довести комусь що верблюд не ти, а він. Сьогодні я розповім як не будучи дизайнером Усієї Русі, знайти огріхи в дизайн-макеті та відстояти свої смаки.

Чому виникає непорозуміння?

Спочатку давайте розберемося звідки взагалі виникає конфлікт. На мою думку, причин дві:

1. Бракує знань.

Клієнт не може виразно пояснити, що саме не так: "Мені не подобається ВСЕ", "Я не знаю, що мені не подобається, але щось не те", "Ваш дизайнер-криворукий, тому що я так сказав". І далі образ і взаємних звинувачень справа не піде, поки ви не зможете аргументовано довести, що вам не подобається і чому.

2. Немає чітких цілей та завдань.Згадайте, ваше технічне завдання до дизайну сайту. Чи було воно взагалі? Що ви дали дизайнеру, окрім слів: "Хочу не гірше, ніж у конкурентів!" і посилань на сайти, що сподобалися? У 80% випадків дизайнер сам вигадує фірмовий стиль, маркетингову стратегію, потреби цільової аудиторії. Він ні чорта не розуміє у вашому бізнесі і не дивно, що в результаті ми отримуємо "Красиво Намальоване Щось"

Маркетинг одного дня не побудувати, а ось більш-менш розібратися в основах дизайну і аргументовано поставити на місце некомпетентного дизайнера цілком реально.

9 принципів сучасного дизайну, які доведуть, що ви маєте рацію.

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

вчимося
Хороший приклад контрасту представляє сторінка банку Тіньков. Заголовок поданий значно більший за основний текст, чорний колір посилює контраст. Жовтий колір контрастує з білим тлом сторінки і повторює колір пунктів чек-листа (це до речі принцип повтору

2. Принцип повтору

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

вчимося
На головній сторінці сайту enter.ru ми бачимо кілька елементів, що повторюються. Подібні елементи ми позначили однаковими цифрами. "1" - повтор помаранчевого кольору логотипу в кольорах кнопок "2" - повтор кольору "3" - повтор рішення з візуалізацією навігаційних

3. Принцип вирівнювання

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

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

дизайнера
Якщо уважно придивитися до головної сторінки сайту Ікея, можна помітити, що весь текст вирівняний по лівому краю.

4. Принцип наближеності

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

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

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

5. Правильний фокус уваги

6. Текст має бути читабельним

Людина приходить на сайт не за красивими картинками, а за інформацією. Завдання дизайнера максимально зручно подати цю інформацію. Текст для читання повинен бути не меншим за 12-13 px (зараз йде тренд до укрупнення розмірів), бажано не курсивний, не жирний і без прозорості. Для стилю дизайнери дають текст на яскравому фоні, з прозорістю або застосовують модний, але зовсім не читаний при великому обсязі тексту, шрифт.

У макеті не повинно бути більше трьох кольорів, розмірів та видів шрифтів. Принцип триєдності – це основний інструмент гармонії. Є прикладивдалого використання 5-6 кольорів, але чим більше вступних, тим складніше знайти баланс. Тому, якщо ваш сайт малює не Артемій Лебедєв, а ви не так добре знаєтеся на поєднанні кольорів і друкарні, але дотримуйтесь цього правила.

8. Зберігаємо “повітря”

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

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

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