Evgeniy_Smirnov

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

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

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

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

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

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

Адаптация сайта под мобильные устройства. ⠀ Большинство веб-сайтов нуждаются в адаптации обычной - «десктопной» версии под «мобильный» формат. ⠀ В 2021 году статистика показала, что почти 80% трафика в интернете приходится на мобильные устройства. Я думаю, полагаясь на эти цифры, уже можно сделать вывод о необходимости адаптации сайта под мобильные устройства. ⠀ Можно обойтись и без мобильной версии, но, нужно понимать, с какой целью принимается такое решение. Я думаю, такой формат подходит лишь под оригинальные художественные проекты, которые необходимо демонстрировать на больших мониторах. ⠀ Теперь о практической части. В своих работах я всегда адаптирую сайты под следующие диапазоны разрешений: ⠀ ⁃ 1200px и более ⁃ 960px - 1200px ⁃ 640px - 960px ⁃ 480px - 640px ⁃ 320px - 480px ⠀ Под этот перечень входят: обычные компьютерные мониторы, экран планшета, экран мобильного телефона при горизонтальном и вертикальном расположении контента. ⠀ В ходе адаптации приходится принимать различные решения, для того, чтобы уместить все необходимую и важную информацию в совсем иных рамках. ⠀ Иногда, приходится отказаться от масштабной анимации страниц и дать предпочтение скорости загрузки, ведь никто не любит, когда нужный Вам сайт еле грузится из-за элементов, которые вам и вовсе не нужны. ⠀ Мобильная версия сайта, на сегодняшний день, не менее важная вещь, чем «десктопная» версия. ⠀ Например, недавно мне пришлось актуализировать сайт Кронштадтского аэроклуба. В ходе актуализации, я выявил, что сайт имеет очень кривую мобильную версию, что вполне могло отпугивать людей, которые хотели ознакомиться с услугами организации. ⠀ Пришлось полностью привести все в полный порядок. Теперь, со страницы не хочется уйти с мыслью «скорее всего их больше сайт не работает», а организация не будет терять мобильный трафик.

Брифинг и его роль перед началом работы над сайтом. Перед каждой работой необходимо окунуться в желания клиента и понять, в каком направлении предстоит работать, прежде, чем начать создавать прототип сайта. Для этого и проводится брифинг. Какие вопросы включены в брифинг и к чему лучше готовиться? На самом деле, все индивидуально, но я приведу несколько примеров вопросов, которые использую на своей практике: Общая информация - в этом разделе мы уточняем отрасль или деятельность организации, его наименования. Цели создания сайта - определяем, необходим ли сайт для поиска новых клиентов, рекламы товары или же его продажи, создание имиджа компании и т.д. Информация о типе сайта - одностраничный, многостраничный или интернет-магазин. Тип дизайна сайта - определяем желаемую стилистику, например - минимализм. Также лучше уточнить, какие сайты клиенту нравятся и попросить у него примеры таких страниц, а также сайты, которые не нравятся. В дополнение, запросить информацию о сайтах конкурентов. Имеется ли у клиента контент, который он хочет разместить на своем сайте. Домен - существующее доменное имя, желаемое доменное имя, и требуется ли его регистрация. Сроки - желательные сроки запуска проекта. Брифинг может включать в себя множество других вопросов и уточнений, которые могут появляться в процессе обсуждения. Вопрос всегда должен конкретизировать задачу, сделать ее понятнее, в том числе и для клиента. Чем больше будет получено информации в ходе брифинга - тем точнее, качественнее и быстрее будут выполнены требования и желания заказчика. И конечно же, на основании брифинга, исполнитель сможет сориентировать заказчика о стоимости проекта.

Постепенно буду освещать тему веб-сайтов и веб-дизайна. Поговорим о типах сайтов. В основном, сайты можно разделить на 3 типа: одностраничный сайт (Landing Page), многостраничный сайт и сайт интернет-магазин. О каждом чуть подробнее: Одностраничный сайт - он же «Landing page». Это сайт - посадочная страница, которая, как правило, призывает к действию. Например, подписаться на рассылку, узнать подробнее об услуге, купить билет на мероприятие или место на курсе. Многостраничный сайт - название говорит само за себя. Сайт, который имеет структуру из нескольких страниц, наполненных различным тематическим контентом. Это может быть сайт компании, которая предлагает множество услуг, информацию о которых логично разделять на разных страницах. Интернет - магазин - такой тип сайта может быть как одностраничным, так и многостраничным. Главное отличие для данного типа сайта - это, конечно же, иметь все необходимые инструменты для возможности продавать товары или услуги: необходимы интерфейсы «корзины», возможности выбора товаров и их покупки, также необходима интеграция с платежными системами для оплаты товаров, а при необходимости - интеграция с сервисами доставки. А о каком сайте для себя задумывались Вы? 😌

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

Разбираю потихоньку архивы с отпуска, думаю, в скором времени тут что-нибудь появится, а пока предлагаю посмотреть на один из недавних рассветов в Москве 🌅

И ещё один перелёт позади ✈️ Угадаете куда?