Тренды веб-дизайна 2012

1. Навигация всегда на экране
Т.е. при прокрутке страницы панель навигации + фильтры, быстрые формы и карзины остаюстя на экране на прежних местах. Это реально удобно.
К слову, страницы-портянки имеют смысл длишь для представления статей. Кому удобно листать многоэкранную портянку товаров на страницах интернет-магазинов?
Для продающих сайтов требуется совершенно другой подход. Здесь нужны интерактивные элементы для быстрого поиска, быстрой навигации, фильтрации и сравнения.

2. Мега-меню
Обычное меню сайта это либо горизонтальный, либо вертикальный (в колонке сайта) блок со ссылками на основные разделы сайта. Удобно, когда при наведении на пункт меню появляется дополнительная панель со ссылками на внутренние страницы данного раздела сайта.
Мега-меню называют такое меню, в котором доплнительные “выпадающие” панели содержат структурированные ссылки на разделы сайта. Здесь же можно показывать контекстные блоки и иллюстрации к разделу или к пунктам меню на которые наведён курсор мыши.
У менга-меню, пожалуй, один недостаток – оно не приспособлено для взаимодействия с сайтом при помощи сенсорного экрана.

3. Любые шрифты
До сих пор веб-дизайнеры де-факто используют Arial. Этот шрифт был очень актуален во времена, когда не было сглаживания и матрицы и ЭЛТ были низкого качества.
В настоящее время существуют разные подходы, позволяющие использовать произвольные шрифты в WEB. Один из путей к использованию нестандартного шрифта это онлайн-библиотека шрифтов от Google http://www.google.com/webfonts

4. CSS3 и jQuery
CSS3 применяют для скругления и придания эффекта объёмности (тени, градиенты), а jQuery для анимационных эффектов.

5. HTML5 и CSS3
HTML5 и CSS3 экспериментально начали применять для создания 3D, воспроизведения видео-аудио потоков и прочего, что умеет делать Flash. Стандарт HTML5 и CSS3 вступит в полную силу с 2014 года.
На апрель 2012 года даже ультрасовременные браузеры поддерживают не более 75% функционала, определённого данным стандартом.

6. Responsive web design
Responsive web design – адапивная вёрстка. Такая технология, при которой блоки страницы сайта делаются так, чтобы на любом экрне вся информация в была представлена в заранее продуманном и удобном для восприятия виде.

7. Вместо текста – инфографика
Снова к портянкам текста, которые при веб-сёрфинге сами по себе не цепляют, т.к. у голого текста отсутствует “гравитация” взгляда пользователя. Подробнее об эффекте “гравитации” рассказывает “Диаграмма Гутенберга” (книга Лидвелл У., Холден К., Батлер Дж. Универсальные принципы дизайна).

8. QR-коды

9. Адаптация элементов управления и навигации под под нажатие пальцем

10. Продолжение трендов 2011 года
В году 2012 продолжают оставаться в тренде следующие подходы:

  • интеграция сайта с социальными сетями;
  • мега-футеры;
  • большая фотография на главной странице;
  • рисованные иллюстрации;
  • расстановка информации на главной странице по принципу обложки глянцевого журнала;
  • диалоговые окна в оверлее (во всплывающем поверх страницы сайта DIV);
  • мобильные приложения веб-сервисов, представленных на сайте.

ИСТОЧНИКИ ИНФОРМАЦИИ
Тренды веб-дизайна 2012, Фонталин Евгений, Управляющий партнер, Бюро Пирогова
Web Design Trends in 2012
Jake Rocheleau is a social media enthusiast and Internet entrepreneur
Web Design Trends for 2012
Jake Rocheleau is a social media enthusiast and Internet entrepreneur

Дата создания 8/04/2012, 12:21