12 Примеров Хорошего Веб-Дизайна

Что случается, когда люди попадают на сайт с неправильной перелинковкой, массой рекламы и сложной навигацией? Они покидают сервис навсегда.



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



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



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

Выгода от хорошо проделанного веб-сайта

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



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



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



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



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



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



Повышение узнаваемости бренда. Удовлетворенный пользователь будет советовать сайт своим друзьям или поделится ссылкой в своих соц. сетях. Потому хороший веб-дизайн – это один из ключевых элементов привлечения большой аудитории в краткие сроки.

Принципы правильного дизайна

1. Он отвечает на вопросы «Кто мы?», «Что мы делаем?», «Что Вы можете здесь получить?». Если Вы владелец «Кока-Кола», то представлять себя не нужно. Но поскольку это не так, то дайте пользователю сразу понять, куда он попал. Не заставляйте его думать.



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



3. Он оптимизирован. Каждая страница должна быть простой в использовании, а ключевые элементы навигации – всегда на видном месте. Более того, в 21-м веке весь сайт необходимо оптимизировать для чтения со смартфонов.



4. Он динамичен. Статичная домашняя страница быстро надоедает. Некоторые элементы стоит изменять с некоторой периодичностью. Лучше всего в этом плане полагаться на пожелания пользователей. Сделайте для них лучший продукт.

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

Apple

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



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







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



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



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

Carmax

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



Первое, что бросается в глаза – желтая область, которая призывает к действию (как к продаже, так и покупке). Второе – лаконичный слоган, объясняющий суть сайта. Третье – строка поиска автомобилей с необходимыми фильтрами.







Эти три составляющих и нужны пользователю, когда он работает с подобным сайтом. Нет нужды что-то искать: все перед глазами. Скролл страницы дает ответы на первостепенные вопросы, вроде особенностей сервиса или процедуры торгов. В качестве бонуса добавлены исследования по самым лучшим автомобилям.

CNN

Новостные сайты, как правило, уступают онлайн-магазинам в красоте. Но цель пользователя – узнать последние события дня в той или иной сфере. BBC, New York Times, Reuters и другие бренды поставляют самую актуальную информацию, освещая максимум деталей. Но, согласно исследованию Nettop20, первое место получил CNN.







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

Slack

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



В одном предложении указано, что представляет собой Slack. Сразу следует поле для регистрации. «Представьте, чего можно добиться вместе» - слоган, который моментально вызывает мотивацию.







Разработчикам нужна регистрация и скачивание приложения. Потому они не дают пользователю сильно засиживаться на сайте. Краткая изложение особенностей и возможностей ПО – все, что есть на домашней странице. В конце предложение: «Попробуйте Slack бесплатно вместо со своей командой».



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

Booking.com

Куда бы Вы не поехали, проживание всегда останется вопросом первой необходимости. Объявления в сети давно переполнены мошенниками, а надеяться на поиск жилья по приезду очень опрометчиво. Потому многие пользуются Booking.com, который помогает найти жилье в любо уголке планеты.







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



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

Evernote

Еще одно популярное приложение для организации своей работы. В отличии от Slack, Evernote ориентирован не только на команду, но и на одиночных пользователей.



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







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

Ripple

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



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







Ниже они кратко объясняют ключевые проблемы сегодняшних международных переводов и предлагают свое решение. Также, на основной странице высветлены все партнеры компании, среди которых передовые банки мира. Если Standard Chartered или Banko Santander сотрудничают с Ripple, то почему рядовой пользователь должен обойти этот проект стороной?

Protest Sportswear