Наскільки чистий ваш веб-дизайн?

1

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

Вступ

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

чистый веб-дизайн

Фотообраз:Джеймі Королак (Jaymie Koroluk)

Перед початком давайте з’ясуємо одну річ – чистий дизайн не означає мінімалістський дизайн.

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

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

минимализм

Zenhabits – відмінний приклад мінімалістського дизайну

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

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

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

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

Деталі, ідеальні до останнього пікселя

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

В якості прикладу давайте розглянемо пильніше головний активний розділ теми WordPress Studeo, створеної Орманом Кларком (Orman Clark). Орман широко відомий (і надзвичайно успішний в) виготовленні чистих, зручних для користувача тем WordPress.

wordpress

Там, де деякі можуть теми просто виконати великий слайдер з виразним зображенням, область активного елемента Studeo – тиха заводь вишуканих деталей. Зверніть увагу на тонку текстуру, накладену на зображення, виділення в один піксель і майже непомітну світло-сіру рамку по низу. Всі ці деталі можуть здатися незначними і іноді навіть залишитися непоміченими, але разом вони створюють відчуття високої якості і витонченості.

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

размытость

Єдиний спосіб, яким можна запобігти при створенні проекту в photoshop’е – вибрати опцію «Прикріпити до пікселям» (‘Snap to Pixels’). З цією опцією всі краї вашої фігури стануть чудово чіткими і чистими.

Розбивка

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

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

разбивка

Крім забезпечення гарної розбивки елементів необхідно послідовно дотримуватися тих властивостей, на яких ви зупинилися. Намагайтеся, де це можливо і розсудливо, повторювати властивості поля і відступу. Системи сіток, як 960.gs, неймовірно корисні інструменти при створенні такого дизайну веб-сайтів (ще про це через мить).

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

разбивка

Тепер той же пост блогу з щедрою розбивкою.

щедрая разбивка

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

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

Розташування

Один із кращих інструментів, який ви можете застосувати для створення «чистого» дизайну веб – сайту- це система решіток (сіток). Ми вже торкалися того, як вони неймовірно корисні для розбивки, і, крім того, безцінні для гарантії вирівнювання на висоті.

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

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

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

расположение

В якості гарного прикладу вирівнювання можна подивитися Design Without Frontiers (Дизайн без кордонів). Дизайнери не тільки винятковим чином застосували вирівнювання, вони також вельми явно змоделювали напрямні лінії photoshop’у, біжать уздовж всього сайту.

Типографіка

З появою @font-face і багатьох друкарських сервісів типографіка у веб-дизайні ніколи ще не була такою значною, а беручи до уваги, що переважна частина інформації в мережі – текст, це не дивно. Ми не збираємося вдаватися тут у складності типографіки, так як існує безліч ресурсів, але розглянемо кілька способів дати їй можливість зіграти важливу роль.

типографика

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

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

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

Колір

цвет

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

По безлічі причин основна маса чистих вебсайтів схиляється до світлим, нейтральним і обмеженим колірним палитрам.

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

цвет

Елементи портфоліо і зелені акценти добре виділяються в онлайн портфоліо Мартіна Хиппса (Martin Hipps).

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

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

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

Висновок

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

Чи помітили ви інші характеристики чистого дизайну? Чи знаєте особливо прекрасний приклад чистого дизайну? Будь ласка, дайте нам знати в коментарях.