З чого почати розробку сайту?

Під час розробки сайту рекомендується дотримуватися певної послідовності кроків. Ось деякі основні етапи, з яких можна почати:

1. Визначте цілі та вимоги: для чого вам потрібен сайт і які функції він має виконувати. Це може бути сайт-візитка або каталог товарів і послуг. Розбийте цілі на більш конкретні завдання і визначте вимоги до дизайну, функціональності, контенту тощо.
2. Складіть план і структуру: створіть загальну структуру сайту, визначте, які розділи та сторінки будуть включені. Розробіть план навігації, щоб користувачі могли легко переміщатися по сайту. Карту сайту можна зробити за допомогою розширення в Google Chrome. (workspace.google.com/marketplace/app/mindmup_2_for_google_drive/758379822725)
3. Підготуйте контент: визначте, який контент буде на вашому сайті, хто ваша цільова аудиторія. Напишіть тексти, зберіть зображення, відео та інші матеріали. Зверніть увагу на створення унікального та якісного контенту.
4. Розробка дизайну: знайдіть приклади сайтів, у яких вам подобаються дизайн і функціональність. Вирішіть, який стиль і колірні рішення будуть використані. Це знадобиться для ТЗ підряднику, якого ви оберете.
5. Оформіть детальне технічне завдання для підрядника, де вказані всі вимоги. Так, ви витратите не один тиждень, щоб вказати всі нюанси, але це допоможе уникнути вічних правок і змін.

Технічне завдання на розробку сайту

Вступ

Призначення документа
Цей документ містить постановку завдання на розробку багатосторінкового сайту “ХХХХХ”

Документ описує межі проєкту, у ньому зібрано всю інформацію, яку необхідно враховувати під час проєкту, зафіксовано мету проєкту і вимоги, пред’явлені до проєкту.

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

Затверджений документ є єдиною постановкою завдання.

Структура сайту

• Головна сторінка
• Унікальна сторінка 1
  • Унікальна детальна сторінка 1
  • Унікальна детальна сторінка N
• Унікальна сторінка N

Стандартні елементи сторінок

Стандартні елементи сторінок – це елементи, присутні на всіх сторінках сайту.

Шапка сторінки

Шапка сторінки (header) – верхня частина сторінки, візуально відокремлена від основного контенту, що містить навігатори та графічні елементи оформлення.

Шапка сторінки містить:

• елемент фірмового стилю сайту (логотип);
• навігація
  • елемент навігації 1
  • елемент навігації N
• інші елементи шапки сторінки – телефон, кнопки, e-mail тощо.

Логотип сайту

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

Під час кліку за посиланнями навігації користувач переходить у поточній вкладці на відповідну сторінку сайту.

Підвал сторінки

Підвал сторінки (footer) – нижня частина сторінки, візуально відокремлена від основного контенту.

Підвал сторінки містить:

• елемент фірмового стилю сайту (логотип);
• блок посилань:
  • посилання 1
  • посилання N
• елемент фірмового стилю (зображення);
• кнопка “контактна форма” (див. опис на сторінці “Форми”)
• піктограми соціальних мереж;
• копірайти;
• контакти
• інші елементи підвалу сторінки

При кліці за посиланнями користувач переходить на відповідні сторінки.

При кліці на піктограми соціальних мереж користувач у новій вкладці переходить на сторінку проєкту в соціальній мережі.

Навігаційний ланцюжок

“Хлібні крихти” (англ. Breadcrumbs).

Присутній на всіх внутрішніх сторінках сайту. Являє собою шлях сайтом від головної сторінки до поточної, на якій перебуває користувач, у вигляді посилань на вищерозміщені розділи та підрозділи.
Інші стандартні елементи сторінок

Опис сторінок

Головна сторінка

Зміст сторінки:

• Шапка сторінки
• Далі – тематичні блоки сайту, які необхідно розписати максимально докладно за складовими елементами, наприклад:
• Стартовий блок:
  • Слайдер з N зображень:
  • Заголовок;
  • Зображення;
  • Текстовий опис.
• Каталог
  • Заголовок;
  • Підзаголовок;
  • 2 картки в один ряд, 2 ряди:
  • Елемент фірмового стилю сайту (зображення);
  • Заголовок;
  • Підзаголовок;
  • Кнопка “Детальніше”, при натисканні на яку здійснюється перехід на відповідну сторінку в цій же вкладці браузера
• Про проект
• 5 елементів в 1 ряду, 2 ряди:
  • Елемент фірмового стилю (зображення);
  • Заголовок;
  • Текстовий опис.
  • Фотоальбом
  • 3 елементи:
  • Обкладинка альбому
  • Заголовок
• Галерея фотографій, що відкриваються в лайтбоксі
  • Фотографія;
  • Кнопки навігації “направо”, “наліво”;
  • Кнопка “Хрестик” – закрити лайтбокс
• Підвал сторінки

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

Форми

Цей розділ містить інформацію про структуру та функціональні особливості контактних форм.

Контактна форма. Діюча особа: незареєстрований користувач.
Інтерактивні елементи. Елемент Обов’язковий для заповнення.
Поле “Ім’я”
Поле “E-mail”. Перевірка на валідацію.
Поле “Телефон”. Перевірка на валідацію.
Капча.

Чек-бокс “Я згоден на обробку персональних даних згідно з Політикою конфіденційності” так При кліці по посиланню “Політика конфіденційності” користувачеві в новій вкладці відкривається PDF-сторінка “Політика конфіденційності”.

Кнопка “Відправити”

Основний сценарій:

Користувач заповнює поля, натискає на кнопку “відправити”. Після натискання на кнопку “надіслати” в цьому ж блоці з’являється вікно успішного бронювання з текстом “Спасибі, ваша заявка відправлена! Ми зв’яжемося з вами і відповімо на всі ваші запитання”.

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

Функціональні вимоги

Мовні версії

1. Реалізується тільки україномовна версія сайту.
2. Вимоги до мови адміністративного інтерфейсу
3. Мова адміністративного інтерфейсу системи управління сайтами – українська.
4. Вимоги до функціоналу адміністративного інтерфейсу
5. Структурний та архітектурний інтерфейс розробляється на розсуд програміста.

Має бути виконано таке:

1. структурований інтерфейс;
2. зрозумілі назви елементів / інфоблоків;
3. групування полів в елементах за логічним значенням.
4. Опис функціональних особливостей – визначення геопозиції, платіжні системи, фільтри тощо.
5. Досить докладного текстового опису логіки взаємодії користувача з функціональним елементом:

• Опис статичного положення
• Детальний опис можливої користувацької взаємодії користувача
• Можливі результати користувацької взаємодії

Нефункціональні вимоги

Контент

Хто надає контент – замовник чи виконавець своїми силами генерує його

Дизайн

Для розробки сайту створюються прототипи, на основі яких здійснюються подальші роботи з дизайну.

Стилістичне оформлення сайту ґрунтується на наявному брендбуці проєкту та матеріалах поточного сайту.

Також рекомендуємо посилатися на “Бриф на дизайн” та інші документи, які дають змогу забезпечити базу для робіт із дизайну.

Вимоги до верстки

Верстка сторінок сайту повинна коректно (без візуальних і технічних помилок) відображатися і бути кросбраузерною в таких браузерах:

• Mozilla Firefox версії 45+;
• Microsoft Internet Explorer версії 10+;
• Microsoft Edge версії 25.10586+;
• Google Chrome версії 49+;
• Apple Safari версії 8+

На операційних системах Windows і Mac OS, з увімкненою графікою за роздільної здатності екрана користувача від 1280 пікселів завширшки і вище. Ширина екрана повинна визначатися макетом.

Верстка сторінок сайту повинна коректно (без візуальних і технічних помилок) відображатися на мобільних пристроях в операційних системах iOS 9+, Android 5+, Windows Phone 8.1+.

Верстка сайту повинна відповідати затвердженому сторонами дизайну.
Вимоги до розробки сайту з позицій пошукового просування

Загальне

• Сайт має відповідати вимогам пошукових систем Yandex і Google щодо зручності перегляду на мобільних пристроях. Вимоги відображені на сторінці https://developers.google.com/speed/docs/insights/mobile.
• Необхідно розміщувати текст у вигляді тексту (а не картинок). Бажано, щоб доступ до тексту не був ускладнений різними дизайнерськими рішеннями – був доступний одразу, а не відкривався за кліком/наведенням тощо. Текст не повинен приховуватися java-скриптами.
• Текст на сайті має бути легко читабельним, відформатованим, не повинен містити орфографічних помилок.
• Усі сторінки сайту повинні містити унікальний текст.
• У тексті сторінки має бути присутнім 1 заголовок із тегом H1, який має містити ключові за змістом слова/фрази, заголовків із тегом H2 у тексті може бути 2, і вони також мають містити ключові слова/фрази. Не можна поміщати весь текст сторінки в тег заголовка.
• Заголовки повинні хоча б частково відповідати навігації.

Зображення

• Alt-атрибут має бути прописаний у всіх картинок. Alt має містити слова, що просуваються на конкретній сторінці. Не можна вставляти понад 7 слів в alt-атрибут. Що стосується зображень, вони мають бути унікальними.
• Слід використовувати тільки популярні розширення зображень (JPEG, GIF, PNG, і BMP).
• Зображення може відкриватися окремою сторінкою без тексту, але тільки в тому разі, якщо це зображення присутнє як на стандартній сторінці, так і відкривається окремо у збільшеному вигляді.

Мета-теги

• Має бути передбачена можливість редагування мета-тегів і додавання тексту.
• Тег <title> має відповідати вмісту сторінки і містити основні пошукові запити, повинен містити не більше 64 слів.
• Мета-тег <description> має бути стислим і точним описом змісту сторінки (з використання ключових слів) у розмірі 2-х – 3-х речень, не повинен збігатися з тегом <title>.
• Мета-теги повинні містити в собі входження брендового ключового слова.

Подальші дії

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