Внутрішня кухня розробки студії Vintage. http://vintage.com.ua/

1. Розробка веб-сайту
ОсновнI етапи
Олексiй Артеменко
arrt@vintage.com.ua
380 96 486 62 27

2. Прототипування

3. • Від затягування строків по розробці дизайну
• Від пропущених елементів інтерфейсу
для чого потрiбен прототип
• Проектування користувацьких сценаріїв
• Написання деталізованого технічного завдання
Від чого вберігає прототип

4. Типи прототипiв (деталiзацiя)
• Низькодеталізований (скетч, мокап)
• Високодеталізований

5. Вайфрейми

6. Iнструментарiй
16 інструментів по розробці прототипів
https://habrahabr.ru/company/aiken/blog/129653/

7. Процес розробки
1. Формування маркетингових смислів
2. Структура
3. Детальне пропрацювання персонажів
4. Розробка прототипу
5. Тестування
6. Завтердження прототипу

8. Результат прототипування
1. Інтерактивни прототип
приклад: http://6q7s97.axshare.com/
2. Потрібно перевірити:
- наявність всіх сторінок (відповідно до структури)
- наявність адаптивних версій
- активні стани функціональних блоків
- поп-пи та форми

9. Розробка дизайну

10. Вхiдна iнформацiя (постановка задачi)
1. Готовий затверджений прототип
2. Неадаптивний, адаптивний (для яких девайсів) чи мобільна версія
3. Логотип, фірмовий стиль, брендбук
4. Опис цільової аудиторії в контексті її поведінки і життєвого стилю
5. Задача дизайну, настрій, рішення
6. Чи потрібно створювати візуальний контент (фото, відео)
7. Наявний контент
8. Референси, приклади

11. розробка концепту
1. “Ідеальне рішення” і його варіації
2. “Меню ресторана, вибирайте що вам хочеться”

12. Тренди в дизайнi
• “Бургери” в меню
• SVG анімація і будь-яка інша анімація
• Sprite
• Адаптивність для мобільних пристроїв
• Фонові зображення та відео
• Canvas, Відео -історії, камера 360, інтерактив через 3D і вірутальну реальність, адаптивність
на сервері
http://mmr.ua/show/anti_pink_glasses_trendy_veb-dizayna_v_ukraine_i_mire

13. Результати етапу (контроль якостi)
1. Макети в .psd форматі (важлива структура - всі шари розділені і в папках)
- всі версії якщо адаптивний сайт
- помилка 404
- “ховери”
- поп-апи та форми
2. Матеріали для верстальників:
- шрифти
- фавікон
- svg іконки
3. Опис анімації

14. Написання технiчного
завдання

15. Вхiдна iнформацiя (постановка задачi)
1. Результати попередніх етапів:
- прототип
- макети дизайну
2. Набір функціоналу (обговорений із замовником)
3. Обмеження та особливості у використанні
4. Побажання та рекомендації від SEO-спеціалістів
5. Інформація про сторонні сервіси, які потрібно підключати
6. Доступи до серверу де буде розміщено веб-сайт

16. складовi частини
1. Back-end - адмінпанель сайту
2. Front-end - функціонал інтерфейсу сайту

17. Контроль якостi (вiдповiдальнiсть)
1. Задача виконавця зробити веб-сайт у відповідності до затвердженого Технічного
Завдання.
2. Все, що не описано в ТЗ - не є обов`язковим до виконання.

18. верстка сторiнок

19. Вхiдна iнформацiя (постановка задачi)
1. Пакет матеріалів від Дизайн-відділу
2. Обмеження та особливості майбутнього використання сайту:
- вимоги по кросбраузерності
- особливості пристроїв
- швидкість завантаження
- вимоги від SEO-спеціалістів
- майбутній движок веб-сайту

20. Технологii
• Canvas
• Mobile first
• SVG icons
• Sprites

21. як приймати верстку
1. Відповідність до дизайн-макетів:
- “pixel-perfect”
- типографіка (розмір шрифту, інтервали, міжбуквені відступи)
- колір
- “ховери”
2. Функціональність
- поп-апи
- помилки у формах
- грамотність розмітки (SEO, движки)
3. Адаптивність
4. Кросбраузерність
5. Гнучкість - більше-менше тексту, наявність фото, наявність блоків, взаємозамінність
блоків
6. Швидкість завантаження

22. Програмування

23. Побудова процесу роботи
1. Перевірка наданого ТЗ на повніту та вичерпність
2. Вибір таск-трекера (Jira, Redmine і тд)
3. Вибір методології
- Waterfall
- Agile
4. Постановка тікетів (задач) в таск-трекер
5. Оцінка задач
6. Старт робіт і перевірка проміжних етапів

24. перевiрка (тестування)
1. Тестування основних юзер-кейсів (реєстрація, покупка, відправка форм, робота
адмінпанелі)
2. Перевірка виключень та комбінацій юзер-кейсів
3. Технічне тестування
- навантаження
- безпека
4. Коментарі та тікети в таск-трекер по результатам тестування

25. 1. Мова програмування
- PHP
- Ruby
- Pyton
- Java
…
2. Відкритість
- відкритий код (різновид GNU)
- закритий код
3. Фреймворк
- YII
- Symphony
- Zend
…
4. CMS
- Joomla
- Wordpress
- Drupal
…
Технологii (движки, фреймворки)
https://habrahabr.ru/post/193168/
Класифікація CMS

26. Наповнення контентом

27. подача контенту
1. Таблиця потрібно контенту у відповідності до прототипу та дизайн-макетів та формат
подачі (розміри, типи файлів, структура папок…)
2. Постановка задач на розробку контенту
3. Перевірка наданого та розробеного контенту
- кількісно-форматний аналіз
- контроль якості

28. перевiрка на готовому сайтi
1. Текст
- об`єм
- оформлення
- зрозумілість
2. Фото
- розмір
- якість стиснення
- взаємодія з текстом
- вертикальні/горизонтальні
3. Відео
- розмір та якість

29. Запуск

30. хостинг
1. Тип доступу та налаштувань
- Shared
- Virtual Server
- Collocation
2. Тип хостингу
- стаціонарний
- хмарний
3. Сервіси, які можуть надаватись
- Mail
- Адміністрування
4. Від чого залежить вартість
- Навантаження (параметри сервера)
- Об`єм пам`яті (кількість сайтів)

31. Аналiтика, метрики
1. Google Analitycs, Yandex Metrika
2. IP телефонія, підміна номерів
3. CRM-системи
4. Коди відслідковування для соціальних мереж

32. монiторинг пiсля запуску
1. Технічні метрики
- Up Time серверу
- швидкість завантаження
2. Бізнес-метрики
- покупки
- дзвінки
- заявки
- цільові дії
3. Юзабіліті метрики
- показник відмов
- карта поведінки на сторінці
- переходи по сторінкам
4. Соціальні метрики
- відгуки, кількість згадувань
- кількість Like, Share

33. Олексій Артеменко
art@vintage.com.ua
380 96 486 62 27
Замовити веб-сайт можна тут:
Дякую за увагу.
Запитання