Разработка сайта Germanua.com

Кейс:

Перед командой Eprofit была поставлена новая задача от агентства по работе для украинских студентов в Германии (germanua.com) – разработать сайт и логотип. Задача заключалась в разработке дизайна сайта, чтобы он был не просто красивым, а решал ряд задач:

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

Для реализации поставленной задачи было задействовано несколько специалистов: интернет-маркетолог, проджект-менеджер, дизайнер логотипов, web-разработчик и web-дизайнер. Обратился к нам клиент в начале 2020 года. Время реализации логотипа и дизайна сайта заняли 1,5 месяца с учетом всех выходных, праздников и утверждений со стороны клиента.

Работа над дизайном сайта и логотипом

Специалисты провели тщательный анализ сайтов конкурентов в нише клиента. Полученные данные были соединены с пожеланиями заказчика, после чего началась непосредственная работа – создание дизайна. При работе использовались Figma и Adobe Photoshop для растровой графики и фотографий из-за несоответствия исходного материала. Использование Adobe Photoshop позволило провести работы при игре с фоном и тоном, чтобы достигнуть оптимальной комбинации оттенков. При работе с иконками и другими векторными инструментами была использована программа Adobe Illustrator.

Задача заключалась в том, чтобы правильно оформить контент для простого восприятия. С этой целью использовались простые фото на фоне и большие отступы. Также нужно было добавить акцент на формах. Они сделаны темными, чтобы даже при быстрой прокрутке сайта, потенциальный клиент смог зацепиться взглядом за них. Был добавлен объем благодаря эффекту «параллакс».

Параллакс-эффект (Parallax, греч. смена, чередование) – это изменение видимого положение объекта по отношению к удаленному фону в зависимости от нахождения наблюдателя.

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

Финальный вариант логотипа

Один из вариантов логотипа

Проработка структуры сайта

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

«Вакансии» – актуальные предложения для студентов.
«Преимущества для студента» – помогает сильнее заинтересовать пользователя.
«Требования к студентам» – помогает отсеять незаинтересованных посетителей, оставив релевантных.
«CTA (call to action)» – призыв оставить заявку и получить контакты лида.
«Преимущества программы» – показывает пользователю преимущества проекта.
«Почему именно мы» – показывает, почему студенты могут нам доверять.
«FAQ» – ответы на часто задаваемые вопросы, что снижает нагрузку на менеджера и позволяет понять суть программы.
«Контакты» – для комфортной двусторонней связи.

Преимущества показывают студенту все бонусы работы в Германии

Во время работы разработчик использовал сборщик проектов Gulp с препроцессором SASS и другими утилитами для того, чтобы каждая страница одинаково отображалась на всех браузерах, удобно версталась и поддерживалась после посадки на CMS Wordpress.

Форма захвата и контакты

Для стабильной работы сайта была проведена оптимизация и устранения ошибок в html-коде. Часто разработчики просто вручную проверяют их отсутствие, что не дает нужного результата html5.validator.nu.

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

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

Особенность проекта в том, что сайт интегрирован с CRM-системой Pipedrive и планируется интеграция с Binotel. Несмотря на проблемы между версиями плагинов Wordpress, все было оперативно решено. Также при работе использовались инструменты figma и avocode.

Оптимизация

Сделали адаптивную верстку под мобильные телефоны, планшеты и десктоп версии, разработали две языковые версии – российский и украинский, оптимизировали скорость загрузки и установили Google Analytics. Также провели SEO-оптимизацию на этапе разработки:

обновили мета-теги – основа SEO-оптимизации, чтобы поисковые роботы корректно определили тематику сайта и выдавали в поисковой выдаче по релевантным запросам;
добавили alt – краткое описание содержания на изображение, что также важно для оптимизации сайта;
связали с Google Search Console;
установили переадресацию из некорректных URL на главную страницу.

Все работы проводились в соответствии с пожеланиями и рекомендациями заказчика.

Понравилась статья? Поделитесь ею в своих соцсетях

Хотите так же?

Давайте разработаем вашу стратегию продвижения вместе