Коли і як використовувати мінімалізм у дизайні веб-сайту
Давайте спочатку позбудемося неправильного уявлення про мінімалізм. Просто тому, що є менше, щоб побачити, не означає, що це легше. Насправді все зовсім навпаки. Чим менше у вас є, тим більше часу вам потрібно витратити, щоб переконатися, що кожен елемент у вас є правильним за гроші.
Зрештою, якщо у вас переповнений інтерфейс, тоді якщо щось вирівняно ліворуч від центру або шрифт, який не зовсім оптимальний для того, що ви використовуєте, це, ймовірно, навіть не буде помічено серед інших деталей.
Однак це буде неправдою, якщо ви використовуєте мінімалістичний веб-дизайн, оскільки нема чого приховувати за своєю помилкою чи невдалим вибором. Вони виділятимуться яскравими деталями – як неонова вивіска на японському будинку. Це означає, що якщо ви просто намагаєтесь зібрати сторінку разом, мінімалізм – це не той шлях. Мінімалізм для перфекціоністів, нав'язливих, зосереджених на лазері, веб-дизайнерів, які не спають до трьох годин ранку, щоб отримати таку назву. Якщо це не ти, то це не для тебе.
Якщо це тоді читайте далі, читайте далі! Йдемо вниз по кролячій норі.
Негативний простір
Давайте почнемо з того, що мінімалістичний веб-сайт матиме найбільше – негативний простір, хоча ви можете знати його як «фон». За винятком, звичайно, того, що в мінімалістичному дизайні це зовсім не «назад». Натомість він знаходиться на передній і центральній частині, де він відіграє життєво важливу роль, оскільки маніпулює візуальним потоком користувача.
Сила негативного простору полягає в тому, що чим більше його у вас, тим більше з’явиться все, що ви маєте на сторінці. Ось чому промислові дизайнери часто використовують мінімалістичні макети. Таким чином їхня продукція приверне увагу, яку вони шукають, замість того, щоб зникнути в усе інше. І оскільки це те, що вони намагаються продати або принаймні показати, це робить цей підхід дуже привабливим для них і будь-кого іншого, хто має статичні об’єкти для показу, як-от дизайнери інтер’єру та фотографи.
Негативний простір може бути потужним інструментом для створення оазису спокою, а також для того, щоб користувачі не відчували себе приголомшеними. Ось чому курорти та оздоровчі центри часто вибирають такий тип планування.
Зауважте, що негативний простір не означає, що там нічого немає. Очевидно, що простір потрібно чимось заповнити, і хоча білий колір є очевидним вибором, але далеко не єдиним. Більше того, різні кольори абсолютно по-різному впливають на користувачів, тому обов’язково приділіть трохи часу дослідженню. Одне, що я хотів би зазначити, це те, що ви не вибираєте занадто насичений колір. Це основна помилка багатьох дизайнерів-початківців. Проблема полягає в тому, що це може бути досить болючим для користувачів, що робить одну з великих переваг мінімалізму недійсною.
Фотографії
Якщо лише один колір – це забагато, звичайно, є можливість сфотографуватися. Звичайно, якщо ви обираєте зображення, переконайтеся, що воно відповідає духу мінімалізму, який ви прагнете. Малюнок не повинен бути занадто насиченим.
Я маю на увазі це двома способами.
- Очевидно, переконайтеся, що фотографія не захаращена предметами чи людьми, оскільки це зруйнує ціль вашого мінімалістичного дизайну.
- Однак цього недостатньо, оскільки наслідки швидкого руху чи небезпеки так само здатні привернути погляд до зображення та відвернути від головного елемента, який ви намагаєтеся показати. Насправді навіть демонстрація негативних емоцій може відвернути людей від того, на чому ви дійсно хочете, щоб вони зосередилися.
З цієї причини, переглядаючи мінімалістичні веб-сайти, ви побачите багато фотографій із дуже нейтральним і статичним фоном. Ось кілька чудових прикладів.
Типографіка
Ви можете вирізати багато речей зі своєї мінімалістичної сторінки, як-от рядок меню, кнопки соціальних мереж і рекламу, але одна річ, без якої вам не обійтися, це слова. Зрештою, вам знадобиться трохи. Але як їх представити? Ви повинні дуже ретельно обдумати, який шрифт ви вирішите використовувати (і якщо ви вирішите створити свій власний), особливо враховуючи, що різні шрифти викликають різні емоції та різні стани розуму.
Наприклад, шрифти із засічками (це ті, у яких хвилясті частини стирчать під і над лінією) читаються плавніше, ніж шрифти без зарубок, і тому вважаються легшими для розуміння. Подібним чином, оскільки інструкції написані більш чіткими, більш читабельними шрифтами (наприклад, Ariel), вважаються більш зрозумілими, ніж ті, які написані більш заплутаними та зайнятими шрифтами, що означає, що ці інструкції вважаються легшими для виконання.
Але, звичайно, читабельність – це не єдине, що потрібно враховувати, потрібно також думати про те, які емоції викликають шрифти. Так, це вірно, різні шрифти по-різному впливають на людей, а такі типи шрифтів, як Times New Roman, частіше асоціюються з такими емоціями, як «смішний» і «злий», ніж Ariel.
Я попереджав вас, що мінімалізм не для людей зі слабкими нервами!
Інша річ, яку слід враховувати, це типи шрифтів, які ви використовуєте, оскільки вам, очевидно, не потрібно використовувати той самий шрифт усюди. І оскільки немає нічого іншого, що відволікало б вашу аудиторію, якщо ви використовуєте різні стилі шрифтів і типографіки, ваш користувач, швидше за все, помітить їх.
Таким чином, це може бути дуже ефективною стратегією, щоб привернути увагу вашої аудиторії до конкретних сфер. Наприклад, подумайте про те, щоб написати той текст, який ви хочете, щоб користувачі прочитали спочатку, жирним шрифтом, з товстими штрихами, а частини, які мають помітити пізніше, напишіть більш нейтральними шрифтами. Око користувача буде негайно привернуто до більш жирного тексту, тоді як інший текст буде використано пізніше.
Контраст і позиціонування
Одним із найпотужніших інструментів, доступних мінімалістському веб-дизайнеру, є контраст. Якщо ви хочете використовувати контраст для найкращого ефекту, вам доведеться вибрати світлі кольори фону – переважаючим вибором буде білий, оскільки це забезпечує найкращий ефект. Ось чому мінімалістичні сторінки часто використовують чорний колір на білому тлі, оскільки ці різкі лінії надзвичайно привабливі. Ось гарний приклад. Більше того, найменший шматочок кольору, як-от вкраплення жовтого, може бути дуже ефективним. Згадайте тільки пальто дівчини зі Списку Шиндлера.
Дизайнер може створити контракт із багатьма різними речами, включаючи колір, форму, розташування, масштаб і розмір. Якщо його використовувати правильно, він може бути надзвичайно корисним для того, щоб спрямувати користувача до тих частин, на які їм слід звернути увагу в першу чергу (подібно до того, як я пояснював з точки зору типографіки вище, коли обговорював жирний шрифт проти більш нейтральних текстів). Однак це нелегко, і щоб використовувати його з найкращим ефектом, необхідно мати базове розуміння того, як користувачі використовують інтернет-сторінки.
Дослідження руху очей дали нам чудове уявлення про те, куди люди дивляться в першу чергу, зазвичай починаючи з верхнього лівого кута, а потім, залежно від того, багато тексту чи ні, сканують сторінку буквою «F» або візерунок «Z» відповідно.
Оскільки ваша мінімалістична сторінка не буде містити багато тексту, ви захочете впорядкувати найважливіші аспекти вашої сторінки у формі Z, з тим, що ваші користувачі мають помітити першими (ваші параметри меню), як правило, займаючи ближче до верхнього лівого кута вашої сторінки, тоді як те, що слід помітити пізніше (наприклад, ваші претензії щодо авторських прав), опускається нижче та далі праворуч. Таким чином ви зробите використання вашої сторінки більш плавним і природним.
Кнопка для гамбургера та інші макети
Єдина річ, яку важливо пам’ятати щодо мінімалістичного дизайну, полягає в тому, що те, що на кожній сторінці мало що можна побачити, не означає, що загалом вмісту мало; у більшості випадків уся ця інформація просто схована у підменю та на додаткових сторінках. Одним із популярних (хоча й суперечливих) способів це робиться за допомогою так званого «кнопки гамбургера» або трьох ліній, які ви зараз бачите повсюди, як у хромі у верхньому правому куті, а також на iPhone. І так, якщо ви випили пару напоїв, це дійсно схоже на гамбургер (я не придумав назву).
Особисто я не великий шанувальник, оскільки це суперечить моїм мінімалістичним інстинктам. Який сенс створювати безладну сторінку, якщо потім ви збираєтеся створити захаращене меню для перегляду решти веб-сайту? На мій погляд, набагато кращою стратегією є розділення кнопки гамбургера на кілька варіантів меню, які є очевидними та легкими для розуміння та зацікавлять ваших читачів, але це, зрештою, залежить від вас.
Один важливий фактор, який слід враховувати, коли ви обдумуєте, створити кілька пунктів меню чи використовувати одну кнопку, це вік вашої аудиторії. Чим старші вони, тим менше вони будуть знайомі з цим дизайном і тим більша ймовірність, що вони не знайдуть ваших підменю, що може зробити вашу сторінку марною. Отже, ваша сторінка в основному орієнтована на міленіалів? Використовуйте його. Ви обслуговуєте пенсіонерів? Мабуть, варто подумати ще раз.
Візуальний стиль
А ще те, як має бути оформлена ваша сторінка. Коли ви вирішуєте вибрати мінімалістичний стиль, вам потрібно вибрати один стиль макета, а потім дотримуватися його. Це відбувається тому, що ваша аудиторія негайно почне робити несвідомі припущення про те, як ваша веб-сторінка поєднується, і якщо ви порушите ці припущення, ваші користувачі відчують вашу сторінку «безладно» та «неорганізовано». Це смертельний дзвін для мінімалізму (як і для більшості інших сторінок, правду кажучи).
З цієї причини вам потрібно вибрати сітку, яка в основному означає стовпці, на які ви розділили свою сторінку, і дотримуватися її. Скільки колонок ви хочете? Як вони будуть розподілені? Скільки негативного простору залишиться між ними? Усе це важливі запитання, на які вам потрібно відповісти, перш ніж почати розміщувати сторінку.
Ідея тут не в тому, що зображення не можуть виходити за межі цих ліній сітки. Часто зображення займають всю сторінку. У цьому випадку текст про зображення, представлене під ним, буде розміщено у вибраних стовпцях. Подібним чином, якщо на вашій сторінці є кілька зображень, вони повинні відповідати сітці, яку ви створили, щоб ваша сторінка в цілому виглядала чистою та професійною.
Чи вартий мінімалізм?
Чесно кажучи, це залежить від того, що ви намагаєтеся зробити (і, звичайно, від теми вашої сторінки). Якщо ви намагаєтеся скоротити свою роботу, то, як уже було сказано, мінімалізм не для вас. Якщо, з іншого боку, такий макет інстинктивно приваблює вас і підходить до типу продукту, який ви просуваєте, тоді це шлях вперед.
Річ у тім, що мінімалізм вимагає іншого набору навичок, ніж стандартний дизайн, оскільки ви не можете просто використати звичайні елементи та з’єднати їх разом, щоб створити сторінку. Якщо ви спробуєте це зробити, ви отримаєте щось, що не буде візуально привабливим або настільки інформативним. Найгірше, іншими словами, з обох світів.
Натомість вам доведеться витратити деякий час, щоб навчитися руйнувати ваші основні інстинкти, які ви отримали від попередніх дизайнів сторінок. Тоді вам доведеться сісти й визначити, що важливо для вашої сторінки.
І вам доведеться впоратися з договором, типами шрифтів і фотографіями, як ніколи раніше. Це майже як ви вивчаєте нову мову дизайну. Це може бути важко.
Проте вивчення нової мови полягає в тому, що воно дає змогу зрозуміти те, про що ви раніше не помічали, про мову оригіналу. І це так само вірно з вивченням мінімалістичного веб-дизайну. Сама спроба навчитися дизайну таким чином змусить вас зрозуміти речі про дизайн, про які ви раніше не знали.
І це цілком може змусити всі потовиділення та важку роботу того варті.
Забуваючи на мить, що мінімалістичні сторінки просто красиві, звичайно.