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

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
    -
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
9 бесплатных инструментов для управления репутацией
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Вообще, инструментов гораздо больше... По мониторингу - не упомянуты Крибрум, IQBuss. Достойные новые сервисы появляются - Соцредактор, например. Бесплатные есть еще babkee.ru И далее...
ВКонтакте запустил счетчик просмотров записей
Гость
1
комментарий
0
читателей
Полный профиль
Гость - бредятина! как товарищ пояснил, что таким образом станет понятно что вызывает наибольший интерес. чувак, открою тебе маленькую тайну, когда я захожу на страницу к кому то, непроизвольно получается просмотр записей, а эта считалочка только покажет до каких записей дошел гость)
Как получить пользу от негатива в комментариях
Step
7
комментариев
0
читателей
Полный профиль
Step - Примеры бомба! повеселили ))))) а если серьезно, то я считаю, что негатив в отзывах – это очень полезно! помогает выявить тонкие места в компании. и, кроме того, он говорит о том, что люди к вам небезразличны! А это уже хорошо. просто нужно уметь этот негатив превращать в позитив: отвечать умело на него, выводы соответствующие делать. На этом поприще можно оглушительных успехов добиться и своих недоброжелателей в преданных друзей превратить )))))
Когда френдзона – это ваша цель! Или как найти клиентов, не потратив ни копейки?
Alexandr Kuzmenko
1
комментарий
0
читателей
Полный профиль
Alexandr Kuzmenko - Аня, не молчи)
Официальные страницы ВКонтакте теперь могут создавать прямые трансляции
Артур Антреей
1
комментарий
0
читателей
Полный профиль
Артур Антреей - нето прихня
Инфографика: 139 фактов об Instagram
Валерия Россохина
516
комментариев
0
читателей
Полный профиль
Валерия Россохина - Да, к сожалению, редакция не успевает следить за личной жизнью Бейонсе, но в будущем мы обязательно исправимся :)
Facebook объявил о запуске нового инструмента Advanced Measurement
Тирион Ланнистер
2
комментария
0
читателей
Полный профиль
Тирион Ланнистер - уииии
6 распространенных ошибок в аналитике активностей в соцсетях
Alexander Abramov
3
комментария
0
читателей
Полный профиль
Alexander Abramov - За обзор и советы - очень большое спасибо!
ВКонтакте рассказал, какие инструменты будут запущены в 2017 году
Валерия Россохина
516
комментариев
0
читателей
Полный профиль
Валерия Россохина - Егор, спасибо за комментарий! Это анонс с мероприятия. Как только нам станут известны подробности грядущего запуска, мы обязательно поделимся ими.
Facebook заменил папку «Входящие» на Messenger
Гость - Очень информативно...
ТОП КОММЕНТАТОРОВ
Комментариев
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
Вконтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх