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

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
    -
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
Одноклассники вводят плату за пересылку GIF-картинок в сообщениях
Гость - Кто та самая ''избранная'' аудитория на которой эксперементируют ?
Как получить пользу от негатива в комментариях
Andrew Godunov
2
комментария
0
читателей
Полный профиль
Andrew Godunov - Большое спасибо)
ВКонтакте реформирует систему размещения рекламы
Step
6
комментариев
0
читателей
Полный профиль
Step - а что? в этом что-то есть. в целом-то неплохое предложение. особенно для любителей халявы )))))) думаю, этот пункт многим по душе придется: «администратору группы не надо совершать никаких действий для получения выручки» ))))))))) но я бы на этом не зацикливался. Хочется ведь и свое что-то делать. пусть реклама и не сразу удастся, но зато знания и опыт будут нарабатываться. А там, глядишь, и до вершин успеха недалеко. Вот есть информация об эффективной рекламе вконтакте http://socialair.ru/articles/effective_ad_vkontakte/ можно просто такие статьи поизучать, опыт успешных коллег перенять и сделать своё и хорошее!
ВКонтакте вошел в черный список печально известных рынков
Александр Гаврилов
1
комментарий
0
читателей
Полный профиль
Александр Гаврилов - Вы случаем вот эту книжку не читали ?
16 сервисов для отложенного постинга в соцсетях
Гость - Для постинга по расписанию я использую сервис https://smmplanner.com/p/activate (по ссылке 30 постов бесплатно) Удобно задается график постов, подходит как новичкам так и профессионалам.
Официальные страницы ВКонтакте теперь могут создавать прямые трансляции
Артур Антреей
1
комментарий
0
читателей
Полный профиль
Артур Антреей - нето прихня
Инфографика: 139 фактов об Instagram
Валерия Россохина
456
комментариев
0
читателей
Полный профиль
Валерия Россохина - Да, к сожалению, редакция не успевает следить за личной жизнью Бейонсе, но в будущем мы обязательно исправимся :)
ВКонтакте закроет доступ к аудиозаписям для сторонних приложений
Oleg Litvin
1
комментарий
0
читателей
Полный профиль
Oleg Litvin - КЕЙТ Мобайл все?
Instagram анонсировал четыре масштабных функции
Газиз Исмаил
1
комментарий
0
читателей
Полный профиль
Газиз Исмаил - Хорошие нововведения. Особенно понравилась возможность удалять подписчика и уведомлять о суициде. В последнем случае интересно, что будет делать команда, получившее подобное сообщение?
Шоу мыльных пузырей: продвижение фиктивного бизнеса
Гость - Ох, уж эти ваши интернеты
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17
Комментариев
17

Отправьте отзыв!
Будь в курсе




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