Обзор веб сайтов. Их класификация и основные особенности. Адаптивный дизайн виды и применение. Тенденции интерфейсов.

1. Часть1. Лекция 3
Обзор веб и мобайл
интерфейсов

2. Практическое
задание

3. Типы сайтов и их
особенности

4. Типичное рабочее место
Приватность
Большой экран
Кот!
Клавиатура
Быстрое соединение Комфорт

5. Разновидности сайтов:
● Сайт-визитка
● Интернет магазины (E-commerce)
● Порталы и тематические сайты, блоги
● Поисковики
● Соц. сети
● Сервисы
● Другие (некоммерческие, промо и т.д.)

6. Типы сайтов от потребностей:
● Рассказать о себе
● Продать / Купить
● Узнать что-то, быть в курсе!
● Найти
● Пообщаться
● Работать :(
● Другие (некоммерческие, промо и т.д.)

7. Сайт-визитка
Контакты
Навигация
Навигация
Контент

8. Интернет магазин
Корзина
Контакты
Поиск
Навигация
Хлебные крошки
Дополнительная
навигация,
фильтры Дополнительная
Контент информация

9. Каталог (агрегатор прайсов)
Дополнительная информация
Навигация Поиск
Хлебные крошки
Дополнительная информация
Дополнительная
навигация,
фильтры
Контент

10. Портал
Поиск
Дополнительная информация
Карусель
Навигация
Контент

11. Новостной сайт
Навигация Поиск
Основная новость
Последние новости
точка внимания
Дополни
тельная
информ Сейчас
ация
Контент

12. Новостной сайт
Поиск
Навигация
Дополнительная информация
Основная новость Последние Мультимедиа
точка внимания новости

13. Карты (найти)
Поиск
Дополнительная
информация
Результат поиска

14. Вконтакте (социальная сеть)
Поиск Глобальная навигация
Что у вас нового? (Call-to-action)
Дополни
тельная
навигация
Лента новостей
Дополни
тельная
информация

15. Google+ (социальная сеть)
Глобальная навигация
Поиск Это Я
Что у вас нового? (Call-to-action)
Допол
нител
ьная Быстрое
навиг общение
а Дополнительная
ция информация
Лента новостей

16. Аналитика (сервис)
Глобальная навигация
Поиск
Дополнительная Контент
навигация

17. Dropbox (сервис)
Хлебные крошки Инструменты Поиск
Навигация
Контент

18. Таксер (сервис)
Глобальная навигация
Информация о сервисе, его возможностях
Кнопка "Call-to-action"

19. Некоммерческий сайт
Глобальная навигация
Информация о сервисе, его возможностях

20. Промо-сайт
Глобальная навигация
Информация о продукте, его возможностях

21. Мобильные
интерфейсы

22. Мобильный мир

23. Разнообразие мобильных устройств
Революция с приходом iPhone

24. Технические особенности
Отвлечение
Мал
ень
Сенсоры кий
экр
ан
Маленький заряд
батареи Жесты
Медленное соединение

25. Особенности работы с мобильным

26. Шаблоны компоновки для
разных устройств
Multi-Deviced Layout Patterns

27. Адаптивный дизайн
Основная идея этой концепции заключается в том, что модули
меняют свое местоположение и размер, в зависимости от экрана,
на котором отображается сайт.

28. Найболее подвижный
Mostly Fluid

29. Найболее подвижный
Mostly Fluid
Пример:
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
https://sifterapp.com/

30. Выпадающая колонка
Column Drop

31. Выпадающая колонка
Column Drop
Пример
http://weenudge.com/

32. Двигающийся шаблон
Layout Shifter

33. Двигающийся шаблон
Layout Shifter
Пример
http://forefathersgroup.com/

34. "Малюсенький щипок"
Tiny Tweaks

35. "Малюсенький щипок"
Tiny Tweaks
http://futurefriend.ly/

36. За пределами рабочей области
Off Canvas

37. За пределами рабочей области
Off Canvas
Пример
http://www.kaemingk.com/en/our-showroom/christmas/

38. Тенденции мобильных интерфейсов

40. Читать книги
The Mobile Frontier Mobile First Отзывчивый дизайн
Rachel Hinman Luke Wroblewsk Итан Маркотт

41. Спасибо!
Cергей Протопопов
UX designer @ Omyconf!
при поддержке usabilist.com