Минимализм в дизайне сайтов

Минимализм в дизайне сайтов

Как писал А.П. Чехов своему брату, “краткость - сестра таланта”. Но это выражение справедливо не только в отношении писателей, но и в отношении web-дизайнеров. Неопытные дизайнеры часто пытаются продемонстрировать свое мастерство через добавление в макет огромного количества дополнительных деталей, это детское стремление показать все, на что способен, только вредит готовому проекту.

Еще лет 10 назад сайты действительно искрились и переливались: гифки вперемежку с флэшем, кислотные цвета разъедающие глаза - все это было, но, к счастью, ушло с переориентацией на мобильность. У Вас остались подобные анахронизмы? Нужно принять меры!

перегруженный дизайн сайта

Источник: http://www.lingscars.com/

Мода на минимализм

В web-дизайне, как и везде, есть своя мода: объемные или плоские иконки, раскрывающееся / скрытое / отсутствующее меню, анимация, инфографика и т.д. и т.п. Опытные дизайнеры по одному взгляду на сайт могут сказать, в каком году он был создан, отсюда возникает понятие “устаревший дизайн” и необходимость редизайна. Но если мода на одежду часто приходит стихийно и зависит от вдохновения известных модельеров, то мода в web-дизайне обусловлена преимущественно стремлением разработчиков улучшить поведенческие факторы или подстроиться под требования поисковых систем.

В частности, мода на минимализм пришла с ростом популярности мобильных устройств. И если раньше статистика просмотров сайтов показывала явное преобладание доли просмотров с ПК, то сегодня ситуация обратная. Даже поисковые системы сделали наличие мобильное версии сайта одним из факторов ранжирования в поисковой выдаче для мобильных устройств, а необходимость адаптивной верстки даже не обсуждается.

Дизайнеры и разработчики вынуждены были отказаться от лишних элементов и “вычистить” сайты. Возможно, это слегка ограничило фантазию дизайнеров, зато пошло на пользу ресурсам в целом. Минималистический дизайн позволяет легко масштабировать страницы, увеличить скорость их загрузки и улучшить восприятие. Современные мобильные приложения изначально разрабатываются с упрощенной навигацией и продуманным юзабилити, чтобы пользователю не пришлось делать даже лишнее движение пальцем по экрану.

Не все белое - минимализм

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

Если изображение не помогает пользователю правильно воспринять информацию, его можно убрать. Фотографии со стоков “для красоты” не должны использоваться на сайте, это лишний информационный шум. То же самое с текстом: используйте инфостиль, убирайте воду, пишите короткими емкими фразами.

Советы по созданию минималистичного дизайна

Создание дизайна в стиле минимализм - задача не только дизайнеров, но и проектировщиков, разработчиков, контентщиков. Только всей командой можно определить, что действительно легко можно убрать, а без чего обойтись будет невозможно. Тем не менее, визуальным воплощением коллективных идей будут заниматься именно дизайнеры, поэтому подборка полезных советов для них:

  1. Не рассеивайте внимание пользователей. Минимализм предполагает не только упрощенный дизайн, но и простую навигацию, продуманные пути пользователей. На одном экране должен быть только один акцент, тот элемент, на который пользователь должен обратить внимание. Тогда у него просто не останется шанса не увидеть ваше сообщение. Визуальное оформление должно обеспечивать правильную подачу основного контента, а не перебивать его. Должна срабатывать схема “сообщение-действие”, еще раз спросите себя: “Чего я хочу достичь, о чем рассказать пользователю, демонстрируя этот экран?” Если не можете дать четкого ответа - убирайте полностью. Для первого этапа проектирования страницы подойдет даже грубая блок-схема.
  2. Откажитесь от “радуги” в оформлении. Минимализм - это не сочетание черного и белого, но и не картина художника-абстракциониста. Выберите несколько основных цветов и их оттенков, этого будет достаточно для оформления сайта. Простая цветовая палитра облегчит восприятие. Цветные блоки помогут расставить акценты без дополнительных пояснений. Выделяющийся на общем фоне цвет и увеличенный шрифт - простой способ выделить главную информацию на странице.
  3. Помните про пустоту. Нагромождение информационных блоков - не лучший способ размещения контента. Да, у вас маленькая рабочая область, но это не означает, что нужно пытаться впихнуть в нее всю информацию с основного сайта в надежде, что пользователь будет рассматривать ее под микроскопом. Свободное пространство - это тоже элемент дизайна, оно ограничивает информационные блоки на странице, делает ваше сообщение более структурированным и понятным. При этом пустота не обязательно должна быть белой, это может быть любой другой фоновый цвет или текстура, главное, чтобы она не отвлекала на себя внимание.
  4. Соединяйте и сочетайте. Минимализм заставляет учиться выдавать больше информации меньшими средствами. Например, блок текста часто можно заменить схемой или инфографикой, данные в таблице представить диаграммой и т.д. Пересмотрите и сгруппируйте всю важную информацию, которую хотели бы донести до пользователя, возможно, вы увидите лишние или повторяющиеся данные, которые легко можно убрать.

Содержание важнее формы

Это важный принцип, которым должны руководствоваться дизайнеры во время работы над проектом, если речь не идет о его личном портфолио. У коммерческих сайтов есть вполне определенные цели и задачи, для решения которых они создаются, поэтому “креатив ради креатива” просто недопустим.

Возможно, сайт с минималистичным дизайном будет выглядеть простоватым и “серым” на фоне сайтов конкурентов, но мнимая простота при правильном подходе превратит его в мощный маркетинговый инструмент.

Наша статья вам помогла? Поддержите нас лайком!

Другие записи

Идём на BeerPHP SPB Meetup #2!

Хотите поговорить о PHP за под пиво пятничным вечером? Заметьте, это просто посиделки, а конференция, на которой мы, будем выступать. Не полным составом, конечно, а силами двух спикеров.

Секретный ингредиент 1С-Битрикс: Сайты24

В предыдущей статье мы уже начали рассказывать вам о новой версии «1С-Битрикс: Управление сайтом», которую представили на презентации 30 мая. Мы успели выделить только некоторые “фишки” и особенности новой редакции, да и то рассказали о них в общих чертах. Теперь хотелось бы остановиться на некоторых блоках более подробно, в частности, поговорить о Сайтах24.

Прыжок в невесомость вместе с 1С-Битрикс 18.0

Весна для компании 1С-Битрикс оказалась очень плодотворной. Всего пару месяцев назад  мы всей командой слушали и обсуждали презентацию Битрикс24.Гонконг, а вчера появился ещё более весомый повод для дискуссий: релиз новой сборки версии «1С-Битрикс: Управление сайтом» 18.0.

Контакты

  • Телефон:
    +7 (812) 425-64-08
  • Наш адрес:
    Санкт-Петербург, Громова 4, оф. 371, 373
  • Email
    info@pugofka.com
  • Добавляйтесь в друзья
Скачать презентацию