Когда и зачем нужно проектирование сайта: основные этапы

Изучаем такой процесс, как проектирование сайта. Разбираем каждую стадию – от разработки базовых концепций до первичного тестирования ресурса.

Что представляет собой этап проектирования сайта?

Речь идет о проектировании в прямом смысле слова. Это совокупность процедур, которые выполняются командой проекта до того, как начинается непосредственное создание сайта, написание кода, наполнение его контентом и продвижение в поисковиках вместе с социальными сетями.

В список задач по планированию входят наработки идей, сбор команд, распределение обязанностей, анализ целевой аудитории, подготовка инструментов, выбор фреймворков и т.п.

Зачем нужен этап проектирования?

Старая поговорка гласит: «Если вы не планируете ничего, вы планируете провал». Создавать сайт без плана – это как строить здание без готового проекта. Итог будет непредсказуем. Элементы интерфейса будут в неподходящих местах, функции будут работать с ошибками, на многих устройствах страницы будут выглядеть некорректно, а общие идеи дизайна противоречить друг другу.

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

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

Особенности этого этапа разработки

На этапе проектирования можно грамотно оценить временные затраты и рассчитать бюджет с запасом (почти нереально, но постараться можно). Подобный фундамент помогает решить и другие проблемы:

• сократить общее время разработки (за счет исключения ненужного общения и обсуждения во время работы);
• избежать горящих дедлайнов и срывов сроков сдачи заказа;
• избежать реализации второстепенных задач в то время, как есть первостепенные и более значимые;
• сохранить дополнительное время на отладку, тестирование и проверку созданного ресурса;
• сэкономить деньги, которые могут уйти на «переработку» элементов интерфейса, функций и прочих аспектов;
• сократить шансы на провал или реализацию проекта, далекого от того, что изначально задумывался его авторами.

Анализируем требования заказчика

Если это не персональный проект, то начать стоит с грамотного общения с клиентом.

В вебстудии и к разработчикам-одиночкам обращаются люди, не до конца понимающие собственные цели. Люди приходят с абстрактными идеями, которые непросто преобразовать в реальный проект.

Поэтому придется долго и муторно общаться с заказчиком, выясняя все детали. Но важнее всего выяснить у него две вещи:

1. Зачем он вообще нуждается в сайте? Если для заработка, то какие цели он ставит перед ресурсом (будет это продажа товаров или встроенная реклама, например)?
2. Как сайт будет выглядеть (под этим может подразумеваться формат подачи информации) и работать?

Прочие аспекты можно рассмотреть по ходу дела, опираясь на этапы, прописанные в этой статье.

Ставим цели и задачи

Представим, что сайт делается не для заказчика, а для себя. Готовьтесь отвечать на вопросы.

Зачем нужен этот сайт? Может, чтобы увеличить популярность бренда или создать некий переходный «мост» между потенциальными клиентами и собственным брендом? Или сайт нужен, чтобы продавать на нем товары онлайн? Или же это будет ресурс техподдержки для существующих клиентов компании?

Важно ответить на этот вопрос до начала разработки, так как от этого зависит буквально все: бюджет, необходимая квалификация нанимаемых специалистов, сроки, количество этапов разработки и т.п.

Например, для крупного интернет-магазина потребуется аренда мощного сервера, способного выдержать сложные системы в духе «Битрикс», саму CMS придется приобретать отдельно, нанимать сотрудников, умеющих с ней работать и т.п.

А одностраничные лендинги, напротив, требуют минимума усилий и могут быть созданы компактной командой из одного вебмастера и верстальщика. Тогда можно сократить расходы и запланировать меньшее количество шагов, предусмотрев все сроки.

Изучаем целевую аудиторию

Общая ошибка для огромного количества предпринимателей, разработчиков, бизнесменов и вебмастеров – некорректные ориентиры. Они фокусируются исключительно на своих предпочтениях. Дизайн, функциональность и решаемые задачи остаются тесно связанными с интересами тех же людей, что делают ресурс.

Должно быть наоборот – во главе угла необходимо ставить интересы, предпочтения и взгляды потенциальных посетителей сайта. Важно проводить опросы, изучать клиентов, выстраивать их «портреты» и узнавать, как они пользуются подобными сервисами.

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

В Комьюнити уже рассказывалось ранее, как определить целевую аудиторию и использовать эти данные при продвижении своего продукта.

Смотрим на решения конкурентов

Хорошим источником для вдохновения могут послужить конкуренты, работающие в той же сфере бизнеса. Анализ сайтов-конкурентов дает возможность не только разыскать решения для заимствования, но и заметить недочеты, которые можно «закрыть» с помощью собственного решения.

Нужно сесть с блокнотом, открыть сайт оппонента и записать полученные данные в два столбца: первый будет со списком вещей, которые у конкурентов получаются хорошо, второй – со списком вещей, которые у конкурентов могли бы быть и получше. Недочеты оппонентов могут стать фундаментом для успеха вашего ресурса. Наличие в нем недостающих функций и более продвинутых решений позволит завоевать новую аудиторию, которую уже упустил конкурент.

Можно анализировать не только видимую часть конкурентных продуктов, но и взять в расчет их целевую аудиторию. Узнать об их интересах, о том, чем они недовольны в существующих продуктах и как это можно улучшить. Еще один плацдарм для создания и развития успешного сайта.

Оцениваем/расписываем бюджет

Важно правильно планировать бюджет. Бюджет должен принимать четкое значение, включающее в себя верхние и нижние границы.

В бюджет должны войти затраты на:

• дизайнера, создающего систему шрифтов, палитру, общую стилистику и настроение будущего ресурса;
• программиста, который будет писать логику для вашего сайта/приложения;
• веб-хостинг, т.е. площадку для разработки и размещения будущего ресурса;
• программное обеспечение, плагины и расширения для CMS, необходимые в ходе разработки.

Прежде чем тратить деньги в первой попавшейся веб-студии, надо изучить рынок, посмотреть, кто предлагает наиболее выгодные условия. При этом нужно экономить грамотно, не просто выбирая самые дешевые предложения на рынке, ведь это может стать чревато еще большими затратами впоследствии.

Используйте этот этап проектирования сайта не как способ сэкономить, а как способ минимизировать количество «неприятных финансовых сюрпризов» по ходу создания ресурса.

Распределяем роли

Работая над сайтом в команде, нужно четко распределить обязанности каждого сотрудника.

• Акционеры. Пусть занимаются вложениями, финансированием проекта и не лезут в разработку.
• Маркетологи. Займутся продвижением продукта и разработают рекламную стратегию.
• Разработчики. Реализуют идеи предпринимателей, написав соответствующий код.
• Копирайтеры. Заполнят сайт контентом (для привлечения публики и повышения позиций ресурса в поисковой выдаче).
• Верстальщики. Создадут структуру, каркас сайта и воплотят в жизнь идеи дизайнеров.
• Дизайнеры. Создадут образ проекта, организуют визуальные компоненты.

Во-первых, такой подход позволяет сразу выдать корректный список задач каждому сотруднику компании. Во-вторых, членам команды не придется вмешиваться в работу друг друга. Каждый будет заниматься своим делом и не будет срывать дедлайны.

Нужна логика на каждом этапе работы. Чтобы не было мешанины, а каждый работник не превратился в фуллстек-разработчика-дизайнера-маркетолога-системного администратора и далее по списку.

Собираем контент, необходимый для ресурса (инвентарь)

Под контентом для сайта подразумевается не только информационный материал (если мы делаем блог или новостной ресурс), но и разного рода техническая информация вкупе с политикой конфиденциальности и т.п.

Всю эту информацию нужно подготовить заранее, чтобы не тратить время на создание разделов и контента в них.

Также стратегия наполнения сайта подразумевает под собой планирование презентации контента в заранее продуманном виде. Это звучит абстрактно и сложновато, но на деле следует лишь решить, в каком виде будет подаваться информация на ресурсе. Будет ли это что-то вроде маленького авторского блога, магазин с короткими описаниями товаров, полноценный ресурс с галереей, информационными разделами и т.п.

Было бы неплохо на этом этапе выработать некую стилистику подачи данных в соотвествии с предпочтениями целевой аудитории и направленностью проекта.

Создаем базовую структуру

Наполнение сайта подразумевает не только добавление тех вещей, которые кажутся важными вам и вашим пользователям. Есть регламенты. Например, различные юридические аспекты, политики конфиденциальности и прочее. Лучше заранее продумать их появление на страницах.

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

Можно создать интеллект-карту с корректной визуализацией получившейся структуры. Допустим, мы делаем сайт, посвященный электрогитарам и музыке в целом. Примерная схема контента может выглядеть так:

• Меню с основными секциями сайта, где расположен ключевой контент, за которым приходят посетители.
• Секция с инструкциями. Здесь могут быть статьи по теме настройки или выбора инструмента (с ссылками на покупку соответствующих товаров, если мы занимаемся торговлей и имеем онлайн-магазин).
• Секция с обзорами. Сюда можно поместить материалы аналогичного характера.
• Утилитарные разделы. Здесь расположены пользовательские соглашения и политика конфиденциальности.
• Секция с описаниями. Тут хранится информация о бренде, контакты и т.п.

Прописываем стратегию SEO

Сложно переоценить важность оптимизации сайта для поисковиков. Это ваша аудитория и, соответственно, ваша прибыль. Для работы нужен SEO-специалист, обладающий подходящими навыками.

1. Нужно выяснить, по каким запросам пользователи переходят на сайты конкурентов.
2. Создать корректное семантическое ядро.
3. Написать контент, подогнав его под требования SEO (под ключевые запросы).
4. Проработать тактику оптимизации ресурса (улучшить верстку, внедрить микроразметку, повысить скорость загрузки страниц, добавить обратные ссылки и т.п.).

Адаптация каждого аспекта под требования SEO-специалиста позволит вытащить проект на верхние позиции в поисковой выдачи и удерживать его там без лишних затрат по времени. Лучше задуматься об этом сразу и добавлять на ресурс материалы, соответствующие требованиям SEO, чтобы потом не тратить деньги и время на переоптимизацию.

Выбираем CMS (языки, фреймворки)

Многие заказчики, будучи далекими от кода предпринимателями, не могут точно сказать, какие программные инструменты хотели бы использовать на своих проектах. Из-за этого по ходу работы могут возникнуть дополнительные технические сложности.

Определившись с инструментарием, будет проще подобрать в команду подходящих специалистов. К примеру, можно будет грамотно составить вакансии для найма программистов и дизайнеров. Для создания более простых сайтов или при отсутствии хорошего специалиста по созданию бэкенда, можно использовать готовые CMS в духе WordPress, чтобы ускорить развертку сайта и заметно сократить штат программистов (и затраты на них).

Готовим инструментарий и ресурсы (чтобы все было под рукой)

Возможно, в ходе работы понадобится программное обеспечение или оборудование, которое требует дополнительных вложений. Да, такие моменты стоит заранее прописывать в бюджет. В противном случае в ходе работы может не оказаться под рукой необходимых инструментов.

Если вы наняли команду разработчиков, то предоставьте им компьютер, рабочую среду надлежащего качества и так далее.

А еще на каждом этапе разработки нужно снабжать сотрудников необходимым контентом. Чтобы программистам не приходилось начинать работу над анимацией до того, как будет готов общий стиль.

Разрабатываем Call To Action-элементы

Один из важнейших элементов любого веб-ресурса или приложения – CTA-элемент. Это кнопка, форма регистрации, форма для ввода телефона или что-то в таком духе. Любая деталь, даже самая небольшая и очевидная, влияющая на доходность ресурса.

Call To Action дословно переводится как «призыв к действию». Под действием, к которому мы призываем пользователей, подразумевается регистрация (то есть передача данных или пополнение базы номеров, которую позже можно задействовать для своей пользы) или прямая покупка (если мы продаем что-то, то это и есть цель создания ресурса, тут с выбором CTA проблем не возникнет).

Элемент может быть представлен в любом виде. Главное, чтобы он привлекал аудиторию и приносил деньги. Лучше продумать эффективность таких аспектов сайта заранее, чтобы потом не тратить время на первичное A/B-тестирование и переработку дизайна.

Сделать «набросок» (разработка прототипа)

До этого все идеи мы презентовали с помощью интеллект-карт, схем и списков задач. Пришло время сделать что-то более полезное. Речь идет о прототипе.

Под этим термином в проектировании сайтов подразумевается полноценный работающий проект в минимальном масштабе. Это каркас, которым можно пользоваться. Он демонстрирует примерный пользовательский опыт и дает возможность уже на этой стадии многие аспекты готовящегося проекта переосмыслить.

Прототип дает возможность начать тестировать сайт на настоящих людях, получив от них полезную обратную связь.

Начать разработку логики и доработку дизайна

Хороший веб-дизайн станет решающим фактором при оценке качестве получившегося продукта. Сайт должен быть красивым и удобным для использования. Для этого желательно иметь в штате грамотных UI- и UX-дизайнеров.

Базовые принципы дизайна включают в себя:

1. Систему навигации по ресурсу, удобную, предсказуемую и понятную для пользователей любого уровня.
2. Шрифты, которые можно комфортно читать на любом экране и при любом внешнем освещении. Везде должен быть ощутимый контраст, чтобы даже люди с плохим зрением могли справиться с чтением без включения специальных режимов отображения информации.
3. Верстка должна соответствовать современным стандартам и быть адаптивной, то есть автоматически подстраиваться под любое разрешение, диагональ и соотношение сторон экрана.
4. Функциональность не должна влиять на скорость загрузки. Старайтесь оптимизировать код и контент, чтобы избежать задержек при открытии страниц.
5. Нужно оценивать структуру ресурса в перспективе. Чтобы при увеличении количества информации на нем не возникли какие-то сложности (в производительности, в визуальном представлении и т.п.).

Проводим тестирование

Мы уже почти закончили проектирование веб-сайта. Получившееся детище можно расценивать как полноценный продукт. Но не стоит спешить с релизом. Вы же наверняка правильно расставили приоритеты и не сорвали сроки. Значит, у вас еще есть время и на тестирование (хотя на это тоже нужно выделять время на ранних этапах планирования).

К тестированию привлекают настоящих людей, способных оценить качество продукта, выявить затаившиеся ошибки и предложить более удачные решения для тех или иных функций. Люди будут открывать сайт на разных устройствах и в разных браузерах. Их уникальный опыт позволит узнать о ресурсе больше, чем тестирование исключительно среди команды, работающей над сайтом.

Главное, чтобы созданный продукт функционировал без ошибок и одинаково хорошо выглядел на всех существующих устройствах. Для этого стоит сконцентрироваться на длительном и скрупулезном тестировании, а после этого исправлять недочеты. 

На этом проектирование окончено.

Подбираем инструменты для проектирования (бонус)

Есть несколько приложений, которые помогут вам на разных стадиях проектирования сайта.

• MindNode/Xmind – удобные утилиты для macOS и Windows, помогающие создавать интерактивные интеллект-карты. С помощью них можно в цифровом формате сделать насыщенную и многогранную схему, включающую в себя все необходимые аспекты ресурса.
• Trello/Asana – приложения, необходимые для делегирования задач разным частям команды. Каждый сотрудник будет видеть свой спектр работ, сможет автоматически отчитаться о нем начальству, «завершив» задачу в программе.
• Notion/Evernote – программы для хранения контента, создания набросков статей, обмена большим количеством данных и т.п. На их основе можно сделать целую мини-википедию для своего проекта, чтобы хранить все, что так или иначе связано с вашим ресурсом.
• Slack/Telegram – тут все должно быть понятно. Это средства общения, удобно организованные для взаимодействия разных команд.
• Flinto/Figma – у вашего дизайнера 100% будет подходящий ему инструмент для работы, но Flinto или Figma поможет вам работать с ним в коллаборации или же сделать собственные наброски интерфейса.
• SlickPlan – комбайн для проектирования сайта. В нем можно создать карту ресурса (расположение элементов и взаимосвязь между отдельными страницами), распределить контент (видео, тексты, картинки), сделать прототип интерфейса и базовый дизайн.

Выводы

На этом все. По началу такой план может показаться избыточным, но это именно то, что вам нужно, чтобы держать разработку под контролем и ничего не упускать из виду. Не тратьте время на пустые эксперименты, уделите время проектированию сайта, и тогда его релиз пройдет гораздо более гладко.