Загальна структура проекту
Так, а тепер нам потрібно зібрати воєдино все, що робили раніше.
1. Беремо інформацію, що є в наявності
2. Беремо те, що можемо зробити швидко
3. Беремо якісь ідеї від конкурентів
4. Беремо елементи структури, отриманої на етапі вивчення пошукових запитів
5. Прибираємо те, що на поточному етапі не потягнемо
6. Дивимося, що важливе ми забули (сигнали, які потрібно передати), що зайве включили (шум, який потрібно прибрати)
І готово!
У всіх свої методи проектування. Хтось робить це на в блокноті в кафе, хтось в Word-і, хтось в спеціальних програмах. Деякі нарізають шматочки паперу, щоб переміщати їх на столі.
Сайти можна проектувати на коробках з піцою (реальний приклад, за обідом прийшла ідея, і все було спроектовано на коробці від піци). Можна в нотатках в телефоні. Можна в спеціальних програмах. Важливо лише те, щоб спосіб проектування не заважав вам, а сприяв. Якщо комфортніше працювати з папером - відмінно, віддаєте перевагу комп'ютер - відмінно, "все життя в смартфоні" - відмінно ще раз.
Приклад проектування на папері:
Проектування сайту в спеціалізованій програмі:
Або так:
Проектування сайту в Трелло
При цьому Trello.com зручний як на комп'ютерах, так і з мобільного додатку
Проектування
Почнемо проектувати.
Визначимо структуру проекту, відобразивши її в шапці проекту в навігації.
Майже всі проекти вкладаються в один з наведених нижче варіантів структури. При цьому нас не цікавлять іконки соц.мереж, тексти переваг. Важлива лише ідея того, що скелет проекту визначається меню.
Інтернет-магазин з меню в рядок. Меню може бути з випадаючими пунктами. Справа стандартні для інтернет-магазинів елементи: корзина, обране, особистий кабінет
Сайт або інтернет-магазин, де меню в рядок винесено на рівень нижче логотипу і контактів / корзини
Під гамбургером велике меню в кілька рівнів. Там без проблем може вміститися до 500 пунктів
Перед розробкою курсу було переглянуто 500+ сайтів і магазинів. Це були ТОП-100 інтернет-магазинів, сайти з каталогів проектів з хорошим дизайном, інтернет-магазини, з великою кількістю передплатників в інстаграм.
Округлено: 450 з 500 проектів мають одну з наведених вище структур. Решта 50 близьку до них, але при бажанні трансформовану в наведені.
Наша поточна задача визначити, які пункти зробити в головному меню основними, а які в випадаючими.
Давайте дивитися на схемах. Робота зі схемами дозволяє абстрагуватися від дизайну, а дивитися лише на структуру.
Структура: компанія сфери послуг
Типова структура: послуги, блог, про нас, контакти.
Контакти зазвичай справа (відкрийте, скажімо, каталог юридичних фірм і подивіться сайтів 15, щоб в цьому переконатися).
Перший пункт - послуги. Тобто те, навіщо прийшов відвідувач.
"Послуги" - пункт який не говорить. Тобто на сторінці може бути набір різнорідних послуг. Якщо є якась об'єднуюча назва, то можна використовувати її в меню замість "Послуги".
У випадаючому списку не обов'язково вказувати всі послуги, а можна популярні, а останній пункт - посилання на "Всі послуги"
У головному меню може бути не один пункт з послугами, а кілька:
Всі послуги можуть бути винесені в головне меню:
Послуги - це основне. На додаток йдуть:
1. Акції
2. Блог
3. Ціни
4. Персонал (лікарі / фахівці / ...)
5. Відгуки
6. Портфоліо
7. Контакти
8. Призи
9. Про компанію
10. Франшиза
11. Для преси (компанія з таким розділом трохи по-іншому сприймається)
12 ...
За аналогією з послугами: за кожним напрямом можна робити сторінку, яка містить всю інформацію. А можна дробити на окремі сторінки при необхідності:
Ви можете взяти конкурентів і витягнути з них виключно структуру їх проектів. Подивіться конкурентів, подивіться аналоги англійською. Не в цілому, а акцентувавши увагу саме на структурі.
В меню винесені напрямки відеозйомки
Структура: інтернет-магазин
Структури інтернет-магазинів більш однорідні, ніж у сайтів: розділи, інформація про доставку, про оплату. Корзина завжди справа вгорі.
Підхід до товарів аналогічний описаному вище підходу до послуг. Але кожен товар завжди має окрему картку: це і вимоги товарних агрегаторів, і необхідно для оптимізації інтернет-магазину для пошукових систем.
Кожному реальному товару відповідає картка товару - сторінка в інтернет-магазині. Товари групуються по розділах. Один товар може бути в декількох розділах.
Це можна уявити таким чином:
Визначивши розділи, потрібно буде згрупувати їх в меню.
Найпростіша ситуація: товарів мало. Класифікація не потрібна. Всі товари знаходяться в одному розділі.
Кавові скраби - розділ з 10 товарами. Просто і зрозуміло
Якщо кількість товарів значуща, то необхідно їх розділити на більшу кількість розділів. Приклади класифікації:
- Основна класифікація за типом продукту: купальники, холодильники, монітори, засоби проти облисіння, мобільні телефони
- По цільовій аудиторії: для чоловіків, для жінок, для дітей; для школярів 1-5 класів; для 6-11 класів;
- За участі в акціях: знижки серпня; розпродаж; знижка 70%
- За участі в вибірках: новинки; вибір експерта; актуально в поточному сезоні; Ася Давидова рекомендує; для натхнення
- За виробником: Nokia, Apple, Samsung
- За країні походження: Китай, Україна, США
- За призначенням: для дому, для офісу, для дачі
- За колекції: зимова колекція, літня колекція
- За кольором: червоні, зелені, сині
Окремий випадок - інтернет-магазин для двох товарів:
Структура інтернет-магазину - це об'єднання посилань на розділи і сторінки. Стандартні сторінки відповідають на звичайні для інтернет-магазину питання:
1. Умови доставки і оплати
2. Умови повернення
3. Інформація про компанію
4. Контактна інформація
Якщо товари якісь специфічні або технічно складні, що вимагають "навчання" відвідувачів, то зростає важливість блогу і додаткових інформаційних сторінок:
