click fraud detection
click fraud detection
Blog Case

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

BLOG
CASE
3688
0
5/ 5stars
5/5

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

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

Для примера взгляните на сайт, выигравший премию 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 есть доступная для всех демоверсия.

5/5
Проголосовало людей: 1
СОДЕРЖАНИЕ
СТАТЬИ
Как работает дизайн сайта
Карточки: упорядочивают контент и упрощают взаимодействие с сайтом
Вывод
Что такое ребрендинг, и когда он необходим
Ребрендинг – это попытка изменить представления потребителей о бренде. Именно потребителей – все действия направлены…
Алексей Варламов
Алексей Варламов
10 признаков устаревшего сайта: как проверить и предотвратить
Сайт – лицо организации, поэтому важно следить за меняющимися трендами веб-дизайна. Устаревание проекта происходит в…
Алексей Варламов
Алексей Варламов
Кейс: рисуем эффектный Landing page для продажи недвижимости
Во время новогоднего ажиотажа к нам поступила заявка от постоянного клиента, который занимается продажей недвижимости…
Полина Приходько
Полина Приходько
15 тенденций веб-дизайна в 2018 году
Какой дизайн выбрать для своего веб-ресурса в 2018-м, чтобы быть в тренде?
Галина Назарова
Галина Назарова
ПОЛУЧАТЬ ИНТЕРЕСНЫЕ СТАТЬИ
Уже подписались 244 человек
Автор
3688
0
Галина Назарова
Галина
Назарова
Журналист-копирайтер
most
Popular
самое лучшее на айтыжблог
НЕ ПРОПУСТИТЕ ЭТИ 
СТАТЬИ
Возможно
Приступая к решению той или иной задачи, вы должны четко понимать, для чего вам это…
Алексей Варламов
Алексей Варламов
Как за 3,5 месяца повысить посещаемость сайта до 180 человек в сутки с исходным показателем…
Яна Спиридонова
Яна Спиридонова
«Идеального» хостинга со 100-% гарантией не существует – эта фраза неоднократно звучала от наших клиентов,…
Крутов Петр
Крутов Петр
Давайте начнем
беседу!
КОММЕНТАРИИ0
ОСТАВИТЬ КОММЕНТАРИЙ К СТАТЬЕ
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
Уже подписались 244 человек
313
ПОПИСЧИКОВ
ЧИТАТЬ
4295
ПОПИСЧИКОВ
СЛЕДИТЬ
9307
ПОПИСЧИКОВ
СЛЕДИТЬ