Етапи розробки сайту

#Розробка 10 August 2018 Оцінити статтю

Загальна інформація

Що таке веб-сайт, як він створюється і на які етапи розбивається його створення? Це питання цікавить усіх, хто хоче відкрити «представництво» в Інтернеті. Розуміння більшості людей стосовно ​​розробки сайту – це просто намальований дизайн. Але це лише один з етапів. І найцікавіше, що він є не першим і не найголовнішим. Якщо розглядати правильний підхід до розробки сайту, виділяють такі етапи:

Отже, давайте розберемо всі етапи докладніше.

Концепція сайту та функціонал

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

LandingPage

Це сайт, що складається з усього однієї посадкової сторінки, на якій виведена вся інформація про товар/послуги компанії, що його надає, та всі переваги. Все це виводитиметься в окремих блоках-екранах, зазвичай їх від 6 до 12. Інформація на них подається коротко, максимально привабливо та барвисто. Все зроблено, щоб людина здійснила моментальну покупку.

Здебільшого лендінги створюються під різні види платної реклами: пошукової, мультимедійної і т.д., оскільки залучити органічний трафік на них практично нереально.

Подібний тип актуальний лише для однотипних послуг чи товарів. Наприклад, продаж годинника Casio Swiss Army різних кольорів. Брати весь асортимент годинника вже непрактично, оскільки конверсія лендінгу істотно знизитися.

Особливого функціонала на цих сайтах немає. Можлива наявність простеньких калькуляторів і форм зворотного зв’язку. Можливий певний «опитувальник-анкета» для залучення до покупки. З погляду швидких продажів нічого іншого там і не повинно бути. Можливий функціонал за таймерами зворотного відліку часу або збирання пошт для подальших розсилок.

Сайт-візитка

Це невеликий за розміром, за кількістю сторінок та блоків на них сайт, який покликаний просто інформувати потенційних клієнтів про людину чи конкретну послугу. Кількість сторінок – від 3 до 5, але можлива наявність блогу зі статтями чи новинами. На ньому немає ніякого функціонала, тільки текстові сторінки з малюнками та блоками вигод. Це найпростіший сайт, зокрема в питаннях розробки та наповнення. Кількість шаблонів сторінок – 2-3 (однотипні сторінки з різним контентом). Використовується здебільшого як звичайна візитка, тільки в цифровому вигляді (звідти та назва) – людина просто має зайти на неї, знайти контакти або уточнити сферу діяльності.

Сайт послуг, корпоративний портал

Цей сайт може складатися з достатньої кількості сторінок і глибокої внутрішньої структури, наприклад, веб-ресурси юридичних тематик. Там можуть бути сотні сторінок з наданими послугами. Функціонал сайту може бути досить різноманітним – від найпростіших форм зв’язку до найскладніших калькуляторів. Кількість шаблонів сторінок – від 3 до 8. Кількість блоків на сторінці більша, ніж у візитки. Блоки розташовуються в певній послідовності для залучення людини у вирву продажу.

На даному сайті продумується та розробляється правильна структура, оскільки вони вже добре ранжуються в пошуковій видачі при правильному підході.

Інтернет-магазин

Це, мабуть, один із найскладніших і трудомістких видів сайту, особливо якщо робити його розумно. Такої кількості функціонала, як на ІМ, не застосовується більше ніде. Найпопулярніший:

Особливістю інтернет-магазину є наявність Корзини – можливості зробити замовлення через сайт. У жодного іншого типу сайту її немає.

Розробка структури сайту

Після того як був обраний тип сайту та продуманий весь функціонал, який необхідний, можна розпочати розробку структури сайту. Вам необхідно продумати структуру, яка максимально просто дозволить знайти той чи інший товар і водночас не була занадто «хитромудрою» та заплутаною (це якщо товарів чи послуг багато).

Розробку структури можна робити по-різному.

Приклад розробленої структури в програмі X-Mind
1

Розробка структури сторінок

Всі роботи на даному етапі проводяться для того, щоб показати дизайнеру якісь блоки та в якому приблизно вигляді потрібні на сторінках сайту. Даний етап найчастіше потрібен тільки для сайтів послуг та інтернет-магазинів, коли користувачеві необхідно показувати деяку інформацію в певні моменти ознайомлення з сайтом.

Якщо це робиться професійним маркетологом, то він вибудовує певний ланцюжок залучення потенційного клієнта для покупки. Це ціла наука, як правильно представити товар/послугу та всі їх переваги, а також вигоди співпраці саме з вами правильно та в потрібний момент, закриваючи всі заперечення та сумніви.

Розробляється це все з урахуванням особистого досвіду, аналізу конкурентів і ніші загалом. Також важливо розуміти потреби клієнта та особливості комунікації з ним, що йому цікаво, що його може злякати, а навпаки – залучити.

На нашу думку, розробка структури лендингів повинна проводитися тільки маркетологами, оскільки при швидких покупках необхідно все правильно подавати потенційним клієнтам.

Приклад опрацьованої структури сторінки

2

Створення дизайну сайту

Після того як готова структура сайту та змальовані схеми сторінок (шаблонів сторінок) та весь функціонал, який має бути, можна передавати це в роботу дизайнеру. Разом з цим йому необхідно надати кілька варіантів, які, на думку замовника, хороші і кілька, які йому не сподобалися, щоб дизайнер розумів, «куди йому далі рухатися». Давайте говорити відверто: не все, що вам подобається, дійсно буде продавати. Також важливо надати дизайнеру все, що необхідно використовувати в розробці майбутнього зовнішнього вигляду: логотипи, картинки, look-book, корпоративні кольори тощо.

Розробка та затвердження дизайну можуть проводитись за кількома схемами.

Перший варіант – побічне твердження. Кожен блок/сторінка затверджуються окремо, та дизайн наступного не малюється без затвердження попереднього. В кінцевому варіанті редагування вже не вносяться.

Другий варіант – відтворення дизайну всіх шаблонів сторінок і внесення правок після закінчення. Цей спосіб використовується найчастіше. Але тут важливо пам’ятати, що дизайнер може обмежити кількість внесень правок. На перший погляд це може звучати трохи неправильно з точки зору замовника. Але ще раз нагадую, що хороший дизайнер (особливо якщо він має досвід в UX) набагато краще розуміє, що він робить і для чого. Він чітко знає, які кольори та як поєднувати, які мають бути відстані між елементами та як їх краще розташувати. Дуже часто довіра до дизайнера підтверджується високою конверсією сайту.
3

Створення верстки на основі дизайну

Після того як дизайн повністю затверджений, необхідно перетворити на html-код, зрозумілий для браузерів. Цей процес називається версткою. Також на даному етапі розробляється вся анімація на сайті та всі інтерактивні елементи. Головне, про що потрібно пам’ятати й відразу озвучувати front-end програмісту (верстальнику), – це те, що всі роботи повинні проводитися тільки за останніми специфікаціями CSS і HTML. Оскільки використовуючи старі прийоми, ваш сайт у нових браузерах може виглядати далеко не так, як ви хотіли б. Також це загрожує тим, що на сайті можуть бути помилки у вихідному коді та файлах стилів.

Перед початком робіт потрібно вказувати, що вам необхідна також адаптивна верстка (якщо у вас немає окремої мобільної версії сайту). Це допоможе сайту правильно відображатися на мобільних пристроях. Це є обов’язковою умовою з огляду на те, що майже половина всього трафіку на всіх сучасних ресурсах – мобільна.

Без назви

Вибір CMS (адміністративної панелі)

На даний момент у світі існують сотні різних адміністративних панелей. Кожна з них має свої переваги, недоліки, особливості. Окремим сегментом адмінок є самописні. Це такий тип CMS, який створюється індивідуально під кожен сайт. У цій статті ми не розглядатимемо самописні адмінки. Вони надто дорогі, та не всі програмісти зможуть з ними працювати надалі.

5

Як правильно вибрати CMS

Для цього потрібно розуміти, який функціонал буде на сайті та який у вас тип сайту. Наприклад, одні адмін. панелі розроблялися спеціально для IM (OpenCart, Drupal), інші – для інформаційних сайтів (WordPress, Joomla). Це не означає, що не можна на OpenCart зробити сайт, але це буде недоцільно в плані доопрацювання функціонала.

Наприклад, WordPress відмінно підходить для інфосайтів, блогів, візиток і сайтів послуг, при певному налаштуванні маленьких інтернет-магазинів. Але реалізовувати великий ІМ на ній категорично не можна – вона глючить і ламатиметься. Для повноцінного магазину краще використовувати заточені під це CMS – OpenCart, Bitrix. У них вже реалізовано функціонал онлайн-покупок – Кошик і фільтрування за параметрами.

Тому для того щоб вибрати CMS правильно, можна проконсультуватися у фахівців, краще в кількох. І щоб вони розписали всі переваги та можливі проблеми роботи з кожною.
Таблиця варіантів CMS, залежно від типу сайту

Тип сайту CMS
Рекомендована Припустима
LandingPage WordPress Joomla
Візитка WordPress Joomla
Сайт-послуг, корпоративний WordPress Joomla
Маленький ІМ OpenCart, Bitrix WordPress, Joomla
Великий ІМ OpenCart, Bitrix Drupal

Можливі й інші варіанти, але з нашого досвіду робота з цими CMS є оптимальною з точки зору функціонал-витрати на програміста.

Використання функціонала

Після того як адміністративна панель обрана та встановлена, проводяться роботи з впровадження всього функціонала сайту та налаштування його правильної роботи. На даному етапі back-end-програміст розгортає та налаштовує базу даних сайту, вивантаження та завантаження даних з неї та пов’язує це все з функціоналом сайту. Встановлює всі необхідні плагіни, доповнення та надбудови, які необхідні для здійснення правильної роботи сайту та його технічної частини. Проводить оптимізацію всіх процесів, пов’язаних з його функціональною частиною та стабільністю його роботи.

Також в адміністративній панелі налаштовуються внутрішні поля для введення необхідних даних таблиці бази. Які саме мають бути поля, необхідно вказувати у ТЗ, щоб програміст реалізував усе правильно та повною мірою.

Усі роботи мають виконуватися стандартними методами чи рішеннями, щоб у разі потреби інші програмісти змогли розібратися в коді та підкоригувати його чи виправити. Так звані «милиці» можуть використовуватися тільки у виняткових випадках, коли не можна застосувати стандартне рішення. Також на даному етапі виконуватиметься базове тестування функціонала. Коли все функціонує нормально, можна переходити до наступного етапу. Якщо виявляються «баги», то вносяться редагування та знову тестується функціонал.

6

Натяжка верстки

Це процес поєднання функціональної частини сайту з його зовнішнім виглядом. На цьому етапі робіт програміст перетворює зверстаний дизайн у спеціалізовані файли тем CMS. У кожної адміністративної панелі вони свої, тож підхід до натяжки верстки може змінюватися. Вони створюються для кожного шаблону сторінки на сайті, на якій зроблено дизайн.

Після цього налаштовується виведення необхідної інформації з бази в потрібних блоках на сайті. Щоб програміст усе правильно реалізував, має бути підготовлене правильне ТЗ, у якому розписано, яка інформація і де має виводитися щодо кожної окремої сторінки.

Після завершення натяжки верстки на сайт додаються тестові товари та розділи, проводиться базове тестування виведення та працездатності функціонала з версткою – наскільки правильно та коректно відображається дизайн і всі елементи сайту, чи виводитиметься правильна інформація на сторінках тощо.

Адаптивна верстка

Також здійснюються тестування адаптивної версії сайту на будь-яких дозволах екрана – від телефона до 4К монітора. Все для того, щоб мобільний адаптив був максимально коректним і зручним. Також здійснюватиметься кроссбраузерна перевірка верстки при різних дозволах – верстка перевіряється на різних типах пристроїв і браузерів.

4

Наповнення сайту

Після того як функціонал з версткою протестували, на сайт вноситься повна структура розділів-підрозділів і товарів, згідно з розробленою схемою на початку проектування. Заповнюються всі необхідні поля у всіх елементах, і перевіряється коректність їх відображення. Товари розподіляються за розділами та наповнюються інформацією, на сайт робляться базові автогенеровані метадані (якщо немає готових) та додається контент на сторінки.

Здебільшого наповнення сайту може здійснюватися за допомогою імпорту чи копіювання інформації з зовнішніх джерел – це може бути база іншого сайту, бази синхронізації 1С, таблиці даних тощо.

Перевірка функціонала

Після того як відбулося повне наповнення сайту, здійснюється повна перевірка функціонування:

І вже після цього сайт переноситися на основний домен, якщо він розроблявся на тестовому. Або відкривається до індексації, якщо він був закритий у robots.txt.

І ось тепер все – сайт готовий до роботи й seo-просування!

схожі статті
підписатися:
Розробка структури сайту
Розробка структури сайту
# Розробка
Коментарі