Презентация к выступлению Анны Свердловой на конференции "Сайт 2012"

1. Тренды развития сайтостроительства
Москва
2012

2. Главные тенденции
 Упрощение восприятия информации:
 Мобильность: адаптация сайтов для просмотра на смартфонах и
планшетах – единое решение для всех устройств.
 Простота: пути на сайте максимально укорачиваются – вплоть до
«одностраничного» дизайна.
 Наглядность: изложение фактов в простом и занимательном формате,
инфографика, видео‐презентации сервисов.
 Навигация и представление:
 Touch‐навигация: все используют устройства с сенсорным экраном.
 Новые варианты меню: неподвижное при скроллинге, информационно
насыщенное – с картинками и пояснениями, динамически раскрываемое
фиксированного размера («гармошка»).
 Новая роль футера: не служебная область, а карта сайта.
Copyright © 2012 Actis®Wunderman 2
Дополнительную информацию можно получить на сайте: www.actis.ru

3. Главные тенденции
 Дизайн:
 Не мельчить: крупные шрифты, изображения (в том числе фоновые) и
элементы интерфейса, для простоты восприятия и удобства просмотра на
мобильных платформах.
 «Одностраничный» сайт: интерактивная анимация, «расхлопы»,
наложение и «всплывание» элементов в нужном пользователю месте,
вместо перехода на другие страницы.
 Проработанные иконки: крупные, живые и с небанальными
ассоциациями («как на маке»).
 Динамическая «дозагрузка» страниц при скроллинге вместо привычного
пейджинга.
 Динамическое preview: при наведении мыши возможен
предварительный просмотр более подробной информации о
ссылке/изображении.
 «Как в приложении»: использование интерфейсных элементов
свойственных приложениям на сайтах.
Copyright © 2012 Actis®Wunderman 3
Дополнительную информацию можно получить на сайте: www.actis.ru

4. Главные тенденции
 Технология:
 AJAX
 jQuery
 СSS3
 HTML5 вместо Flash
 H.264 высококачественное сжатие видео
 QR код для ссылок на мобильные страницы и приложения
 «Резиновость» страницы или большой набор фиксированных размеров
(не одна фиксированная ширина для всех)
 Интеграция:
 Хабы (hubs): в зависимости от своей направленности, сайты служат
агрегаторами активностей компании или бренда в интернет‐пространстве.
 С социальными сетями: от простых кнопок ‘like’ до полной интеграции
сайта с присутствием в соц сетях.
Copyright © 2012 Actis®Wunderman 4
Дополнительную информацию можно получить на сайте: www.actis.ru

5. Единый сайт
для всех устройств
Responsive web design:
Не отдельные версии для разных
устройств, а «гибкий» сайт, красиво и
«умно» подстраивающийся под
характеристики устройства или окна
браузера.
«Как в
приложении»
Desktop Mobile
Copyright © 2012 Actis®Wunderman 5
Дополнительную информацию можно получить на сайте: www.actis.ru

6. Copyright © 2012 Actis®Wunderman 6
Дополнительную информацию можно получить на сайте: www.actis.ru

7. Copyright © 2012 Actis®Wunderman 7
Дополнительную информацию можно получить на сайте: www.actis.ru

8. Copyright © 2012 Actis®Wunderman 8
Дополнительную информацию можно получить на сайте: www.actis.ru

9. Одностраничные
(и малостраничные) сайты
Nike
Better
World
Copyright © 2012 Actis®Wunderman 9
Дополнительную информацию можно получить на сайте: www.actis.ru

10. “Квази‐touch” навигация
Видео‐
презентация
Смена слайда
Copyright © 2012 Actis®Wunderman 10
Дополнительную информацию можно получить на сайте: www.actis.ru

11. Горизонтальный скроллинг
и слайдшоу
Промо‐блок
Copyright © 2012 Actis®Wunderman 11
Дополнительную информацию можно получить на сайте: www.actis.ru

12. Выпадающие меню
• Возвращение drop‐down
меню – теперь по
наведению, а не нажатию.
• Они могут быть и
многоуровневыми.
• Позволяет разместить на
странице сразу много элементов.
• Подходит, когда есть много
однотипных элементов.
Copyright © 2012 Actis®Wunderman 12
Дополнительную информацию можно получить на сайте: www.actis.ru

13. Информационно насыщенное
меню
Copyright © 2012 Actis®Wunderman 13
Дополнительную информацию можно получить на сайте: www.actis.ru

14. Неподвижное при скроллинге
рабочей области меню
• Меню остается неподвижным для посетителя относительно границ
браузера при скроллинге страницы в любом направлении.
• В меню выносятся только самые нужные разделы и функции.
Copyright © 2012 Actis®Wunderman 14
Дополнительную информацию можно получить на сайте: www.actis.ru

15. Инфографика
Copyright © 2012 Actis®Wunderman 15
Дополнительную информацию можно получить на сайте: www.actis.ru

16. Инфографика
Инфографика – напрямую
не влияет на дизайн, но
меняет восприятие
информации и изменяет
систему представления
контента на сайте. Числовая
информация теперь легка
для понимания.
Copyright © 2012 Actis®Wunderman 16
Дополнительную информацию можно получить на сайте: www.actis.ru

17. Крупные кнопки
Copyright © 2012 Actis®Wunderman 17
Дополнительную информацию можно получить на сайте: www.actis.ru

18. Крупные проработанные
иконки
Copyright © 2012 Actis®Wunderman 18
Дополнительную информацию можно получить на сайте: www.actis.ru

19. Крупный шрифт
Copyright © 2012 Actis®Wunderman 19
Дополнительную информацию можно получить на сайте: www.actis.ru

20. Типографика
Copyright © 2012 Actis®Wunderman 20
Дополнительную информацию можно получить на сайте: www.actis.ru

21. Простота при изложении
ключевых фактов
Copyright © 2012 Actis®Wunderman 21
Дополнительную информацию можно получить на сайте: www.actis.ru

22. Крупные изображения
Copyright © 2012 Actis®Wunderman 22
Дополнительную информацию можно получить на сайте: www.actis.ru

23. Copyright © 2012 Actis®Wunderman 23
Дополнительную информацию можно получить на сайте: www.actis.ru

24. Анимация и наложение
элементов (modal boxes)
Новые элементы раскрываются на одной и той же
странице поверх фона. Вновь открываемые
элементы, как правило, полупрозрачны, и их
раскрытие сопровождается анимацией.
Copyright © 2012 Actis®Wunderman 24
Дополнительную информацию можно получить на сайте: www.actis.ru

25. Copyright © 2012 Actis®Wunderman 25
Дополнительную информацию можно получить на сайте: www.actis.ru

26. Динамический предпросмотр
Preview
Copyright © 2012 Actis®Wunderman 26
Дополнительную информацию можно получить на сайте: www.actis.ru

27. Динамическая «дозагрузка»
страниц вместо пейджинга
«Дозагрузка»
Copyright © 2012 Actis®Wunderman 27
Дополнительную информацию можно получить на сайте: www.actis.ru

28. Ощущение глубины
(параллакс)
Copyright © 2012 Actis®Wunderman 28
Дополнительную информацию можно получить на сайте: www.actis.ru

29. Скролл‐сайты
• Эффект анимации скроллингом
• Возможно понять только при взаимодействии с
сайтом
Copyright © 2012 Actis®Wunderman 29
Дополнительную информацию можно получить на сайте: www.actis.ru

30. Copyright © 2012 Actis®Wunderman 30
Дополнительную информацию можно получить на сайте: www.actis.ru

31. Мы будем рады ответить
на Ваши вопросы.
Actis®Wunderman
info@actis.ru
www.actis.ru
+7 (495) 234-00-09
Copyright © 2012 Actis®Wunderman 31
Дополнительную информацию можно получить на сайте: www.actis.ru