6 креативных подходов при разработке дизайна сайта
Рассмотрим популярные течения в веб-дизайне, доказавшие свою эффективность в текущем году. Чем же сайты пытаются удивить и привлечь посетителей?
Сайты-лендинги
Сайт-лендинг – это сайт, состоящий главным образом из одной страницы значительного объема, повествующей о компании или конкретном товаре. Как правило, на такой «длинной» странице активно используются изображения, инфографика, крупные заголовки – и это тоже отличает лендинг от обычного сайта.
Компании, которые не желают тратить время на долгосрочный маркетинг и продолжительное взращивание собственной лояльной аудитории, а просто ищут быстрый способ сбыта продукции текущей клиентской аудитории, просто обязаны попробовать сайты-лендинги. Такой подход позволяет не задумываться о наполнении сайта большим объемом информации: вы просто создаете краткое, но увлекательное деловое предложение, которое «зацепит» пользователя первым экраном и не отпустит до самого конца страницы. Когда над сайтом-лендингом работают профессионалы, конверсия бьет все рекорды - а именно это и нужно большинству компаний.
Преимущества:
- высокая конверсия посетителей в клиентов в сравнении с классическими сайтами;
- из-за небольшого объема лендинг легко поддерживать и редактировать, оптимизируя его эффективность;
- идеально подходит для мобильных устройств - всего одна страница, никаких подразделов, удобно просматривать.
Недостатки:
- подходит только небольшим компаниям с ограниченным набором услуг или интернет-магазинам для продвижения конкретных товаров;
- у пользователей мобильных устройств загрузка слишком длинной страницы может занять продолжительное время (особенно при отсутствии 3G);
- хороший лендинг получается только при слаженной работе исполнителя и заказчика.
Кому рекомендуется использовать:
- малые компании, которые обладают уникальным торговым предложением и делают на нем основной акцент, выделяясь среди конкурентов
- узкоспециализированные сервисы в т.ч. стартапы;
- большие компании, которые хотят рассказать публике о новом товаре/услуге.
Примеры использования:
- http://thefernway.com/
- http://thinkpixellab.com/
- https://webflow.com/
- https://releasetherenegade.de/
- http://www.234mono.com/
Фоновое видео
С распространением поддержки HTML5 и широкополосного доступа в сеть дизайнеры открыли для себя возможность использование полноценного видео в качестве фона сайта. Большинство пользователей сети еще не знакомы с подобным приемом, и сильное впечатление, производимое этим эффектом, поможет закрепить в памяти ваш бренд.
Преимущества:
- видео быстро вовлекает пользователя, делает сайт интереснее и живее;
- оригинальность и уникальность - крайне малое число сайтов используют видео;
- зачастую лучше один раз увидеть, чем сто раз прочитать - видео может быстро передать пользователю большое количество информации.
Недостатки:
- если нет готовых материалов, то необходимо создать ролик с нуля – а это серьезные бюджеты;
- вырастают требования к скорости соединения пользователя с сайтом;
- большинство старых браузеров не поддерживают видео в качестве фона (обычно в таких случаях пользователю выводится просто статичная картинка).
Кому рекомендуется использовать:
- на промо-сайтах, рекламирующих конкретный товар или бренд;
- на сайтах, посвященных конкретным кинолентам или видео-контенту в целом;
- на личных портфолио-сайтах;
- на сайтах туристических компаний, на индивидуальных страничках стран.
Примеры использования:
- http://www.webuildrail.com/
- http://www.daarnhouwer.com/
- http://www.laquadra.tv/
- http://www.eagleadventuretours.de/
Параллакс
Совершенно новый пользовательский опыт, гарантированная уникальность сайта, максимальная возможность вовлечения - всё это пришло в веб с появлением нового дизайнерского решения - параллакса.
Параллакс может сбить с толку людей, еще не встречавшихся с ним, но на освоение такого формата уйдет не более десяти секунд. После этого начнется захватывающий процесс взаимодействия с сайтом - при условии, что над контентом работали профессионалы.
Преимущества:
- WOW-эффект и неограниченные возможности погружения пользователей в работу с сайтом;
- возможность направлять пользователя по сайту к конкретной коммерческой цели;
- увеличение времени, проводимого на сайте пользователями.
Недостатки:
- определенные сложности с поисковой оптимизацией;
- проблемы с поддержкой устройств с тач-скрином;
- долгая загрузка больших проектов;
- высокие требования к вычислительным мощностям - слабые компьютеры и смартфоны могут отображать страницу во время пролистывания некорректно.
Кому рекомендуется использовать:
- промо-сайты и лендинги, посвященные конкретному товару или бренду;
- сайты, продающие что-то «динамичное», например - велосипеды или автомобили;
- в ограниченном объеме параллакс может использоваться практически на любом проекте, что добавит сайту оригинальности.
Примеры использования:
- http://jason-kenny.com/
- http://journey.lifeofpimovie.com/
- http://www.flatvsrealism.com/
- http://www.nintendo.com.au/gamesites/mariokartwii/#home
- http://www.cabletv.com/the-walking-dead
Нестандартная геометрия
В веб-дизайне доминируют простейшие геометрические фигуры - круги и прямоугольники встречаются на большинстве, если не на всех, сайтах. Но что, если отойти от стандартов и попробовать ромбы, эллипсы, треугольники, трапеции, многоугольники? Отказаться от горизонтальной геометрии и попробовать различные углы? Аналитики выяснили, что подобная смелость дизайнеров вознаграждается - пользователи надолго запоминают необычные формы и как следствие – сам сайт.
Если же и логотип компании выполнен с использованием нестандартной геометрии, сочетаясь с общим стилем сайта, то эффект запоминания компании возрастает в разы.
Преимущества:
- запоминающийся, необычный стиль;
- нестандартная геометрия позволяет оживить даже типовой корпоративный сайт
- используя такой подход, можно создавать качественно новые лендинги.
Недостатки:
- затруднена верстка сайта, что приводит к повышению стоимости разработки;
Кому рекомендуется использовать:
- любые проекты, за исключением тех, которые подразумевают полностью официальный стиль - государственные и информационные порталы, внутрикорпоративные сайты и т.п.
Примеры использования:
- http://www.wixel.co.uk/
- http://2011annualreport.edprenovaveis.pt/
- http://webey.eu/
- http://www.arnaudbeelen.be/
Минимализм
Большинство сайтов нагружает своих посетителей тоннами информации, и даже несколько минут отдыха от обилия текста - блаженство. Появление минималистичных сайтов оставалось вопросом времени - простые, функциональные и скромные проекты давно доказали свою эффективность.
Они быстро загружаются, практически не потребляют серверных ресурсов, и при этом создать такой проект можно быстрее большинства альтернативных решений.
Создать сайт в стиле минимализма под силу не каждому дизайнеру. Условия необычны - количество графических элементов ограничено, пространство нужно создавать, а не заполнять, и даже шрифтам приходится уделять особое внимание. Текста на странице немного, а спектр допустимых цветов мал.
Преимущества:
- сайт выглядит более стильным и профессиональным по сравнению с традиционным дизайном;
- посетитель всегда сфокусирован на контенте - его внимание не распыляется на окружение;
- сайты привлекают простотой и ощущением легкости;
Недостатки:
- невозможность реализации на проектах, где большие объемы контента необходимы - интернет-магазины, информационные порталы, корпоративные сайты и пр.
- эффективное продвижение сайта в поисковых системах крайне затруднено - сила минимализма в визуализации, а не контенте.
Кому рекомендуется использовать:
- на любых малых и средних проектах, где стильность и лаконичность компании позволят ей эффектно выделиться среди конкурентов.
Примеры использования:
- http://www.re-create.com/
- http://www.guillaumebouvet.com/
- http://rokkan.com/
- http://www.dc-d.eu/
Карточки
Веб постоянно перестраивается, и не так давно мысли дизайнеров захватил формат «карточек» (также его называют «плиткой»). Он предполагает равномерное заполнение страницы однотипными «плитками», равноценными между собой. Посетитель сайта может быстро оценить контент и найти нужный раздел.
Разбиение контента на блоки позволяет не задумываться об отображении сайта на экранах множества мобильных устройств, с которых выходят в сеть пользователи, и доверить отрисовку страниц самому устройству.
Веб достаточно быстро перешел на «карточки» - Twitter, Google, Facebook и множество других гигантов используют этот формат. Хотя «плитка» и не является дизайнерским решением сама по себе, она полностью преображает ресурс - и поэтому достойна места в нашем топе.
Преимущества:
- универсальность - легко адаптировать к любым разрешениям, форматам и размерам экрана;
- удобство - благодаря краткому описанию пользователь знает, что его ждет при клике на карточку;
- равенство - карточки делают информационные материалы одинаково ценными.
Недостатки:
- ограниченная эффективная площадь;
- внедрить их на готовый проект крайне тяжело;
- отсутствие иерархии может сыграть против вас, введя пользователя в заблуждение.
Кому рекомендуется использовать:
- проекты, где важна поддержка максимального спектра устройств;
- информационные проекты с небольшим количеством разделов;
- развлекательные сайты без иерархии содержимого страницы.
Примеры использования:
- https://www.pinterest.com/
- http://www.ahh.com/
- https://dribbble.com/
- http://www.vox.com/cardstacks
Оставить комментарий