Особенности веба

О сО б е н н О с т и в е б а

1

Отличия веба От графическОгО дизайна:

1. нет формата

Отличия веба От графическОгО дизайна:

1. нет формата2. некорректное отображение цвета

Отличия веба От графическОгО дизайна:

1. нет формата2. некорректное отображение цвета3. Оптимизация веса

Отличия веба От графическОгО дизайна:

1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения

Отличия веба От графическОгО дизайна:

1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения5. Привязанность к технологии

Отличия веба От графическОгО дизайна:

1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения5. Привязанность к технологии6. наличие фидбека

Отличия веба От графическОгО дизайна:

1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения5. Привязанность к технологии6. наличие фидбека7. больше каналов для взаимодействия.

кО м а н д аЕсли лажает любой из участников

команды - выгребают все

са й т

О б щ е н и е

са й т

О б щ е н и е

и д е я

са й т

О б щ е н и е

д и з а й н

и д е я

са й т

кО н т е н т

О б щ е н и е

д и з а й н

и д е я

са й т

кО н т е н т

т е х .ч а с т ь

О б щ е н и е

д и з а й н

и д е я

П р О е к т и р О в а н и ев з а и м Од е й с т в и я

2

з а д ач и и ц е л иЦель определяет конечное состояние, а задача — лишь промежуточный этап для достижения цели.

Цели — это человеские мотивы и они не меняются со временем. Задача же зависит от технологии.

л О к у с«Не думай о белом слоне»

р е ж и м ыГавно собачье

І

и н т у и т и в н О с т ьИнженер космического корабля попал из будущего в наши дни и оказался рядом с

компьютером Macintosh. Он берет мышь в руки, подносит ее ко рту, как будто это микрофон,

и говорит в нее с сильным шотландским акцентом: «Компьютер, ...»

уд а л я й т е , П О к а н е с л О м а е тс я

Это отличный способ упростить интерфейс.

П и к тО г ра м м ыТекст часто является самой

лучшей визуальной подсказкой

внешне просто просто

м>

П р О с тОта

внешне сложно

Простота не должна быть ложной.

П О х Ож е с т ьВнешне похожие элементы должны

быть похожими и по функции.

сО О б щ е н и яЧто это? С какой стати ОК?

та к т и ч н О с т ьЕсли вы хотите, чтобы ваш интерефейс

нравилися людям, он должен вести себя, как ведет себя человек, приятный в общении

та к т и ч н О с т ьЕсли вы хотите, чтобы ваш интерефейс

нравился людям, он должен вести себя, как ведет себя человек, приятный в общении

и н т е р е ск л юд я м

1

почтение

2

услужливость

3

здравыйсмысл

4

предуреждают потребности

5

6не нудят

7 держатв курсе

8понятливы

9увереныв себе

10без лишних вопросов

н е кОтО р ы е О Ш и б к и

3

у в е л и ч е н и еЛучше вообще не увеличивать

картинку, чем увеличивать на 10%

ра з н ы есО с тО я н и я

Нужно продумать, как будут выглядеть посещенные элементы,

элементы при наведении, в развернутом состоянии и т.д.

н е г и б к и йд и з а й н

П л О х О ет е с т и р О в а н и е

са й т и зк а р т и н к и

Как все будет выглядеть, если добавится еще несколько

разделов? Или список станет в 2 раза больше?

Заказчик принял? Технолог спешит закрыть проект? Перепроверьте

еще 5 раз все внимательно.

Лучше так не делать.

П ра к т и ч е с к и есО в е т ы

4

м Од ул ь н ы ес е т к и

Модульная сетка должна не сковывать, а собирать макет.

Шрифты.в е р тс к а

Следует избегать шаблонной вертски для всех разделов. Дизайн

должен зависеть от контента.

П р ОтОт и П ыПроектирование позволняет

заметить ошибки еще на первых шагах и поэтому экономит кчу

времени.

balsamiq

т е х з а д а н и еПравильно понять друг друга намного проще, когда мысль письменно сформулированна.

Капча

Рэдиобаттон (Radio button)

Выпадающий список (Drop-down list)

Лайтбокс

Поле ввода (Text box)

Чекбокс(Checkbox)

Слайдер (Slider)

и с х Од и ми з з а д ач и

Какую CMS использовать?Стоит ли использовать шаблоны?

ПОЛЕЗНЫЕ РЕСУРСЫ:

Джеф Раскин «Интефейс. новые направления в проектировании компьютерных систем»

•

Алан Купер «Об интерфейсе»

•

Артемий Лебедев «Ководство»

•

Эдвард Тафти (Edward Tufte) «Visual Explanations: Images and Quantities, Evidence and Narrative»

•

www.thefwa.comwww.awwwards.comwww.bm.straightline.jp

a s a d a s a r @ g m a I l . c o ms k y p E: a s a d a s a r

с П а с и б О