8 заповедей процесса веб-дизайна (для новичков и без кода)
Опубликовано: 2021-11-01
Узнайте, как создать успешный веб-сайт, следуя структурированному процессу разработки веб-сайта.
Наша гипотеза заключается в том, что вы уже нашли доменное имя и хостинг-провайдера.
Если вы еще не выбрали свой хост, мы очень рекомендуем нашего партнера Cloudways .
В приведенном ниже примере представлены шаги для случая, когда вы создаете веб-сайт для себя. Если веб-сайт предназначен для клиента, могут возникнуть новые шаги с точки зрения планирования проекта, установки сроков, контракта и многого другого. Но в основе вам все равно придется придерживаться шагов, представленных ниже.
Теперь, вот шаги:
- Определение области применения : какие потребности должен удовлетворять веб-сайт? С кем общается сайт? Каковы ее цели и мотивы? Какие предприятия имеют тот же масштаб и целевую аудиторию, что и вы?
- Определение карты сайта веб-сайта : какие веб-страницы и функции помогают бизнесу и аудитории в достижении их целей?
- Создание контента : подготовка копии для страниц сайта;
- Создание визуального бренда : подготовка цветовой палитры, шрифтов и графики для использования в дизайне вашего веб-сайта, которые в конечном итоге сформируют вашу визуальную идентичность;
- Wireframing: набросок макета веб-страницы;
- Дизайн веб -сайта : при создании реального веб-сайта помните об ограничениях используемых вами инструментов;
- Тестирование : убедиться, что все работает, от ссылок до форм и кнопок. Протестируйте веб-сайт в различных браузерах и устройствах, чтобы убедиться, что он работает правильно;
- Запуск: поднимите шум перед выходом в эфир с тщательно спланированной коммуникационной стратегией.
Давайте возьмем их один за другим.
Этапы процесса разработки веб-сайта
1. Идентификация области применения
На этом этапе вам и вашей команде нужно будет найти ответы на некоторые из приведенных ниже вопросов:
- Для кого сайт?
Привлекательный веб-сайт может иметь свои преимущества, но если вы хотите, чтобы посетители вашего веб-сайта вложили свои деньги или время, это означает, что вам нужно копать больше, чтобы убедить их в том, что это обязательство того стоит. Для того чтобы быть убедительным, вам нужно будет понять свою целевую аудиторию, понять ее потребности, внутренние и внешние мотиваторы.
Это копание также означает, что вам нужно создать продукт, который будет полезен и удовлетворит чьи-то потребности.
Например, предположим, что у меня есть хобби — делать композиции из бумажных цветов, и я хочу развить его и превратить в бизнес. Кто-нибудь делает бумажные цветы? Где я могу найти этих людей?
Что ж, я могу подумать, что организаторам свадеб и будущим невестам может понадобиться такой вариант.
Но я должен пойти еще дальше. Каждой невесте нужны мои бумажные цветы или просто невеста?
Это означает, что вам нужно будет провести некоторые исследования и проверить своих конкурентов. Есть ли другие торговцы бумажными цветами? Вы также конкурируете со старыми добрыми цветочными магазинами. Что тогда будет вашей добавленной стоимостью или вашим уникальным ценностным предложением?
- Что посетители вашего сайта ожидают найти на вашем сайте?
Возвращаясь к нашему примеру, вероятно, ваши посетители захотят увидеть разнообразие продуктов, цветов, информацию о доставке (им может потребоваться дополнительная осторожность, потому что бумажные цветы хрупкие) и т. д. Как насчет некоторых упоминаний о том, что бумага перерабатывается? ? Возможно, ваши клиенты очень хорошо осознают свое влияние на окружающую среду, и им небезразличны такие детали.
Может ли кто-нибудь арендовать цветы?
А что, если вы включите несколько отзывов? Может быть, вы создали несколько бумажных цветочных композиций для свадеб своих друзей.
Видишь, к чему я клоню? Вам нужно провести исследование, прежде чем переходить к дизайну веб-сайта.
- Как выглядят конверсии?
Речь идет о регистрации на курс, покупке продукта, подписке на рассылку?
В случае с понедельником вы можете легко определить их конверсии на главной странице. 
Основная конверсия очевидна из призыва к действию «Начать», который расположен прямо над сгибом, в центре.
Еще одна микроконверсия — это регистрация на конференцию, которую вы можете заметить из сообщения в левом верхнем углу.
Еще одна микроконверсия — «Контакты продаж».
Как насчет вашего сайта, есть ли основная конверсия? Есть какие-то второстепенные?
- Как выглядит путь клиента?
Карта пути клиента — это визуальное представление пути, который посетитель проходит через ваш веб-сайт от входа до достижения желаемой цели и ухода с него.
Карта путешествия клиента должна включать такую информацию, как страницы, которые посещаются и в каком порядке, шаги, необходимые для того, чтобы посетитель веб-сайта достиг своих целей, точки взаимодействия между вашей компанией и посетителями веб-сайта (формы, чат и т. д.), потенциальные точки трения.
Путь клиента не фиксирован. Вы начинаете с предположения, а затем корректируете его по ходу дела. Вы можете использовать такие инструменты, как Google Analytics, для анализа поведения веб -сайта и оптимизации на основе реальных данных.
2. Определение карты сайта веб-сайта 
Источник
Теперь, когда путь клиента ясен, пришло время создать карту сайта. Карта сайта веб-сайта используется для создания информационной архитектуры веб-сайта и объясняет отношения между различными страницами.
Вы можете создавать карты сайта в различных инструментах, от Excel до Figma.
3. Создание контента 
Теперь, когда структура веб-сайта установлена, пришло время создать контент для отдельных страниц.
Вот несколько лучших практик, когда дело доходит до копирайтинга:
- Используйте слова и понятия, знакомые вашим идеальным пользователям;
- Не используйте пух и жаргон;
- Старайтесь общаться так, как если бы вы общались при обычной встрече лицом к лицу. Таким образом вы создадите ощущение знакомства;
- Пишите в настоящем времени и избегайте пассивного залога;
- Всегда проверяйте читабельность. Для этого можно использовать такие инструменты, как Readable .
- Проверьте свои заголовки на друзьях, незнакомцах, коллегах. Как говорит Дэвид Огилви:
«В среднем в 5 раз больше людей читают заголовок, чем основной текст. Когда вы написали свой заголовок, вы потратили восемьдесят центов из своего доллара».
Это означает, что заголовки жизненно важны на веб-сайте.
Попробуйте оптимизировать свой контент вокруг определенных релевантных ключевых слов для вашей аудитории (SEO). Вы можете использовать такие инструменты, как тренды Google (бесплатно), Ubersuggest (бесплатно) или Ahrefs (платно).
- Используйте систему копирайтинга AIDA.
A – Внимание : создавайте контент, который привлекает внимание, пробуждает любопытство и убеждает вашу аудиторию в том, что ей нужно больше узнать о вашем бренде.
I – Интерес : дайте вашим посетителям повод оставаться вовлеченными. Ключевым моментом здесь является сделать проблему личной, чтобы вы говорили только с потенциальным клиентом и ни с кем другим.
D – Желание : здесь вы показываете посетителям своей домашней страницы, как ваши предложения решают их проблемы/боли. Здесь вы можете начать объяснять функции вашего продукта, уделяя особое внимание тому, как эти функции могут улучшить их жизнь.
A – Действие : пришло время убедить потенциальных клиентов действовать: купить, подписаться, скачать бесплатно, начать пробную версию и т. д.
4. Создание визуального бренда
Этот шаг не всегда должен быть вашим 4-м шагом. Вы можете начать еще раньше в этом процессе.
Визуальная идентичность относится к тому, как вы формируете восприятие своего бренда.
Это целый процесс сам по себе.
Здесь вам нужно будет:
- Определите, как должна выглядеть ваша графика . Будете ли вы использовать формы, 3D-графику, иллюстрации?
Источник
- Определите типографику вашего сайта ;
Источник
- Выберите цветовую палитру . От цветовой палитры можно перейти к руководству по стилю, где можно установить цвета ссылок, заголовков, кнопок, фона и т. д. Для этого можно использовать такие инструменты, как цветовой круг Adobe .
Источник
- Выбирайте изображения , которые рассказывают историю вашего бренда;
Источник: https://convertsquad.com/blog/
- Создайте свой логотип
Источник
- Подготовьте физические активы (упаковка продукта и т. д.).
Источник
Большинство из вышеперечисленных элементов можно использовать для создания мудборда. Когда вы соберете свои шрифты, графику, цвета на доске настроения, вы сможете лучше понять общее видение настроения веб-сайта. Каким будет ваш общий тон и голос: светлым или темным? Формально или игриво? 
Источник
5. Каркас 
Источник
Вайрфреймы — это эскизы веб-страницы или приложения. Вы можете нарисовать их вручную, создать в Google Docs, Sketch или Figma , в зависимости от сложности вашего сайта. Каркас используется для размещения контента и функций на странице. Он должен указывать дизайнеру, где он должен размещать видео, изображения, заголовки, блоки контента, кнопки и т. д. Хорошо использовать каркасы, прежде чем переходить к дизайну, потому что они позволяют вам быть более гибкими. Изменить структуру каркаса проще, чем структуру готового веб-сайта.
6. Дизайн сайта 
Источник
Теперь мы говорим о бизнесе!
У нас есть контент, вайрфреймы, визуальные элементы, теперь пора приступать к работе.
Как уже упоминалось в заголовке, вам не нужно быть веб-дизайнером или программистом, чтобы создать веб-сайт. Существует множество инструментов, которые помогут вам создать веб-сайт без кода. Они называются конструкторами страниц.
Большинство из них позволяют настроить каждый дюйм вашего дизайна и сделать его адаптивным.
Внутри WordPress вы можете использовать наш собственный конструктор Colibri или, например, Elementor. За пределами WordPress очень популярны Wix и Squarespace. Эти инструменты могут предоставить вам шаблоны, которые вы можете дополнить, добавив свои собственные разделы, визуальные элементы и контент.
Теперь, если ваш дизайн требует определенных анимаций, эффектов, вам может понадобиться добавить код.
7. Тестирование
Хорошо, допустим, ваш контент и визуальные эффекты готовы. Ваша работа еще не готова. Пришло время убедиться, что все работает: у вас нет ссылок, которые ведут в никуда (они же битые ссылки или 404), что все ваши кнопки и формы работают, что сайт хорошо выглядит в большинстве браузеров и устройств.
Теперь, перед запуском, вы можете немного протестировать, как ваш сайт воспринимается внешними людьми. Таким образом, вы сможете избежать попадания в ловушку собственных предубеждений. Для этого вы можете провести простое исследование пользователей: 5-секундный тест . Это метод, который помогает вам измерить, какое первое впечатление пользователи получают в течение первых пяти секунд просмотра домашней страницы, например.
8. Запуск
Теперь, когда вы запускаете, вы просто нажимаете «Опубликовать», и все готово. Нет, вам нужно создать шумиху, запустить несколько PR-кампаний, заявить о себе в социальных сетях, чтобы люди знали, что вас нет!
И это обертка людей. Теперь у вас есть правильные шаги для процесса веб-дизайна.
Удачного создания сайта!
Если вам понравилась эта статья, и вы хотите узнать больше о том, как создать веб-сайт на WordPress , обязательно подпишитесь на канал Colibri на Youtube и следите за нами в Twitter и Facebook!