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

Разработать сайт можно и за $50, и за $50 000. Всё зависит от задач, бюджета и исполнителя. Подготовили инструкцию для тех, кто хочет сделать сайт своими силами. 

Задача и структура сайта

Продумайте основную идею и цели сайта. Например, у вас доставка суши. Раньше заказы принимали только через Instagram, а теперь решили запустить сайт. Вы хотите решить сразу несколько задач бизнеса:

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

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

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

• Главная (почему мы, наши предложения, команда, как заказать).
• Меню (разделить на роллы, суши, сеты, напитки)
• Доставка и оплата.
• Контакты.
• Личный кабинет/Корзина. 

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

Как сделать схему сайта и в чем собрать прототип

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

Чтобы оптимально продумать блоки будущей страницы, рекомендуем:

• тщательно проанализировать конкурентов — причем, можно брать не только из категории суши, но и близких вам: доставка еды, сайты ресторанов и кафе;
• не копировать слепо структуру страниц и содержание: нужно подсмотреть, «украсть» идеи, сделать свою версию;
• посмотреть примеры из других сфер бизнеса: например, как интернет-магазины оформляют комбо из нескольких товаров, а сервис проката принимает оплату, а приложения предлагают подписку;
• изучить подборки и рейтинги сайтов: например, madeontilda, httpster, awwwards, siteInspire, onepagelove — примеры можно потом показать дизайнеру, сориентировать в ваших ожиданиях, стиле.  

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

Как это сделать:

• возьмите несколько листов А4;
• нарисуйте прямоугольник и разделите его на условные слайды/экраны — 3-5 на листе;
• каждый слайд отведите под смысловой блок: например, 1 слайд — заголовок о компании, подзаголовок с сутью предложения и кнопка «Получить консультацию». 

Чтобы сделать прототип понятным и для себя, и для дизайнера, придерживайтесь стандартов:

• прямая линия — текст;
• жирная прямая линия — заголовок;
• картинка — прямоугольник с перечеркнутыми линиями;
• кнопки — небольшие прямоугольники;
• блок, в котором изображение занимает весь экран — такой же перечеркнутый прямоугольник;
• видео — прямоугольник, внутри которого есть кнопка Play (треугольник). 

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

Как написать текст и где брать визуализации

Когда у вас будет структура и прототип, подготовьте содержание будущего сайта. Алгоритм подготовки текста: 

Шаг 1. Собираете всю информацию: презентации, буклеты, описания продуктов и услуг, коммерческие предложения, отзывы, сертификаты, награды, рейтинги. 

Шаг 2. Делаете структуру текста на базе прототипа. Она станет текстовым прототипом будущей страницы.

Например: вы делаете главную страницу для имидж-студии. Вы заложили в прототипе блок с преимуществами, выгодами для клиентов. 

Шаг 3. Пишем текст по подготовленной структуре. 

1. Отвечайте на вопрос, почему вы классные. Доносите это не обещаниями, а фактами. Не «мы лучшие в организации детских праздников», а «9 из 10 клиентов обращаются к нам 2 и более раз в год». Вместо «Самые свежие суши в городе» напишите «не используем заготовки, а готовим после подтвержденного заказа» или «каждый день покупаем свежую рыбу и ведем на сайте трансляцию с кухни». 
2. Выделите для преимуществ 3-6 аспектов, которые ваши клиенты ценят больше всего и/или которые выделяют вас на фоне конкурентов. Например: все делают химчистку пальто за 3 дня или дольше, а у вас — 2 дня максимум. 
3. Добавьте текстовый и видео-формат отзывов. Приведите цитаты из отзывов клиентов, чтобы другие захотели их читать. Не просто блок «Отзывы клиентов», а заголовок над отзывом «Моя дочь еще никогда не была такой счастливой» (про аниматоров) или «Без этой пиццы наш сын не представляет ни один праздник» (про доставку пиццы). 
4. Используйте цифры и доказательства. Покажите в цифрах свой опыт, количество выполненных проектов, статистику достижений клиентов. Например: 12 лет на рынке, 837 компаний выбрали нас, 85% клиентов рекомендуют нас друзьям. Дополнительный инструмент: рейтинги, сертификаты качества и награды. Например: «Ресторан года 2020» или «№3 в списке юридических бюро Харькова по версии Forbes».
5. Избегайте шаблонных фраз, штампов и сложных конструкций. Вместо «динамично развивающаяся компания с опытными профессионалами своего дела, которые сделают ремонт любой сложности» скажите о сути. Например: «Делаем ремонт под ключ и помогаем сэкономить до 30% на стоимости материалов за счет дизайн-проекта и партнерских скидок от производителей». 

Чтобы проверить текст на избитые фразы и ошибки, используйте сервис glvrd.ru. Оптимально — поручить работу с текстом копирайтеру. Он сам структурирует информацию, подготовит план и структуру, проведет интервью с вами, чтобы разобраться с деталями. За $50-$150 можно получить достойный текст, с которым сможет работать дизайнер.    

Что делать с дизайном

Если навыков нет, попробуйте работать с шаблонами. В конструкторах сайтов вроде Tilda, Wix, Weblium есть заготовленные варианты страниц под разные сферы бизнеса: от персональной страницы юриста до небольшого интернет-магазина и сервиса доставки еды. 

Как это работает

1. Вы регистрируйтесь в сервисе. Оплачиваете подписку (если нужен отдельный домен и все возможности конструктора). 
2. Выбираете шаблон, максимально близкий к вашей сфере, идее и прототипу. 
3. Редактируете его под свой контент: меняете текст, изображения, кнопки, ссылки. 
4. Интерфейс рассчитан на тех, кто не знаком с дизайном и версткой. Вам достаточно просто менять текст и медиа, как при подготовке презентации в PowerPoint. 
5. Если в шаблоне не хватает каких-либо блоков, добавляете их из коллекции элементов конструктора. Вы сможете их редактировать, менять местами, заполнять другим контентом. 

Чтобы сайт выглядел аккуратно и органично, придерживайтесь базовых правил:

Правило №1. Подберите фирменный шрифт или шрифтовую пару. Более 2 шрифтов на сайте лучше не использовать. 

Среди удачных шрифтовых пар: Proxima Nova и PT serif, Open Sans и Georgia, Gilroy и Helvetica Neue, Montserrat и Open Sans.

Правило №2. Следите за единым стилем. Все заголовки одинакового размера, на странице достаточно воздуха — когда элементы не слишком близко друг к другу, смысловые блоки разделены отступами, есть визуальная иерархия. 

Правило №3. Аккуратно используйте фирменные цвета. Ограничьтесь 2-3 цветами, где 90% будет занимать базовое оформление (белый и черный цвет), а 10% — акценты, например, синие кнопки, логотип, иконки.  

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

• Unsplash
• Pexels
• Pixabay

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

Когда сайт будет готов, подключите к нему Google Analytics. Так у вас будет статистика по посещаемости, географии посетителей, а также — расширенные возможности для рекламы в Google и YouTube. Перед запуском рекламы и анонсом сайта, убедитесь, что страница корректно отображается из разных браузеров и устройств: в том числе — со смартфонов.