Чим менше, тим краще: основи мінімалістичного веб-дизайну. Кращий дизайн сайту

33

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

Визначення мети сайту

Вашому сайту потрібна чітко поставлена мета, щоб з самого початку усунути будь-хаос… Це основи веб дизайну.

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

Мій сайт ___________________________.

Пояснювати підліткам небезпека набору текстових повідомлень під час водіння

Показувати потенційним клієнтам призові фотографії

Продавати ексклюзивних іграшкових собак ручної роботи

Чітко визначивши мету з самого початку, ви зможете використовувати її, щоб зуміти підтримувати свій дизайн «на ходу». Працюючи з елементами дизайну, продовжуйте задавати собі такі питання, як:

Буде це підкреслювати і підтримувати мета мого сайту?

Це дійсно необхідно або я просто заповнюю простір?

Це буде відволікати від основної мети мого сайту?

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

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

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

Попотейте над дрібницями

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

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

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

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

Єдність

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

Прості кольорові штрихи роблять чорно-білу кольорову схему цікавіше і від логотипу відводять погляд вправо до розділів «creative», «clever» і «fun».

Біле, або негативний простір

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

Давайте додамо що-небудь ще, здається, тут багато зайвого місця…

Під меню є місце, перемістити його вгору, щоб можна було додати…

По боках сайту є проміжок, нам потрібно ще включити…

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

У Web Creme обмежена кількість реклами, але вона розміщується в найбільш значимою області.

Вирівнювання

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

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

Тонкість – це не для вас? Створіть негайний ефект, вибравши сміливий колір, що підкреслює дизайн.

Ієрархія

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

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

Видалити непотрібне

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

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

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

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

Юзабіліті — не додаткова опція

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

Простий і зручний у використанні сайт буде практично «відчувати» користувача, читати його думки, а перегляд стане легким і приємним.

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

Посилання має бути легко розпізнати і натиснути

Завжди забезпечуйте спосіб повернутися на головну сторінку

Ніколи не відключайте кнопку «назад»

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

Позначайте, на якій сторінці зараз знаходиться користувач

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

Навігація повинна бути логічною і інтуїтивно зрозумілою для використання

Вміст має бути читабельним, з чітко визначеними заголовками

Код повинен бути простим і виконаним згідно з останніми мережевим стандартам

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

Визначення проблемних місць

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

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

Дайте їм список завдань і простежте, чи легко їх виконувати:

Купіть в моєму магазині книгу

Зв’яжіться зі мною, щоб призначити зустріч

Дізнайтеся що-небудь про мене

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

Чи зрозуміють вони, де потрібно клацнути мишею?

Заблукали вони у певній галузі?

Клацають вони на елемент дизайну, думаючи, що перейдуть так на нову сторінку?

Важко їм натискати на крихітну іконку?

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

Але мені подобається колір!

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

Колірне пляма

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

Рамки CSS, такі як «960.gs system», що гарантують можливість ідеального вирівнювання.

Просто, але сміливо

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

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

Це не для всіх

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

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

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

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

Пошук гармонії

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

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

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