Download - Особенности веба
![Page 1: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/1.jpg)
О сО б е н н О с т и в е б а
1
![Page 2: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/2.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата
![Page 3: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/3.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата2. некорректное отображение цвета
![Page 4: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/4.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата2. некорректное отображение цвета3. Оптимизация веса
![Page 5: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/5.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения
![Page 6: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/6.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения5. Привязанность к технологии
![Page 7: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/7.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения5. Привязанность к технологии6. наличие фидбека
![Page 8: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/8.jpg)
Отличия веба От графическОгО дизайна:
1. нет формата2. некорректное отображение цвета3. Оптимизация веса 4. Шрифтовые ограничения5. Привязанность к технологии6. наличие фидбека7. больше каналов для взаимодействия.
![Page 9: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/9.jpg)
![Page 10: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/10.jpg)
![Page 11: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/11.jpg)
![Page 12: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/12.jpg)
кО м а н д аЕсли лажает любой из участников
команды - выгребают все
![Page 13: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/13.jpg)
са й т
О б щ е н и е
![Page 14: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/14.jpg)
са й т
О б щ е н и е
и д е я
![Page 15: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/15.jpg)
са й т
О б щ е н и е
д и з а й н
и д е я
![Page 16: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/16.jpg)
са й т
кО н т е н т
О б щ е н и е
д и з а й н
и д е я
![Page 17: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/17.jpg)
са й т
кО н т е н т
т е х .ч а с т ь
О б щ е н и е
д и з а й н
и д е я
![Page 18: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/18.jpg)
П р О е к т и р О в а н и ев з а и м Од е й с т в и я
2
![Page 19: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/19.jpg)
з а д ач и и ц е л иЦель определяет конечное состояние, а задача — лишь промежуточный этап для достижения цели.
Цели — это человеские мотивы и они не меняются со временем. Задача же зависит от технологии.
![Page 20: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/20.jpg)
л О к у с«Не думай о белом слоне»
![Page 21: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/21.jpg)
р е ж и м ыГавно собачье
![Page 22: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/22.jpg)
І
и н т у и т и в н О с т ьИнженер космического корабля попал из будущего в наши дни и оказался рядом с
компьютером Macintosh. Он берет мышь в руки, подносит ее ко рту, как будто это микрофон,
и говорит в нее с сильным шотландским акцентом: «Компьютер, ...»
![Page 23: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/23.jpg)
уд а л я й т е , П О к а н е с л О м а е тс я
Это отличный способ упростить интерфейс.
![Page 24: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/24.jpg)
П и к тО г ра м м ыТекст часто является самой
лучшей визуальной подсказкой
![Page 25: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/25.jpg)
внешне просто просто
м>
П р О с тОта
внешне сложно
Простота не должна быть ложной.
![Page 26: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/26.jpg)
П О х Ож е с т ьВнешне похожие элементы должны
быть похожими и по функции.
![Page 27: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/27.jpg)
сО О б щ е н и яЧто это? С какой стати ОК?
![Page 28: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/28.jpg)
та к т и ч н О с т ьЕсли вы хотите, чтобы ваш интерефейс
нравилися людям, он должен вести себя, как ведет себя человек, приятный в общении
та к т и ч н О с т ьЕсли вы хотите, чтобы ваш интерефейс
нравился людям, он должен вести себя, как ведет себя человек, приятный в общении
![Page 29: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/29.jpg)
и н т е р е ск л юд я м
1
![Page 30: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/30.jpg)
почтение
2
![Page 31: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/31.jpg)
услужливость
3
![Page 32: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/32.jpg)
здравыйсмысл
4
![Page 33: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/33.jpg)
предуреждают потребности
5
![Page 34: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/34.jpg)
6не нудят
![Page 35: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/35.jpg)
7 держатв курсе
![Page 36: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/36.jpg)
8понятливы
![Page 37: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/37.jpg)
9увереныв себе
![Page 38: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/38.jpg)
10без лишних вопросов
![Page 39: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/39.jpg)
н е кОтО р ы е О Ш и б к и
3
![Page 40: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/40.jpg)
у в е л и ч е н и еЛучше вообще не увеличивать
картинку, чем увеличивать на 10%
![Page 41: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/41.jpg)
![Page 42: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/42.jpg)
ра з н ы есО с тО я н и я
Нужно продумать, как будут выглядеть посещенные элементы,
элементы при наведении, в развернутом состоянии и т.д.
![Page 43: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/43.jpg)
![Page 44: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/44.jpg)
н е г и б к и йд и з а й н
П л О х О ет е с т и р О в а н и е
са й т и зк а р т и н к и
Как все будет выглядеть, если добавится еще несколько
разделов? Или список станет в 2 раза больше?
Заказчик принял? Технолог спешит закрыть проект? Перепроверьте
еще 5 раз все внимательно.
Лучше так не делать.
![Page 45: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/45.jpg)
П ра к т и ч е с к и есО в е т ы
4
![Page 46: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/46.jpg)
м Од ул ь н ы ес е т к и
Модульная сетка должна не сковывать, а собирать макет.
![Page 47: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/47.jpg)
![Page 48: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/48.jpg)
Шрифты.в е р тс к а
Следует избегать шаблонной вертски для всех разделов. Дизайн
должен зависеть от контента.
![Page 49: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/49.jpg)
![Page 50: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/50.jpg)
![Page 51: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/51.jpg)
П р ОтОт и П ыПроектирование позволняет
заметить ошибки еще на первых шагах и поэтому экономит кчу
времени.
![Page 52: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/52.jpg)
balsamiq
![Page 53: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/53.jpg)
т е х з а д а н и еПравильно понять друг друга намного проще, когда мысль письменно сформулированна.
![Page 54: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/54.jpg)
![Page 55: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/55.jpg)
Капча
Рэдиобаттон (Radio button)
Выпадающий список (Drop-down list)
Лайтбокс
Поле ввода (Text box)
Чекбокс(Checkbox)
Слайдер (Slider)
![Page 56: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/56.jpg)
и с х Од и ми з з а д ач и
Какую CMS использовать?Стоит ли использовать шаблоны?
![Page 57: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/57.jpg)
![Page 58: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/58.jpg)
ПОЛЕЗНЫЕ РЕСУРСЫ:
Джеф Раскин «Интефейс. новые направления в проектировании компьютерных систем»
•
Алан Купер «Об интерфейсе»
•
Артемий Лебедев «Ководство»
•
Эдвард Тафти (Edward Tufte) «Visual Explanations: Images and Quantities, Evidence and Narrative»
•
www.thefwa.comwww.awwwards.comwww.bm.straightline.jp
![Page 59: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/59.jpg)
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
![Page 60: Особенности веба](https://reader038.vdocuments.mx/reader038/viewer/2022110120/557ece1fd8b42a706f8b4d5b/html5/thumbnails/60.jpg)
с П а с и б О