Особенности веб дизайна при разработке продающего сайта

24.03.2016

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

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

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

  • Flat дизайн — плоский стиль
  • Outline — контурный стиль
  • long Shadow – длинная тень
  • 3D – Объемный стиль

Наглядный пример как это выглядит, вы найдете в нашем разделе разработка.

Мы привели пример только самого распространенного веб дизайна, о всех мы расскажем поподробней.

Flat дизайн

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

Такой вариант при разработке продающего сайта дает определенные плюсы:
  • Быстрая загрузка сайта с компьютера и прочих устройств
  • Хорошо подойдет для адаптивной версии продающего сайта
  • Интуитивно понятное взаимодействие пользователя и элементов сайта
  • Хорошо подойдет для использования инфо-графики
Outline - контурный стиль

Аскетичный веб дизайн, где основной упор как и во flat дизайне сделан на удобную подачу информации, где нет ничего лишнего. Такой вариант подойдет для грамотной подачи текста на сайте. В него входит помимо простых элементов веб дизайна, еще оформление заголовков и читаемые шрифты. Такой вариант подойдет для инфо-порталов или блогов.

3d стиль

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

long Shadow – длинная тень

Альтернативный вариант, для тех, кому не подходит flat веб дизайн и хочется какого-то разнообразия в элементах. Основная особенность использования длинной тени в дизайне элементов, что придает некую выпуклость объектам и на них хочет нажать. Хороший стиль, если мы хотим сделать целевые действия на определенных элементах.

Винтажный или ретро стиль

Ретро стиль в данном случае был взят с 60-80 годов с западных плакатов, афиш, символических атрибутов данной эпохи (автомобили, телевизоры, радио, винил и тп.).

Для данного стиля есть свои особенности:

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

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

ПОПУЛЯРНЫЕ ЭЛЕМЕНТЫ В ВЕБ ДИЗАЙНЕ ПРИ РАЗРАБОТКЕ ПРОДАЮЩЕГО САЙТА
Параллакс эффект в веб дизайне

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

Этот эффект достигается накладыванием нескольких элементов друг на друга, которые при движению мыши или скроллинга движутся с разной скоростью. Данная технология позволяет создать искусственный 3d эффект. Из минусов данного эффекта можно назвать, низкую производительность сайта, на медленных компьютерах сайт просто зависает, данный вариант нужно использовать с умом.

Видеофон как один из трендов в веб дизайне

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

Анимация в веб дизайне

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

КАКОЙ ИСПОЛЬЗОВАТЬ ШРИФТ И КАКИЕ КНОПКИ ДОЛЖНЫ БЫТЬ В ВЕБ ДИЗАЙНЕ ПРИ РАЗРАБОТКЕ ПРОДАЮЩЕГО САЙТА

Важным моментом является оформление заголовков, размеры и стили шрифтов. Шрифты должны быть хорошо читаемыми, у некоторых людей недостаточно хорошее зрение и при загрузки сайта на мобильных устройствах, мелкий шрифт просто не разобрать и конверсия такого сайта просто сведется к нулю. Размер шрифта должен быть 14 или 16 для текста, это оптимальный вариант для удобного чтения страницы как на мобильном устройстве так и на компьютере. Что касается кнопок их размер примерно 44 px, это значение подходит под средне статический палец, что позволит человеку не промахиваться и нажимать сразу на две кнопки. Пример, человек хочет зарегистрироваться, а он видит с планшета на сайте две маленькие кнопки на которые тяжело попасть, регистрация и авторизация. Когда у человека возникают сложности с такого рода сайтами, обычное решение закрыть страницу и искать следующий вариант. При разработке веб дизайна, важно использовать эти золотые правила, шрифт 14-16 px, большие кнопки 44 px и пользователи будут довольны.

РАЗРАБОТКА ПРОДАЮЩИХ САЙТОВ И ТОНКОСТИ В СОЗДАНИИ ДЛЯ НИХ ВЕБ ДИЗАЙНА

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

  • Сайт не надо перезагружать
  • Можно прокручивать как по горизонтали так и по вертикали
  • Вся информация на одном экране
  • Удобная навигация по странице
  • Использование крупного шрифта для удобного восприятия с планшетов и телефонов
  • Большие тематические картинки
  • На фоне можно использовать изображение
  • Кнопки под размер пальцев, для удобного нажатию с планшетов и телефонов
  • Визуальное разделение блоков (разными изображениями, линиями, заливками фона, градиентами, тенями и прочими элементами)
  • Анимации и Параллакс эффект хорошая возможность в веб дизайне, зацепить человека определенными фишками