Проектування сайтів

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

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

Зараз набирає популярності поняття Discovery Stage — стадія перетворення ідеї проекту на технічне завдання, яке можна реалізувати. Це саме той сенс, який ми вкладаємо в етап проектування. 

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

Навіщо потрібне проектування?

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

Проект допомагає:

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

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

  • в результаті гарантувати результат, щоб не вийшло ситуації "розробляємо те-ні-знаємо-що, поки гроші не закінчаться”

Етапи проектування

Ініціація

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

У результаті зустрічі ми:

  • Визначаємо цілі, завдання, критерії успішності розробки
  • Проводимо короткий аналіз цільової аудиторії, персон користувачів, аналіз конкурентів
  • Визначаємо основне технічне рішення та набір технологій (техстек) проекту.

 

Аналіз конкурентів, визначення ЦА і персон відвідувачів

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

 

UX прототипування

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

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

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

Основні переваги, які вам дає прототипування:

  • Можливість спроектувати дії користувачів і перевірити їх у реальних умовах
  • Можливість відстежити помилки в логіці та незручності для користувачів
  • Добре працюючий прототип — гарантія того, що продукт також працюватиме. 

 

Інструменти прототипування сайтів

В процесі прототипування сайту ми використовуємо найсучасніші на сьогодні інструменти для UX дизайнерів: Axure RP, Figma, Invision.

Ми використовуємо Axure, коли потрібно створити прототипи маркетплейсів, складних сайтів, систем. Функціонал системи дозволяє створювати високодеталізовані, повністю клікабельні прототипи, які наочно демонструють весь функціонал сайту. Axure дозволяє також перевірити user-flow для зареєстрованих і незареєстрованих користувачів. Це дуже зручно, щоб продемонструвати верстальнику і замовнику як виглядатиме готовий сайт.

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

У той же час Axure RP і Invision дозволяють ділитися результатами з іншими учасниками процесу та залишати коментарі. Invision в зв'язці з Adobe Illustrator також прекрасно справляється з прототипуванням застосунків і тестуванням зручності мобільної версії сайту. 

 

Специфікація (ТЗ) і опис функціональності

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

Що може входити в специфікацію?

  1. Схеми взаємодії CRM, сайту, особистих кабінетів згідно прототипу. Підбір оптимального технічного рішення: які системи ми використовуємо, як вони пов'язані між собою.
  2. Опис процесів роботи менеджерів, операторів, користувачів у системі.
  3. Підготовка детальних описів функцій, що включає в себе поточний стан процесів і їх трансформацію в рамках нової платформи в форматі (було -> буде) та технічне рішення.
  4. Опис технологій для front-end і back-end розробки.

Результати етапу проектування

У результаті проведеного проектування ми зазвичай готуємо наступні документи:

  1. Аналіз конкурентів і замінників, персони користувачів.
  2. Прототипи або мокап інтерфейсу та результати його тестування на обмеженій вибірці користувачів.
  3. Сценарії користувача (use cases).
  4. Схема компонентів системи та зв'язку між ними.
  5. Flow diagram — відображає рух даних між компонентами систем.
  6. Власне специфікація (ТЗ) відповідно до описаних use cases, компонентів і flow.

В залежності від проекту, цих документів може бути більше чи менше.

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

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

Хочете створити сайт, який гарантовано принесе вам прибуток? Замовте проектування та прототипування в Evergreen.

 

Написати

Більше про прототипування

Почитайте більше про прототипування та розробку дизайну в наших статтях і вибірках

UX-прототипування стартапів. Основні етапи

UX-прототипування стартапів. Основні етапи

Як робити UX дизайн продукту який ніхто не знає як буде працювати? Що буде якщо все це не працює? Чи можна прототіпіровать відразу в коді? А як тестувати дані?

Види прототипів: mockups, високодеталізованні UX прототипи, як вони виглядають

Види прототипів: mockups, високодеталізованні UX прототипи, як вони виглядають

Чи можна створити напевно успішний UX прототип, із яким користувач точно дійде до мети та здійснить покупку? І що для цього вибрати: mockups чи високодеталізований варіант? Читайте в цій статті

Проектування в e-Commerce. Від основ до омніканального UX

Проектування в e-Commerce. Від основ до омніканального UX

Основні принципи проектування e-commerce майданчиків. Який UX потрібен сучасним користувачам? За чим майбутнє UX дизайну e-commerce сайтів? Це і багато іншого в нашій статті про дизайн в e-Commerce.

Дизайн сайту - диво або передбачуваний процес?

Дизайн сайту - диво або передбачуваний процес?

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

Прототип сайту – як він допомагає оцінювати і розробляти сайти

Прототип сайту – як він допомагає оцінювати і розробляти сайти

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

5 ключових кроків для проектування успішного UI  прототипу сервісу

5 ключових кроків для проектування успішного UI прототипу сервісу

Коротка стаття, яка пояснює підхід Evergreen до редизайну сервісів: що конкретно і в якому порядку робить менеджер і дизайнер-прототіпіст для того, щоб зберегти всі переваги старого продукту і досягти мети редизайну

Ваша команда з прототипування сайтів – Evergreen

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

Цей сайт є українською мовою. Ви можете переключити мову у меню, або зробити це зараз.