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

    23 октября, 2021

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

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

    Для примера взгляните на сайт

     

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

    КАК РАБОТАЕТ ДИЗАЙН САЙТА

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

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

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

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

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

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

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

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

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

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

    КАРТОЧКИ: УПОРЯДОЧИВАЮТ КОНТЕНТ И УПРОЩАЮТ ВЗАИМОДЕЙСТВИЕ С САЙТОМ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ВЫВОД

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

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

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

    475 Отзывов 5/5