Статьи о том, как работает вебмастерская НатрийХлор. Справочная информация об этапах и нюансах в создании сайтов, разработке бренда, полиграфической продукции или графического дизайна. Есть вопросы? Задавайте их нам в WhatsApp (кнопка в верхнем меню).
Недостатком разработки шаблонов сайта в графических программах является их статичность. На стадии согласования дизайна большого адаптивного проекта, клиент утопает в огромном количестве файлов. Взаимопонимание зачастую достигается не сразу. Приходится дополнительно в специальных программах создавать прототип. Время работы над проектом увеличивается.
Figma объединяет в себе функции графической программы и программы прототипирования. В режиме прототипа клиент, переходя по ссылкам, на личном опыте может оценить удобство и логичность структуры сайта. Проскролить страницу, увидеть изменение стилей объектов при взаимодействии с ними пользователя. Конечно, фигма не обеспечивает стопроцентной симуляции функций будущего сайта, это необходимо учитывать.
По кнопкам ниже вы можете ознакомиться с десктопным и мобильным вариантами прототипа интернет магазина. !ВАЖНО! Дождитесь полной загрузки страниц. Индикатор загрузки: голубая полоса вверху экрана. Загрузка прототипа небыстрая.
В Figma есть режим комментирования указанного объекта, а также ответа на оставленный комментарий. Мы с вами будем точно знать какой объект и на какой странице обсуждаем. Одним из весомых плюсов является доступ клиента к самой свежей версии дизайна проекта онлайн 24/7 по одной ссылке.
Правильные вопросы — ключ к успешному решению задач
Сайт — рабочий инструмент вашего бизнеса. Кто, как не вы, лучше всего знает ваш бизнес? Совет руководителю: не отдавайте первый этап собеседования с нами менеджерам среднего звена. К сожалению, нередко они относятся к своим обязанностям формально. Формальным получается и результат. Без тесного взаимодействия с вами на первом этапе, без ваших разъяснений о том что и как у вас работает, мы не сможем предложить оптимальное решение ваших бизнес-задач. Не удивляйтесь, что приступая к работе над вашим сайтом, мы будем задавать много вопросов.
Вы можете заранее подумать над ответами на вопросы:
Что вы хотите рассказать о своей компании?
Какой товар, продукт или услугу вы предлагаете? В чём их особенность?
Кто ваши конкуренты?
Кто ваши клиенты?
Как вы обслуживаете своих клиентов, чем ваше обслуживание отличается от конкурентов?
Какие этапы в работе с клиентом у вас существуют, какие шаги на каком этапе в работе с клиентом совершают ваши сотрудники?
Какие из этапов, или шагов работы с клиентом можно убрать или добавить, а какие автоматизировать?
На какие часто задаваемые вопросы клиентов может ответить сайт без привлечения менеджеров?
Решение каких проблем клиентов можно доверить сайту без привлечения сотрудников вашей фирмы?
Какие сайты вам нравятся и почему?
Опросный лист для технического задания на разработку сайта
Рекомендуем ответить на эти вопросы письменно. Это поможет вам структурировать и визуализировать ваше представление о тех функциях, которые необходимы на вашем сайте для успешного взаимодействия с вашими клиентами, что позволит вам расширить круг лояльности к вашей компании. Для упрощения этой работы, мы подготовили для вас список вопросов в формате анкеты.
Функционал сайта — инструмент достижения цели
Мы должны ясно понимать для чего вам нужен сайт. Исходя из этого, мы продумаем функционал сайта, его структуру и дизайн. Сайт должен вести пользователя по выработанному сценарию к цели, которую пользователь считает своей, и легко достигая которую, в действительности, решает ваши бизнес-задачи. Путь к цели для пользователя должен быть коротким, понятным, удобным.
Сколько стоит сайт?
Это некорректный вопрос. Он сродни вопросу: «Сколько стоит автомобиль?». Возникает немало уточняющих вопросов, неправда ли? Так и с сайтом. Цена зависит от комплекса деталей: функционал, дизайн, предполагаемые нагрузки и тд. Мы сможем назвать цену только поняв объём и сложность предстоящих работ. Цены динамичные. Возможна поэтапная оплата. Предоплата обязательна. Полная оплата — после приёмки проекта.
Техническое задание разрабатывается для достижения взаимопонимания между заказчиком и разработчиком о целях, качествах, средствах, этапах, сроках и стоимости проекта. ТЗ пишется разработчиком на основе собеседования с заказчиком и анализе сайтов прямых конкурентов заказчика. На основе согласованного ТЗ составляется обоснованная смета.
Техническое задание — документ, обращённый и к заказчику, и к разработчикам. Начинается ТЗ с краткого описания будущего сайта: кто заказчик, кто целевая аудитория, какие задачи должен решать сайт. Коротко, только конкретика, без субъективных оценочных суждений, как то: красиво, быстро, хорошо и тд., например:
Техническое задание на разработку интернет-магазина для компании «Такая-то», доменное имя «доменноеимя» для продажи спортивной обуви с онлайн оплатой и доставкой товара в пункты выдачи «БоксБери». Целевая аудитория сайта: горожане 25-44 года, офисные работники, любящие путешествовать.
Сайт должен быть выполнен в минималистическом стиле на белом фоне с элементами взаимодействия фирменных цветов #7248ad и #cc65ed. Логотип и шрифты — согласно гайдлайну, предоставленному заказчиком. текстовая информация предоставляется заказчиком и тд.
Конкретика мимнимизирует вариативность трактовок и недопонимание, что сократит время разработки и избавит от бесконечных переделок. Не стоит забывать и об экономии нервной энергии.
Структура сайта
Структура сайта должна приводить и побуждать пользователя к целевым действиям. Очень важно тщательно продумать её заранее. К наиболее важной информации доступ должен быть явным и быстрым. В этом помогают сквозные (присутствующие на каждой странице сайта) блоки. Описываем их отдельно: шапка сайта (хедер) и её элементы, подвал сайта (футер) и его элементы, возможно боковое меню и блоки, или кнопки, отображающиеся поверх контента, например — кнопка, открывающая окно чата.
Шапка сайта
Верхнее меню
По такому же принципу расписываются остальные сквозные блоки.
Структура страницы
Структуру страницы можно прописать словами, а можно представить в виде графической блок схемы. Что важно понимать разработчику: какой тип контента должен присутствовать на какой странице. От этого зависит подбор фреймворков или программных плагинов. Расписываем так каждую типовую страницу сайта.
При формировании структуры страницы важно учитывать контекстную иерархию: на каждой странице обязательно должен присутствовать единственный заголовок Н1. Количество заголовков низшего разряда (Н2, Н3, Н4 и тд) может быть произвольным. Это важные для СЕО правила. Придумывая структуру страницы мы обязательно следуем им, используем семантические тэги, подсказывая поисковым роботам на какую информацию важно ориентироваться.
Функционал сайта
Функционал сайта обслуживает бизнес-задачи владельца сайта. Что вам нужно: привлечь внимание к своей компании и собрать базу данных возможных клиентов? Продвинуть свой товар или услугу? Информировать пользователей в реальном времени о работающих кафе в локациях их нахождения? Цели бывают разными, под них разрабатывается функционал сайта. В описании функционала тоже придерживаемся конкретики, например:
Интернет-магазин должен содержать функцию фильтрации по полу (М/Ж), размеру, цвету, материалу, сезону. Должна быть сортировка товара по цене, названию, артикулу. Должна быть возможность быстрой покупки без регистрации и тд.
Сценарий взаимодействия
Программисту и верстальщику важно понимать какие события должны вызываться при взаимодействии пользователя с элементами интерфейса. Сценарий должен быть продуман и прописан для каждого интерактивного элемента. Если элемент вызывает контент во всплывающем окне, так и пишем, например:
Шапка сайта с элементами: Логотип компании (кликабельный — переход на главную страницу), Телефон компании (кликабельный — производится дозвон на мобильном телефоне), Email (кликабельный — во всплывающем окне открывается форма обратной связи с полями «Имя», «Телефон», «Email», «Задать вопрос» и кнопкой «Отправить» (письма приходят админу и пользователю), поле Поиска, Личный кабинет (переход на страницу личного кабинета клиента), Корзина (переход на страницу Корзины клиента). Меню (навигация по сайту).
Схема взаимодействия может быть представлена в виде имиджа
Хостинг и его тарифный план
Хостинг — это услуга размещения баз данных и файлов вашего сайта на серверах (компьютерах, постоянно подключенных к сети интернет). Заказывая хостинг, вы арендуете пространство, мощности и программное обеспечение, предоставляемое хостинг-провайдером согласно выбранному тарифу на оплаченный период времени. Если вы не оплатите хостинг вовремя, ваш сайт станет недоступен для пользователей интернета. Как правило, владельцу сайта даётся месяц после просрочки платежа на погашение долга. Если вы погасите долг, сайт вновь станет доступен, если нет — сайт удаляется. Нужно следить так же и за оплатой доменного имени, которое покупается не раз навсегда, а так же оплачивается как аренда.
Доменное имя сайта — эта та часть адреса сайта, что расположена между http:// или https:// и доменной зоной (.ru или .сom, или .рф и тп.), и которую вы вводите а адресную строку браузера для загрузки нужного вам сайта, например https://доменноеимя.рф. Доменное имя (DNS — англ. Domain Name System «система доменных имён») связывает символьный адрес сайта с ip сервера, на котором он размещён. Мы очень упростили объяснение для ясности :).
Компания. предоставляющая хостинг, отвечает за:
Бесперебойную доступность вашего сайта
Предоставление качественного оборудования и современного ПО
Сохранность данных, размещённых на их серверах
Защищённость серверов от хакерских атак
Своевременную и компетентную техническую поддержку
Это самые важные вещи, на которые необходимо обратить внимание при выборе хостера. Немаловажно также удобство панели управления, гибкость тарифов, ассортимент оказываемых услуг. Нет смысла оплачивать большие дисковые пространства или выделенный сервер, если ваш сайт — простая визитка. И, с другой стороны, если вы планируете большой интернет-магазин с массовой посещаемостью и сложным функционалом, не стоит экономить на хостинге. Ориентироваться в выборе тарифного плана хостинга нужно по потребностям. В любом случае, тариф всегда можно изменить, согласно новой ситуации. За годы работы с разными хостерами у нас сложились свои предпочтения, описывать здесь мы их не будем, но при работе с заказчиком высказываем свои рекомендации.
Опираясь на исходные данные о сайте и на свой опыт работы с разными хостинг-провайдерами мы выбираем оптимальный по соотношениям цена — качество — соответствие требованиям хостинг и прописываем нужный тарифный план в ТЗ.
Система управления сайтом
Система управления сайтом (CMS, движок) — это программный продукт, заготовка, каркас сайта, на котором он собирается. Можно написать сайт с нуля, но это чаще всего нерационально: долго, трудозатратно, дорого и оправдано только в случае разработки уникального по задачам ресурса.
Среди СMS есть как бесплатные, так и платные варианты. CMS может быть бесплатной в минимальной комплектации, но платной в расширенной, например — Битрикс имеет несколько тарифных планов. К самым популярным движкам (WordPress, Bitrix, OpenCart, Joomla, Drupal и другие) существует множество плагинов и регулярно пишутся новые, значительно расширяющие их функционал. К тому же широкое сообщество разработчиков выкладывают массу справочного материала в сети о настройках CMS и исправлении возможных проблем. И это является весомым плюсом в их пользу.
Выбирать СMS нужно исходя из задач, которые должен решать сайт и с оглядкой на то, кто будет вести сайт. WordPress, например, изначально написан для ведения блогов, хотя сейчас он оброс таким количеством корректно работающих плагинов, что на нём можно делать и полнофункциональные магазины и даже небольшие социальные сети. Основным плюсом этого движка мы считаем удобство администрирования сайта. А у Битрикса главное преимущество, на наш взгляд, — интеграция с 1C Бухгалтерией и складским учётом. К тому же Битрикс имеет мощную CRM систему, позволяющую налаживать бизнес процессы внутри компании. Одним словом:
Задачи сайта определяют выбор системы управления.
Перечень и описание плагинов
Плагин — это независимый программный модуль, подключаемый к системе управления сайтом. Плагины наделяют CMS дополнительными возможностями, например: добавляют формы обратной связи, слайдер или увеличилку для фотографий, магазин, платёжный модуль, систему рейтинга и прочее, выбор широк. Наличие плагина для CMS, обеспечивающего необходимый функционал, влияет и на выбор самой системы управления.
Часто на сайт нужно интегрировать много плагинов и между ними могут возникнуть конфликты. Нужно грамотно сконфигурировать их. Бывает так, что плагин частично соответствует необходимым требованиям, но необходима его доработка программистом и верстальщиком. Одним словом, заранее собирается информация по нужным плагинам, анализируется, отбирается конфигурация и вносится в техническое задание.
Перечень, описание и этапы работ
Когда определились со структурой, функционалом, системой управления, плагинами, необходимыми доработками, становится ясен объём и сложность работ. Чтоб не вызывать у заказчика вопросов и чтоб чётко обозначить рамки работ, составляем табличку: что, в каком порядке и сколько по времени мы делаем. На основе этого составляем смету по пунктам. Не вошедшие в таблицу работы, возникшие в результате неожиданных пожеланий клиента, оплачиваются отдельно.
Анализ сайтов конкурентов — один из первых, основополагающих и необходимых этапов в создании успешно выполняющего бизнес-задачи сайта. Более того, анализировать свой сайт и сайты конкурентов нужно постоянно. Это поможет вам своевременно реагировать на изменения рынка в динамичной среде интернет коммерции и повысит вашу конкурентноспособность. Обращайтесь. Мы сделаем это.
Ясное представление о состоянии дел в своём сегменте рынка даёт понимание направления и методов развития бизнеса. Сайт — частично открытый инструмент коммерческих процессов. Изучая сайты конкурентов, можно увидеть их источники трафика, ассортиментный ряд, сервисы и услуги, маркетинговые уловки, схемы взаимодействия с клиентами и тд. Можно оценить успешность их модели бизнеса. Учиться лучше на чужих ошибках. Вдохновляться можно чужими успехами.
Как и где искать сайты конкурентов?
Поисковики. По необходимым ключевым запросам находятся наиболее близкие по ассортименту, услугам и локациям конкуренты. Обращается внимание и на лидеров сегмента. Достаточно изучить около 5-ти сайтов.
Личный опрос. О конкурентах опрашиваются собственные сотрудники, клиенты, круг общения.
Онлайн сервисы. В сети есть специализированные сервисы для анализа сайтов. Есть частично бесплатные.
Удобство. Насколько проста и интуитивно понятна структура сайта. Как быстро находится нужная информация или товар. Насколько внятно организованы целевые действия клиента. Как много вопросов возникает и остаётся без ответов при пользовании сайтом. В промахах конкурентов кроются ваши потенциальные преимущества.
Коммерческая составляющая: ассортимент, цены, сопутствующие услуги и сервисы, программы лояльности, гарантии, полнота и доступность контактной информации, варианты обратной связи и тд. Наличие и заметность подталкивающих к действию элементов интерфейса.
Контент. Необходимые качества текста: информативность, полезность, уникальность и увлекательность. Стоит оценивать текст на объём и наличие «воды», тематику и стилистику, а так же логическую структурированность. Так же огромное значение имеет наличие, качество и уникальность инфографики, фото и видео. Особое внимание стоит уделять главной странице, страницам категорий, товаров и услуг.
Техническая оптимизация. Оцениваются скорость загрузки, адаптивность, наличие потерянных ссылок, имиджей и элементов интерфейса, позиции в поисковых выдачах Яндекса и Google по ключевым запросам, ссылочная масса.
Это первый вопрос, который вы должны задать себе. Вы хотите коротко рассказать о своей компании или создать узнаваемый персональный бренд, а может вы собираетесь продавать что-то или делиться новостями? Вариантов много. Определитесь с целями. Для разных целей — разные сайты. Если вы не можете определиться, подготовьте рассказ о себе и своём бизнесе, поделитесь с нами своими планами на сайт. Мы готовы реализовать практически любые нешаблонные идеи.
Самые распространённые типы сайтов?
Сайт-визитка — самый простой и дешёвый. Визитка — это короткий рассказ о себе: кто вы, чем занимаетесь, как с вами связаться. Как правило, 5-6 страниц.
Имиджевый сайт нужен для создания или поддержания образа компании, продукта или персоны. В идеале, делается по разработанному брендбуку. Способствует росту узнаваемости бренда. Требует нестандартных дизайнерских решений. Желательны эффектные фишки в виде скриптовой анимации. Желательно наличие фотогалерей и видео событий или товаров. Возможно наличие блога или новостной ленты.
Лендинг пейдж — посадочная страница. Служит инструментом сбора базы потенциальных клиентов через продвижение одного конкретного товара, события или акции. Содержит маркетинговые уловки, которые подталкивают посетителя отправить свои данные через форму обратной связи. Одностраничный сайт.
Сайт-портфолио знакомит посетителей с выполненными работами владельца сайта. Содержит так же информацию о персоне или компании, отзывы от заказчиков, форму обратной связи. Количество страниц может быть разным, в зависимости от нюансов профессиональной деятельности.
Интернет магазин — онлайн продажи. Электронный каталог продукции с функцией покупки товара онлайн. Витрины товара по категориям — плитка, или список товаров с самой необходимой информаций (фотография, название товара, цена) и кнопками взаимодействия (например: купить, посмотреть подробно, добавить в виш-лист). Карточки товара — подробное описание товара, его характеристики и отзывы о нём, кнопка добавления в Корзину. Корзина позволяет собрать несколько товаров в один заказ. В личном кабинете пользователь может отслеживать статус заказа, видеть архив заказов, изменять личные данные и адрес доставки и тд. В действительности, конфигурация магазина может быть произвольной, это зависит от особенностей вашего бизнеса.
Корпоративный сайт развёрнуто рассказывает о компании, её команде и деятельности. Может содержать каталог продукции, прайс-листы, новостную ленту, экспертные статьи. Имеет разветвлённую структуру. Возможно наличие закрытой для посторонних посетителей части, доступной по авторизации. В закрытой части может быть установлена CRM для регулирования проектной деятельности компании, внутренних коммуникаций и информирования сотрудников.
Информационный тематический сайт может быть посвящён любой теме: бизнесу, искусству, музыке, медицине. Чему угодно. На сайте может присутствовать новостная лента, аналитические статьи, блоги и тп. Возможны функции комментирования и тд
Конечно, этим не ограничивается многообразие сайтов. Какой вам нужен сайт — зависит от ваших задумок и наработок. Всё опционально. Функции сайта варьируются под ваши потребности с учётом удобства пользования.
Кто ваши прямые конкуренты?
В идеале, мы хотели бы услышать ваш анализ работы конкурентов: что вы считаете правильным, а что ошибочным в их работе? Подготовьте ссылки на их сайты, поделите их на две группы: Нравится / Не нравится с уточняющими комментариями. Мы можем сделать эту работу сами, но без той степени экспертного погружения в нюансы вашего сегмента рынка, на который способны вы, находясь внутри него. Предварительно совершённая вами работа сократит время разработки ТЗ, ускорит наше взаимопонимание и с большей вероятностью приведёт к успеху.
Какие функции нужны на сайте?
Вам не нужно знать какими программными средствами будет реализовываться функционал. Вам нужно продумать сценарий взаимодействия с посетителями вашего сайта. Основывайтесь на отработанных вами схемах обслуживания клиентов, на анализе недостатков этих схем и на анализе сайтов конкурентов. Подготовьте описание схем, это сократит время подготовительного этапа разработки сайта. Мы, со своей стороны, будем думать о том как лучше реализовать эти схемы на сайте. Работая одной командой с нами, вы получите тот онлайн инструмент, который хотели.
Кто и чем будет наполнять ваш сайт?
Часто сталкиваемся с такой проблемой: заказчик хочет на сайте и блог, и новости, и фотогалереи, и имиджевые фотографии товаров, а материалов на это нет. Мало того, нет сотрудников, которым можно поручить ведение сайта. Соизмеряйте свои силы. Не надо заводить рубрики, которые останутся пустыми. Это снизит качество вашего сайта, а, следовательно, и его индексацию. Если же вы хотите-таки разнообразного контента, то его нужно готовить. Подбор фотографий узкой тематики — дело долгое и часто безуспешное. К тому же, фотографии на фотостоках платные. Нет ничего лучше собственных фотографии изделий или товаров. Уникальный контент повышает доверие и лояльность клиентов, мы готовы принять участие в его разработке. Нам важно понимать реальное состояние дел с наличием материалов.
