Embed Size (px)
DESCRIPTION
Обзор веб сайтов. Их класификация и основные особенности. Адаптивный дизайн виды и применение. Тенденции интерфейсов.
Citation preview
Часть1. Лекция 3
Обзор веб и мобайл интерфейсов
Практическое задание
Типы сайтов и их особенности
Большой экран
Клавиатура
Кот!
Приватность
Быстрое соединение Комфорт
Типичное рабочее место
Разновидности сайтов:
● Сайт-визитка
● Интернет магазины (E-commerce)
● Порталы и тематические сайты, блоги
● Поисковики
● Соц. сети
● Сервисы
● Другие (некоммерческие, промо и т.д.)
Типы сайтов от потребностей:
● Рассказать о себе
● Продать / Купить
● Узнать что-то, быть в курсе!
● Найти
● Пообщаться
● Работать :(
● Другие (некоммерческие, промо и т.д.)
Сайт-визитка
Контакты
Навигация
Навигация
Контент
Интернет магазин
Контакты
Навигация
Контент
Дополнительная навигация, фильтры
Хлебные крошки
Дополнительная информация
Поиск
Корзина
Каталог (агрегатор прайсов)
Навигация
Контент
Дополнительная навигация, фильтры
Хлебные крошки
Дополнительная информация
Поиск
Дополнительная информация
Портал
Навигация
Контент
Дополнительная информация
Поиск
Карусель
Новостной сайт
Навигация
Контент
Дополнительная информ
ация
Поиск
Основная новостьточка внимания Последние новости
Сейчас
Новостной сайт
Навигация
Дополнительная информация
Поиск
Основная новостьточка внимания
Последние новости
Мультимедиа
Карты (найти)
Результат поискаДополнительная информация
Поиск
Вконтакте (социальная сеть)
Лента новостей
Дополнительная
информация
Поиск Глобальная навигация
Дополнительная
навигация
Что у вас нового? (Call-to-action)
Google+ (социальная сеть)
Лента новостей
Дополнительная информация
Поиск
Глобальная навигация
Дополнительная навиг
ация
Что у вас нового? (Call-to-action)
Быстрое общение
Это Я
Аналитика (сервис)
КонтентДополнительная навигация
Поиск
Глобальная навигация
Dropbox (сервис)
Контент
Навигация
ПоискИнструментыХлебные крошки
Таксер (сервис)
Информация о сервисе, его возможностях
Кнопка "Call-to-action"
Глобальная навигация
Некоммерческий сайт
Информация о сервисе, его возможностях
Глобальная навигация
Промо-сайт
Информация о продукте, его возможностях
Глобальная навигация
Мобильные интерфейсы
Мобильный мир
Разнообразие мобильных устройствРеволюция с приходом iPhone
Технические особенности
Маленький экранСенсоры
Жесты
Медленное соединение
Отвлечение
Маленький заряд батареи
Особенности работы с мобильным
Шаблоны компоновки для разных устройствMulti-Deviced Layout Patterns
Адаптивный дизайнОсновная идея этой концепции заключается в том, что модули меняют свое местоположение и размер, в зависимости от экрана, на котором отображается сайт.
Найболее подвижныйMostly Fluid
Найболее подвижныйMostly Fluid
Пример:http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.htmlhttps://sifterapp.com/
Выпадающая колонкаColumn Drop
Двигающийся шаблонLayout Shifter
Двигающийся шаблонLayout Shifter
Примерhttp://forefathersgroup.com/
"Малюсенький щипок"Tiny Tweaks
"Малюсенький щипок"Tiny Tweaks
http://futurefriend.ly/
За пределами рабочей областиOff Canvas
За пределами рабочей областиOff Canvas
Примерhttp://www.kaemingk.com/en/our-showroom/christmas/
Тенденции мобильных интерфейсов
Читать книги
Mobile FirstLuke Wroblewsk
The Mobile FrontierRachel Hinman
Отзывчивый дизайнИтан Маркотт
