Создание структуры веб сайта
Маркетологи обычно рассматривают веб сайт исключительно с точки зрения дизайна или конверсии, но пользовательский интерфейс (иногда используется такое понятие как «пользовательский опыт») — это способ, позволяющий при грамотной благодаря структуре, сайта делать на нем конверсии.
Потратив время на создание структуры (каркаса) при создании или редизайне веб-сайта, вы должны сосредоточиться на пользовательском интерфейсе как на отдельной (но связанной) части процесса создания сайта. Различная структура позволит вам протестировать макет страницы и оценить поведение пользователей, чтобы точно увидеть, как будет работать новый веб-сайт, и найти любые потенциальные ошибки, которые в конечном итоге могут помешать конверсиям.
Сегодня мы постараемся разобраться, как выглядит процесс создания структуры для веб-сайтов, какие типы блоков вы можете использовать и как создать правильную структуру для вашего собственного проекта.
Что такое структура сайта
Структура веб-сайта используется для отображения основных функций и навигации по новому дизайну веб-сайта. Это дает представление о функциональности сайта, прежде чем рассматривать элементы визуального дизайна, такие как контент и цветовые схемы. Макеты и функции, такие как меню и кнопки, отображаются для оценки общего опыта конечного пользователя.
Структура веб-сайта также предоставляет практическую карту проекта для членов команды, чтобы увидеть, куда все пойдет, когда они выполнят связанные задачи.
Некоторые дизайнеры или клиенты могут соблазнить вас пропустить эту часть процесса, назвав ее ненужной и трудоемкой. Планирование структуры это один из самых важных процессов в изготовлении сайта, а любая хорошая подготовка требует времени и работа без плана обычно занимает еще больше времени, и вы рискуете вообще провалить проект.
Вы всегда должны делать структуру на ранних этапах разработки, потому что это поможет вам выявить ошибки в логике поведения посетитея или дизайне, давая вам время для их исправления. Что касается совместной работы, вы можете использоваться структурой для эффективной работы с вашей командой и объяснения концепций своим заказчикам.
Некоторые структуры более детализированы, чем другие. Целесообразно начать с общей структуры основных элементов, чтобы показать общую локализацию элементов на экране. Вы можете потом преобразовать эти первоначальные схемы в более точные, которые будут содержать больше деталей, например, как будут выглядеть окончательные элементы.
Зачем создавать структуру сайта?
Существует несколько причин для создания структуры веб-сайта, но наиболее важной является то, что он позволяет вам определить и использовать любую возможность для улучшения функциональности, простоты использования и удобства вашего сайта, чтобы удовлетворить ваших пользователей.
Представляя то, как посетители будут взаимодействовать с вашим сайтом, структура веб-сайта может показать любые аспекты его дизайна или функциональности, которые можно улучшить, чтобы привести посетителя к заранее подготовленным действиям. Эти действия могут, дя примера, включать в себя: совершение покупки, подписку на информационный бюллетень или чтение сообщения в блоге. Выявление любых потенциальных сложностей на этом этапе процесса проектирования гораздо лучше, чем обнаружение их после того, как вы определились с цветами, шрифтами и изображениями.
Как создать простую структуру сайта
-
Определите цель веб-сайта.
Прежде чем браться за макет структуры с ручкой и бумагой, вам будет полезно понять цель вашего веб-сайта. Хотя может показаться очевидным, что вы хотите получить столько трафика, сколько ваш сервер может обработать, подумайте, что вы хотите, чтобы все эти посетители видели и делали, пока вы привлекаете их внимание. Должны ли они закончить свой визит покупкой? Должны ли они загрузить приложение? Возможно, вы хотите, чтобы они просмотрели определенную страницу, прежде чем полностью перейти на другой веб-сайт. Какой бы ни была ваша цель, убедитесь, что ваша команда слажена вокруг нее.
- Поймите поток пользователей.
Структура помогает вам идентифицировать и оценивать поведение пользователей , чтобы все в вашей команде понимали, как посетитель должен взаимодействовать с каждой страницей вашего сайта. На этом этапе вы должны указать каждую точку входа, которую посетитель может использовать для перехода на вашу домашнюю страницу, а затем выбрать несколько основных точек переходов и схем поведения на Вашем сайте. Потратьте некоторое время, чтобы обрисовать свой план по ведению пользователей через сайт в текстовом формате, прежде чем делать набросок.
- Определите размер структуры вашего сайта в зависимости от экрана.
Структуры должны различаться по размеру в зависимости от размера экрана, для которого вы их создаете. Мобильные устройства, планшеты и экраны настольных компьютеров будут различаться по размеру, не говоря уже о том, что окно на рабочем столе можно увеличивать или уменьшать. Чтобы получить наиболее точные измерения, используйте измерения в пикселях.
Вот стандартные размеры для разных типов экрана:
- 1080 пикселей в ширину x 1920 пикселей в длину
- 800 пикселей в ширину и 1280 пикселей в длину
- 1200 пикселей в ширину и 19200 пикселей в длину
- 768 пикселей в ширину x 1366 пикселей в длину
- Определите точки конверсии.
После того, как вы набросали и оформили на бумаге или в графической программе структуру сайта, пришло время решить, как именно пользователь должен перемещаться по каждому блоку. На этом этапе вы должны определить какие кнопки, гиперссылки, изображения или другие элементы на странице будут вести посетителя к следующему шагу, пока он не достигнет конечной запланированной вами цели.
- Получите отзывы о структуре.
Ваш веб-сайт должен пройдет несколько тестов и изменений, прежде чем его можно опубликовать для всех пользователей. Сотрудничайте со своей командой, а также с совершенно разными людьми, с заказчиком и потенциальными клиентами, чтобы узнать их мнение о получившемся сайте с точки зрения его структуры.
Примеры структуры сайта
Ниже показаны несколько вариантов представления структуры
Эскиз
Некоторые разработчики начинают свои наброски с помощью карандаша и бумаги или доски. Этот простой нарисованный от руки метод иллюстрирует базовую концепцию, прежде чем тратить время на возню с графическими элементами.
Подробная структура, нарисованная вручную
Схемы, нарисованные от руки, не всегда бывают простыми. Конечно, Вы можете использовать линейку в дополнение к карандашу и бумаге, чтобы создать более подробный дизайн. Тем не менее, для такой детальной работы может быть удобнее использовать цифровые инструменты (стилус, электронную ручку и т.д.), чтобы потом эти эскизы, нарисованные от руки, потом не надо было оцифровывать.
Структура в виде блоков
Структуры низкой точности создаются в цифровом виде и отображают элементы в простых блоках контента, превращая ваш базовый концептуальный набросок в нечто более структурное (масло масленное). Такое представление данных важно для определения того, какие графические элементы необходимо создать и какую текстовую информацию для этих элементов необходимо написать.
- Представление для мобильных устройств
Не забывайте, что адаптивные версии вашего веб-сайта и мобильных приложений также должны быть учтены. Многие дизайнеры даже сначала создают мобильную версию, поскольку посетители веб-сайтов посещают сайты с мобильных устройств чаще, чем когда-либо прежде.
После утверждения основных элементов дизайна вы можете создавать графические элементы, чтобы конкретизировать дизайн. Это называется «мокап».
Программы для создания
Если у вас ограниченный бюджет, вы можете использовать бесплатные инструменты для создания макетов веб-сайтов, такие как Miro . Этот, в частности, даст вам базовые возможности создания структуры, которые отлично подходят для макетов с низкой и средней точностью отображения.
Макет, структура и прототип сайта
Лучший способ понять разницу между макетом, структурой и прототипом — это проиллюстрировать пример: где структура показывает пустое прямоугольное поле, макет показывает получающуюся синюю кнопку, а прототип показывает, как она выглядит при нажатии.
Если Вы хотите разработать функциональный веб-сайт, вы должны сначала составить надлежащий план выполнения дизайна. С структурой вы можете легко и быстро отображать элементы каждой страницы и вносить изменения по своему усмотрению. Когда ваш проект будет близок к завершению, количество ошибок будет значительно уменьшено, если вы заранее потратите свои силы на создание структуры сайта.