01. web design
TRANSCRIPT
Веб Дизайн
Лекция 1, Базовые понятияVladimir Tomberg, PhD
Estonian Entrepreneurship University Mainor
Октябрь 2015
Pic
ture
sou
rce:
http
://us
erce
nter
edco
nten
t.com
2
Терминология
• Что такое Веб-дизайн?• Что такое дизайн интерфейсов?
World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть
• Глобальная гипертекстовая система, использующая Интернет в качестве транспортного средства. Сеть серверов, по определению её основателя Тима Бернес-Ли (Tim Bernes-Lee) , — распределённая гетерогенная информационная мультимедиа-система коллективного пользования;
3
4
Tim Bernes-Lee
World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть
5
• С серверов поставляются HTML документы, связанные между собой гипертекстовыми ссылками. Просмотр документов осуществляется с помощью специальных программ (browser), переход на другой документ выполняется щелчком на ссылке.
World Wide Web
6
Дизайн
1. Схема, проект, машинный архив проекта например, ИС при автоматизированном проектировании;
2. Разработка, проектирование, конструирование; 3. Фаза в разработке ПО, на которой
функциональные спецификации транслируются в текст программы;
4. Разрабатывать, проектировать, конструировать.7
Дизайн сущ м Конструирование вещей, машин, интерьеров, основанное на принципах сочетания удобства, экономичности и красоты.
Словарь ОРФО
8Design for ALL
История Дизайна по Sooshin Choi
Source: http://livewellcollaborative.org/
9
Volkswagen Beetle − Industrial Design Example
Design for ALLSource: kohhranthianghlim.org
Веб-дизайн (web-design)
• Частный случай промышленного дизайна. Вид художественно-проектной деятельности, направленный на создание и обеспечение удобства использования Веб ресурсов;
• Хороший дизайн — это гораздо больше, чем декорация. Только хорошо спланированная архитектура поможет избежать конфуза при получении необходимых крупиц информации из многослойных иерархий данных и руководств.
10
Интерфейс• Интерфейс (от англ. interface — поверхность
раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы.
11
Пользовательский интерфейс
• Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством;
• Взаимодействием человека с компьютером занимается наука Human Computer Interaction (HCI).
12
Human-Computer Interaction
13
14
1945. MEMEX• В 1945 году Вэннивер
Буш, руководитель бюро научных исследований и разработок правительства США, опубликовал статью “Пока мы мыслим”, в которой впервые была сформулирована идея гипертекста.
15
1945. MEMEX• “Обсудим устройство
персонального назначения. Пусть оно называется Меmex и представляет собой что-то вроде автоматизированного архива или библиотеки.
• Меmex хранит для своего хозяина все нужные книги, записи, корреспонденцию. Прибор автоматизирован до такой степени, что дает ответы на вопросы, заданные в простой форме, - то есть очень гибок в общении. Скорость ответов высока и не заставляет ждать. Таким образом, Меmex становится расширением и усилением памяти пользователя...”
Источник: http://friends.pomorsu.ru
1962. NLS (oN Line System)
• В 1962 году Дуглас Энгельбарт в лаборатории Стэнфордского института разработал NLS.
• Файлы в NLS содержались как иерархии “утверждений”.• Можно было установить любое число ссылочных связей
- “утверждений” друг с другом, как внутрифайловых, так и межфайловых.
• Все это управлялось с помощью консоли, с графическим оконным интерфейсом, навигация по которому осуществлялась с помощью первого в истории манипулятора мышь.
16
1962. NLS (oN Line System)
17http://www.youtube.com/watch?v=a11JDLBXtPQ&feature=relmfu
1965. Xanadu
• Тэд Нельсон разрабатывает гипертекстовую систему Xanadu® — универсальный архив для хранения информации любого типа: текста, графики и т.п.;
• Именно здесь впервые прозвучали слова гипертекст и гипермедиа;
• Система никогда не была реализована в том виде, в котором была задумана;
• Тем не менее, проект Xanadu и в настоящее время развивает свои идеи (http://xanadu.com).
18
Xanadoc
19
1978. Aspen Movie Map
• Группа ученых Массачусетского технологического института во главе с Андреем Липпманом воплотила идею взаимосвязанной сети спрайтовых картинок и даже создания фильмов с меняющимся по требованию пользователя сюжетом;
• Система предлагала виртуальное путешествие по Аспену (шт. Колорадо);
• Пользователям было доступно не только множество навигационных средств, но и глобальная карта для быстрого переключения к нужной точке города.
20
1978. Aspen Movie Map
21
http://www.youtube.com/watch?v=Hf6LkqgXPMU
1987. Hypercard
• Билл Аткинсон, сотрудник Apple Computers создает для собственных нужд HyperCard, чтобы отслеживать появление своих статей в прессе;
• Его заинтересовали алгоритмы эффективного поиска и упаковки данных, и он решил реализовать новые замыслы в общедоступном пакете;
• Он смог перенести каталог из ста тысяч книжных карт библиотеки Лос-Гейтос в формат HyperCard, в результате чего поиск в HyperCard по запросу к 15-мегабайтной БД сократился с 10 мин до 2 с.
22
1987. Hypercard
23
World Wide Web
• Осенью 1990 года сотрудники CERN получили в пользование первый "веб сервер" и "веб браузер", написанные Тимом Бернерс-Ли в среде NeXTStep;
• Летом 91-го года проект "WWW" пересёк океан и влился в американский проект "Internet". Возникает параллельный мир новорожденных аббревиатур: URL, HTTP, HTML.
24
Information Management: A Proposal Tim Berners-Lee, CERN March 1989, May 1990
25
26
HCI сегодня:Wearables — Носимые Компьютеры
KINESEOWEAR
27Источник: http://www.fastcodesign.com
Skintile — Обнаруживает чувства
28Источник: http://www.trendhunter.com
Sproutling — Монитор для младенца
29Источник: http://www.sproutling.com/
Lesia Trubat балетные тапочки — отслеживают движение танцора
30Источник: http://vimeo.com/108109673
Носимый термометр
31Источник: http://mobihealthnews.com
Контактная линза Google
32Источник: http://www.engadget.com
33Источник: http://mas834.media.mit.edu
Концептуальная модель веб дизайна
• Перед тем, как мы решим, что мы делаем, мы должны решить, почему мы это делаем.
• Jeffrey Veen• The Art & Science of Web Design
34
Издания на бумаге и в сети
• Стандартное печатное издание базируется на тексте и изображениях;
• При публикации в веб добавляется третья составляющая — интеракция, обеспечиваемая кодом. Пользователь работает с вебом интерактивно: Покупка билетов; Общение в форуме; Онлайновое обучение; Поиск информации.
35
Основа концептуальной модели Веб:Текст – Изображение - Код
36
Расширение модели• Мир публикаций Веб расширяет модель
“Текст – Изображение - Код” к модели “Презентация – Структура - Поведение”.
37
Презентация – Структура - Поведение
• Презентация — как эта организация представлена пользователю визуально;
• Структура — как нечто организовано и оптимизировано для легкого понимания и использования;
• Поведение — каким образом пользователи могут взаимодействовать с продуктом и каково будет поведение продукта в результате этого взаимодействия
38
Команда разработчиков• При дальнейшем изучении внутреннего
взаимодействия между отдельными частями такой модели, становится ясно, что эта модель подходит не только для общей концепции веба, но и для реальных групп разработчиков работающих над созданием современных сайтов;
• Построение команды для разработки веб проекта очень похоже на построение самого веб проекта;
• Точное соответствие дисциплинам содержания оформления и программирования, а также управление балансом между ними, может быть таким же трудным, как построение самого проекта
39
Структура команды разработчиков
40
Упрощенный подход к Веб-дизайну
• Есть программисты и графические дизайнеры, (есть код и визуальный шаблон), нет информационной архитектуры.
41
РЕЗУЛЬТАТЫ РАЗНЫХ ЭТАПОВ РАБОТ
DELIVERABLES
ОСНОВНЫЕ РЕЗУЛЬТАТЫ РАБОТЫ UxD ИНЖЕНЕРА − “КАРТА СОКРОВИЩ”
Source: http://semanticstudios.com
ИСТОРИИ
• Хорошая история о пользовательском опыте может помочь людям увидеть проблему или возможность, мотивировать к действию, и задержаться в памяти людей надолго, после ее представления
ИСТОРИИ СЕГОДНЯ ЭФФЕКТИВНЕЕ, ЧЕМ КОГДА-ЛИБО РАНЕЕ
• Мы перегружены информацией. Хорошая история выделяется из информационного шума;
• Личная история выглядит реальнее, чем абстрактные концепты, статистика или логические аргументы;
• Истории захватывают людей на эмоциональном уровне, создавая более глубокую, интимную связь;
• Истории запоминаются: люди забывают факты, но помнят истории
ЭЛЕМЕНТЫ ХОРОШЕЙ ИСТОРИИ ВКЛЮЧАЮТ
• Четкие начало и конец;• Ясное сообщение;• История аутентична;• История релевантна;• Привлекательность (часто присутствует
драма или интрига)
47
Работа в парах: Расскажите вашу историю!
1. Интервьюируйте партнера: задача кратко описать утро студента:
– Какие активности студент делает каждое утро?
– Что ему мешает? Чего не хватает?
– Какая информация ему нужна?
Интервью 10 минут, затем смена ролей.
2. Описать проблемы3. Как можно помочь студенту
решить часть утренних проблем? Описать возможные варианты
4. Выступить с 2-х минутной презентацией результатов
Проектирование Пользовательских Интерфейсов
Задание на дом №1:
• Создать краткое описание вашего будущего проекта: Имя сайта; Краткая характеристика бизнеса заказчика (размер
учреждения, оборот, персонал, производство, склады); Описание продукции и услуг; Целевая аудитория; Бизнес задачи данного сайта (Увеличение продаж,
реклама компании, поиск партнеров и т.п.).• Результат до следующего занятия опубликовать в
LePress
48
Задание на дом №2:
• Найдите три сайта, идея которых наиболее похожа на вашу;
• Сделайте скриншоты с этих сайтов;• Напишите краткое описание идеи для
каждого сайта
49
СЛОГАНЫ
• Концептуальные выражения, порождающие аналогии и стратегии опыта, призывающие к новому осмыслению известных концепций
• “Friendster for dogs.” (Dogster)• “Flickr for video.” (YouTube)
• “We network networks.” (Cisco)• “The Firefox of media players.” (Songbird)• “Massively Multiplayer Online Learning.”
(Grockit)
ПРИМЕРЫ СЛОГАНОВ
Задание на дом №3:
• Придумайте слоган для вашего проекта
52