01. web design

Веб Дизайн

Лекция 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