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

ПРОЦЕС СТВОРЕННЯ САЙТУ ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ

ПРОЦЕС СТВОРЕННЯ САЙТУ ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ

ПРОЕКТУВАННЯ, ДИЗАЙН, ГРАФІКА, ВЕРСТКА, ПРОГРАМУВАННЯ, ТЕСТУВАННЯ, НАПОВНЕННЯ КОНТЕНТОМ, ЗАПУСК

ПРОЦЕС СТВОРЕННЯ САЙТУ ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ

ПРОЕКТУВАННЯ, ДИЗАЙН, ГРАФІКА, ВЕРСТКА, ПРОГРАМУВАННЯ, ТЕСТУВАННЯ, НАПОВНЕННЯ КОНТЕНТОМ, ЗАПУСК

АДАПТИВНОГО САЙТУ

ЩО ТАКЕ АДАПТИВНИЙ ДИЗАЙН?

МОБІЛЬНИЙ ВЕБ

МОБІЛЬНИЙ ВЕБ

ЯК ДАТИ ЗРУЧНИЙ ДОСТУП ДО КОНТЕНТУ НА РІЗНИХ ДЕВАЙСАХ?

МОБІЛЬНИЙ ВЕБ

ЯК ДАТИ ЗРУЧНИЙ ДОСТУП ДО КОНТЕНТУ НА РІЗНИХ ДЕВАЙСАХ?

АДАПТИВНИЙ ДИЗАЙН

АДАПТИВНИЙ ДИЗАЙН

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