Найти тему

Как я делал сайт для иммиграционного агентства

Запустил новый сайт для иммиграционного агентства в Сербии.
Инструменты, которыми я пользовался при работе над проектом:

Структура сайта – Xmind ZEN
Интерактивный прототип – AdobeXD
Верстка сайта – Webflow
Интеграция с WordPress – конвертер Webflow To WordPress

Примерно 60% работы ушло на переговоры с заказчиком, проработку потенциальной ЦА, обсуждение всех услуг агентства, консолидацию услуг в пакеты, сокращение их названий и сборку первичного семантического ядра. После оптимизации структуры сайта мною был разработан интерактивный прототип в AdobeXD, который хорошо помог в дальнейшей работе. У заказчика сразу появилось понятие о том, как сайт будет взаимодействовать с пользователем.

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

Экраны структуры сайта в XMind ZEN и прототипа в AdobeXD
Экраны структуры сайта в XMind ZEN и прототипа в AdobeXD

На следующем этапе я разработал дизайн и сверстал шаблоны всех страниц сайта в Webflow. Поскольку конвертер Webflow to WordPress я еще не изучил до конца и понимая, что не справлюсь сразу с каталогом недвижимости и поиском, я обратился к профессиональному верстальщику Джамилю Галееву. При конвертировании сайта в шаблон WordPress Джамилю пришлось переверстать многие блоки заново. Благодаря ему, я узнал много новых для меня принципов верстки и осознал все свои ошибки. Стало понятно, что верстать в Webflow для конвертера WtW нужно только с применением знаний структуры WordPress и некоторых особенностей функционирования этой системы.

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

Вот так выглядит окно конвертера Webflow to Wordpress
Вот так выглядит окно конвертера Webflow to Wordpress

Объекты недвижимости в админке можно менять местами в два клика и фильтровать для более удобного просмотра.

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

Сайт иммиграционного агентства, разработанный мною на WordPress, конечно же адаптирован ко всем разрешениям экрана.
Сайт иммиграционного агентства, разработанный мною на WordPress, конечно же адаптирован ко всем разрешениям экрана.

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

Помимо самого сайта я сделал фотосессию офиса агентства и руководителей, обновил карточку компании на ЯндексКартах, сделал редирект 301 с некоторых страниц старого сайта , настроил чат mssg_me и добавил в сниппет Яндекса сервис диалогов.

Вид карточки объекта в сервисе верстки Webflow.
Вид карточки объекта в сервисе верстки Webflow.