Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
лайкни нас в социальных сетях
Сегодня 15 лайков
198 811
Всего лайков на сайте
Бесплатная SMM-стратегия для вашего бизнеса

20 трендов веб-дизайна 2012

12 ноября 2012, 08:00 |  Анастасия Марголис

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

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

Крис Лэйк (Chris Lake), директор по развитию продукта Econsultancy, определил 20 практически полезных трендов веб-дизайна 2012. Главным критерием для отбора наиболее значимых элементов была их способность напрямую воздействовать на user experience. Бестолковым, чисто стилистическим и эстетическим трендам, Крис Лэйк начислял наименьшее количество баллов.

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

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

1. Приспосабливаемость к девайсам

Споры приверженцев реагирующего веб-дизайна дизайна (гибкого – подстраивающего веб-сайт под экраны различных устройств) со сторонниками адаптивного веб-дизайна (универсализирующего веб-сайт для экранов всех типов девайсов) стали одной из ключевых тем 2012 г.

2. Фиксированная навигация

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

Крис Лэйк в качестве примера фиксированной навигации приводит плашку с социальными кнопками, кнопками подписки и регистрации на сайте.

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

3. Листалки наподобие сенсорных

Пример – многочисленные листалки со стрелками на главной странице BBC.

4) Числовые уведомления в стиле iOS

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

5) Модульные сетки в стиле Pinterest

Встретить трендовый макет, помимо самой социальной сети, можно на сайтах Etsy, eBay и Little Monsters Леди Гага.

6) Неанимированная анимация

Посетители сайта Beetle.com прокручивают рекламный ролик Volkswagen Beetle вручную. Вращение колёсика мыши превращает статику в динамику.

7) Встроенные формы проверки/автосохранение

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

8) Мотивирующий контент

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

Другой пример – использование обратного отсчёта на сайте Amazon: «Закажите в течение 36 минут!».

9) Наноэмоции

Корзина интернет-магазина White Stuff грустит до тех пор, пока пользователь не положит в неё что-нибудь. Если не сжалитесь, она так и будет угнетать вас своим плохим настроением.

 

10) Сверхскоростная регистрация

Яркий пример – авторизация на сайте через социальные сети.

Стремясь облегчить пользователям процедуру подписки, Klout обходится даже без запроса email… Что, на взгляд Криса Лэйка, по меньшей мере, странно.

11) Бесконечная прокрутка

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

12) Единая сюжетная линия

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

13) Выпадающее мегаменю

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

14) Всплывающие карточки

В LinkedIn достаточно навести курсор на имя пользователя, как во всплывающем окне появится дополнительная информация об этом участнике соцсети.

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

15) Отдельная страница под каждую идею сайта

Бренды всё активнее используют одностраничные сайты в качестве микросайтов, базирующихся на одной кампании или одной идее. Пример – Impressapenguin.

16) Баланс между развлечением и пользой

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

17) Автозаполнение и поисковые подсказки

Google Suggest добрался до сферы электронной коммерции, что очень хорошо для user experience и интернет-маркетологов. Начните печатать запрос в поиске на Apple-устройстве – система додумает за вас.

18) Счётчики и прозрачность

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

19) Брендированная подсветка текста

Интернет-маркетологам наверняка знаком информационный портал TechCrunch. Первое, что возникает в их сознании при упоминании названия этого издания – это его зелёные тона и полутона. Теперь догадайтесь, какой цвет использует TechCrunch для подсветки искомой на странице информации.

20) Микроанимация

Некоторые российские сайты от оживающих при наведении курсора элементов веб-дизайна к 2012 г. отказались, а западный Webdesigner Depot вывел этот дизайн-эффект в тренды года по версии Econsultancy.


Комментарии
3 комментария
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Егор Кузнецов
    больше года назад
    Касаемо счетчиков - верный ход. Лучший показатель того, что вас читают.
    +
    0
    -
    Ответить
  • Георгий Абдулов
    109
    комментариев
    0
    читателей
    Георгий Абдулов
    больше года назад
    о боже) вы точно на нужный сайт зашли?)
    +
    2
    -
    Ответить
  • DohrenaProgrammist
    больше года назад
    могу сказать, что плагины валидации - это жесть. Можно писать сайт на том же ASP.NET, где валидация осуществляется встроенными решениями. Да и AJAX ставить на MS Visual Studio не требуется - он там уже есть!
    +
    0
    -
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
Nimses: тест-драйв SMM-агентства
Mihail Paramonov
1
комментарий
0
читателей
Полный профиль
Mihail Paramonov - На ваш взгляд какое вообще будущее ждет Nimses? После такого хайпа с продвижением... В какой то момент казалось что весь инстаграм рекламирует нимсес. Что скажете по поводу этого мнения? http://nimses.wiki/faq/4-k-chemu-privedet-prilozhenie-nimses.html
Конференция про новый маркетинг. Performance 360
Мария Романова
19
комментариев
0
читателей
Полный профиль
Мария Романова - Дамир, поправили, спасибо!
Тест: Проверьте свои знания по рекламе в соцсетях
Валерий Хусаинов
4
комментария
0
читателей
Полный профиль
Валерий Хусаинов - Забавный тест, но, похоже, он заточен на MyTarget и ВК, я лично практически не делаю рекламу там, все на Фб и Итг, соответственно и результат))
7 советов по рекламе интернет-магазина в Facebook
Анна Макарова
243
комментария
0
читателей
Полный профиль
Анна Макарова - Игорь, добрый день! Спасибо, опечатку исправили.
Facebook позволил связывать страницы и группы
Гость - Мария Мирабелла мне тоже не до конца понятно нововведение...теперь можно писаnь личные сообщения от лица группы? можно добавлять друзей от лица группы? И не понятно, как связать существующую группу со страницей ее создателя и администратора. Также буду очень благодарна за любые комменты от тех, кто понял всю суть новшества
Influence-маркетинг: 5 способов бюджетно влиять на аудиторию
Sergio Silvi
9
комментариев
0
читателей
Полный профиль
Sergio Silvi - В Livedune никогда не было рейтинга пользователей FAcebook пока эта функция только планируется. на данный момент есть Instagram, VK, ЖЖ, Youtube
Как мы получили 7000 целевых действий с помощью ремаркетинга myTarget
Cookie Cookie
1
комментарий
0
читателей
Полный профиль
Cookie Cookie - Евгений, формат "карусели" в mytarget позволяет размещать в рамках одного объявления сразу несколько изображений с товарами. Так пользователю напоминают о просмотренных ранее товарах (динамический ремаркетинг) или о товарах, на которые сейчас скидка (классический ремаркетинг)
Email-воронка и CPC: концепт digital-стратегии для сети пиццерий
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Игорь, добрый день! Спасибо за мнение. Некоторые ваши уточнения справедливы, некоторые, видимо, стоит прояснить. Вы правы: разделять, дополнять и уточнять, можно много чего. Ведь это концепт, цель – показать, как автоматические воронки продаж могут решать конкретную задачу. Точнее, здесь их две: запуск пиццерий и поиск партнёров. Если кому-то поможет, значит что-то полезное, да сделали:) Для кого говорим – владельцам франшиз, например. И здесь же кроется ответ на вопрос о дороговизне системы. В данном случае фишка в том, что решение создается на уровне франшизы. То есть техническая реализация воронок для пиццерий выходит копеечная, не нужно каждый раз строить новую систему. В этом вся суть франшизы Додо. А рекламные бюджеты - сами написали, все зависит от того, куда выходим. Насчет предзапуска – в Додо есть его отголоски на уровне соц. сетей. И это работает. Про бюджеты и траты пападжонс – скорее всего, тут у нас с вами просто недопонимание случилось. Мы это не из головы взяли, об этом Додо сами пишут. Это их цель, вырасти до масштабов крупных игроков на нашем, российском рынке. Кто-то тратит миллиарды, кто-то миллионы, кто-то сотни тысяч. Если Додо ставит перед собой большие задачи, где многие крутят пальцем у виска – они уже молодцы. Нам интересно с такими людьми работать, которые ломают голову, когти и зубы, а идут вперед, и у них рано или поздно получается. Не про Додо, а про малый и средний бизнес в принципе.
Facebook объявил о запуске двух новых инструментов для таргетинга
Михаил Афанасьев
1
комментарий
0
читателей
Полный профиль
Михаил Афанасьев - Огонь! Но, что делать если не ведешь клиента на сайт, а весь цикл в социальных сетях?
Павел Дуров согласился внести данные Telegram в реестр Роскомнадзора
Блокнот вебмастера
1
комментарий
0
читателей
Полный профиль
Блокнот вебмастера - Все равно заблокируют, мог бы и не делать этот шаг.
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17

Отправьте отзыв!
Facebook
ВКонтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх