Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Процес створення адаптивного сайту

5 743 vues

Publié le

Процес творення адаптивного сайту. Від концепці та прототипу до готового рішеня на прикладі реального кейсу.

Publié dans : Design
  • Soyez le premier à commenter

Процес створення адаптивного сайту

  1. 1. ПРОЦЕС СТВОРЕННЯ САЙТУВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ
  2. 2. ПРОЦЕС СТВОРЕННЯ САЙТУВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯПРОЕКТУВАННЯ, ДИЗАЙН, ГРАФІКА, ВЕРСТКА, ПРОГРАМУВАННЯ, ТЕСТУВАННЯ, НАПОВНЕННЯ КОНТЕНТОМ, ЗАПУСК
  3. 3. ПРОЦЕС СТВОРЕННЯ САЙТУВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯПРОЕКТУВАННЯ, ДИЗАЙН, ГРАФІКА, ВЕРСТКА, ПРОГРАМУВАННЯ, ТЕСТУВАННЯ, НАПОВНЕННЯ КОНТЕНТОМ, ЗАПУСК АДАПТИВНОГО САЙТУ
  4. 4. ЩО ТАКЕАДАПТИВНИЙ ДИЗАЙН?
  5. 5. МОБІЛЬНИЙ ВЕБ
  6. 6. МОБІЛЬНИЙ ВЕБЯК ДАТИ ЗРУЧНИЙ ДОСТУП ДО КОНТЕНТУ НА РІЗНИХ ДЕВАЙСАХ?
  7. 7. МОБІЛЬНИЙ ВЕБЯК ДАТИ ЗРУЧНИЙ ДОСТУП ДО КОНТЕНТУ НА РІЗНИХ ДЕВАЙСАХ?
  8. 8. АДАПТИВНИЙ ДИЗАЙН
  9. 9. АДАПТИВНИЙ ДИЗАЙН1 Front-end
  10. 10. АДАПТИВНИЙ ДИЗАЙН1 Front-end 1 Back-end
  11. 11. АДАПТИВНИЙ ДИЗАЙН Зручний доступ до1 Front-end 1 Back-end контенту з будь-якого девайсу
  12. 12. ELEKS 4.0
  13. 13. АНАЛІЗ
  14. 14. ВИЗНАЧАЄМО
  15. 15. ВИЗНАЧАЄМОПроблеми
  16. 16. ВИЗНАЧАЄМОПроблемиЗадачі та цілі
  17. 17. ВИЗНАЧАЄМОПроблемиЗадачі та ціліПотреби користувачів
  18. 18. ELEKS OLD SITEПроблеми:
  19. 19. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилю
  20. 20. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилюЗадачі та цілі:
  21. 21. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилюЗадачі та цілі:Підвищення коверсії сайту
  22. 22. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилюЗадачі та цілі:Підвищення коверсії сайтуПодати себе як новітнього та прогресивного розробникаПоказати нові послуги та продукти і т.д
  23. 23. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилюЗадачі та цілі:Підвищення коверсії сайтуПодати себе як новітнього та прогресивного розробникаПоказати нові послуги та продукти і т.д
  24. 24. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилюЗадачі та цілі:Підвищення коверсії сайтуПодати себе як новітнього та прогресивного розробникаПоказати нові послуги та продукти і т.дПотреби користувачів:
  25. 25. ELEKS OLD SITEПроблеми:Складна навігаціяНе виразний серед конкурентів сайтівНе відповідав новому корпоративному стилюЗадачі та цілі:Підвищення коверсії сайтуПодати себе як новітнього та прогресивного розробникаПоказати нові послуги та продукти і т.дПотреби користувачів:Дізнатися про рішення котрі пропонує компаніяДізнатися більше про копмпаніюДізнатися про досвід роботи в певних індустріяхПереглянути відгуки інших компанійПереглянути виконані роботи (Case-study)
  26. 26. ПОЧИНАЄМО РОБОТУ
  27. 27. ІНФОРМАЦІЙНА АРХІТЕКТУРА
  28. 28. СТРУКТУРА САЙТУ
  29. 29. СТРУКТУРА САЙТУ Спадаючий підхід
  30. 30. СТРУКТУРА САЙТУ Спадаючий підхід
  31. 31. СТРУКТУРА САЙТУ Спадаючий підхід Зростаючий підхід
  32. 32. СТРУКТУРА САЙТУ Спадаючий підхід Зростаючий підхід
  33. 33. МІКСУЄМ
  34. 34. ПРОТОТИПУЄМО
  35. 35. ІДЕЯКОНЦЕПЦІЯПРОТОТИП
  36. 36. ІДЕЯКожен напрямок – окремий підсайтКОНЦЕПЦІЯПРОТОТИП
  37. 37. ІДЕЯКожен напрямок – окремий підсайтКОНЦЕПЦІЯСайт-конструктор, як ЛегоПРОТОТИП
  38. 38. ІДЕЯКожен напрямок – окремий підсайтКОНЦЕПЦІЯСайт-конструктор, як ЛегоПРОТОТИП
  39. 39. ШВИДКЕ ПРОТОТИПУВАННЯ
  40. 40. ШВИДКЕ ПРОТОТИПУВАННЯNO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
  41. 41. ШВИДКЕ ПРОТОТИПУВАННЯNO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
  42. 42. ШВИДКЕ ПРОТОТИПУВАННЯNO DIGITAL! ONLY ANALOG! ONLY HARDCORE! Папір і ручка
  43. 43. ШВИДКЕ ПРОТОТИПУВАННЯNO DIGITAL! ONLY ANALOG! ONLY HARDCORE! Папір і ручка Вайтборд
  44. 44. ШВИДКЕ ПРОТОТИПУВАННЯNO DIGITAL! ONLY ANALOG! ONLY HARDCORE! Папір і ручка Вайтборд Стікери
  45. 45. ДЕТАЛІЗУЄМО
  46. 46. ПАПЕРОВИЙ ПРОТОТИП
  47. 47. ПАПЕРОВИЙ ПРОТОТИП Юзер тестінгЦИФРОВИЙ ПРОТОТИП
  48. 48. ПАПЕРОВИЙ ПРОТОТИП Юзер тестінг ЦИФРОВИЙ ПРОТОТИП Юзер тестінгІНТЕРАКТИВНИЙ ПРОТОТИП
  49. 49. ПАПЕРОВИЙ ПРОТОТИП Юзер тестінг ЦИФРОВИЙ ПРОТОТИП Юзер тестінгІНТЕРАКТИВНИЙ ПРОТОТИП Юзер тестінг ВІЗУАЛЬНИЙ ДИЗАЙН
  50. 50. ПАПЕРОВИЙ ПРОТОТИП ЦИФРОВИЙ ПРОТОТИПІНТЕРАКТИВНИЙ ПРОТОТИП Юзер тестінг ВІЗУАЛЬНИЙ ДИЗАЙН
  51. 51. ПАПЕРОВИЙ ПРОТОТИП ЦИФРОВИЙ ПРОТОТИПІНТЕРАКТИВНИЙ ПРОТОТИП ВІЗУАЛЬНИЙ ДИЗАЙН
  52. 52. ЦИФРОВИЙ ПРОТОТИПІНТЕРАКТИВНИЙ ПРОТОТИП ВІЗУАЛЬНИЙ ДИЗАЙН
  53. 53. ЦИФРОВИЙ ПРОТОТИПВІЗУАЛЬНИЙ ДИЗАЙН
  54. 54. ПОЧИНАЄМО РОБОТУ
  55. 55. ПОЧИНАЄМО РОБОТУ ЗНОВУ...
  56. 56. ПЕРЕРОБЛЯТИ САЙТ ЗА 1,5 РОКИ?
  57. 57. РОБИМОАДАПТИВНИЙ
  58. 58. ВСЕ ПО НОВІЙ
  59. 59. ЗАДАЧІ ТА ПОТРЕБИ
  60. 60. ЗАДАЧІ ТА ПОТРЕБИ WOWВраження + Контент
  61. 61. ЗАДАЧІ ТА ПОТРЕБИ WOWВраження + Контент Контент
  62. 62. ПРОТОТИПУЄМО
  63. 63. ПРОТОТИПУЄМО ЗНОВУ...
  64. 64. ПРОТОТИПУЄМО ЗНОВУ...ТЕПЕР ВТРИЧІ БІЛЬШЕ!
  65. 65. ПІДХОДИ ДО РОЗРОБКИ
  66. 66. ПІДХОДИ ДО РОЗРОБКИMOBILE FIRST
  67. 67. ПІДХОДИ ДО РОЗРОБКИMOBILE FIRST DESKTOP FIRST
  68. 68. ПАРАЛЕЛЬНЕ ПРОЕКТУВАНННЯ
  69. 69. ПАРАЛЕЛЬНЕ ПРОЕКТУВАНННЯ ВКЛЮЧАЄМ 3D MИСЛЕННЯ
  70. 70. ПАРАЛЕЛЬНЕ ПРОЕКТУВАНННЯ ВКЛЮЧАЄМ 3D MИСЛЕННЯ DESKTOP TABLET MOBILE
  71. 71. ПРОДУМУЄМО...
  72. 72. ПРОДУМУЄМОАдаптацію
  73. 73. ПРОДУМУЄМОАдаптаціюТрансформацію тексту
  74. 74. ПРОДУМУЄМОАдаптаціюТрансформацію текстуТрансформацію картинок
  75. 75. ПРОДУМУЄМОАдаптаціюТрансформацію текстуТрансформацію картинокDegradation (спрощення)
  76. 76. ВИЗНАЧАЄМО БРЕЙКПОІНТИ
  77. 77. ВИЗНАЧАЄМО БРЕЙКПОІНТИ
  78. 78. ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px 480px 600px 950px
  79. 79. ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px 480px 600px 950px
  80. 80. ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px 480px 600px 950px
  81. 81. ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px 480px 600px 950px
  82. 82. ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px 480px 600px 950px
  83. 83. ВІЗУАЛЬНИЙ ДИЗАЙН
  84. 84. ПЕРЕД ФОТОШОПОМ
  85. 85. ПЕРЕД ФОТОШОПОМДивимося на наші задачі та цілі
  86. 86. ПЕРЕД ФОТОШОПОМДивимося на наші задачі та ціліУявляємо собі ЦА
  87. 87. ПЕРЕД ФОТОШОПОМДивимося на наші задачі та ціліУявляємо собі ЦАДивимося що зробили інші
  88. 88. ПЕРЕД ФОТОШОПОМДивимося на наші задачі та ціліУявляємо собі ЦАДивимося що зробили іншіВизначаємо кольорову гамму
  89. 89. ПЕРЕД ФОТОШОПОМДивимося на наші задачі та ціліУявляємо собі ЦАДивимося що зробили іншіВизначаємо кольорову гаммуВКЛЮЧАЄМ ФОТОШОП
  90. 90. РОЗМІЧІЄМО СІТКУ
  91. 91. РОЗМІЧІЄМО СІТКУРобимо сітку під контент
  92. 92. РОЗМІЧІЄМО СІТКУРобимо сітку під контентА НЕ КОНТЕНТ ПІДГАНЯЄМО ПІД СІТКУ!
  93. 93. РОЗМІЧІЄМО СІТКУРобимо сітку під контентА НЕ КОНТЕНТ ПІДГАНЯЄМО ПІД СІТКУ!
  94. 94. РОЗМІЧІЄМО СІТКУРобимо сітку під контентА НЕ КОНТЕНТ ПІДГАНЯЄМО ПІД СІТКУ! Modualrgrid.org
  95. 95. А ЯК ЗАДАПТИВНИМ?
  96. 96. ТУТ Є РІЗНІ ВАРІАНТИ
  97. 97. ТУТ Є РІЗНІ ВАРІАНТИАЛЕ ВСЕ ЗАЛЕЖИТЬ ВІД КОНТЕНТУ
  98. 98. 950 – 24 col 620 – 16 col 460 – 12 col 310 – 8 col
  99. 99. РОЗМАЛЬОВУЄМ
  100. 100. НАКИДУЄМО ЕЛЕМЕНТИ
  101. 101. НАКИДУЄМО ЕЛЕМЕНТИНАДАЄМО ЕЛЕМЕНТАМ ВАГИ
  102. 102. НАКИДУЄМО ЕЛЕМЕНТИНАДАЄМО ЕЛЕМЕНТАМ ВАГИПРАЦЮЄМ НАД ТИПОГРАФІКОЮ
  103. 103. НАКИДУЄМО ЕЛЕМЕНТИНАДАЄМО ЕЛЕМЕНТАМ ВАГИПРАЦЮЄМ НАД ТИПОГРАФІКОЮ ПРАЦЮЄМ НАД ГРАФІКОЮ
  104. 104. НАКИДУЄМО ЕЛЕМЕНТИНАДАЄМО ЕЛЕМЕНТАМ ВАГИПРАЦЮЄМ НАД ТИПОГРАФІКОЮ ПРАЦЮЄМ НАД ГРАФІКОЮ
  105. 105. ПОЕЛЕМЕНТНИЙ ПІДХІД
  106. 106. СТВОРЮЄМО БІБЛІОТЕКУ ЕЛЕМЕНТІВ
  107. 107. ЦЬОГО ТЕПЕРВЖЕ ЗАМАЛО
  108. 108. ФУНКЦІОНАЛЬНИМ
  109. 109. НАДІЙНИМФУНКЦІОНАЛЬНИМ
  110. 110. ЗРУЧНИМ НАДІЙНИМФУНКЦІОНАЛЬНИМ
  111. 111. ПРИНОСИТИ ЗАДОВОЛЕННЯ ЗРУЧНИМ НАДІЙНИМФУНКЦІОНАЛЬНИМ
  112. 112. РОБИМО САЙТ ЖИВИМ
  113. 113. РОБИМО САЙТ ЖИВИМФідбек на кожну дію
  114. 114. РОБИМО САЙТ ЖИВИМФідбек на кожну діюДля всіх елементів Hover/Active
  115. 115. РОБИМО САЙТ ЖИВИМФідбек на кожну діюДля всіх елементів Hover/ActiveАнімація елементів
  116. 116. РОБИМО САЙТ ЖИВИМФідбек на кожну діюДля всіх елементів Hover/ActiveАнімація елементівАнімація контенту при необхідності
  117. 117. РОБИМО САЙТ ЖИВИМФідбек на кожну діюДля всіх елементів Hover/ActiveАнімація елементівАнімація контенту при необхідностіHTML5+CSS3
  118. 118. РОБИМО САЙТ ЖИВИМФідбек на кожну діюДля всіх елементів Hover/ActiveАнімація елементівАнімація контенту при необхідностіHTML5+CSS3ГОЛОВНЕ НЕ ПЕРЕБОРЩИТИ
  119. 119. РОЗРОБКА
  120. 120. FRONT-ENDBACK-END
  121. 121. FRONT-ENDПочинаємо після прототипівБудуємо HTML прототипиПрацюємо слоямиBACK-END
  122. 122. FRONT-ENDПочинаємо після прототипівБудуємо HTML прототипиПрацюємо слоямиBACK-ENDПочинаємо ранню розробку після прототипівПрограмуємо після фінального дизайнуПрограмуєм паралельно з front-end розробкою
  123. 123. ТЕСТУЄМ
  124. 124. ПРОВОДИМО
  125. 125. ПРОВОДИМОUser testing
  126. 126. ПРОВОДИМОUser testingBrowser-testing
  127. 127. ПРОВОДИМОUser testingBrowser-testingBack-end Security testing
  128. 128. НАПОВНЮЄМО
  129. 129. ПОТРІБНОFuck Lorem Ipsum! Пишемо рибний текст саміПродумуємо адаптацію тексту та картинок ще на стадіїїпрототипів
  130. 130. ВЗЛІТАЄМО ІТРИМАЄМО ВИСОТУ
  131. 131. КІНЕЦЬ?
  132. 132. БЕТА-ТЕСТ
  133. 133. elekscookies.cloudapp.net
  134. 134. Гасьошин ОлегUI/UX Designer в компанії «ELEKS» facebook.com/gasioshyn eleks.com

×