Загальна структура проекту

Так, а тепер нам потрібно зібрати воєдино все, що робили раніше.

1. Беремо інформацію, що є в наявності
2. Беремо те, що можемо зробити швидко
3. Беремо якісь ідеї від конкурентів
4. Беремо елементи структури, отриманої на етапі вивчення пошукових запитів
5. Прибираємо те, що на поточному етапі не потягнемо
6. Дивимося, що важливе ми забули (сигнали, які потрібно передати), що зайве включили (шум, який потрібно прибрати)


І готово!

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

Сайти можна проектувати на коробках з піцою (реальний приклад, за обідом прийшла ідея, і все було спроектовано на коробці від піци). Можна в нотатках в телефоні. Можна в спеціальних програмах. Важливо лише те, щоб спосіб проектування не заважав вам, а сприяв. Якщо комфортніше працювати з папером - відмінно, віддаєте перевагу комп'ютер - відмінно, "все життя в смартфоні" - відмінно ще раз.



Приклад проектування на папері:
    Інструменти: папір, ручка, покривало



    Проектування сайту в спеціалізованій програмі:
    Використана програма Axure RP



    Або так:
    Картинка з інтернету за запитом "проектування сайту на дошці"



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

    При цьому Trello.com зручний як на комп'ютерах, так і з мобільного додатку




    Проектування


    Почнемо проектувати.

    Визначимо структуру проекту, відобразивши її в шапці проекту в навігації.

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

    Сайт з меню в рядок. Меню може бути з випадають пунктами. Справа контакти

    Інтернет-магазин з меню в рядок. Меню може бути з випадаючими пунктами. Справа стандартні для інтернет-магазинів елементи: корзина, обране, особистий кабінет

    Сайт або інтернет-магазин, де меню в рядок винесено на рівень нижче логотипу і контактів / корзини

    Сайт або інтернет-магазин з великою кількістю товарів або послуг. Товари або послуги групуються під меню-гамбургером

    Під гамбургером велике меню в кілька рівнів. Там без проблем може вміститися до 500 пунктів




    Перед розробкою курсу було переглянуто 500+ сайтів і магазинів. Це були ТОП-100 інтернет-магазинів, сайти з каталогів проектів з хорошим дизайном, інтернет-магазини, з великою кількістю передплатників в інстаграм.

    Округлено: 450 з 500 проектів мають одну з наведених вище структур. Решта 50 близьку до них, але при бажанні трансформовану в наведені.


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

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



    Структура: компанія сфери послуг


    Типова структура: послуги, блог, про нас, контакти.

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

    Перший пункт - послуги. Тобто те, навіщо прийшов відвідувач.

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

    Якщо послуг багато, то робимо меню, що випадає зі списком і переходом на кожну конкретну сторінку:
    Самі послуги можуть бути описані в рамках однієї сторінки. Якщо послуга одна, то, швидше за все, це буде опис з однієї сторінки. Або послідовне опис декількох послуг в рамках однієї сторінки:
    Структура, яка складається з сторінки зі списком послуг з переходами на сторінки кожної послуги:
    Пункт головного меню веде на сторінку з загальним переліком послуг. Кожен пункт меню, що випадає веде на окрему сторінку кожної послуги.



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



    У головному меню може бути не один пункт з послугами, а кілька:
    Ключова послуга + інші послуги



    Всі послуги можуть бути винесені в головне меню:
    Прямо під час підготовки даного уроку проектували сайт для йога-тренера, винісши в головне меню: йога в групі; індивідуальне заняття; корпоративна йога



    Послуги - це основне. На додаток йдуть:

    1. Акції
    2. Блог
    3. Ціни
    4. Персонал (лікарі / фахівці / ...)
    5. Відгуки
    6. Портфоліо
    7. Контакти
    8. Призи
    9. Про компанію
    10. Франшиза
    11. Для преси (компанія з таким розділом трохи по-іншому сприймається)
    12 ...


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

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

    Ось приклади того, як це може бути:
    Курси в випадаючих категоріях можуть перетинатися. Семінар 10 грудня - ключова активність, просування якої відбувається в соц.мережах
    Послуги з проектування магазинів з метою збільшення продажів. + 20% до продажів - сторінка для отримання пропозиції з відповіддю на питання: "Чи зможемо ми гарантувати + 20% до обсягів продажу при редизайні магазину"
    Упаковка бізнесу у франшизу і допомогу з тим, що б почати бізнес на основі франшизи. Блог названий не як "Блог", а "Злети і провали франшиз". У ньому будуть яскраві приклади обману, і найсмачніші цифри по доходу
    Пунктів в меню мало, тому вирішено назвати перший з них з акцентом на економію на податках
    На перше місце винесено портфоліо
    Реалізовані проекти - це блог зі звітами
    У першому пункті зібрані не тільки послуги, але все, що має відношення до сімейної школи
    Велике меню з послугами
    Клініка. Чекап програми - основна послуга, винесена в головне меню, а не як підпункт
    3 ключові послуги в меню. Під кожну послугу окрема сторінка, але без деталізації на ще більш дрібні послуги
    Куди давати рекламу по запросу "бальні танці"? На сторінку для дітей або для дорослих? Для цієї мети в напрямках буде сторінка "Бальні танці"
    Є 2 ключових матеріали: "як підняти командний дух за рахунок колективного вивчення англійської" і "професійний ріст не менш важливий, ніж гроші". Ці 2 матеріали активно просуваються в соц.мережах. Там і текст, і відео-лекція. Той, хто прослухав, хоче, щоб в його компанії був корпоративний англійський. Тому посилання на ці 2 статті винесені в меню

    В меню винесені напрямки відеозйомки



    Структура: інтернет-магазин

    Структури інтернет-магазинів більш однорідні, ніж у сайтів: розділи, інформація про доставку, про оплату. Корзина завжди справа вгорі.

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

    Кожному реальному товару відповідає картка товару - сторінка в інтернет-магазині. Товари групуються по розділах. Один товар може бути в декількох розділах.

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



    Визначивши розділи, потрібно буде згрупувати їх в меню.

    Найпростіша ситуація: товарів мало. Класифікація не потрібна. Всі товари знаходяться в одному розділі.

    Кавові скраби - розділ з 10 товарами. Просто і зрозуміло



    Якщо кількість товарів значуща, то необхідно їх розділити на більшу кількість розділів. Приклади класифікації:
    • Основна класифікація за типом продукту: купальники, холодильники, монітори, засоби проти облисіння, мобільні телефони
    • По цільовій аудиторії: для чоловіків, для жінок, для дітей; для школярів 1-5 класів; для 6-11 класів;
    • За участі в акціях: знижки серпня; розпродаж; знижка 70%
    • За участі в вибірках: новинки; вибір експерта; актуально в поточному сезоні; Ася Давидова рекомендує; для натхнення
    • За виробником: Nokia, Apple, Samsung
    • За країні походження: Китай, Україна, США
    • За призначенням: для дому, для офісу, для дачі
    • За колекції: зимова колекція, літня колекція
    • За кольором: червоні, зелені, сині
    Структура інтернет-магазину, який продає тільки кольорові футболки. Дод.Інформація спеціально приховали в розділ "Як купити", щоб акцент був на розділи з продукцією
    Інтернет-магазин з великою кількістю товарів



    Окремий випадок - інтернет-магазин для двох товарів:
    Перші два пункти - посилання на конкретні товарні позиції, а не на розділи



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

    1. Умови доставки і оплати
    2. Умови повернення
    3. Інформація про компанію
    4. Контактна інформація


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

    Смотрите также
    від