Хотите, чтобы сайт приводил читателей или продавал? Позаботьтесь о двух критериях: визуальной привлекательности и удобстве. Лучший дизайн сайта сегодня — это простота и лаконичность. В статье расскажем о составляющих хорошего дизайна и поделимся вдохновляющими примерами. А в конце — бонус: чек-лист для создания страницы бренда.
5 критериев хорошего дизайна сайта
- Лаконичность
Смело убирайте лишнее: за первые несколько секунд клиент должен понять, кто вы и что предлагаете. Каждый элемент призван работать на целевую аудиторию. Этого подхода придерживаются и продающие, и лучшие новостные сайты. Так на ресурсе аренды жилья Airbnb основной элемент — строка поиска, а на BBC — блоки из новостей дня. - Удобство
Неважно, насколько хороша ваша страница, если пользователи не могут на ней разобраться. Простая структура и навигация в минимум кликов — must have для современного интернет-ресурса. Чтобы узнать цену товара, клиент не должен переходить по пяти ссылкам, а чтобы прочитать текст — выбираться из-под лавины баннеров и всплывающих окон. Для удобства пользователей не забудьте адаптировать сайт под мобильные устройства. - Цвет
Достаточно трех-четырех базовых цветов — основного и акцентных, соответствующих брендовым цветам компании. Выделяйте цветом кликабельные элементы: кнопки «Купить» или «Прочитать больше». И помните о цветовых ассоциациях: желтый ассоциируют с оптимизмом, белый — с чистотой, а зеленый — с уверенностью. - Шрифты и графика
Не используйте много шрифтов — дизайнеры советуют ограничиться двумя-тремя. Разместите на видном месте логотип компании, который гармонирует с цветовой гаммой и стилем страницы. В этом поможет сервис Logaster — генератор корпоративного стиля. Здесь вы сможете в несколько кликов создать логотип, выбрав шрифт и цвета. - Контент
Помните: пользователи не читают, а сканируют информацию. Текст должен быть коротким, понятным и полезным. Как, например, на ресурсе приложения для записей Evernot: «Ваши заметки. Порядок. Никаких усилий».
7 сайтов с вдохновляющим дизайном
Нужны свежие идеи, чтобы создать лучший персональный дизайн сайта? Собрали 7 примеров.
Рекомендуем курс по теме
ESPN Sports Programming
Мы на трассе «Формулы-1», боксерском ринге или состязаниях по фристайлу? На самом деле это главная страница каталога спортивных программ американского канала ESPN.
Фото- и видеоконтент моментально погружает нас в атмосферу соревнований. Азарта добавляет плашка красного цвета, который ассоциируется с напором и борьбой. Страница не перегружена текстами: на полноэкранном черно-белом видео — логотип компании белым шрифтом, а внизу — восемь фотоблоков с названиями видов спорта. Каждый из них ведет в раздел с подробной информацией.
Zillow
«Наконец-то я дома» — такое ощущение возникает на странице Zillow. При виде крупного фото дома с зажженными окнами и уютной террасой рука сама тянется к строке поиска недвижимости по центру экрана. Слоган звучит так, будто кто-то берет нас за руку и произносит: «Поможем найти дом, который вы полюбите».
Интерфейс состоит из простых и понятных элементов, чтобы не мешать восприятию. Дополняет впечатление бело-голубая гамма — цвета чистоты и доверия. В этих же цветах выполнен логотип Zillow в виде стилизованного дома. Цветовую гамму поддерживает и заглавное фото с белым домом на фоне неба.
Apple
Сайт Apple переносит нас в один из фирменных магазинов компании: минимализм, простор и преобладание белого цвета. Первое, что мы видим, — крупные фотографии продуктов, эффектно выделяющиеся на белом фоне: iPhone XR, Apple Watch Series 4 и других.
Как и с продукцией Apple, на сайте есть ощущение уверенности и контроля над ситуацией: здесь нет всплывающих окон, мигающего текста или внезапно включающихся видео. Чтобы прочитать подробные характеристики или купить, нужно кликнуть по голубым кнопкам и перейти в соответствующие разделы. А вверху на главной странице расположено лаконичное меню по категориям продуктов и строка поиска.
Crypton.trading
Вы когда-нибудь общались с роботом? На сайте о трейдинге криптовалют «живет» бот по имени Crypton.
На черном экране Crypton печатает пользователям приветствие и поясняет, кто он. По мере прокрутки появляется инфографика: бот рассказывает о принципах своей работы при помощи понятной анимации из знаков и символов. Кажется, еще немного — он предложит нам кофе и расскажет о своей семье. Ну как тут не заинтересоваться нюансами трейдинга?
Revols
Философию бренда передает простой и чистый дизайн сайта. Весь первый экран занимает фото наушников, ниже — видео, поясняющее принцип их работы, и короткое описание преимуществ. Мы чувствуем, что от нас ничего не скрывают, и начинаем доверять бренду.
Страница выполнена в успокаивающих серо-белых тонах. Голубым выделены призывы к покупке и преимущества продукции. Общий стиль поддерживает белый логотип компании, выполненный в виде стилизованных наушников.
Fiftythree Pencil
На главной странице минимум информации, но каждый элемент работает на целевую аудиторию. Творческие люди чувствуют себя, как дома: вот стол, компания единомышленников, которые рисуют на iPad и, конечно, чашка кофе. Дополняет впечатление слоган: «Необходимые инструменты для будущих творцов».
Под заглавным фото расположены два блока с продукцией компании: Paper (приложение для рисования) и Paste (инструмент для создания презентаций). Подробное описание открывается при переходе в эти разделы, поэтому на основном экране не возникает эффекта перенасыщения.
Boosted
«Фишка» сайта в иллюстрациях, которые отражают динамику бренда-производителя электрических скейтбордов и скутеров. Весь первый экран занимают сменяющиеся фото и видео с продукцией компании. Чувствуешь, как в волосах развевается ветер, и ты на скутере несешься с друзьями наперегонки по живописным улицам. Конечно, сразу хочется нажать оранжевую кнопку «Купить».
Вверху страницы — лаконичное меню с удобной навигацией. А преимущества продуктов описаны в отдельных разделах в виде короткого текста на ярких крупных фотоблоках.
Заключение
Подытожим главные правила дизайна бизнес-страниц: привлекательный вид и комфорт для пользователей. Помните, что в тренде — минимализм и лаконичность. Позаботьтесь об удобной навигации, не перегружайте сайт лишней информацией и раздражающими элементами: всплывающими окнами или анимацией. Чтобы вы ничего не упустили, составили для вас чек-лист.
Чек-лист: как создать технический дизайн сайта
- определите целевую аудиторию: от этого зависят все элементы дизайна;
- выберите цветовую гамму, шрифт и графические элементы;
- позаботьтесь о качественных фото и видео;
- напишите короткие и понятные тексты;
- продумайте удобную навигацию;
- разместите призывы к действию;
- адаптируйте под мобильные устройства.
