SlideShare una empresa de Scribd logo
1 de 155
Descargar para leer sin conexión
ПРОЦЕС СТВОРЕННЯ САЙТУ
ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ
ПРОЦЕС СТВОРЕННЯ САЙТУ
ВІД КОНЦЕПЦІЇ ТА ПРОТОТИПУ ДО ГОТОВОГО РІШЕННЯ

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

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




         АДАПТИВНОГО САЙТУ
ЩО ТАКЕ
АДАПТИВНИЙ ДИЗАЙН?
Процес створення адаптивного сайту
Процес створення адаптивного сайту
Процес створення адаптивного сайту
Процес створення адаптивного сайту
МОБІЛЬНИЙ ВЕБ
МОБІЛЬНИЙ ВЕБ




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




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




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/gasioshyn
            eleks.com

Más contenido relacionado

Destacado

Multi device ap ps innovattia 121015
Multi device ap ps innovattia 121015Multi device ap ps innovattia 121015
Multi device ap ps innovattia 121015Perla Salcedo
 
Dispensa cartografia su modificazione coordinate
Dispensa cartografia su modificazione coordinateDispensa cartografia su modificazione coordinate
Dispensa cartografia su modificazione coordinateClaudio Lamparelli
 
Probabilidad y estadística (medidas de tendecia central)
Probabilidad y estadística (medidas de tendecia central)Probabilidad y estadística (medidas de tendecia central)
Probabilidad y estadística (medidas de tendecia central)Daniela Cardona
 
Quality assurance work throughand inspections(report2)
Quality assurance work throughand inspections(report2)Quality assurance work throughand inspections(report2)
Quality assurance work throughand inspections(report2)kimk2
 
CONCEPTOS AL DERECHO
CONCEPTOS AL DERECHOCONCEPTOS AL DERECHO
CONCEPTOS AL DERECHOFarley Macias
 
Struktur dan reaktivitas molekul
Struktur dan reaktivitas molekulStruktur dan reaktivitas molekul
Struktur dan reaktivitas molekulHarewood Jr.
 
Presentase enzim lipase
Presentase enzim lipasePresentase enzim lipase
Presentase enzim lipaseHarewood Jr.
 
Recruitment and selection process in call centre
Recruitment and selection process in call centreRecruitment and selection process in call centre
Recruitment and selection process in call centreRavinder kumar
 
見積勉強会(Fp編)
見積勉強会(Fp編)見積勉強会(Fp編)
見積勉強会(Fp編)minoru-ito
 
Teori orbital molekul
Teori orbital molekulTeori orbital molekul
Teori orbital molekulHarewood Jr.
 
Aspect oriented software development
Aspect oriented software developmentAspect oriented software development
Aspect oriented software developmentMaryam Malekzad
 

Destacado (17)

Larueda 120911223255-phpapp02
Larueda 120911223255-phpapp02Larueda 120911223255-phpapp02
Larueda 120911223255-phpapp02
 
Multi device ap ps innovattia 121015
Multi device ap ps innovattia 121015Multi device ap ps innovattia 121015
Multi device ap ps innovattia 121015
 
Dispensa cartografia su modificazione coordinate
Dispensa cartografia su modificazione coordinateDispensa cartografia su modificazione coordinate
Dispensa cartografia su modificazione coordinate
 
Rotación del personal
Rotación del personalRotación del personal
Rotación del personal
 
Probabilidad y estadística (medidas de tendecia central)
Probabilidad y estadística (medidas de tendecia central)Probabilidad y estadística (medidas de tendecia central)
Probabilidad y estadística (medidas de tendecia central)
 
Quality assurance work throughand inspections(report2)
Quality assurance work throughand inspections(report2)Quality assurance work throughand inspections(report2)
Quality assurance work throughand inspections(report2)
 
CONCEPTOS AL DERECHO
CONCEPTOS AL DERECHOCONCEPTOS AL DERECHO
CONCEPTOS AL DERECHO
 
Findings
FindingsFindings
Findings
 
Analyze
AnalyzeAnalyze
Analyze
 
Struktur dan reaktivitas molekul
Struktur dan reaktivitas molekulStruktur dan reaktivitas molekul
Struktur dan reaktivitas molekul
 
Sistem informasi manufaktur
Sistem informasi manufakturSistem informasi manufaktur
Sistem informasi manufaktur
 
Staphylococcus aureus
Staphylococcus aureusStaphylococcus aureus
Staphylococcus aureus
 
Presentase enzim lipase
Presentase enzim lipasePresentase enzim lipase
Presentase enzim lipase
 
Recruitment and selection process in call centre
Recruitment and selection process in call centreRecruitment and selection process in call centre
Recruitment and selection process in call centre
 
見積勉強会(Fp編)
見積勉強会(Fp編)見積勉強会(Fp編)
見積勉強会(Fp編)
 
Teori orbital molekul
Teori orbital molekulTeori orbital molekul
Teori orbital molekul
 
Aspect oriented software development
Aspect oriented software developmentAspect oriented software development
Aspect oriented software development
 

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