Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Course User interface - Lesson 2

1,188 views

Published on

Course User interface at Bionic University by Oleksandr Lisovskyi

Published in: Design
  • Login to see the comments

Course User interface - Lesson 2

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

×