Как мы делаем сайты

Из каких этапов состоит наша работа по созданию сайтов? Как мы взаимодействуем с заказчиком?

  1. Беседа с заказчиком и постановка задачи

У каждого сайта есть свои задачи. Кто-то заказывает интернет-магазин для продажи своих товаров. Кто-то запускает курс и хочет лендинг для подачи заявок. Кто-то оказывает услуги и ему нужен сайт с личным кабинетом. Задач может быть великое множеcтво, именно поэтому мы устраиваем встречу (в реале или онлайне), чтобы поговорить о целях, прежде чем взяться за проект. Именно четко поставленная задача отвечает за весь дальнейший успех.

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

Итогом встречи является готовое коммерческое предложение.

  1. Разработка технического задания

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

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

  1. Встреча с заказчиком. Согласование технического задания

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

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

  • Сбор материалов

На данном этапе заказчику предстоит собираться материалы для сайта. Это не только тексты, документы, но и фото. Все это влияет на конечный результат. О том, как собирать материалы для сайту, у нас есть статья «Начало создания сайта. Советы по сбору материалов»

  1. Создание прототипа

Если работа довольно объёмная и/или сайт содержит большое количество страниц и информацию, которую надо упорядочить, то сначала мы делаем прототипирование.

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

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

  1. Разработка дизайна

Это один из самых важных и трудоемких этапов работы над сайтом, ведь от дизайна многое зависит.

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

  1. Программирование и верстка

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

  1. Тестирование и устранение ошибок

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

  1. Сдача проекта

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

Начало создания сайта. Советы по сбору материалов

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

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

Если вы не предоставляете тексты, то дизайнер вынужден использовать «рыбные» тексты (временные тексты-заполнители). Кажется, что такое заполнение сайта контентом даст восприятие композиции страницы. Но если «настоящего» текста пока нет, случайный набор слов не дает нужный результат, а просто заполняет пространство. Позже может оказаться, что блок должен быть сверстан по-другому. Если позаботиться о деталях заранее, то не придется переделывать сетку страницы из-за лишней строчки. Дизайнеру же, работая с реальным текстом, можно задавать определенные правила подачи информации и создавать интересные компоновки.

Непродуманный изначально дизайн из-за отсутствия контента может стать несуразным и кривым после наполнения.

Структура сайта

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

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

Вы сами — главный знаток своего дела, вы и определяете содержание сайта.

Главная страница

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

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

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

Блоки информации

  1. Сведения о компании
  2. Сведения о команде
  3. Цитата, слоган
  4. Отзывы о товаре/услуге/компании
  5. Преимущества компании
  6. Характеристики компании
  7. Функции/услуги/направления компании
  8. Инструкции (пошаговое руководство)
  9. Партнеры/спонсоры/клиенты
  10. Статистика/факты
  11. Контактные данные, адрес
  12. Обратная связь
  13. Заявка на услугу
  14. Последние новости, события
  15. Полезные статьи, документы
  16. Ссылка на разделы сайта
  17. Сведения о клиентах с продуктом
  18. Описание продукта
  19. Обзор продукта
  20. Каталог товаров, список продуктов, услуг (прайс)
  21. Тарифы и цены на услуги/курсы
  22. Категории товаров/услуг
  23. Акционные предложения
  24. Призыв к действию «Купить» или «Заказать»
  25. Карта к вашему местоположению, маршрута путешествия, ваших филиалов, партнеров, резидентов и т.д.
  26. Виджет с Instagram / YouTube
  27. FAQ (ответы на часто задаваемые вопросы)
  28. СМИ о нас
  29. Калькулятор цен

Любой блок можно сопроводить текстом, фотографией или схемой. Ваша задача заключается в том, чтобы определиться, как вы хотите представить вашу информацию. Хотите ли вы рассказать о своих сотрудниках подробно или просто показать их лица и имя с должностью. Может ваш продукт так сложно устроен, что следует представить его в виде схемы. У вас есть филиалы в нескольких городах? Тогда можно отобразить это на карте страны. Подумайте каким способом вам лучше передать информацию посетителям.

Виды контента

  1. Текст (описание, статья, новость)
  2. Изображение (фотография, картинка, иконки)
  3. Видео
  4. 3D модели и анимация
  5. Аудио
  6. Инфографика
  7. Таблица, схема
  8. Список
  9. Документ (ссылка на скачивание)
  10. Карта

Советы по написанию текстового контента

После того, как структура определена, можно приступать к написанию текстов.

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

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

Заголовок

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

Хороший заголовок выполняет 3 функции:

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

Есть несколько типов заголовков, которые можно использовать:

  • заголовок-вопрос
  • заголовок-лозунг
  • заголовок-заявление
  • информационный заголовок
  • креативный заголовок
  • заголовок-цитата

Подзаголовок

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

Можете рассказать для кого ваш продукт. (Например: { Идеально } [ подойдёт стартапам/путешественникам/молодожёнам ]).

Кнопка

Под подзаголовком можно добавить одну или несколько кнопок, если у вас цель что-то продать или что-то рассказать.

Примеры текста кнопок: “Купить”, “Оставить заявку”, “Пройти курс”, “Перейти в каталог”, “Подробнее”, “Узнать больше”, “Написать нам”, “Получить бесплатно”, “Получить пробный продукт”, “Все услуги”, “Читать дальше”.

2. Преимущества и особенности

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

  • Постарайтесь отделить главное от второстепенного.
  • Используйте простые слова, понятные шестикласснику
  • Выбирайте слова, которые будут ассоциироваться у людей с продуктом.

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

3. Опишите продукт

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

4. Расскажите о компании/команде

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

5. Категории / услуги / направления

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

6. Заголовки блоков

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

Вот три составляющих хорошего заголовка блока:

  • Краткость
  • Ясность
  • Фокус на одном преимуществе

7. Пошаговое руководство

Даже простой продукт или услугу стоит разложить на 3-4 простых шага. Есть распространённая ошибка: многие боятся объяснять, полагая, что умный пользователь “и так разберется” и ему не нужны детальные подробности. Это не так. У читателя никогда нет достаточно времени, чтобы вникать в суть. И он будет благодарен, если вы расскажете быстро и по шагам, что нужно делать.

Совет: Когда вы пишете текст, используйте повелительное наклонение и максимально конкретное действие («Пройдите пробный урок»).

 

8. Факты

Люди любят факты и доверяют цифрам. Глаза, пробегая по тексту, останавливаются на них и мозг неосознанно фиксирует. Добавьте инфоблок с 2-3 крупными числами. Используйте любые данные, которые помогают оставить мнение о вас как о продукте, специалисте, компании.

9. Отзывы

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

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

10. Четко выделенный призыв к действию «Купить» или «Заказать»

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

Советы по выбору медиаконтента

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

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

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

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

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

Если у вас нет достаточно фотографий, то можете воспользоваться бесплатными стоками в интернете: https://pixabay.com/ru/, https://ru.freeimages.com/https://www.stockvault.net/, https://www.pexels.com/, https://unsplash.com/, https://www.freepik.com/

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

Исследования

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

Рекомендуем ознакомиться с примерами работ от мировых дизайнеров на портале www.behance.net.

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

  1. Соберите весь ваш текст в один документ.

Лучше всего написать в Word или Google Docs единым текстом, разделенным на абзацы — так будет проще оценить общую наполненность сайта контентом.

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

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

  1. Будет удобнее если вы соберете все материалы в одну папку в облаке (например, Google Диск, Яндекс Диск, Облако Mail).

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

  1. Убедитесь, что все изображения высокого качества
  2. Логотипы должны быть в исходных форматах (cdr, ai, eps, psd)
  3. При предоставлении брендбука в формате PDF убедитесь, что логотип приложен
  4. Если ваши шрифты являются коммерческими, то обязательно приложите их в общую папку с материалами

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

Смарт Юнит

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

Конструктор или к профессионалам?

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

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

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

Фрилансеры или компания?

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

Что вам нужно сделать, чтобы запуск сайта прошел успешно?

  1. Сформулируйте цель создания сайта. С какой целью он вам нужен? Какую проблему решает? Обязательно расскажите об этом менеджеру.
  2. Соберите референсы похожих проектов, изучите, что вам нравится, а что нет.
  3. Продумайте структуру нового сайта вместе с менеджером, учитывая цель проекта.
  4. После утверждения технического задания подготовьте тексты и фотоматериалы для сайта, чтобы всё это было учтено при разработке дизайн-макета. Возможно, вам понадобиться собрать отзывы, сформулировать свои преимущества и описать некоторые процессы работы. Если есть возможность, то закажите съёмку для сайта согласно референсам.
  5. Купите домен и решите вопрос с хостингом.
  6. Расскажите о запуске сайта своим клиентам, внесите данные о сайте в соцсетях и в сведения о компании в Гугл и

Что нужно знать при регистрации домена?

Домен – это имя вашего сайта. Он может рассказать о том, где находится и чем занимается ваша компания. Свободен ли выбранный домен можно узнать на сайте nic.ru. Вы можете приобрести домен самостоятельно или через нас. Домен может быть тематический (.shop, .coffee) или территориальный (.ru, .us)

Как лучше выбрать имя для своего сайта?

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

Если сокращаете название до аббревиатур, то сделайте так, чтобы домен продолжал отражать суть сайта (бренда, компании) и вызывать ассоциации о том, чем вы занимаетесь.

Будьте внимательнее при переводе с русского на латиницу.

Выбирайте себе уникальное имя, чтобы вас не путали с конкурентами.

Домен влияет на продвижение сайта в поисковиках. Например,  google с большей вероятностью сначала покажет сайты в доменной зоне .ru, чем какие-нибудь специфические.

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

А зачем нужен хостинг?

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

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

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

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

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

 А что потом?

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