01. web design, december
TRANSCRIPT
![Page 1: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/1.jpg)
Веб Дизайн
Лекция 1, Введение
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Декабрь 2014
Pic
ture
sourc
e:
htt
p:/
/userc
ente
redconte
nt.
com
![Page 2: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/2.jpg)
Терминология
• Что такое Веб-дизайн?
• Что такое дизайн интерфейсов?
2
![Page 3: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/3.jpg)
World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть
• Глобальная гипертекстовая система, использующая Интернет в качестве транспортного средства. Сеть серверов, по определению её основателя Тима Бернес-Ли (Tim Bernes-Lee) , — распределённая гетерогенная информационная мультимедиа-система коллективного пользования;
3
![Page 4: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/4.jpg)
4
Tim Bernes-Lee
![Page 5: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/5.jpg)
World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть
5
• С серверов поставляются HTML документы, связанные между собой гипертекстовыми ссылками. Просмотр документов осуществляется с помощью специальных программ (browser), переход на другой документ выполняется щелчком на ссылке.
![Page 6: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/6.jpg)
World Wide Web
6
![Page 7: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/7.jpg)
Дизайн
1. Схема, проект, машинный архив проекта например, ИС при автоматизированном проектировании;
2. Разработка, проектирование, конструирование;
3. Фаза в разработке ПО, на которой функциональные спецификации транслируются в текст программы;
4. Разрабатывать, проектировать, конструировать.
7
Дизайн сущ м Конструирование вещей,
машин, интерьеров, основанное на
принципах сочетания удобства,
экономичности и красоты.
Словарь ОРФО
![Page 8: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/8.jpg)
Веб-дизайн (web-design)
• Частный случай промышленного дизайна. Вид художественно-проектной деятельности, направленный на создание и обеспечение удобства использования Веб ресурсов;
• Хороший дизайн — это гораздо больше, чем декорация. Только хорошо спланированная архитектура поможет избежать конфуза при получении необходимых крупиц информации из многослойных иерархий данных и руководств.
8
![Page 9: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/9.jpg)
Интерфейс
• Интерфейс (от англ. interface — поверхность раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы.
9
![Page 10: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/10.jpg)
Пользовательский интерфейс
• Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством;
• Взаимодействием человека с компьютером занимается наука Human ComputerInteraction (HCI).
10
![Page 11: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/11.jpg)
Human-Computer Interaction
11
![Page 12: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/12.jpg)
1945. MEMEX
• В 1945 году ВэнниверБуш, руководитель бюро научных исследований и разработок правительства США,опубликовал статью “Пока мы мыслим”, в которой впервые была сформулирована идея гипертекста.
12
![Page 13: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/13.jpg)
1945. MEMEX• “Обсудим устройство
персонального назначения. Пусть оно называется Меmex и представляет собой что-то вроде автоматизированного архива или библиотеки.
• Меmex хранит для своего хозяина все нужные книги, записи, корреспонденцию. Прибор автоматизирован до такой степени, что дает ответы на вопросы, заданные в простой форме, - то есть очень гибок в общении. Скорость ответов высока и не заставляет ждать. Таким образом, Меmex становится расширением и усилением памяти пользователя...”
13Источник: http://friends.pomorsu.ru
![Page 14: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/14.jpg)
1962. NLS (oN Line System)
• В 1962 году Дуглас Энгельбарт в лаборатории Стэнфордского института разработал NLS.
• Файлы в NLS содержались как иерархии “утверждений”.
• Можно было установить любое число ссылочных связей - “утверждений” друг с другом, как внутрифайловых, так и межфайловых.
• Все это управлялось с помощью консоли, с графическим оконным интерфейсом, навигация по которому осуществлялась с помощью первого в истории манипулятора мышь.
14
![Page 15: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/15.jpg)
1962. NLS (oN Line System)
15
http://www.youtube.com/watch?v=a11JDLBXtPQ&feature=relmfu
![Page 16: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/16.jpg)
1965. Xanadu
• Тэд Нельсон разрабатывает гипертекстовую систему Xanadu® — универсальный архив для хранения информации любого типа: текста, графики и т.п.;
• Именно здесь впервые прозвучали слова гипертекст и гипермедиа;
• Система никогда не была реализована в том виде, в котором была задумана;
• Тем не менее, проект Xanadu и в настоящее время развивает свои идеи (http://xanadu.com).
16
![Page 17: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/17.jpg)
Xanadoc
17
![Page 18: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/18.jpg)
1978. Aspen Movie Map
• Группа ученых Массачусетского технологического института во главе с Андреем Липпманомвоплотила идею взаимосвязанной сети спрайтовых картинок и даже создания фильмов с меняющимся по требованию пользователя сюжетом;
• Система предлагала виртуальное путешествие по Аспену (шт. Колорадо);
• Пользователям было доступно не только множество навигационных средств, но и глобальная карта для быстрого переключения к нужной точке города.
18
![Page 19: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/19.jpg)
1978. Aspen Movie Map
19
http://www.youtube.com/watch?v=Hf6LkqgXPMU
![Page 20: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/20.jpg)
1987. Hypercard
• Билл Аткинсон, сотрудник Apple Computers создает для собственных нужд HyperCard, чтобы отслеживать появление своих статей в прессе;
• Его заинтересовали алгоритмы эффективного поиска и упаковки данных, и он решил реализовать новые замыслы в общедоступном пакете;
• Он смог перенести каталог из ста тысяч книжных карт библиотеки Лос-Гейтос в формат HyperCard, в результате чего поиск в HyperCard по запросу к 15-мегабайтной БД сократился с 10 мин до 2 с.
20
![Page 21: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/21.jpg)
1987. Hypercard
21
![Page 22: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/22.jpg)
World Wide Web
• Осенью 1990 года сотрудники CERN получили в пользование первый "веб сервер" и "веб браузер", написанные Тимом Бернерсом-Ли в среде NeXTStep;
• Летом 91-го года проект "WWW" пересёк океан и влился в американский проект "Internet". Возникает параллельный мир новорожденных аббревиатур: URL, HTTP, HTML.
22
![Page 23: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/23.jpg)
Information Management: A ProposalTim Berners-Lee, CERN March 1989, May 1990
23
![Page 24: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/24.jpg)
24
HCI сегодня:Wearables — Носимые Компьютеры
![Page 25: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/25.jpg)
KINESEOWEAR
25Источник: http://www.fastcodesign.com
![Page 26: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/26.jpg)
Skintile — Обнаруживает чувства
26Источник: http://www.trendhunter.com
![Page 28: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/28.jpg)
Lesia Trubatбалетные тапочки — отслеживают движение танцора
28Источник: http://vimeo.com/108109673
![Page 29: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/29.jpg)
Носимый термометр
29Источник: http://mobihealthnews.com
![Page 30: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/30.jpg)
Контактная линза Google
30Источник: http://www.engadget.com
![Page 32: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/32.jpg)
Концептуальная модель веб дизайна
• Перед тем, как мы решим, что
мы делаем, мы должны
решить, почему мы это делаем.
• Jeffrey Veen
• The Art & Science of Web Design
32
![Page 33: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/33.jpg)
Издания на бумаге и в сети
• Стандартное печатное издание базируется на тексте и изображениях;
• При публикации в веб добавляется третья составляющая — интеракция, обеспечиваемая кодом. Пользователь работает с вебом интерактивно: Покупка билетов;
Общение в форуме;
Онлайновое обучение;
Поиск информации.
33
![Page 34: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/34.jpg)
Основа концептуальной модели Веб:Текст – Изображение - Код
34
![Page 35: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/35.jpg)
Расширение модели
• Мир публикаций Веб расширяет модель “Текст – Изображение - Код” к модели “Презентация – Структура - Поведение”.
35
![Page 36: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/36.jpg)
Презентация – Структура - Поведение
• Презентация — как эта организация представлена пользователю визуально;
• Структура — как нечто организовано и оптимизировано для легкого понимания и использования;
• Поведение — каким образом пользователи могут взаимодействовать с продуктом и каково будет поведение продукта в результате этого взаимодействия.
36
![Page 37: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/37.jpg)
Команда разработчиков• При дальнейшем изучении внутреннего
взаимодействия между отдельными частями такой модели, становится ясно, что эта модель подходит не только для общей концепции веба, но и для реальных групп разработчиковработающих над созданием современных сайтов.
• Построение команды для разработки веб проекта очень похоже на построение самого веб проекта.
• Точное соответствие дисциплинам содержания оформления и программирования, а также управление балансом между ними, может быть таким же трудным, как построение самого проекта.
37
![Page 38: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/38.jpg)
Структура команды разработчиков
38
![Page 39: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/39.jpg)
Упрощенный подход к Веб-дизайну
• Есть программисты и графические дизайнеры, (есть код и визуальный шаблон), нет информационной архитектуры.
39
![Page 40: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/40.jpg)
РЕЗУЛЬТАТЫ РАЗНЫХ ЭТАПОВ РАБОТ
DELIVERABLES
![Page 41: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/41.jpg)
ОСНОВНЫЕ РЕЗУЛЬТАТЫ РАБОТЫ UxD ИНЖЕНЕРА − “КАРТА СОКРОВИЩ”
Source: http://semanticstudios.com
![Page 42: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/42.jpg)
ИСТОРИИ
• Хорошая история о пользовательском опыте может помочь людям увидеть проблему или возможность, мотивировать к действию, и задержаться в памяти людей надолго, после ее представления
![Page 43: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/43.jpg)
ИСТОРИИ СЕГОДНЯ ЭФФЕКТИВНЕЕ, ЧЕМ КОГДА-ЛИБО РАНЕЕ
• Мы перегружены информацией. Хорошая история выделяется из информационного шума;
• Личная история выглядит реальнее, чем абстрактные концепты, статистика или логические аргументы;
• Истории захватывают людей на эмоциональном уровне, создавая более глубокую, интимную связь;
• Истории запоминаются: люди забывают факты, но помнят истории
![Page 44: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/44.jpg)
ЭЛЕМЕНТЫ ХОРОШЕЙ ИСТОРИИ ВКЛЮЧАЮТ
• Четкие начало и конец;
• Ясное сообщение;
• История аутентична;
• История релевантна;
• Привлекательность (часто присутствует драма или интрига)
![Page 45: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/45.jpg)
Работа в парах: Расскажите вашу историю!
1. Интервьюируйте партнера: задача кратко описать утро студента:
– Какие активности студент делает каждое утро?
– Что ему мешает? Чего не хватает?
– Какая информация ему нужна?
Интервью 10 минут, затем смена ролей.
2. Описать проблемы
3. Как можно помочь студенту решить часть утренних проблем? Описать возможные варианты
4. Выступить с 2-х минутной презентацией результатов
45Проектирование Пользовательских Интерфейсов
![Page 46: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/46.jpg)
Задание на дом №1:
• Создать краткое описание вашего будущего проекта: Имя сайта;
Краткая характеристика бизнеса заказчика (размер учреждения, оборот, персонал, производство, склады);
Описание продукции и услуг;
Целевая аудитория;
Бизнес задачи данного сайта (Увеличение продаж, реклама компании, поиск партнеров и т.п.).
• Результат до следующего занятия опубликовать в LePress
46
![Page 47: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/47.jpg)
Задание на дом №2:
• Найдите три сайта, идея которых наиболее похожа на вашу;
• Сделайте скриншоты с этих сайтов;
• Напишите краткое описание идеи для каждого сайта
47
![Page 48: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/48.jpg)
СЛОГАНЫ
• Концептуальные выражения, порождающие аналогии и стратегии опыта, призывающие к новому осмыслению известных концепций
![Page 49: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/49.jpg)
• “Friendster for dogs.” (Dogster)
• “Flickr for video.” (YouTube)
• “We network networks.” (Cisco)
• “The Firefox of media players.” (Songbird)
• “Massively Multiplayer Online Learning.” (Grockit)
ПРИМЕРЫ СЛОГАНОВ
![Page 50: 01. web design, december](https://reader034.vdocuments.mx/reader034/viewer/2022051617/55a2d6361a28ab6b688b4592/html5/thumbnails/50.jpg)
Задание на дом №3:
• Придумайте слоган для вашего проекта
50