Веб Дизайн

Лекция 1, Введение

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Декабрь 2014

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

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

Дизайн сущ м Конструирование вещей,

машин, интерьеров, основанное на

принципах сочетания удобства,

экономичности и красоты.

Словарь ОРФО

Веб-дизайн (web-design)

• Частный случай промышленного дизайна. Вид художественно-проектной деятельности, направленный на создание и обеспечение удобства использования Веб ресурсов;

• Хороший дизайн — это гораздо больше, чем декорация. Только хорошо спланированная архитектура поможет избежать конфуза при получении необходимых крупиц информации из многослойных иерархий данных и руководств.

8

Интерфейс

• Интерфейс (от англ. interface — поверхность раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы.

9

Пользовательский интерфейс

• Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством;

• Взаимодействием человека с компьютером занимается наука Human ComputerInteraction (HCI).

10

Human-Computer Interaction

11

1945. MEMEX

• В 1945 году ВэнниверБуш, руководитель бюро научных исследований и разработок правительства США,опубликовал статью “Пока мы мыслим”, в которой впервые была сформулирована идея гипертекста.

12

1945. MEMEX• “Обсудим устройство

персонального назначения. Пусть оно называется Меmex и представляет собой что-то вроде автоматизированного архива или библиотеки.

• Меmex хранит для своего хозяина все нужные книги, записи, корреспонденцию. Прибор автоматизирован до такой степени, что дает ответы на вопросы, заданные в простой форме, - то есть очень гибок в общении. Скорость ответов высока и не заставляет ждать. Таким образом, Меmex становится расширением и усилением памяти пользователя...”

13Источник: http://friends.pomorsu.ru

1962. NLS (oN Line System)

• В 1962 году Дуглас Энгельбарт в лаборатории Стэнфордского института разработал NLS.

• Файлы в NLS содержались как иерархии “утверждений”.

• Можно было установить любое число ссылочных связей - “утверждений” друг с другом, как внутрифайловых, так и межфайловых.

• Все это управлялось с помощью консоли, с графическим оконным интерфейсом, навигация по которому осуществлялась с помощью первого в истории манипулятора мышь.

14

1962. NLS (oN Line System)

15

http://www.youtube.com/watch?v=a11JDLBXtPQ&feature=relmfu

1965. Xanadu

• Тэд Нельсон разрабатывает гипертекстовую систему Xanadu® — универсальный архив для хранения информации любого типа: текста, графики и т.п.;

• Именно здесь впервые прозвучали слова гипертекст и гипермедиа;

• Система никогда не была реализована в том виде, в котором была задумана;

• Тем не менее, проект Xanadu и в настоящее время развивает свои идеи (http://xanadu.com).

16

Xanadoc

17

1978. Aspen Movie Map

• Группа ученых Массачусетского технологического института во главе с Андреем Липпманомвоплотила идею взаимосвязанной сети спрайтовых картинок и даже создания фильмов с меняющимся по требованию пользователя сюжетом;

• Система предлагала виртуальное путешествие по Аспену (шт. Колорадо);

• Пользователям было доступно не только множество навигационных средств, но и глобальная карта для быстрого переключения к нужной точке города.

18

1978. Aspen Movie Map

19

http://www.youtube.com/watch?v=Hf6LkqgXPMU

1987. Hypercard

• Билл Аткинсон, сотрудник Apple Computers создает для собственных нужд HyperCard, чтобы отслеживать появление своих статей в прессе;

• Его заинтересовали алгоритмы эффективного поиска и упаковки данных, и он решил реализовать новые замыслы в общедоступном пакете;

• Он смог перенести каталог из ста тысяч книжных карт библиотеки Лос-Гейтос в формат HyperCard, в результате чего поиск в HyperCard по запросу к 15-мегабайтной БД сократился с 10 мин до 2 с.

20

1987. Hypercard

21

World Wide Web

• Осенью 1990 года сотрудники CERN получили в пользование первый "веб сервер" и "веб браузер", написанные Тимом Бернерсом-Ли в среде NeXTStep;

• Летом 91-го года проект "WWW" пересёк океан и влился в американский проект "Internet". Возникает параллельный мир новорожденных аббревиатур: URL, HTTP, HTML.

22

Information Management: A ProposalTim Berners-Lee, CERN March 1989, May 1990

23

24

HCI сегодня:Wearables — Носимые Компьютеры

KINESEOWEAR

25Источник: http://www.fastcodesign.com

Skintile — Обнаруживает чувства

26Источник: http://www.trendhunter.com

Sproutling — Монитор для младенца

27Источник: http://www.sproutling.com/

Lesia Trubatбалетные тапочки — отслеживают движение танцора

28Источник: http://vimeo.com/108109673

Носимый термометр

29Источник: http://mobihealthnews.com

Контактная линза Google

30Источник: http://www.engadget.com

31Источник: http://mas834.media.mit.edu

Концептуальная модель веб дизайна

• Перед тем, как мы решим, что

мы делаем, мы должны

решить, почему мы это делаем.

• Jeffrey Veen

• The Art & Science of Web Design

32

Издания на бумаге и в сети

• Стандартное печатное издание базируется на тексте и изображениях;

• При публикации в веб добавляется третья составляющая — интеракция, обеспечиваемая кодом. Пользователь работает с вебом интерактивно: Покупка билетов;

Общение в форуме;

Онлайновое обучение;

Поиск информации.

33

Основа концептуальной модели Веб:Текст – Изображение - Код

34

Расширение модели

• Мир публикаций Веб расширяет модель “Текст – Изображение - Код” к модели “Презентация – Структура - Поведение”.

35

Презентация – Структура - Поведение

• Презентация — как эта организация представлена пользователю визуально;

• Структура — как нечто организовано и оптимизировано для легкого понимания и использования;

• Поведение — каким образом пользователи могут взаимодействовать с продуктом и каково будет поведение продукта в результате этого взаимодействия.

36

Команда разработчиков• При дальнейшем изучении внутреннего

взаимодействия между отдельными частями такой модели, становится ясно, что эта модель подходит не только для общей концепции веба, но и для реальных групп разработчиковработающих над созданием современных сайтов.

• Построение команды для разработки веб проекта очень похоже на построение самого веб проекта.

• Точное соответствие дисциплинам содержания оформления и программирования, а также управление балансом между ними, может быть таким же трудным, как построение самого проекта.

37

Структура команды разработчиков

38

Упрощенный подход к Веб-дизайну

• Есть программисты и графические дизайнеры, (есть код и визуальный шаблон), нет информационной архитектуры.

39

РЕЗУЛЬТАТЫ РАЗНЫХ ЭТАПОВ РАБОТ

DELIVERABLES

ОСНОВНЫЕ РЕЗУЛЬТАТЫ РАБОТЫ UxD ИНЖЕНЕРА − “КАРТА СОКРОВИЩ”

Source: http://semanticstudios.com

ИСТОРИИ

• Хорошая история о пользовательском опыте может помочь людям увидеть проблему или возможность, мотивировать к действию, и задержаться в памяти людей надолго, после ее представления

ИСТОРИИ СЕГОДНЯ ЭФФЕКТИВНЕЕ, ЧЕМ КОГДА-ЛИБО РАНЕЕ

• Мы перегружены информацией. Хорошая история выделяется из информационного шума;

• Личная история выглядит реальнее, чем абстрактные концепты, статистика или логические аргументы;

• Истории захватывают людей на эмоциональном уровне, создавая более глубокую, интимную связь;

• Истории запоминаются: люди забывают факты, но помнят истории

ЭЛЕМЕНТЫ ХОРОШЕЙ ИСТОРИИ ВКЛЮЧАЮТ

• Четкие начало и конец;

• Ясное сообщение;

• История аутентична;

• История релевантна;

• Привлекательность (часто присутствует драма или интрига)

Работа в парах: Расскажите вашу историю!

1. Интервьюируйте партнера: задача кратко описать утро студента:

– Какие активности студент делает каждое утро?

– Что ему мешает? Чего не хватает?

– Какая информация ему нужна?

Интервью 10 минут, затем смена ролей.

2. Описать проблемы

3. Как можно помочь студенту решить часть утренних проблем? Описать возможные варианты

4. Выступить с 2-х минутной презентацией результатов

45Проектирование Пользовательских Интерфейсов

Задание на дом №1:

• Создать краткое описание вашего будущего проекта: Имя сайта;

Краткая характеристика бизнеса заказчика (размер учреждения, оборот, персонал, производство, склады);

Описание продукции и услуг;

Целевая аудитория;

Бизнес задачи данного сайта (Увеличение продаж, реклама компании, поиск партнеров и т.п.).

• Результат до следующего занятия опубликовать в LePress

46

Задание на дом №2:

• Найдите три сайта, идея которых наиболее похожа на вашу;

• Сделайте скриншоты с этих сайтов;

• Напишите краткое описание идеи для каждого сайта

47

СЛОГАНЫ

• Концептуальные выражения, порождающие аналогии и стратегии опыта, призывающие к новому осмыслению известных концепций

• “Friendster for dogs.” (Dogster)

• “Flickr for video.” (YouTube)

• “We network networks.” (Cisco)

• “The Firefox of media players.” (Songbird)

• “Massively Multiplayer Online Learning.” (Grockit)

ПРИМЕРЫ СЛОГАНОВ

Задание на дом №3:

• Придумайте слоган для вашего проекта

50