Download - Course User interface - Lesson 2
![Page 1: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/1.jpg)
ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСОВ
занятие №2
![Page 2: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/2.jpg)
Alexander Lisovsky Co-‐Founder at ZZ Photo, UX/UI designer
facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twiOer.com/lisovsky
![Page 3: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/3.jpg)
Разумное творение hOp://youtu.be/kkGeOWYOFoA
![Page 4: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/4.jpg)
Конечно, давайте продолжим изучать теорию
![Page 5: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/5.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Линии
![Page 6: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/6.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Линии
![Page 7: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/7.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Линии
![Page 8: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/8.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
Пункт первый Пункт второй Пункт третий Пункт четвертый Пункт пятый Пункт шестой
Пункт первый Пункт второй Пункт третий Пункт четвертый Пункт пятый Пункт шестой
![Page 9: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/9.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
Пункт первый Пункт второй Пункт третий Пункт четвертый Пункт пятый Пункт шестой
Пункт первый Пункт второй Пункт третий Пункт четвертый Пункт пятый Пункт шестой
![Page 10: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/10.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 11: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/11.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 12: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/12.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 13: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/13.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 14: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/14.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Контраст
![Page 15: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/15.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Контраст
![Page 16: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/16.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Контраст
![Page 17: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/17.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 18: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/18.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 19: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/19.jpg)
Основные правила дизайна
Текст
![Page 20: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/20.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 21: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/21.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 22: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/22.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 23: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/23.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 24: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/24.jpg)
hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Символы
Добавить Закрыть/отменить
![Page 25: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/25.jpg)
I can not believe…
![Page 26: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/26.jpg)
Основные правила дизайна
Цвета
![Page 27: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/27.jpg)
iOS colors
hOps://developer.apple.com/library/ios/documentawon/ UserExperience/Conceptual/MobileHIG/ColorImagesText.html
![Page 28: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/28.jpg)
Android colors
hOp://developer.android.com/design/style/color.html
![Page 29: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/29.jpg)
Хорошее сочетание цветов
![Page 30: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/30.jpg)
Хорошее сочетание цветов
![Page 31: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/31.jpg)
Хорошее сочетание цветов
![Page 32: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/32.jpg)
hOp://www.artlebedev.ru/tools/colors/
![Page 33: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/33.jpg)
hOps://kuler.adobe.com
![Page 34: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/34.jpg)
Шрифт
![Page 35: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/35.jpg)
Антиквенные шрифты Это шрифты с засечками. Их форма ведет свое происхождение от шрифта древнеримских монументальных надписей (прописные буквы) и от книжного гуманистического минускула эпохи Ренессанса (строчные буквы). Первая наборная антиква появилась в Италии и Германии во второй половине XV века.
hOp://www.paratype.ru/help/class/
![Page 36: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/36.jpg)
Гротески и рубленные шрифты Шрифты без засечек. Впервые наборные шрифты без засечек появились в начале XIX века в Англии, хотя подобная форма знаков применялась еще в надписях античной Греции. Вначале применялись исключительно как акцидентные, но в ХХ веке стали использоваться для набора текста.
hOp://www.paratype.ru/help/class/
![Page 37: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/37.jpg)
Акцидентные и декоративные шрифты. К этой группе относятся шрифты, не укладывающиеся в предыдущие группы классификации, а также специально предназначенные для акцидентного набора и имитирующие определенный исторический стиль или декоративную обработку формы, например, Модерн, Ар Деко, трехмерные, фактурные, орнаментальные и т.д.
hOp://www.paratype.ru/help/class/
![Page 38: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/38.jpg)
Рукописные и каллиграфические шрифты. К этой группе относятся шрифты, по рисунку имитирующие чей-‐то почерк или каллиграфический стиль, но не относящиеся к готическим и древнерусским, которые выделены в отдельные группы.
hOp://www.paratype.ru/help/class/
![Page 39: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/39.jpg)
Выбор шрифта — это в основном вопрос вкуса, но, так как каждый шрифт имеет свои качества и требования (или ограничения), выбор шрифта приводит ко множеству визуальных и технологических последствий.
Выбор гарнитуры
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 40: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/40.jpg)
hOp://www.myfonts.com
![Page 41: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/41.jpg)
![Page 42: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/42.jpg)
hOp://www.google.com/webfonts
![Page 43: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/43.jpg)
Один не лучше другого, но, по разным причинам, шрифт с засечками имеет более авторитарный оттенок, в то время как шрифт без засечек кажется более демократичным.
Шрифт с засечками или без?
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 44: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/44.jpg)
![Page 45: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/45.jpg)
Кегль основного текста не зависит от личных предпочтений. Он зависит от дистанции чтения. Так как чаще всего компьютеры расположены дальше, чем книги, метрический размер шрифта на рабочем столе должен быть больше, чем размер шрифта, используемый в печатном аналоге.
Какой размер?
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 46: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/46.jpg)
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 47: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/47.jpg)
С увеличением дистанции чтения, будет мудро делать межстрочный интервал (интерлиньяж) экранного текста немного большим, чем у печатного. 140% — это хороший стандарт, но, конечно, это зависит от используемого шрифта.
Межстрочный интервал и контраст
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 48: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/48.jpg)
Если сравнить одинаковый кегль любого шрифта для iPhone с версией для iPad, можно заметить, что размер шрифта не совпадает.
iPhone против iPad
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 49: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/49.jpg)
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 50: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/50.jpg)
1. iPad мы держим дальше от глаз 2. Экрану iPhone доступна гораздо меньшая площадь, из-‐за чего приходится вносить правки.
Почему для iPhone и iPad используется разный кегль?
hOp://web-‐standards.ru/arwcles/responsive-‐typography/
![Page 51: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/51.jpg)
Растр vs. Вектор
![Page 52: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/52.jpg)
Программы растровой графики работают с точками экрана (пикселями). Точки не знают, какие объекты они представляют — окружности, линии, прямоугольники. Компьютер запоминает цвет каждой точки, а пользователь из таких точек собирает рисунок, как в детской мозаике.
Растровая графика
![Page 53: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/53.jpg)
Растровые редакторы являются наилучшим средством обработки фотографий и рисунков, т.к. обеспечивают высокую точность передачи градаций цветов и полутонов.
Достоинства растровой графики:
![Page 54: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/54.jpg)
1. Занимают много памяти. 2. Растровые изображения невозможно увеличивать для уточнения деталей. Так как изображение состоит из точек, то увеличение приводит к тому, что точки становятся крупнее, что визуально искажает иллюстрацию. Этот эффект называется пикселизацией.
Недостатки растровой графики:
![Page 55: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/55.jpg)
![Page 56: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/56.jpg)
Программы векторной графики хранят информацию об объектах, составляющих изображение в виде графических примитивов: прямых линий, дуг окружностей, прямоугольников, закрасок и т.д.
Векторная графика
![Page 57: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/57.jpg)
Преобразования без искажений. Маленький графический файл. Независимое редактирование частей рисунка. Высокая точность прорисовки (до 1 000 000 точек на дюйм).
Достоинства векторной графики:
![Page 58: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/58.jpg)
![Page 59: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/59.jpg)
Векторные изображения выглядят искусственно. Ограниченность в живописных средствах.
Недостатки векторной графики:
![Page 60: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/60.jpg)
hOp://designwashere.com/ design-‐baOle-‐vector-‐vs-‐raster/
![Page 61: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/61.jpg)
![Page 62: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/62.jpg)
That's incredible
![Page 63: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/63.jpg)
Пропорции
![Page 64: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/64.jpg)
А
В
Скрипка Страдивари, 1708 год
![Page 65: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/65.jpg)
Модульная сетка
![Page 66: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/66.jpg)
![Page 67: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/67.jpg)
![Page 68: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/68.jpg)
![Page 69: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/69.jpg)
![Page 70: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/70.jpg)
![Page 71: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/71.jpg)
1.618
![Page 72: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/72.jpg)
![Page 73: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/73.jpg)
Промо страница благотворительного проекта, который распространяет открытки и заработанные деньги тратит на благотворительность.
![Page 74: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/74.jpg)
![Page 75: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/75.jpg)
![Page 76: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/76.jpg)
![Page 77: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/77.jpg)
hOp://media.konigi.com/tools/graphpaper/pdf/konigi-‐wireframe-‐portrait-‐cyan.pdf
![Page 78: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/78.jpg)
Практическое задание: Реверсинжениринг проекта из GUI до этапа модульной сетки. hOp://www.popmech.ru/
GUI — graphic user interface
![Page 79: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/79.jpg)
![Page 80: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/80.jpg)
…amazing
![Page 81: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/81.jpg)
Адаптивный веб-‐дизайн Вместо создания нескольких версий сайта для всех видов устройств, умные люди сейчас делают один адаптивный шаблон, который подходит под все все типы экранов. Преимущества в стоимости очевидны.
![Page 82: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/82.jpg)
![Page 83: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/83.jpg)
![Page 84: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/84.jpg)
![Page 85: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/85.jpg)
![Page 86: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/86.jpg)
Дизайн: Юрий Нагорный Верстка: Дмитрий Потиха
![Page 87: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/87.jpg)
![Page 88: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/88.jpg)
Практическое задание: Адаптируем интерфейс веб-‐проекта для разных устройств. hOp://www.popmech.ru/
![Page 89: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/89.jpg)
Вдохновение
![Page 90: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/90.jpg)
Pinterest.com
pinterest.com/alexlisovsky
![Page 91: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/91.jpg)
![Page 92: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/92.jpg)
Behance.net
![Page 93: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/93.jpg)
Dribbble.com
![Page 94: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/94.jpg)
Pwrns.com
![Page 95: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/95.jpg)
hOp://www.awwwards.com
![Page 96: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/96.jpg)
ui-‐cloud.com
![Page 97: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/97.jpg)
hOp://psd.tutsplus.com
![Page 98: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/98.jpg)
hOp://uxarchive.com/tasks/onboarding
![Page 99: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/99.jpg)
Copyright
![Page 100: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/100.jpg)
hOp://www.corbisimages.com
Очень дорого, но очень качественно
![Page 101: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/101.jpg)
hOp://www.geOyimages.com
Очень дорого, но очень качественно
![Page 102: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/102.jpg)
hOp://www.istockphoto.com
Доступно (7-‐60$/1), качественно
![Page 103: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/103.jpg)
hOp://www.shuOerstock.com
Доступно (5-‐60$/1), качественно
![Page 104: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/104.jpg)
hOp://sxc.hu
Бесплатно, мало качественного
![Page 105: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/105.jpg)
hOp://www.photl.com
Бесплатно + платно, стараются
![Page 106: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/106.jpg)
Ok, I almost got it!..
![Page 107: Course User interface - Lesson 2](https://reader030.vdocuments.pub/reader030/viewer/2022020307/55b3a827bb61eb900a8b461f/html5/thumbnails/107.jpg)
Alexander Lisovsky Co-‐Founder at ZZ Photo
UX/UI designer
[email protected] facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twiOer.com/lisovsky