Найпростіші цифри 1, 2, 3 допоможуть створити вдалу структуру сайту, а також контролювати «рівень дизайну» в макеті та в кожному конкретно взятому блоці.

Андрій Курочкін, артдиректор hexagon.agency, провів лекцію про «нумерологію», в яку варто повірити кожному дизайнеру. Просте уміння рахувати до трьох та трохи фантазії дозволяють у стислі терміни створити дизайн практично із нічого. Telegraf.Design законспектував, як це можна втілювати на практиці.

Робота з елементами макета сайту через цифри дозволяє: по-перше, створити візуально струнку структуру та зробити її цікавішою, по-друге — удосконалити кожен окремо взятий блок. Навіть більше, цей метод допомагає вирішити проблему «чистого аркуша».

Щоб зрозуміти, як це, почнемо з гри типу знайди 10 відмінностей. Гортайте.

Цифри під кожним макетом наочно ілюструють відмінності в дизайні.

Що ці цифри означають? Різні блоки та їх порядок у макеті.

1 — початковий блок складається з тексту та картинки. Якщо ці блоки просто вибудувати в ряд, вийде 1111111111.

2 — уже змінений початковий блок. Тут текст і картинка, тепер уже з фоном, помінялися місцями. Чергування їх із 1 блоком дасть уже різноманітніший вигляд 1212121212. Якщо блоки ще трохи модифікувати, дизайну стає ще більше. 1.1, 2.1— варіації на тему блоків, узятих за основу.

3 — блок, який об’єднав відразу кілька позицій (на відміну від попередніх, де зображений тільки 1 кросівок). Цей хід додає динаміки та цифру 3 у наш цифровий ряд.

Навіщо потрібні ці цифри? Щоб побачити, наскільки в макеті присутній власне дизайн, і щоб простежити логіку розміщення блоків (логіка має бути присутня обов’язково).

Структура. Порядок блоків і що з ними можна робити?

Будь-який контент на вебсторінці складається з тексту та ілюстрації. Їх легко об’єднати в один блок. Але коли контент однотипний, блоки дуже схожі, і це часто апріорі виглядає нудно. Урізноманітнити однотипність — є головною складністю.

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

Тут варто розкрити поняття «графічна рима». Воно вдало застосовується, коли блоки в композиції схожі між собою. Рима може бути прямою — коли схожість максимальна (відрізняється тільки колір фону, положення елемента) і непрямою — коли один блок зберігає характеристики попереднього, але має інше наповнення (замість тексту картинка, замість картинки текст).

Формально, ми обираємо якийсь елемент, з яким ми будемо взаємодіяти. Ми по черзі змінюємо певні його параметри, додаємо динаміки й гнучкості.

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

Я керуюсь правилом розміщення блоків з огляду на їх «вагу»: легкий — середній — важкий. За нарощуванням. Періоди ментального відпочинку важливі. Вони мають чергуватися із навантаженими інформацією блоками. Тому, якщо є можливість, і якщо це потрібно за змістом, не варто боятися перебивати графічний контент текстовим, і навпаки.

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

Зазвичай, менше дизайну — краще. І цей прийом із «зацифровуванням» блоків як раз про те, щоб вчасно зупинитися і не зайти надто далеко. А також, щоб перевірити чи був зроблений необхідний мінімум.

Чим ця «нумерологія» хороша — коли вже є два блоки, на основі їх дизайну можна побудувати все інше. Це допомагає в разі ступору. Є рима — можна підрівняти, зробити схоже.

Прості, але ефективні поради від Андрія Курочкіна:

• У будь-якій незрозумілій ситуації — віддзеркалюйте по горизонталі або вертикалі. Застосовується цей принцип не лише до окремого розміщення фото і тексту. Що складніша конструкція блоку, тим цікавіше буде виглядати найбанальніше рішення — перевернути його по горизонталі чи вертикалі.
• Міняємо форму і/або розмір фотографій. При цьому пам’ятаємо про здоровий глузд, намагаємося не перестаратися і пам’ятати про те, що фото потрібно розглядати.
• Чергуємо тип контенту. В одному блоці сайту фотографія, в іншому — ілюстрація, у третьому — текст. А якщо ще і закладати простір для маневру — десь поміняти форму, десь тип, і розвивати цифру 1 до ітерації 1.12 — можна отримувати досить цікаві історії.
• Іноді замість додавання чергового елемента досить просто викинути щось із композиції й замінити порожнім місцем.

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

Коли час обмежений, то графічні рими та прекрасні цифри 1,2,3 допоможуть створити структуру сайту практично з нічого.

Як застосовувати «нумерологію» для окремо взятого блоку

Існує дизайнерське повір’я «правила трьох». Три — це найкраще число для перевірки дизайну.

Знову шукаємо відмінності (гортайте).

1 — один елемент (однаковий шрифт, кегль, колір). 2 — відповідно, два елементи (різні розміри та шрифти). 3 — три різні елементи

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

Коли ми розуміємо «правило трьох» – ми бачимо цю трійку всюди. І в трійку складаються абсолютно різні елементи.

У теорії (аби дизайн був привабливим) типографія потребує таких атрибутів:

• Контраст у кольорі (навіть чорний/сірий)
• Лід у тексті
• Над- і підзаголовки
• Нумерація, або key-numbers
• Сітка в кілька колонок

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

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

Також є відмінне запитання — «Навіщо?». Якщо ви щось зробили, запитайте себе: навіщо? Якщо не можете відповісти, задумайтесь, чи потрібно було вирішувати цей елемент саме так.

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

І наостанок, трохи пруфів про магічність числа 3.