Процесс создания сайта в семи простых шагах

Узнайте, как структурирование рабочего процесса поможет вам создавать больше сайтов с высокой конверсией — быстрее и продуктивнее.

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

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

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

Лично мне такой процесса разбивается на семь ступеней:


1. Определение цели. Здесь мы вместе с клиентом работаем над тем, чтобы определить, какие задачи должен выполнять сайт. Над тем, каково его назначение.

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

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

4. Создание контента. Теперь, обладая целостной картиной сайта, мы можем приступить к написанию контента для отдельных его страниц, не упуская из виду поисковую оптимизацию, чтобы всё содержание страниц концентрировалось на одной теме. Очень важно, чтобы у вас имелся реальный контент, чтобы можно было работать с ним на следующей стадии:

5. Визуальные элементы. Теперь, когда архитектура сайта и кое-какой контент у нас сформированы, мы можем переходить к символике бренда. Тут у разных клиентов по-разному — у некоторых она уже проработана, но возможно и такое, что вам придется отстраивать визуальный стиль с самого начала. В этом процессе могут прийти на помощь такие приемы и инструменты, как мозаичное расположение стилизованных картинок, «панель визуальных ощущений» и коллажи.

6. Тестирование. На этот момент у вас уже имеются все страницы, решено, как они будут показываться посетителям сайта, значит, настало время убедиться, что всё это работает. Сочетайте просмотр сайта вручную на самых разнообразных устройствах со сканерами-автоматами, чтобы выявить все его изъяны от каких-то неудобств пользования до просто битых ссылок.

7. Запуск! Если всё прекрасно работает, то пора планировать запуск и стартовать! Планирование должно включать в себя как назначение собственно даты старта, так и стратегии оповещения об этом событии, т.е. как мир узнает об этом запуске, когда он произойдет? И после этого нужно сбрасывать кокон.

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



1. Определение цели

Весь начальный этап нужен для того, чтобы понять, как вы способны помочь своему клиенту.]

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

• Для каких людей создается сайт?

• Что они хотят на нем найти или сделать?

• Основная цель сайта — информирование, продажи или развлечения?

• Нужно ли сайту напрямую доносить основной посыл бренда, или он станет частью более широкой стратегии брендинга со своим, уникальным фокусом?

• Какие имеются сайты у конкурентов (если они есть вообще), и что наш сайт будет заимствовать у них, а в чем будет от них отличаться?

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

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

Чтобы узнать побольше об этом этапе проекта, почитайте статью «Процесс современного веб-дизайна: определение целей».


Инструменты стадии постановки цели

• Собирательный образ посетителя

• Творчески составленное техзадание

• Анализ ресурсов у конкурентов

• Слагаемые бренда



2. Определение масштаба проекта

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

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

Анатомия ленточной диаграммы Гантта.

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


Инструменты для определения масштаба проекта

Договор

• Ленточная диаграмма (или любая другая форма визуализации во времени)



3. Создание карты сайта и его каркаса

Карта простого вебсайта. Заметьте, как она отражает иерархию страниц.

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

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

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

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

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


Инструменты для создания карты сайта и его каркаса

• Ручка или карандаш с бумагой

Balsamiq

Moqups

Sketch

Axure

• Webflow

Slickplan

Writemaps

Mindnode



4. Создание контента

Когда дело доходит до контента, то SEO —залога лишь половины успеха.

И вот, каркас вашего сайта готов. Теперь на очереди самый важный компонент ресурса — текстовый контент.

Контент служит двум основным целям:


Цель 1. Контент создает заинтересованность и побуждает к действию

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

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


Цель 2. SEO

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

Умение правильно употреблять ключевые слова и фразы играет важную роль в успехе любого сайта. Я всегда пользуюсь инструментом под названием Планировщик ключевых слов (Google Keyword Planner). Он показывает объем поисковых запросов под возможные ключевые слова или фразы, поэтому вы можете подогнать их под то, что люди хотят найти в Сети. Поисковики становятся всё умнее, и ваши стратегии контента должны от них не отставать. Инструмент Google Trends также удобен для определения терминов, которыми люди оперируют при поиске.

У меня процесс создания сайта строится на основе требований SEO. Слова, которые вы хотите продвинуть в ранжировании выше других, должны помещаться в тег <title> — чем ближе к началу, тем лучше. Также ключевые слова должны фигурировать в теге <H1>, мета-теге description и содержимом тега <body>.

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

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

Слишком много для поста в блоге, Лиза, но работа блестящая!


Классные инструменты для создания контента

• Google Docs

Dropbox Paper

Quip

Gather Content


Удобные инструменты для SEO

Google Keyword Planner

Google Trends

Screaming Frog’s SEO Spider



5. Визуальные элементы

Стили: бесплатный комплект стилевого оформления, созданный Мэтом Вогелзом

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

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

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

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

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


Инструменты визуального дизайна

• Обычные подозреваемые (Sketch, Illustrator, Photoshop и т.п.)

Визуальные ощущения, комплекты стилевого оформления, коллажи

• Пособия по художественному оформлению



6. Тестирование

Не бойтесь, так бывает не всегда.

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

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

Примечание редактора: Я всячески рекомендую для этой стадии сервис Screaming Frog’s SEO Spider. Он позволяет выполнить большинство из стандартных задач аудита, и до 500 адресов страниц (URL) там можно проверить бесплатно.

Бросьте последний взгляд на мета-теги title и description своих страниц. Даже порядок слов заголовка страницы может повлиять на ее ранжирование в поисковике.

В блоге Webflow есть замечательная статья о предшествующем запуску процессе.


Инструменты для проверки работоспособности сайта

W3C Link Checker

SEO Spider



7. Запуск

И вот настал черед любимого всеми этапа в создании сайта: Когда всё тщательнейшим образом протестировано, и вы всем на сайте довольны, пора его запускать.

Не нужно так переживать, но… мы на самом старте!

Не стоит ожидать, что всё пройдет без сучка и задоринки. Могут обнаружиться еще какие-то элементы, требующие настройки. Веб-дизайн — процесс текучий и непрекращающийся, требующий постоянного внимания.

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

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

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



А как выглядит этот процесс у вас?

Походит ли у вас процесс создания сайта на то, что описано здесь, или он радикально отличается? Нам бы хотелось узнать об этом всё, поэтому поделитесь этим в своих комментариях.

Автор: МЭТТ МИЗИ

Источник: https://webflow.com/blog/the-web-design-process-in-7-simple-steps

Перевод: Hi-Tech English


Комментарии для сайта Cackle
Автор поста:
Соколов Максим
Основатель академии