Evgeniy_Smirnov

Этап технических настроек Одним из заключительных этапов моей работы является этап технических настроек сайта. После сверстанного макета на платформе, необходимо вдохнуть в него функциональную «жизнь» 😅 На этапе этапе я веду работу по подключению доменного имени, после чего сайт становится доступен по своего собственного уникальному адресу. Затем перехожу к подключению защищенного соединения по протоколу HTTPS, и настраиваю «редиректы» на основной адрес с «созвучных» страниц. Также необходимо подключить формы сборы данных, для того, чтобы все запросы через формы поступали Заказчику удобным способом (Почта, Телеграмм, Google-таблицы и т.д). Для интернет-магазина выполняется интеграция и настройка сервисов доставки, а также платежных систем. При необходимости помогаю зарегистрировать корпоративную почту и настроить уведомления о заказах с данного адреса. Одним из этапов настройки является базовая SEO-оптимизация, для возможности индексирования сайта поисковыми системами Яндекса и Google. Подключаю сервисы контроля за работоспособностью сайта - Яндекс.Вебмастер и Google search Console. Доступ по управлению сервисами также предоставляется Заказчику. И, куда же без аналитики? Дополнительно настраиваю счетчики Яндекс.Метрики и подключаю Google-аналитику. Навскидку - именно такой набор сопровождается при технической настройке сайта перед передачей готового проекта Заказчику. Но и это еще не все 😉

Вёрстка сайта на Тильде После успешного согласования дизайн-макета, я перехожу к следующей основной части реализации проекта - верстке сайта на платформе Tilda. По сути, этот этап представляет собой повторную отрисовку дизайн-макета, но уже в рамках веб-браузерной разметки. Заново отрисовывается и создаются все элементы: блоки, формы, кнопки и т.д. Импортируются изображения, верстается текст - в общем, идет процесс подготовки к «оживлению» проекта. Хотя Tilda и является конструктором сайтов с множеством готовых решений, - в нашем варианте, при создании уникального дизайна и уникального сайта, готовые решения очень часто не подходят. Поэтому, уникальные вещи приходится реализовывать оригинальными методами, прибегая к кастомизации сайта с помощью HTML, изменением и добавлением собственных CSS - стилей. Вёрстка сайта, по времени, зависит также от объемов работ и их сложности: количества страниц, количества и сложности анимации, структуры дизайна и собственных уникальных решений. Параллельно идет процесс «связывания» всех страниц, форм, кнопок активными ссылками, для корректного перехода на необходимые разделы, согласно утвержденной структуре. Большая работа также проводится, в случае верстки интернет-магазина: тут необходимо сформировать каталог, сверстать и заполнить каждую карточку товара со свой информацией, параметрами, характеристиками и раскидать все по соответствующим разделам. (На самом деле тема интернет-магазинов слишком объемная, и заслуживает отдельного повествования). Ближе ко времени, когда верстка находится на завершающем этапе, или же полностью завершена, я начинаю следующий этап разработки - техническую настройку сайта, но об этом уже в следующий раз.

Дизайн-макет После согласования прототипа сайта, начинается работа над одной из важных визуальных составляющих будущего сайта - работа над дизайн-макетом. Дизайн-макет представляет собой высокодетализированную картину конечного дизайна. На этом этапе и ведется основная работа по подбору шрифтовых пар, применение графических решений, палитр, закладывание анимационной составляющей страниц сайта. Все это выполняется в графическом редакторе. Лично я использую для этих целей графический редактор - Figma, который позволяет работать с огромными объемами графической информации. В ходе проработки дизайн-макета может использоваться множество референсов для реализации самых интересных решений, которые были выявлены на этапе анализа конкурентов, анализа ниши и/или представлены Заказчиком. Ведется огромная работа и над контентной частью - необходимо упаковать всю текстовую и графическую информацию, которые предоставил Заказчик. Бывает, что Заказчик не всегда готов вовремя предоставить часть информации, в таком случае, возможно продолжить работу с аналогичными материалами из свободных источников, для демонстрации общей итоговой концепции, на которую, в будущем может ориентироваться Заказчик для создания аналогичного материала. Работы над дизайн-макетом могут занимать срок до одной недели. Это один из самых важных этапов, который требует тщательной проверки и анализа итоговой картины, а в ходе работы может быть реализовано несколько концепций, среди которых необходимо выбрать самую лучшую. После отрисовки, дизайн-макет отправляется на согласование, после чего этот проект ждёт следующая стадия - в проект необходимо вдохнуть «жизнь» и разместить его во всемирной «сети» посредством верстки на платформе Tilda.

Прототип сайта После того, как была определена структура сайта, я перехожу к первой визуализации - созданию прототипа сайта. Прототип представляет собой максимально упрощенную версию будущего сайта. Можно сказать, что это каркас будущей работы. Тут еще нет никаких графических решений, нет изобилия контента. Все максимально просто: черно-белые цвета и лишь визуализация расположения элементов. Прототип необходим для определения конечного расположения элементов, не затрагивая уже готовые дизайнерские решения, для этого и используется его лаконичность и простота. Как я уже упомянул, тут мы визуализируем как будет выглядеть расположение того или иного блока, кнопки, элемента. Анализируем будет ли такое расположение удобно для пользователей, удобно ли расположен заголовок, текст, слайдер. Визуализируем все имеющиеся гипотезы и поведение пользователей. Такой «макет» очень удобно изменять, рассуждать над ним и анализировать. Очень важно принять окончательные решения о расположении элементов именно на этапе прототипирования. В процессе происходит очередной мозговой штурм, - иногда приходится по несколько раз отрисовывать расположение блоков, чтобы добиться необходимого результата. Финальную работу я также согласовываю с Заказчиком, при необходимости вносятся изменения и прототип пересогласывавается вновь. Ну а после утвердительного решения начинается самая красочная работа - создание дизайн-макета.

Структура сайтов Структура сайта, грубо говоря, - это логическое распределение блоков и страниц. К структуре сайта я преступаю сразу же, как полностью завершу анализ конкурентов. После анализа уже становится достаточно понятно, куда и как двигаться. Поэтому, с довольно ясным курсом, я углубляюсь в следующих процесс. Составление структуры занимает пару дней интенсивной работы. Тут необходимо учитывать и нишу, и конкурентов, пожелания клиента, имеющийся материал, задачи, которые необходимо решать и т.д. В ходе составления структуры, параллельно, я готовлю соотвествующий документ, который описывает все принципы, на которых будет основываться будущая страница. Также я использую так называемые «Майнд-карты», которые безумно удобны при составлении иерархий страниц и последовательности блоков. Весь этот материал я упаковываю в очередной отчет - «Предлагаемая структура сайта», который включает в себя описание и небольшую визуализацию структуры. После чего материал согласовывается с Заказчиком. После того, как Заказчик утверждает предлагаемую структуру, можно переходить к следующему этапу - прототипированию сайта.