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.

Web-design: курс для новичков. День второй.

Web-design: курс для новичков. День второй.
Украинский Гуманитарный институт (г.Буча)

  • Login to see the comments

Web-design: курс для новичков. День второй.

  1. 1. 2  день     Создание  дизайна  сайтов:     курс  для  новичков   Александр  Лисовский   UX,  UI,  графический  дизайнер  
  2. 2. Дизайн  спасет  мир   h9p://youtu.be/kkGeOWYOFoA  
  3. 3. Конечно,  давайте  начнем  с  теории  
  4. 4. Линии   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  5. 5. Линии   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  6. 6. Линии   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  7. 7. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  8. 8. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  9. 9. Объект  и  пространство   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  10. 10. Объект  и  пространство   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  11. 11. Объект  и  пространство   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  12. 12. Объект  и  пространство   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  13. 13. Контраст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  14. 14. Контраст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  15. 15. Контраст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  16. 16. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  17. 17. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  18. 18. Текст  Основные  правила  дизайна  
  19. 19. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  20. 20. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  21. 21. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  22. 22. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  23. 23. Текст   Основные  правила  дизайна  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  24. 24. Символы   Основные  правила  дизайна   Добавить   Закрыть/отменить  h9p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094  
  25. 25. Цвета  Основные  правила  дизайна  
  26. 26. Перерыв?  
  27. 27. Те,  кто  читают  книги  всегда  будут  управлять  теми,  кто  смотрит  телевизор   Фелиция  Жанлис  
  28. 28. h9p://www.artlebedev.ru/everything/izdal/kniga-­‐pro-­‐bukvy2/  
  29. 29. h9p://mann-­‐ivanov-­‐ferber.ru/books/Luchiernoctar/Rework1/  
  30. 30. h9p://mann-­‐ivanov-­‐ferber.ru/books/paperbook/DeliveringHappiness/  
  31. 31. Вдохновение  
  32. 32. pinterest.com  
  33. 33. dribbble.com  
  34. 34. h9p://p9rns.com  
  35. 35. h9p://www.behance.net  
  36. 36. h9p://www.awwwards.com  
  37. 37. ui-­‐cloud.com  
  38. 38. h9p://psd.tutsplus.com  
  39. 39. h9p://uxarchive.com/tasks/onboarding  
  40. 40. How  to:  Тени  
  41. 41. Тени  -­‐  это  один  из  камней  преткновения  всех  дизайнеров.  По  теням   часто  судят  о  качестве  работ,  об  уровне  дизайнера.  Есть  некоторые   стереотипы,  некие  "правила  хорошего  тона",  по  которым  мы  судим  о   качестве  тени.     Вообще,  утверждение,  что  фотореалистичная  тень  -­‐  это  хорошо,  а   остальное  плохо  -­‐  в  корне  неверно.  Очень  часто  приходится  править  и   корректировать  фотореалистичную  тень,  чтобы  получить  чистый   качественный  элемент  дизайна  сайта.  Также  нередко  требуется   изобразить  схематическую  тень,  чтобы  просто  оттенить  важный  блок   или  меню.     Ниже  я  привожу  три  основных  правила  изображения  теней.    h9p://www.pirogov.ru  
  42. 42. Как  нельзя  h9p://www.pirogov.ru  
  43. 43. Первое  правило   1.  Тень  не  должна  быть  грязью     Приведённые  ниже  рисунки  демонстрируют,  как  не   надо  делать  тень.  На  рисунках  показаны  слишком   резкие  переходы  из  белого  цвета  в  чёрный.  В   природе,  при  дневном  освещении,  такие  переходы   очень  редки.      h9p://www.pirogov.ru  
  44. 44. Правило  первое  Тут  тень  светлее  и  прозрачнее.  Она  не  оттягивает  на  себя  внимание.  Такое  использование  тени,  как  на  рис.2а  и  рис.2b  часто  применяется  в  корпоративных  сайтах.  И  порой  настораживает,  что  дизайнеры  воспринимают  это  как  признак  плохого  тона.  h9p://www.pirogov.ru  
  45. 45. Исключения  из  правила   Если  на  рисунке  показана  ночь,  и  наш  обьект   освещается  лампой,  то  тени  очень  контрастные.  Всё   зависит  от  освещения.  В  данном  уроке   рассказывается  про  общий  случай,  когда  всё   освещено  дневным  светом.  h9p://www.pirogov.ru  
  46. 46. Правило  второе   Тень  -­‐  это  не  наложение  чёрного  цвета     Очень  часто  рисуют  тень,  накладывая  чёрный  цвет  в  разных   пропорциях  и  с  разной  прозрачностью.  Это  неверно.  Тень  -­‐  это   область,  куда  не  попадает  прямой  свет  от  источника.  А  значит,  что   эта  область  окрашена  в  естественный  цвет  предмета.  Она  может   казаться  даже  насыщеннее  той  области,  куда  падает  свет,  если   предмет  имеет  достаточно  яркий  "родной"  цвет.     Также  при  выборе  цвета  тени  следует  учитывать  тот  момент,  что   сам  объект  может  частично  отражать  свет  на  плоскость.   Например,  если  объект  ярко-­‐красный,  то  он  будет  отбрасывать   часть  красного  цвета  на  плоскость,  на  которой  стоит.      h9p://www.pirogov.ru  
  47. 47. Правило  второе   Тень  -­‐  это  не  наложение  чёрного  цвета     Очень  часто  рисуют  тень,  накладывая  чёрный  цвет  в  разных   пропорциях  и  с  разной  прозрачностью.  Это  неверно.  Тень  -­‐  это   область,  куда  не  попадает  прямой  свет  от  источника.  А  значит,  что   эта  область  окрашена  в  естественный  цвет  предмета.  Она  может   казаться  даже  насыщеннее  той  области,  куда  падает  свет,  если   предмет  имеет  достаточно  яркий  "родной"  цвет.     Также  при  выборе  цвета  тени  следует  учитывать  тот  момент,  что   сам  объект  может  частично  отражать  свет  на  плоскость.   Например,  если  объект  ярко-­‐красный,  то  он  будет  отбрасывать   часть  красного  цвета  на  плоскость,  на  которой  стоит.      h9p://www.pirogov.ru  
  48. 48. Правило  второе  h9p://www.pirogov.ru  
  49. 49. Правило  второе   Основной  фон  -­‐  белый,  цвет  тени  -­‐  серый.  Зеленая  панель  тоже   отбрасывает  зеленый  свет  на  поверхность.  Поэтому  дублируем   серый  слой  тени,  перекрашиваем  его  в  тёмно-­‐зеленый  цвет,  и   стираем  те  области,  которые  не  находятся  в  непосредственной   близости  к  красной  поверхности.       В  результате  получится,  что  около  нашей  панели  тень  имеет  чуть   зеленоватый  оттенок,  нежели  вдали  от  неё.  h9p://www.pirogov.ru  
  50. 50. Правило  третье   Ближе  -­‐  темнее  и  чётче     По  умолчанию  мы  рассматриваем  не  точечный  источник  света,  а   распределённый.  Это  правило  следует  из  физических   особенностей  распространения  света  от  распределённого   источника.     Делается  подобная  тень  так:     Вначале  создается  обычный  теневой  слой.  Потом,  дальше  от   панели,  он  сильно  размывается  (можно  просто  инструментом   "blur").  И  в  конце  правый  и  левый  края  (дальние  от  предмета  -­‐   ближние  к  нам)  чуть  подтираются  ластиком,  для  того,  чтобы  не   было  таких  чётких  граней  тени.    h9p://www.pirogov.ru  
  51. 51. Правило  третье  h9p://www.pirogov.ru  
  52. 52. Тень  от  куба    h9p://www.pirogov.ru  
  53. 53. Тень  от  куба     Вначале  сделаем  тень  в  непосредственной  близости  к  кубу.   По  третьему  правилу  это  наиболее  тёмная  область.   Подправим  сам  куб,  чтобы  он  был  немного  темнее  к   основанию,  и  нарисуем  ближнюю  область  тени.  h9p://www.pirogov.ru  
  54. 54. Тень  от  куба     Получилась  неплохая  тень  для  куба,  стоящего  на   поверхности  и  освещаемого  дневным  светом.  Если  мы   захотим  сделать  тень  ещё  и  от  солнца  или  от  какого-­‐нибудь   фонаря,  то  используем  третье  правило.  А  также  следим,   чтобы  тень  была  не  чёрная  (так  как  объект  ярко-­‐зелёный)  и   не  слишком  тёмная.  h9p://www.pirogov.ru  
  55. 55. Тень  от  куба     Тень  может  быть  от  нескольких  источников  света.  h9p://www.pirogov.ru  
  56. 56. Машина  
  57. 57. Машина  
  58. 58. Машина  
  59. 59. Машина  
  60. 60. Машина  
  61. 61. Машина  
  62. 62. Машина  
  63. 63. Для  вдохновения:  hUp://www.behance.net/gallery/Citroen-­‐DS3-­‐Cab/5258951  
  64. 64. Я  провожаю  поезда  истошным  криком  идиота,  мне  нравится  моя   работа,  гори  гори  моя  звезда!  
  65. 65. Александр  Лисовский  product  manager  ZZWolf  UX,  UI,  графический  дизайнер    (063)  304-­‐54-­‐85  alexander.lisovsky@gmail.com  facebook.com/alexlisovsky  

×