Создаем стильный веб-сайт: руководство по плоскому дизайну и минимализму

Подписаться
Будь с нами!
Галина Назарова
Галина Назарова
Журналист-копирайтер
Дизайн0502

Некоторые модные приёмы популярны по одной простой причине – они работают.

Их легко воплотить в жизнь, к тому же пользователи к ним привыкли. Они выглядят одинаково хорошо на всех носителях, а также подают информацию наглядно и эстетично.

Для примера взгляните на сайт, выигравший премию Awwwards.

Минималим в веб-дизайне - признанный тренд

Отличный внешний вид и функциональность. Но за счёт чего, и как повторить такой успех?

Как работает дизайн сайта

Что делает этот ресурс одновременно привлекательным и функциональным? С первого взгляда можно распознать несколько дизайнерских решений:

  • изображения содержательные;
  • при загрузке страницы плавно проявляются;
  • эстетика плоского дизайна придаёт сайту солидность, соответствующую бренду;
  • интерфейс главной страницы оформлен в виде карточек;
  • на сайте есть и панель навигации, и меню: это обеспечивает полный отклик на запросы пользователя.

Минимализм и изображения высокого разрешения

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

Оформление товаров в стиле минимализма

В электронной книге Web Design Trends 2015 & 2016 сказано, что большие фотографии в моде, потому что они нагляднее. В то же время на веб-сайтах, заточенных под смартфоны и планшеты, обычно используют небольшое количество изображений меньшего размера, поскольку мобильный трафик ограничен и может быть довольно дорогим – в зависимости от тарифа пользователя.

Как совместить ограниченный трафик и качество? Ответ – минимализм

Минимализм в веб-дизайне понимается не просто как «экономия средств», а как способ передать достаточно информации без лишних помех. Пример – использование приглушенных тонов, хорошо сочетающихся между собой во всех изображениях и элементах графического дизайна (шапка сайта, фон нижней части страницы, шрифты).

Такой подход имеет и другое преимущество. Изображения с согласованной цветовой схемой (слева вверху) загружаются быстрее. Причина проста: фотографии в формате JPG с низким контрастом сжимаются лучше, чем с высоким. Это значит, что можно вставить крупные качественные изображения, задействовав то же количество битов.

Плоский дизайн привлекает внимание

Элементы дизайна, выполненные в простых монохромных цветах, выглядят плоскими на фоне сайта. Таким образом, внимание пользователей больше не отвлекается от содержимого – в данном случае, от товаров. Кроме того, интернет-ресурс воспринимается ещё элегантнее.

Использование флэт дизайна в интернет-магазине

Взгляните на основную «карусель» сайта. Текст, набранный полужирным белоснежным шрифтом, на фоне фотографии очень хорошо видно. Его невозможно не заметить, однако он не портит общего впечатления.

Ниже, на примерах с карточками, обилие «плоского» белого цвета вызывает противоположный эффект – товары резко выделяются на общем фоне. На тех фотографиях, где все же присутствует фон, он не загромождён деталями и одинаково освещён. Можно сказать, что бэкграунд фотографий выглядит плоско.

Карточки: упорядочивают контент и упрощают взаимодействие с сайтом

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

Адаптивный дизайн: блочная вёрстка без лишних деталей будет смотреться хорошо как в сжатом виде на маленьких экранах, так и в развёрнутом – на больших.

Удобоваримый контент: информацию легче усваивать маленькими порциями. Значит, чем меньше её изображено на карточке, тем лучше. Обратите внимание: информация на каждом таком элементе должна быть представлена в одном стиле – это поможет пользователям сравнить разные товары и мгновенно освоить интерфейс.

При разработке карточного дизайна рекомендуем:

  • пусть каждая карточка выражает только одну связную мысль;
  • расположите карточки бок о бок и на одной линии;
  • сделайте карточку кликабельной по всей площади;
  • промежутки между карточками помогут разделить их. Однако слишком большой зазор будет отвлекать внимание – помните об этом.

Прототипированиестильного и удобного для пользователей сайта

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

Ниже – то, что мы получим, начав в Photoshop и завершив в утилите UXPin.

1. Собираем материалы

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

Также вам понадобится схема: список конкретных страниц или хотя бы разделов будущего сайта.

2. Определяем приоритеты

Подход «сначала мобильные» вынуждает нас расставить приоритеты.

Что нужно пользователям на главной странице? Какие изображения могут побудить их к действию? Решите, какой контент пользователям необходимо видеть с любого устройства, а какой можно приберечь для тех, кто просматривает сайт на больших экранах.

Для главной страницы мы распределили графические элементы по важности.

Первостепенные – основное изображение, побуждающее пользователей взглянуть на ассортимент товаров.

Второстепенные – чёткий слоган, дающий понять, что компания в этом бизнесе уже 25 лет, вызовет доверие пользователей.

Третьестепенные – три расположенные в ряд карточки демонстрируют дополнительные товары.

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

3. Верстаем страницы

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

Карточки удобны ещё и тем, что их можно перемещать слева направо и сверху вниз ‑ для лучшего заполнения экрана.

Главная страница

Главная страница сайта в стиле флэт

Коллекции

Следующий шаг (как видно из верхней иллюстрации) – скомпоновать части сайта в Sketch или Photoshop. Чтобы визуально убедиться в том, правильно ли мы расставили приоритеты, создаём и мобильную (слева), и полномасштабную версию сайта (справа).

Сверстать страницу с карточками несложно. Это можно сделать разными способами. При работе с карточками расположенные один над другим компоненты можно просто перемещать справа налево – этого не позволяет вёрстка традиционных веб-страниц.

4. Разрабатываем и тестируем взаимодействие

Статичный макет показывает нам только внешний вид сайта, в то время как прототип позволяет увидеть сайт в работе.

Используя этот полезный плагин, импортируем многослойный файл Photoshop в совместное приложение для прототипирования – UXPin.

Путём добавления интеракций и связывания страниц можно упростить путь для пользователей и сделать сайт в целом удобнее.

При импорте PSD-файла сохраняются все слои: к каждому из них можно привязать действие – например, переход на другую страницу.

5. Добавляем ссылки

Статические макеты могут ввести нас в заблуждение. Они не показывают пользовательский путь – того, как мы проведём юзера от первой посещённой им страницы к коллекциям товаров.

Для вызова меню во время работы в UXPin кликните по фото. Затем нажмите на иконку с молнией и кнопку “Link“. Выберите нужную для перехода страницу – и готово!

6. Привносим изюминку

Хотя элементы прототипа стали кликабельными, сам он остался довольно скучным. Его можно оживить с помощью парочки простых эффектов, которые будут появляться при наведении.

Сначала устанавливаем непрозрачность фотографий на уровне 85% – для этого надо нажать на иконку меню со значком информации.

Затем добавляем интеракцию, при наведении на которую прозрачность картинки снова станет 100%.

Результат можно увидеть, наведя курсор на фотографии в действующем прототипе по ссылке.

Следующим шагом будет тестирование удобства использования при участии как минимум 5-ти пользователей. Можно использовать встроенный в UXPin инструмент, чтобы провести наш тест, или обратиться к такому сервису, как UserTesting, и набрать добровольцев для осуществления своего тестирования.

После анализа результатов последнего снова пора повторить разработку и тест. Оценка пользователей очень нужна, чтобы превратить неплохой сайт в отличный.

Вывод

Некоторые модные приёмы популярны просто потому что они нравятся дизайнерам.

Другие – потому что хорошо зарекомендовали себя. Они практичны и их легко внедрять. Использование карточек и изображений высокого качества, а также принципов минимализма – отличные техники сами по себе. Если их задействовать все одновременно, с умом и в целях, продиктованных нуждами пользователей, можно создать сайт, достойный любви посетителей и премии Awwwards.

Если этот урок кажется вам полезным, попробуйте применить его на практике. Используйте Photoshop или Sketch для дизайна статичного макета, а UXPin – для динамичного. У программы UXPin есть доступная для всех демоверсия.

Оставить комментарий
ПОЛУЧАТЬ ИНТЕРЕСНЫЕ СТАТЬИ
×

Если по какой-то причине вы не можете позвонить или дозвониться, оставьте свой номер и мы сами вам перезвоним

Номер указывайте вместе с кодом страны. Например +380ХХХХХХХХХ

Оставьте свой номер и мы сами вам перезвоним в течение дня

Номер указывайте вместе с кодом страны. Например +380ХХХХХХХХХ

Оставьте свой номер и мы сами вам перезвоним в течение дня

Номер указывайте вместе с кодом страны. Например +380ХХХХХХХХХ
Не нашли что искали?

Спасибо за Ваш выбор. Мы перезвоним Вам в течении 26 секунд и обсудим детали.

Номер телефона

Ваша заявка принята и в ближайшее время мы с вами обязательно свяжемся!

Спасибо! Ваш комментарий появится на сайте после проверки администратором