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

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.


Читайте нас в Telegram - digital_bar
Комментарии
3 комментария
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Егор Кузнецов
    больше года назад
    Касаемо счетчиков - верный ход. Лучший показатель того, что вас читают.
    +
    0
    -
    Ответить
  • Георгий Абдулов
    109
    комментариев
    0
    читателей
    Георгий Абдулов
    больше года назад
    о боже) вы точно на нужный сайт зашли?)
    +
    2
    -
    Ответить
  • DohrenaProgrammist
    больше года назад
    могу сказать, что плагины валидации - это жесть. Можно писать сайт на том же ASP.NET, где валидация осуществляется встроенными решениями. Да и AJAX ставить на MS Visual Studio не требуется - он там уже есть!
    +
    0
    -
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
Influence-маркетинг: 5 способов бюджетно влиять на аудиторию
Гость - realinsta точка ru
Пользователи ВК потеряли возможность слушать музыку в старых приложениях соцсети
Александр Петровский
1
комментарий
0
читателей
Полный профиль
Александр Петровский - Зачем пользоваться официальными приложениями? Пользуйтесь Kate Mobile например
Компания в соцсетях есть, а толку нет? Проверьте себя на возможные ошибки
Геннадий Кожемякин
1
комментарий
0
читателей
Полный профиль
Геннадий Кожемякин - Вопросы поставлены правильно, но ответы вялые
ВКонтакте рассказал, что случилось с музыкой в соцсети
Сергей Александров
1
комментарий
0
читателей
Полный профиль
Сергей Александров - Люди просто жадные. За все нужно платить.
Facebook позволил связывать страницы и группы
Гость - Мария Мирабелла мне тоже не до конца понятно нововведение...теперь можно писаnь личные сообщения от лица группы? можно добавлять друзей от лица группы? И не понятно, как связать существующую группу со страницей ее создателя и администратора. Также буду очень благодарна за любые комменты от тех, кто понял всю суть новшества
Как увеличить количество заказов через Instagram в 6 раз
Александр Смирнов
3
комментария
0
читателей
Полный профиль
Александр Смирнов - Самый быстрый и качественный способ это добавить живых подписчиков к себе в Инстаграм, через сервис: realinsta точка ru
Как мы получили 7000 целевых действий с помощью ремаркетинга myTarget
Cookie Cookie
1
комментарий
0
читателей
Полный профиль
Cookie Cookie - Евгений, формат "карусели" в mytarget позволяет размещать в рамках одного объявления сразу несколько изображений с товарами. Так пользователю напоминают о просмотренных ранее товарах (динамический ремаркетинг) или о товарах, на которые сейчас скидка (классический ремаркетинг)
Email-воронка и CPC: концепт digital-стратегии для сети пиццерий
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Игорь, добрый день! Спасибо за мнение. Некоторые ваши уточнения справедливы, некоторые, видимо, стоит прояснить. Вы правы: разделять, дополнять и уточнять, можно много чего. Ведь это концепт, цель – показать, как автоматические воронки продаж могут решать конкретную задачу. Точнее, здесь их две: запуск пиццерий и поиск партнёров. Если кому-то поможет, значит что-то полезное, да сделали:) Для кого говорим – владельцам франшиз, например. И здесь же кроется ответ на вопрос о дороговизне системы. В данном случае фишка в том, что решение создается на уровне франшизы. То есть техническая реализация воронок для пиццерий выходит копеечная, не нужно каждый раз строить новую систему. В этом вся суть франшизы Додо. А рекламные бюджеты - сами написали, все зависит от того, куда выходим. Насчет предзапуска – в Додо есть его отголоски на уровне соц. сетей. И это работает. Про бюджеты и траты пападжонс – скорее всего, тут у нас с вами просто недопонимание случилось. Мы это не из головы взяли, об этом Додо сами пишут. Это их цель, вырасти до масштабов крупных игроков на нашем, российском рынке. Кто-то тратит миллиарды, кто-то миллионы, кто-то сотни тысяч. Если Додо ставит перед собой большие задачи, где многие крутят пальцем у виска – они уже молодцы. Нам интересно с такими людьми работать, которые ломают голову, когти и зубы, а идут вперед, и у них рано или поздно получается. Не про Додо, а про малый и средний бизнес в принципе.
Facebook завысил данные прогноза по числу пользователей в разных странах
Sergei Krolikov
2
комментария
0
читателей
Полный профиль
Sergei Krolikov -
Кейс: Мой «первый раз» в SMM: этапы, инструменты, статистика, итоги
Мария Фомина
1
комментарий
0
читателей
Полный профиль
Мария Фомина - Спасибо, Екатерина! Тут уже вопрос личных предпочтений и приоритетов. :) у меня вот рука не поднимается публиковать подобное. А учитывая, что частично эксперимент just for fun - я могла это себе позволить :)
ТОП КОММЕНТАТОРОВ
Комментариев
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
ВКонтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх