Как создать красивый и удобный сайт за 8 шагов

Как создать красивый и удобный сайт за 8 шагов | Сайт Варвары Лялягиной StartBlogUp.com

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

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

Шаг 1. Подумайте о том, каков ваш бренд

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

Характер бренда отражается на сайте, в наружной рекламе, в видео и текстах бренда. Поэтому перед разработкой сайта cформулируйте, каков характер у вашего бренда.

Подберите 3 слова, максимально точно отражающих эмоции и впечатления от коммуникации с вами — то, как вы хотите восприниматься в мыслях клиентов. Это могут быть прилагательные: профессиональный, доступный, дружеский, творческий, гармоничный. А могут быть и существительные: партнёрство, вдохновение, обучение, знания и так далее. Запишите эти слова.


ПОДПИСЫВАЙТЕСЬ НА МОЙ ИНСТАГРАМ С ЕЖЕДНЕВНЫМ ВДОХНОВЕНИЕМ И НАХОДКАМИ ДЛЯ ТВОРЧЕСКИХ ПРЕДПРИНИМАТЕЛЕЙ

Шаг 2. Соберите мудборд сайта

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

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

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

Мудборд для создания красивого сайта | Сайт Варвары Лялягиной StartBlogUp.com
Это пример мудборда для сайта одной из моих клиенток. Как вы думаете, какие характеристики бренда она хотела отразить?

Определите визуальные элементы стиля: цветовую гамму, шрифтовую пару, характерные графические элементы — линии, стрелки, обводки, выноски и другие, которые вам хотелось бы использовать. Проще всего это сделать на слайде в Power Point, Pinterest или графических редакторах вроде Canva.

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

Шаг 3. Составьте портрет своей идеальной клиентки и читательницы

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

Максимально чётко опишите человека, которого вы хотите видеть на своём сайте. Не общими словами «Женщина, 25-40 лет, двое детей», конкретизируйте, чтобы её образ стал объёмным и реалистичным.

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

Коллаж идеальной пользовательницы сайта| Сайт Варвары Лялягиной StartBlogUp.com
Я не люблю ограничиваться словесным портретом, а составляю коллаж, который отражает характер и интересы моей идеальной читательницы. Это творческая задача помогает действительно представить себе мою клиентку и пользовательницу сайта.

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

Шаг 4. Сформулируйте главное действие, которое должна выполнить посетительница сайта

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

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

Шаг 5. Проанализируйте сайты конкурентов и соберите референсы

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

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

Проанализируйте сайты конкурентов и соберите референсы | Сайт Варвары Лялягиной StartBlogUp.com
Для создания скриншотов страниц я использую расширение для Хром браузера GoFullPage и сервис Skitch, в котором можно разметить любой скриншот или картинку, надписать комментарии и выделить важные элементы.

Шаг 6. Нарисуйте карту сайта для удобной навигации

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

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

Карта сайта для удобной навигации | Сайт Варвары Лялягиной StartBlogUp.com

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

Для составления ментальных карт и схем подойдут:

Шаг 7. Нарисуйте макеты основных страниц сайта

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

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

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

Макет сайта, который позволит создать сайт красивым и удобным | Сайт Варвары Лялягиной StartBlogUp.com

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

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

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

Шаг 8. Составьте техзадание для разработчика или делайте сайт самостоятельно

Если все предыдущие шаги сделаны, то у вас будут все данные для составления внятного и исчерпывающего техзадания разработчику:

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

Даже если сайт и блог вы будете делать сами, то вам будет на что опереться и дело пойдёт быстрей и легче. А если решите делегировать разработку сайта, то с таким ТЗ вы автоматически становитесь идеальным заказчиком, который знает, чего хочет, и с которым приятно работать. Проверено на себе!


Понравился пост, но нет времени готовиться к созданию сайта сейчас?

Сохраняйте пост к себе в Pinterest. Когда нужно будет подготовиться и сделать сайт, эта информация будет у вас под рукой.

Как создать красивый и удобный сайт за 8 шагов | Сайт Варвары Лялягиной StartBlogUp.com
Как создать красивый и удобный сайт за 8 шагов | Сайт Варвары Лялягиной StartBlogUp.com


Добавить комментарий

Ваш адрес email не будет опубликован.