Процес створення адаптивного сайту
DESCRIPTION
Процес творення адаптивного сайту. Від концепці та прототипу до готового рішеня на прикладі реального кейсу.TRANSCRIPT
ПРОЦЕС СТВОРЕННЯ САЙТУ ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ
ПРОЦЕС СТВОРЕННЯ САЙТУ ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ
ПРОЕКТУВАННЯ, ДИЗАЙН, ГРАФІКА, ВЕРСТКА, ПРОГРАМУВАННЯ, ТЕСТУВАННЯ, НАПОВНЕННЯ КОНТЕНТОМ, ЗАПУСК
ПРОЦЕС СТВОРЕННЯ САЙТУ ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ
ПРОЕКТУВАННЯ, ДИЗАЙН, ГРАФІКА, ВЕРСТКА, ПРОГРАМУВАННЯ, ТЕСТУВАННЯ, НАПОВНЕННЯ КОНТЕНТОМ, ЗАПУСК
АДАПТИВНОГО САЙТУ
ЩО ТАКЕ АДАПТИВНИЙ ДИЗАЙН?
МОБІЛЬНИЙ ВЕБ
МОБІЛЬНИЙ ВЕБ
ЯК ДАТИ ЗРУЧНИЙ ДОСТУП ДО КОНТЕНТУ НА РІЗНИХ ДЕВАЙСАХ?
МОБІЛЬНИЙ ВЕБ
ЯК ДАТИ ЗРУЧНИЙ ДОСТУП ДО КОНТЕНТУ НА РІЗНИХ ДЕВАЙСАХ?
АДАПТИВНИЙ ДИЗАЙН
АДАПТИВНИЙ ДИЗАЙН
1 Front-end
АДАПТИВНИЙ ДИЗАЙН
1 Front-end 1 Back-end
АДАПТИВНИЙ ДИЗАЙН
1 Front-end Зручний доступ до
контенту з будь-якого девайсу
1 Back-end
ELEKS 4.0
АНАЛІЗ
ВИЗНАЧАЄМО
ВИЗНАЧАЄМО Проблеми
ВИЗНАЧАЄМО Проблеми
Задачі та цілі
ВИЗНАЧАЄМО Проблеми
Задачі та цілі
Потреби користувачів
ELEKS OLD SITE Проблеми:
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
Задачі та цілі:
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
Задачі та цілі: Підвищення коверсії сайту
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
Задачі та цілі: Підвищення коверсії сайту Подати себе як новітнього та прогресивного розробника Показати нові послуги та продукти і т.д
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
Задачі та цілі: Підвищення коверсії сайту Подати себе як новітнього та прогресивного розробника Показати нові послуги та продукти і т.д
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
Задачі та цілі: Підвищення коверсії сайту Подати себе як новітнього та прогресивного розробника Показати нові послуги та продукти і т.д
Потреби користувачів:
ELEKS OLD SITE Проблеми: Складна навігація Не виразний серед конкурентів сайтів Не відповідав новому корпоративному стилю
Задачі та цілі: Підвищення коверсії сайту Подати себе як новітнього та прогресивного розробника Показати нові послуги та продукти і т.д
Потреби користувачів: Дізнатися про рішення котрі пропонує компанія Дізнатися більше про копмпанію Дізнатися про досвід роботи в певних індустріях Переглянути відгуки інших компаній Переглянути виконані роботи (Case-study)
ПОЧИНАЄМО РОБОТУ
ІНФОРМАЦІЙНА АРХІТЕКТУРА
СТРУКТУРА САЙТУ
СТРУКТУРА САЙТУ Спадаючий підхід
СТРУКТУРА САЙТУ Спадаючий підхід
СТРУКТУРА САЙТУ Спадаючий підхід
Зростаючий підхід
СТРУКТУРА САЙТУ Спадаючий підхід
Зростаючий підхід
МІКСУЄМ
ПРОТОТИПУЄМО
ІДЕЯ КОНЦЕПЦІЯ ПРОТОТИП
ІДЕЯ КОНЦЕПЦІЯ ПРОТОТИП
Кожен напрямок – окремий підсайт
ІДЕЯ КОНЦЕПЦІЯ ПРОТОТИП
Кожен напрямок – окремий підсайт
Сайт-конструктор, як Лего
ІДЕЯ КОНЦЕПЦІЯ ПРОТОТИП
Кожен напрямок – окремий підсайт
Сайт-конструктор, як Лего
ШВИДКЕ ПРОТОТИПУВАННЯ
ШВИДКЕ ПРОТОТИПУВАННЯ NO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
ШВИДКЕ ПРОТОТИПУВАННЯ NO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
ШВИДКЕ ПРОТОТИПУВАННЯ NO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
Папір і ручка
ШВИДКЕ ПРОТОТИПУВАННЯ NO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
Вайтборд Папір і ручка
ШВИДКЕ ПРОТОТИПУВАННЯ NO DIGITAL! ONLY ANALOG! ONLY HARDCORE!
Вайтборд Папір і ручка
Стікери
ДЕТАЛІЗУЄМО
ПАПЕРОВИЙ ПРОТОТИП
ПАПЕРОВИЙ ПРОТОТИП
ЦИФРОВИЙ ПРОТОТИП
Юзер тестінг
ПАПЕРОВИЙ ПРОТОТИП
ЦИФРОВИЙ ПРОТОТИП
ІНТЕРАКТИВНИЙ ПРОТОТИП
Юзер тестінг
Юзер тестінг
ПАПЕРОВИЙ ПРОТОТИП
ЦИФРОВИЙ ПРОТОТИП
ІНТЕРАКТИВНИЙ ПРОТОТИП
ВІЗУАЛЬНИЙ ДИЗАЙН
Юзер тестінг
Юзер тестінг
Юзер тестінг
ПАПЕРОВИЙ ПРОТОТИП
ЦИФРОВИЙ ПРОТОТИП
ІНТЕРАКТИВНИЙ ПРОТОТИП
ВІЗУАЛЬНИЙ ДИЗАЙН
Юзер тестінг
ПАПЕРОВИЙ ПРОТОТИП
ЦИФРОВИЙ ПРОТОТИП
ІНТЕРАКТИВНИЙ ПРОТОТИП
ВІЗУАЛЬНИЙ ДИЗАЙН
ЦИФРОВИЙ ПРОТОТИП
ІНТЕРАКТИВНИЙ ПРОТОТИП
ВІЗУАЛЬНИЙ ДИЗАЙН
ЦИФРОВИЙ ПРОТОТИП
ВІЗУАЛЬНИЙ ДИЗАЙН
ПОЧИНАЄМО РОБОТУ
ПОЧИНАЄМО РОБОТУ
ЗНОВУ...
ПЕРЕРОБЛЯТИ САЙТ ЗА 1,5
РОКИ?
РОБИМО АДАПТИВНИЙ
ВСЕ ПО НОВІЙ
ЗАДАЧІ ТА ПОТРЕБИ
ЗАДАЧІ ТА ПОТРЕБИ
Враження + Контент
WOW
ЗАДАЧІ ТА ПОТРЕБИ
Враження + Контент Контент
WOW
ПРОТОТИПУЄМО
ПРОТОТИПУЄМО ЗНОВУ...
ПРОТОТИПУЄМО ЗНОВУ...
ТЕПЕР ВТРИЧІ БІЛЬШЕ!
ПІДХОДИ ДО РОЗРОБКИ
ПІДХОДИ ДО РОЗРОБКИ
MOBILE FIRST
ПІДХОДИ ДО РОЗРОБКИ
MOBILE FIRST DESKTOP FIRST
ПАРАЛЕЛЬНЕ ПРОЕКТУВАНННЯ
ПАРАЛЕЛЬНЕ ПРОЕКТУВАНННЯ ВКЛЮЧАЄМ 3D MИСЛЕННЯ
ПАРАЛЕЛЬНЕ ПРОЕКТУВАНННЯ ВКЛЮЧАЄМ 3D MИСЛЕННЯ
DESKTOP TABLET MOBILE
ПРОДУМУЄМО...
ПРОДУМУЄМО Адаптацію
ПРОДУМУЄМО Адаптацію
Трансформацію тексту
ПРОДУМУЄМО Адаптацію
Трансформацію тексту
Трансформацію картинок
ПРОДУМУЄМО Адаптацію
Трансформацію тексту
Трансформацію картинок
Degradation (спрощення)
ВИЗНАЧАЄМО БРЕЙКПОІНТИ
ВИЗНАЧАЄМО БРЕЙКПОІНТИ
ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px
480px
600px
950px
ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px
480px
600px
950px
ВИЗНАЧАЄМО БРЕЙКПОІНТИ 320px
480px
600px
950px
ВИЗНАЧАЄМО БРЕЙКПОІНТИ
320px
480px
600px
950px
ВИЗНАЧАЄМО БРЕЙКПОІНТИ
320px
480px
600px
950px
ВІЗУАЛЬНИЙ ДИЗАЙН
ПЕРЕД ФОТОШОПОМ
ПЕРЕД ФОТОШОПОМ Дивимося на наші задачі та цілі
ПЕРЕД ФОТОШОПОМ Дивимося на наші задачі та цілі
Уявляємо собі ЦА
ПЕРЕД ФОТОШОПОМ Дивимося на наші задачі та цілі
Уявляємо собі ЦА
Дивимося що зробили інші
ПЕРЕД ФОТОШОПОМ Дивимося на наші задачі та цілі
Уявляємо собі ЦА
Дивимося що зробили інші
Визначаємо кольорову гамму
ПЕРЕД ФОТОШОПОМ Дивимося на наші задачі та цілі
Уявляємо собі ЦА
Дивимося що зробили інші
Визначаємо кольорову гамму
ВКЛЮЧАЄМ ФОТОШОП
РОЗМІЧІЄМО СІТКУ
РОЗМІЧІЄМО СІТКУ Робимо сітку під контент
РОЗМІЧІЄМО СІТКУ Робимо сітку під контент
А НЕ КОНТЕНТ ПІДГАНЯЄМО ПІД СІТКУ!
РОЗМІЧІЄМО СІТКУ Робимо сітку під контент
А НЕ КОНТЕНТ ПІДГАНЯЄМО ПІД СІТКУ!
РОЗМІЧІЄМО СІТКУ Робимо сітку під контент
А НЕ КОНТЕНТ ПІДГАНЯЄМО ПІД СІТКУ!
Modualrgrid.org
А ЯК З АДАПТИВНИМ?
ТУТ Є РІЗНІ ВАРІАНТИ
ТУТ Є РІЗНІ ВАРІАНТИ АЛЕ ВСЕ ЗАЛЕЖИТЬ ВІД КОНТЕНТУ
950 – 24 col 620 – 16 col 460 – 12 col 310 – 8 col
РОЗМАЛЬОВУЄМ
НАКИДУЄМО ЕЛЕМЕНТИ
НАКИДУЄМО ЕЛЕМЕНТИ
НАДАЄМО ЕЛЕМЕНТАМ ВАГИ
НАКИДУЄМО ЕЛЕМЕНТИ
НАДАЄМО ЕЛЕМЕНТАМ ВАГИ
ПРАЦЮЄМ НАД ТИПОГРАФІКОЮ
НАКИДУЄМО ЕЛЕМЕНТИ
НАДАЄМО ЕЛЕМЕНТАМ ВАГИ
ПРАЦЮЄМ НАД ТИПОГРАФІКОЮ
ПРАЦЮЄМ НАД ГРАФІКОЮ
НАКИДУЄМО ЕЛЕМЕНТИ
НАДАЄМО ЕЛЕМЕНТАМ ВАГИ
ПРАЦЮЄМ НАД ТИПОГРАФІКОЮ
ПРАЦЮЄМ НАД ГРАФІКОЮ
ПОЕЛЕМЕНТНИЙ ПІДХІД
СТВОРЮЄМО БІБЛІОТЕКУ ЕЛЕМЕНТІВ
ЦЬОГО ТЕПЕР ВЖЕ ЗАМАЛО
ФУНКЦІОНАЛЬНИМ
ФУНКЦІОНАЛЬНИМ
НАДІЙНИМ
ФУНКЦІОНАЛЬНИМ
НАДІЙНИМ
ЗРУЧНИМ
ФУНКЦІОНАЛЬНИМ
НАДІЙНИМ
ЗРУЧНИМ
ПРИНОСИТИ ЗАДОВОЛЕННЯ
РОБИМО САЙТ ЖИВИМ
РОБИМО САЙТ ЖИВИМ Фідбек на кожну дію
РОБИМО САЙТ ЖИВИМ Фідбек на кожну дію
Для всіх елементів Hover/Active
РОБИМО САЙТ ЖИВИМ Фідбек на кожну дію
Для всіх елементів Hover/Active
Анімація елементів
РОБИМО САЙТ ЖИВИМ Фідбек на кожну дію
Для всіх елементів Hover/Active
Анімація елементів
Анімація контенту при необхідності
РОБИМО САЙТ ЖИВИМ Фідбек на кожну дію
Для всіх елементів Hover/Active
Анімація елементів
Анімація контенту при необхідності
HTML5+CSS3
РОБИМО САЙТ ЖИВИМ Фідбек на кожну дію
Для всіх елементів Hover/Active
Анімація елементів
Анімація контенту при необхідності
HTML5+CSS3
ГОЛОВНЕ НЕ ПЕРЕБОРЩИТИ
РОЗРОБКА
FRONT-END
BACK-END
FRONT-END Починаємо після прототипів
Будуємо HTML прототипи
Працюємо слоями
BACK-END
FRONT-END Починаємо після прототипів
Будуємо HTML прототипи
Працюємо слоями
BACK-END Починаємо ранню розробку після прототипів
Програмуємо після фінального дизайну
Програмуєм паралельно з front-end розробкою
ТЕСТУЄМ
ПРОВОДИМО
ПРОВОДИМО User testing
ПРОВОДИМО User testing
Browser-testing
ПРОВОДИМО User testing
Browser-testing
Back-end Security testing
НАПОВНЮЄМО
ПОТРІБНО Fuck Lorem Ipsum! Пишемо рибний текст самі Продумуємо адаптацію тексту та картинок ще на стадіїї прототипів
ВЗЛІТАЄМО І ТРИМАЄМО ВИСОТУ
КІНЕЦЬ?
БЕТА-ТЕСТ
elekscookies.cloudapp.net
Гасьошин Олег
UI/UX Designer в компанії «ELEKS»
facebook.com/gasioshyneleks.com