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

Last updated on
14 April 2025

Мета

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

Кроки

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

  1. Створіть список інформації, яку ваш сайт повинен представляти відвідувачам. В сценарії міського ярмарку, це може включати:

    • Адреса ярмарку, з планом проїзду і картою
    • Години і дні роботи ярмарку
    • Історія ярмарку
    • Список продавців
    • Подробиці про кожного з продавців
    • Пошук по списку рецептів
    • Подробиці про кожен рецепт
    • Список з недавно доданими рецептами
  2. Вирішити яка інформація повинна бути на наступних сторінка або типах сторінок на сайті:

    Інформація яка повинна бути на всіх сторінках
    Адреса, годинник, недавно додані рецепти
    Сторінки з подробицями про продавців
    Інформація про кожного продавця на своїй сторінці
    Сторінкі з подробицями про рецепти
    Подробиці про кожен рецепт на кожній сторінці
    Головна сторінка
    Адреса, карта, схема проїзду і години роботи
    Сторінка про ярмарок
    Історія ярмарку
    Сторінка зі списком продавців
    Список продавців з посиланнями на сторінку продавця з подробицями
    Сторінка зі списком рецептів
    Пошук по списку рецептів з посиланнями на сторінку рецепта з подробицями
  3. Вирішити яка інформація найбільш важлива на кожній сторінці. Відвідувачі сайту, що використовують мобільні пристрої або екрани з низькою роздільною здатністю, будуть часто бачити тільки контент, який представлений першим і вони можуть не проскролити вниз і не подивитися всю інформацію на сторінці.
  4. Вирішити які з вищевказаних сторінок повинні з’явитися в головному меню сайту. Наприклад, головне меню може складатися з посилань Головна, Про Ярмарку, Продавці та Рецепти.
  5. Зробіть грубий начерк(скетч) дизайну для кожної сторінки, показуючи, як це може виглядати переглядаючи сайт на маленькому екрані, такому як телефон, також як і на великих екранах, як наприклад на настільному комп’ютері. Вважаючи що більшість відвідувачів сайту будуть використовувати маленькі екрани, буде гарною ідеєю почати з макета для телефонів і переконатися, що ці користувачі зможуть знайти інформацію, яка їм потрібна без занадто довгої прокрутки.

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

Відео

Автори

Написано Jennifer Hodgdon.

Перевів Олексій Бондаренко із Mazaltov.

 

This page is generated from AsciiDoc source from the User Guide. To propose a change, edit the source and attach the file to a new issue in the User Guide project. PDF and e-book formats are available on the User Guide project page.

Source file: planning-layout.asciidoc

Help improve this page

Page status: No known problems

You can: