- Основні етапи процесу розробки веб сайту в нашій дизайн студії наступні: Брифінг з клієнтом Аналіз...
- 2 Аналіз інформації
- 3 Проектіровнаіе і написання ТЗ
- 4 Розробка дизайн сайту
- 5 Верстка
- 6 Програмування
- 7 Тестування
- Здача проекту
- після здачі
- резюме
- КОМАНДА ПРОЕКТУ
Основні етапи процесу розробки веб сайту в нашій дизайн студії наступні: - Брифінг з клієнтом
- Аналіз отриманої інформації
- Проектування і написання ТЗ
- Створення дизайну сайту
- Верстка
- програмування
- тестування
- Здача проекту
Розглянемо їх на конкретному прикладі.
1 Початок. брифінг
До нас звернувся клієнт з Торонто з завданням розробити новий сайт для салону краси.
Спершу, ми провели брифінг (інтерв'ю) і уточнили проблеми поточного веб сайту і чому він хоче його переробити. Головною проблемою клієнт вважав відсутність адаптації під планшети і мобільні пристрої - при переході на сайт з телефону сайт виглядав відверто не сильно добре і при цьому частина кнопок взагалі не працювала.
Сайт до редизайну
Другою проблемою була відсутність внутрішньої SEO оптимізації сайту, що, зважаючи на зростання конкуренції в галузі, призводило до планомірного зменшення кількості дзвінків від відвідувачів сайту.
Після того як ми отримали посилання на ресурс, очевидним стало те, що поточний сайт явно морально застарів і вже не може виконувати свою основну функцію - приводити клієнтів.
2 Аналіз інформації
Студії дано «зелене світло» і починається активна робота над проектом. Проджект менеджер ставить завдання фахівця з юзабіліті та інтернет маркетингу детально проаналізувати сайт European Beauty Toronto, скласти повний список проблем і відштовхуючись від нього сформувати перелік пропозицій, що необхідно поліпшити і додатково впровадити на сайті.
Проблеми Рішення Не зручно переглядати сайт на планшетах і мобільних телефонах Адаптивна верстка сайту під мобільні пристрої Відсутність заявок з сайту Впровадити форми із закликом до дії: «Запис на прийом», «Отримати консультацію», продумати акції для відвідувачів сайту Довго відкриваються сторінки сайту при перегляді з мобільного телефону Максимальне прискорення швидкості сайту по Google Page Speed Insights Відсутність інструментів для отримання зворотного зв'язку з аудиторією Створити канали спілкування в соціальних мережах Користувачі рідко возвращ ються на сайт Регулярне оновлення інформації: послуги, новини про новинки та знижки, ведення блогу, можливість підписки на новини для отримання інформаційних листів. Підключення ремаркетингу Відсутність довіри до сайту у нових відвідувачів Показати переваги чому варто звернутися саме в цю компанію, розмістити сертифікати фахівців на сайті, багато фотографій салону, обладнання та процесу роботи з клієнтами. Створення розділу, де кожен відвідувач зможе ознайомитися з відгуками і залишити свій Незручне подання інформації на сторінці, важко знайти потрібний матеріал. Низька глибина перегляду сторінок. Створення зрозумілою і зручною структури розділів і підрозділів. Фіксована головне меню при прокручуванні сторінки сайту вниз, можливість швидко автоматично повернутися на верх сторінки. Оформлення контенту з наданням всієї необхідної супутньою інформацією. Важко знайти сайт в пошуку Провести внутрішню SEO оптимізацію Маленька відвідуваність сайту Розширення цільових запитів, за якими сайт можуть знаходити з пошуку за допомогою розміщення нових корисних статей в блозі
Крім аналізу самого сайту клієнта, були проаналізовані кілька сайтів основних конкурентів. Метою цих робіт було ознайомлення зі структурою їх сайтів і виявлення «фішок», які вони використовують і які можна застосувати на поточному проекті в удосконаленому вигляді.
Тепер, коли вся інформація зібрана і узгоджена з клієнтом, приступаємо до наступного етапу.
3 Проектіровнаіе і написання ТЗ
Проектування використовується для того, щоб продумати максимально просту і зручну навігацію по сайту - структуру розділів і підрозділів, а також яку інформацію буде містити кожна сторінка сайту. Після того як проектування завершено, пишеться Технічне завдання з описом всіх елементів, модулів і їх особливостей. У Технічному завданні закріплюється обсяг, який має виконати студія за даним проектом.
Погоджений варіант Т3 передається в роботу дизайнеру для створення прототипів і візуалізації структури сайту.
4 Розробка дизайн сайту
Дизайнер починає свою роботу з розробки прототипу головної сторінки ...
Коли все прототипи готові і структура блоків сторінок сайту затверджена клієнтом, дизайнер готує перший варіант дизайну:
Клієнт, власниця салону, була не готова до такого кардинальну зміну стилю. Інтегруємо фірмовий зелений колір і особа компанії - дівчину з рекламного продукту SKEYNDOR.
І цей варіант виявився не досить близький до духу клієнтки. Приймаємо рішення про кардинальну зміну дизайну зі збереженням поточної структури. Націлюємося показати атмосферу релаксу, затишку і комфорту.
Макет головною затверджений. У процесі спілкування з клієнткою ми прийшли до потрібному результату. Спрощуємо структуру головної сторінки і приступаємо до внутрішніх.
Коли макети всіх сторінок сайту готові і узгоджені клієнтом, дизайнер передає їх вихідні верстальщику.
5 Верстка
При верстці проекту ми використовували засоби HTML5, CSS3, JS. Особлива увага приділяється кросбраузерності, коректності відображення сайту на всіх пристроях і валідності коду. Готова верстка передається для подальшого програмування.
6 Програмування
Оптимальна платформа (CMS), на базі якої буде розроблятися і налаштовуватися функціонал, підбирається програмістом в залежності від структури проекту та наявності специфічних модулів по Технічним завданням, а також побажань клієнта. Повний перелік CMS і технологій з якими ми працює описаний тут .
Саме для цього сайту була вибрана популярна CMS Word Press.
7 Тестування
Після того як функціонал готовий і сайт розміщений на хостингу, ми тестуємо:
- Верстку. Перевіряємо її точну відповідність макетів дизайну, перевіряємо відображення сайту в різних браузерах і на різних пристроях, перевіряємо чистоту коду.
- Функціонал. Перевіряємо наявність і відпрацювання всіх модулів згідно Технічного завдання.
- Адмін панель сайту. Перевіряємо наявність всіх необхідних розділів для управління контентом і коректність відображення його стилів на сайті.
Таким чином тестування - це стадія контролю якості проекту перед його запуском. Дозволяє виявити всі можливі недоліки, які були помічені при розробці сайту і своєчасно їх усунути.
Здача проекту
Після того як всі роботи виконані, клієнту передаються всі необхідні доступи. Також ми приділяємо кілька годин навчання менеджера клієнта роботі з панеллю адміністрування сайту для його подальшого наповнення.
Сайт після редизайну
після здачі
Додатково за даним проектом, після його здачі, були проведені роботи по:
- Максимального прискорення швидкості завантаження сторінок сайту під вимоги Google Page Speed Insights. Це дозволить користувачам легко переглядати сайт навіть при повільній швидкості Інтернету. Також послужить безсумнівним плюсом для подальшого SEO просування, так як сайти, які швидко відкриваються мають перевагу в пошуковій видачі Google перед сайтами, які відкриваються повільніше.
- Внутрішньої SEO оптимізації сайту. Дозволяє внести потрібні налаштування на сайт для коректної його індексації та подальшого SEO , Поліпшити видимість сайту в пошуковій видачі по тематичним ключовими словами, налаштувати засоби аналітики.
резюме
Як показує практика, процес роботи саме за такою схемою дозволяє отримати на виході сайт, який дійсно буде зручним для відвідувачів, впізнаваним і приводити нових клієнтів, служити надійним інструментом Інтернет маркетингу!
КОМАНДА ПРОЕКТУ
