Звоните
Пишите
Общайтесь

Статьи

28 ноября 2014
6 креативных подходов при разработке дизайна сайта

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

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

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

Сайты-лендинги

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

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

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

Преимущества:

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

Недостатки:

  • подходит только небольшим компаниям с ограниченным набором услуг или интернет-магазинам для продвижения конкретных товаров;
  • у пользователей мобильных устройств загрузка слишком длинной страницы может занять продолжительное время (особенно при отсутствии 3G);
  • хороший лендинг получается только при слаженной работе исполнителя и заказчика.

Кому рекомендуется использовать:

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

Примеры использования:

Фоновое видео

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

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

Преимущества:

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

Недостатки:

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

Кому рекомендуется использовать:

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

Примеры использования:

Параллакс

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

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

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

Преимущества:

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

Недостатки:

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

Кому рекомендуется использовать:

  • промо-сайты и лендинги, посвященные конкретному товару или бренду;
  • сайты, продающие что-то «динамичное», например - велосипеды или автомобили;
  • в ограниченном объеме параллакс может использоваться практически на любом проекте, что добавит сайту оригинальности.

Примеры использования:

Нестандартная геометрия

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

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

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

Преимущества:

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

Недостатки:

  • затруднена верстка сайта, что приводит к повышению стоимости разработки;

Кому рекомендуется использовать:

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

Примеры использования:

Минимализм

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

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

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

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

Преимущества:

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

Недостатки:

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

Кому рекомендуется использовать:

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

Примеры использования:

Карточки

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

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

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

Веб достаточно быстро перешел на «карточки» - Twitter, Google, Facebook и множество других гигантов используют этот формат. Хотя «плитка» и не является дизайнерским решением сама по себе, она полностью преображает ресурс - и поэтому достойна места в нашем топе.

Преимущества:

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

Недостатки:

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

Кому рекомендуется использовать:

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

Примеры использования:

Оставить комментарий

Читайте также

27 декабря 2014

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

02 февраля 2015

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

05 марта 2015

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