Особливості web-design

Щорічно дизайни для сайтів заповнюються новими елементами, стилями.
Одні – створюють візуальний бренд, доносять суть бізнесу, інші – покращують зовнішній вигляд контенту. Розглянемо важливі особливості веб-дизайну, обумовлені правилами інтерфейсу користувача.

Що таке веб-дизайн

Веб-дизайн подає візуальну естетику сайту.
Дизайн сайту складається із взаємопов’язаних компонентів, що створюють закінчений веб-сайт, включаючи графічний дизайн, UI дизайн, UX дизайн. Елементи визначають вид веб-сайту, роботу різних пристроях, зручності користувача.

Веб-дизайн сайту

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

Лінії

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

• Вертикальні

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

• Горизонтальні

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

• Вигнуті

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

• Діагональні лінії

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

• Товсті лінії

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

• Тонкі лінії

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

Візуальні принципи

Завдання UI/UX дизайнера створити “розумний” інтерфейс, що спрямовує дії користувачів, згідно з продуманим сценарієм використання сайту. Вчені, які цікавляться природою руху людського погляду, виділили кілька патернів – “Z”, “F”.

F-Pattern

 

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

Створення сайту “F” дизайну корисне ресурсам, наповненим рекламою, закликами до дії, без перевантаження контенту. Контент – всьому голова, а бічна панель показує користувачеві більш глибокий рівень.

 

 

 

Z-Pattern

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

Кольори

Використання певної колірної гами може створити унікальний веб-дизайн або зруйнувати його. Неправильне використання кольору зробить сайт надто яскравим, непослідовним, несмачним. Грамотне – приверне увагу читачів, донесе суть бізнесу, структурує ресурс.

Різні типи кольорів викликають різні емоції:

• Теплі кольори (червоний, помаранчевий, коричневий відтінок) змушують почуватися затишно, характеризують гостинність.
• Сірі, холодні кольори (синій, зелений відтінки) – ділові, підходять корпоративним сайтам.
• Яскраві кольори створюють відчуття енергії, імпульсивності, залучають молоду аудиторію. Підходять торговим майданчикам, викликають почуття “купи зараз”.

Поєднуйте кольори, що гармонують. Виберіть домінуючий колір, а потім підберіть допоміжні. Існує низка допоміжних сервісів: Cord, Colorscheme, Adobe Kuler, Paletton.

Рекламний дизайн

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

1. Використовуйте простоту

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

2. Використовуйте порожній простір.

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

3. Практикуйте правило 20 відсотків

Мережа є візуальним середовищем. Реклама – візуальним інструментом. Використовуйте візуальні ефекти, обмежтеся кількістю тексту.

4. Приділіть увагу кольору

Яскраві кольори фону – спосіб привернути увагу користувачів. Досліджуйте сайти, де заплановано показ оголошення – використовуйте контрастну колірну схему.

5. Використовуйте просту типографіку

Використовуйте просту типографіку. Вибирайте шрифт без засічок. Текст повинен легко читатись, уникайте тіней, градієнтів.