course user interface - lesson 2

ПРОЕКТИРОВАНИЕ    ИНТЕРФЕЙСОВ  

 занятие  №2  

Alexander  Lisovsky  Co-­‐Founder  at  ZZ  Photo,  UX/UI  designer  

 a.lisovsky@zzphoto.me  

facebook.com/alexlisovsky,  pinterest.com/alexlisovsky,    twiOer.com/lisovsky  

Разумное  творение  hOp://youtu.be/kkGeOWYOFoA  

Конечно,  давайте  продолжим    изучать  теорию  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Линии  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Линии  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Линии  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

Пункт  первый  Пункт  второй  Пункт  третий  Пункт  четвертый  Пункт  пятый  Пункт  шестой  

Пункт  первый  Пункт  второй  Пункт  третий  Пункт  четвертый  Пункт  пятый  Пункт  шестой  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

Пункт  первый  Пункт  второй  Пункт  третий  Пункт  четвертый  Пункт  пятый  Пункт  шестой  

Пункт  первый  Пункт  второй  Пункт  третий  Пункт  четвертый  Пункт  пятый  Пункт  шестой  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Объект  и  пространство  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Объект  и  пространство  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Объект  и  пространство  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Объект  и  пространство  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Контраст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Контраст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Контраст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

Основные  правила  дизайна  

Текст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Текст  

hOp://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  

Основные  правила  дизайна  

Символы  

Добавить   Закрыть/отменить  

I  can  not  believe…  

Основные  правила  дизайна  

Цвета  

iOS  colors  

hOps://developer.apple.com/library/ios/documentawon/  UserExperience/Conceptual/MobileHIG/ColorImagesText.html  

Android  colors  

hOp://developer.android.com/design/style/color.html  

       Хорошее  сочетание  цветов  

       Хорошее  сочетание  цветов  

       Хорошее  сочетание  цветов  

hOp://www.artlebedev.ru/tools/colors/  

hOps://kuler.adobe.com  

Шрифт  

Антиквенные  шрифты    Это  шрифты  с  засечками.  Их  форма  ведет  свое  происхождение  от  шрифта  древнеримских  монументальных  надписей  (прописные  буквы)  и  от  книжного  гуманистического  минускула  эпохи  Ренессанса  (строчные  буквы).  Первая  наборная  антиква  появилась  в  Италии  и  Германии  во  второй  половине  XV  века.  

hOp://www.paratype.ru/help/class/  

Гротески  и  рубленные  шрифты    Шрифты  без  засечек.  Впервые  наборные  шрифты  без  засечек  появились  в  начале  XIX  века  в  Англии,  хотя  подобная  форма  знаков  применялась  еще  в  надписях  античной  Греции.  Вначале  применялись  исключительно  как  акцидентные,  но  в  ХХ  веке  стали  использоваться  для  набора  текста.  

hOp://www.paratype.ru/help/class/  

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

hOp://www.paratype.ru/help/class/  

Рукописные  и  каллиграфические  шрифты.    К  этой  группе  относятся  шрифты,  по  рисунку  имитирующие  чей-­‐то  почерк  или  каллиграфический  стиль,  но  не  относящиеся  к  готическим  и  древнерусским,  которые  выделены  в  отдельные  группы.  

hOp://www.paratype.ru/help/class/  

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

Выбор  гарнитуры  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

hOp://www.myfonts.com  

hOp://www.google.com/webfonts  

Один  не  лучше  другого,  но,  по  разным  причинам,  шрифт  с  засечками  имеет  более  авторитарный  оттенок,  в  то  время  как  шрифт  без  засечек  кажется  более  демократичным.  

Шрифт  с  засечками  или  без?  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

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

Какой  размер?  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

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

Межстрочный  интервал  и  контраст  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

Если  сравнить  одинаковый  кегль  любого  шрифта  для  iPhone  с  версией  для  iPad,  можно  заметить,  что  размер  шрифта  не  совпадает.  

iPhone  против  iPad  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

1.  iPad  мы  держим  дальше  от  глаз    2.  Экрану  iPhone  доступна  гораздо  меньшая  площадь,  из-­‐за  чего  приходится  вносить  правки.  

Почему  для  iPhone  и  iPad  используется  разный  кегль?  

hOp://web-­‐standards.ru/arwcles/responsive-­‐typography/  

Растр  vs.  Вектор    

Программы  растровой  графики  работают  с  точками  экрана  (пикселями).  Точки  не  знают,  какие  объекты  они  представляют  —  окружности,  линии,  прямоугольники.    Компьютер  запоминает  цвет  каждой  точки,  а  пользователь  из  таких  точек  собирает  рисунок,  как  в  детской  мозаике.    

Растровая  графика  

Растровые  редакторы  являются  наилучшим  средством  обработки  фотографий  и  рисунков,  т.к.  обеспечивают  высокую  точность  передачи  градаций  цветов  и  полутонов.    

Достоинства  растровой  графики:  

1.  Занимают  много  памяти.      2.      Растровые  изображения  невозможно  увеличивать  для  уточнения  деталей.  Так  как  изображение  состоит  из  точек,  то  увеличение  приводит  к  тому,  что  точки  становятся  крупнее,  что  визуально  искажает  иллюстрацию.  Этот  эффект  называется  пикселизацией.    

Недостатки  растровой  графики:    

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

Векторная  графика  

Преобразования  без  искажений.  Маленький  графический  файл.  Независимое  редактирование  частей  рисунка.  Высокая  точность  прорисовки  (до  1  000  000  точек  на  дюйм).    

Достоинства  векторной  графики:  

Векторные  изображения  выглядят  искусственно.    Ограниченность  в  живописных  средствах.  

Недостатки  векторной  графики:  

hOp://designwashere.com/  design-­‐baOle-­‐vector-­‐vs-­‐raster/  

That's  incredible  

Пропорции  

А  

В  

Скрипка  Страдивари,  1708  год  

Модульная  сетка  

1.618  

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

hOp://media.konigi.com/tools/graphpaper/pdf/konigi-­‐wireframe-­‐portrait-­‐cyan.pdf  

Практическое  задание:      Реверсинжениринг  проекта  из  GUI  до  этапа  модульной  сетки.  hOp://www.popmech.ru/    

GUI  —  graphic  user  interface  

…amazing  

Адаптивный  веб-­‐дизайн    Вместо  создания  нескольких  версий  сайта  для  всех  видов  устройств,  умные  люди  сейчас  делают  один  адаптивный  шаблон,  который  подходит  под  все  все  типы  экранов.  Преимущества  в  стоимости  очевидны.    

Дизайн:  Юрий  Нагорный  Верстка:  Дмитрий  Потиха  

Практическое  задание:      Адаптируем  интерфейс  веб-­‐проекта  для  разных  устройств.  hOp://www.popmech.ru/    

Вдохновение  

Pinterest.com  

pinterest.com/alexlisovsky      

Behance.net  

Dribbble.com  

Pwrns.com  

hOp://www.awwwards.com  

ui-­‐cloud.com  

hOp://psd.tutsplus.com  

hOp://uxarchive.com/tasks/onboarding  

Copyright  

hOp://www.corbisimages.com  

Очень  дорого,  но  очень  качественно  

hOp://www.geOyimages.com  

Очень  дорого,  но  очень  качественно  

hOp://www.istockphoto.com  

Доступно  (7-­‐60$/1),  качественно  

hOp://www.shuOerstock.com  

Доступно  (5-­‐60$/1),  качественно  

hOp://sxc.hu  

Бесплатно,  мало  качественного  

hOp://www.photl.com  

Бесплатно  +  платно,  стараются  

Ok,  I  almost  got  it!..  

Alexander  Lisovsky  Co-­‐Founder  at  ZZ  Photo  

UX/UI  designer    

a.lisovsky@zzphoto.me  facebook.com/alexlisovsky,  pinterest.com/alexlisovsky,    

twiOer.com/lisovsky