Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
лайкни нас в социальных сетях
Сегодня 8 лайков
192 372
Всего лайков на сайте

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
Места знать надо, или В чем сила геотегов
Иван Залой
1
комментарий
0
читателей
Полный профиль
Иван Залой - Вот и чекинься в друзей... Стоит кнопку нажать, как грабитель к тебе в квартиру завалится. Как жить-то теперь?...
Конференция про новый маркетинг. Performance 360
Мария Романова
19
комментариев
0
читателей
Полный профиль
Мария Романова - Дамир, поправили, спасибо!
Тест: Проверьте свои знания по рекламе в соцсетях
Валерий Хусаинов
4
комментария
0
читателей
Полный профиль
Валерий Хусаинов - Забавный тест, но, похоже, он заточен на MyTarget и ВК, я лично практически не делаю рекламу там, все на Фб и Итг, соответственно и результат))
7 советов по рекламе интернет-магазина в Facebook
Анна Макарова
231
комментарий
0
читателей
Полный профиль
Анна Макарова - Игорь, добрый день! Спасибо, опечатку исправили.
Facebook позволит владельцам контента получать доход от украденных у них видео
Алексей Наталушко
1
комментарий
0
читателей
Полный профиль
Алексей Наталушко - Отличная новость! Надеюсь видео-маркетинг, с помощью данных манипуляций выйдет на качественно новый уровень
5 способов кросс-продвижения в социальных медиа
Татьяна Кондратьева
1
комментарий
0
читателей
Полный профиль
Татьяна Кондратьева - Благодарю автора - отличная статья. Когда выбираешь способ партнерского продвижения, полезно знать все альтернативы, чтобы выбрать оптимальный вариант. А также видишь, что еще не попробовал пустить в дело :)
ShadowBan в Instagram – как выйти из тени (инструкция по выживанию)
Алексей Ткачук
2
комментария
0
читателей
Полный профиль
Алексей Ткачук - Лайкни, ваши партнёры (ИКРА и т.д.) нормально спят, когда вы партнёрским материалом ставите статью о мифологии, проплаченную сервисом для накруток?
Исследование: как российские подростки проводят время в интернете?
Антон Степанов
1
комментарий
0
читателей
Полный профиль
Антон Степанов - Поколение Y совсем не интересуется обучением и образованием?
Facebook объявил о запуске двух новых инструментов для таргетинга
Михаил Афанасьев
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
ВКонтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх