1
4.7

Оценить

Статьи 4.7 7 голосов 434

Лучший дизайн бизнес-сайтов: топ-7 примеров для вдохновения

Хотите, чтобы сайт приводил читателей или продавал? Позаботьтесь о двух критериях: визуальной привлекательности и удобстве. Лучший дизайн сайта сегодня — это простота и лаконичность. В статье расскажем о составляющих хорошего дизайна и поделимся вдохновляющими примерами. А в конце — бонус: чек-лист для создания страницы бренда.

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

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

Вверху страницы — лаконичное меню с удобной навигацией. А преимущества продуктов описаны в отдельных разделах в виде короткого текста на ярких крупных фотоблоках.

Заключение

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

Чек-лист: как создать технический дизайн сайта

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

Похожие материалы

Подпишитесь на рассылку
Компьютерной школы Hillel

Вы получите:

  • Информацию о полезных отраслевых мероприятиях
  • Интересные статьи IT-сферы
  • Новости Компьютерной школы Hillel