Hola, Amigos! Сделать сайт для самих себя — это тот еще квест. Всегда не хватает времени, сайт разрабатывается по остаточному принципу, так как приоритет отдается проектам. У нас ушло целых 2 года на запуск! В статье рассказываем смыслы, которые заложены в деталях сайта amiga.agency и сам процесс реализации со слов команды.
Перед тем, как начать рассказ о истории разработки фирменного стиля, дизайна сайта и программирования, хочется вас немного погрузить в становление самой компании Amiga.
Amiga появилась 2021 году. Ни одна компания не может существовать без сайта в 21 веке, поэтому мы быстро собрали лендинг на Tilda и начали его постепенно наполнять кейсами, описание которых было на vc. Такого сайта нам хватило на год, и в связи с мощным ростом команды и проектов, мы поняли, что нам уже не позволительно оставаться с лендингом, нужен полноценный корпоративный сайт.
С разработкой сайта всплыли задачи и по брендингу. Мы вдохновлялись эпохой СССР и NASA. Людьми, которые воспитывались на принципах честности, ответственности и сознательности. Таких же мы набираем себе в команду. Именно благодаря людям Amiga становится мощной компанией с высокой экспертностью в разработке и качестве предоставляемых услуг.
Amiga — не про Мексику, тако, сомбреро и пончо, как вы могли подумать. От Мексики мы оставили только настроение и единение с яркой и самобытной культурой, солнечную энергию и драйв. Наша цель — демонстрировать профессиональный, продуктовый, адекватный подход к заказной разработке. Мы строим и развиваем партнерские отношения с клиентами и подрядчиками, основанные на доверии.
Всё это мы заложили в наш фирменный стиль и сайт. И дальше продолжим развивать эту историю.
Дизайн в деталях
Всем привет, я Саша Коржуев, дизайнер Amiga. Сейчас расскажу, откуда мы брали идеи, черпали вдохновение и как развивалась наша дизайн концепция.
Зарождение концепции
С начала зарождения нашей компании у нас был лендинг на Tilda. В качестве фирменного шрифта выступал DIN, который первоначально был разработан для производственного использования: дорожные знаки и указатели, таблички на зданиях, технические надписи на механизмах и т.д.
Логотип отсылает нас к эпохе NASA — времени стремительного развития в сфере технологий. В основе лежит синий цвет, как символ доверия. Красный — энергия. И желтый — креативность.
Мы начали изучать визуальный стиль той эпохи и собрали мудборд:
Мы изменили пропорции в использовании цветов. Основным был выбран темно-синий, вторым — желтый, и акцентный — красный. Шрифт DIN заменили на современный гротеск Manrope.
На этой базе началась работа над первыми концептами.
Теперь наша задача — соединить ретро-стилистику и наше время. Для этого мы решили использовать современную вёрстку, шрифты и анимации.
В своей концепции мы используем различные элементы, отсылающие нас к бренд-легенде — это эффект зерна на первом экране и горизонтальные цветные полосы аналогичные с теми, что были на видеокассетах.
Несмотря на то, что общий вектор был утвержден, перед финальной версией дизайна было множество итераций.
В первых вариантах мы использовали тексты, набранные капсом — это выглядело симпатично и больше соответствовало компьютерному набору, что было неудобно при чтении, поэтому от этого решения отказались.
Фотографии команды были сделаны с эффектом Duotone и зерном, но коллективно решили сделать людей более «живыми», поэтому сделали фотографии цветными, но с приглушенным «выцветшим» эффектом.
Рабочая версия
Главная страница сайта наполнена различными интересными анимациями, которые дополняют образ Amiga и завораживают пользователя.
Блок с кейсами на главной выполнен в стилистике компьютерных игр, что гармонично вписывается в нашу стилистику и связывает с реальным временем:
Элементы в блоке «Стек» выполнены в форме фигур тетриса, каждая цветная фигура постепенно опускается сверху, прям как в во всеми любимой игре:
Мы сохранили робота со старого сайта, даже не знаем, откуда он взялся, но за годы проведенные вместе, мы его сильно полюбили и не хотим расставаться. А форма видео в блоге отсылает к старым телевизорам:
При том, что главная страница имиджевая и целью ее является привлечение внимания, мы также не забыли и про бизнес-цели. Во время путешествия по сайту за пользователем всегда следует закрепленная внизу кнопка «Обсудить проект», чтобы в любой момент можно было легко связаться с нашей командой.
Внутренние страницы более спокойны в плане анимаций, но тем не менее все они наследуют фирменный стиль.
Для удобства изучения кейсов мы собрали страницу из блоков: задачи, технологии, результаты работы, списки, цитаты клиентов. Также в административной панеле этими разделами очень легко управлять и наполнять сайт новым контентом.
Раздел «О компании» для нас — не просто проходная страница. Мы хотели показать, что Amiga — это дружный коллектив, который не только хорошо работает, но и хорошо отдыхает. Поэтому использовали живые искренние фото, а также креативную типографику в заголовках, чтобы сделать акценты на важных для нас вещах.
Тонкости реализации
Привет! Меня зовут Руслан Ревель, я Team Lead Frontend. И могу сразу сказать, что наш сайт — это саааамый сложный проект, в котором я принимал участие. Не столько технически, сколько эмоционально.
Технические детали
Сайт разработан на платформе OctoberCMS, базирующейся на фреймворке Laravel. OctoberCMS, как конструктор решений, позволяет создавать индивидуальные административные панели, сочетая преимущества фреймворка и удобства системы управления контентом.
Анимации на главной странице обеспечены виртуальным скроллом и использованием smooth scrollbar. Этот плагин интегрирован с библиотекой GSAP, которую выбирают многие крупные бренды: Coca-Cola, Google, Samsung и др. Логотип «Amiga» оживлен с использованием Lottie, добавляя уникальности визуальному стилю сайта.
Swiper JS дает жизнь нашим слайдерам, предоставляя гибкую и удобную свайп-функциональность. На мобильной версии, благодаря свайпу, мы реализовали интерактивное перемещение экрана в блоках «наград» и «команда». Нестандартные вызовы smooth scroll требовали дополнительных расширений и плагинов для контроля слайдов и анимаций, что привнесло уникальные возможности и помогло достичь нужного результата. Удобный инструментарий, такой плагин как Boxes, упрощает создание главной страницы, предоставляя разработчикам и администраторам эффективные средства для работы с контентом.
Итоги и выводы
Мы разрабатывали сайт с целью увеличить конверсию, из забавного, как только мы опубликовали сайт, в первую минуту к нам пришел потенциальный клиент )
А теперь к цифрам:
- отказы на сайте снизились в 3 раза (было 41,9% | стало 14,4%).
- глубина просмотра увеличилась в 2,6 раза (было 1,19 | стало 3,2).
- время на сайте увеличилось в 5 раз (было 0:37 | стало 5:08).
- конверсии: отправка формы выросли в 2 раза (было 112 | стало 247).
- пришло 8 человек в штат.
*сравниваются показатели 1.01.2022-31.10.2023 и 31.10.2023-сейчас.
За время новогодних каникул к нам прилетело 5 новых заявок на разработку. А это самое приятное, когда ты вроде бы ничего не делаешь, а лиды идут!
Сейчас мы усердно работаем над SEO-продвижением и хотим развивать разделы на сайте: услуги, кейсы, блог, hr-бренд. Будем постепенно делиться результатами и цифрами здесь и в наших соцсетях.
Amigos, дайте нам, пожалуйста, обратную связь! Как вам наш сайт, удалось ли нам донести свой посыл? Что по вашему мнению удачно и не очень?
Команда
Дмитрий Тарасов — СЕО
Анна Поликарпова — Руководитель бэк-офиса
Константин Франгуриди — Аккаунт-директор
Арина Назарова — PR-менеджер
Руслан Ревель — Team Lead Frontend
Александр Коржуев — UX/UI
Артем Салеев — Руководитель разработки
Мария Воробьева — Руководитель проектного офиса
Ася Васильева — Системный аналитик
Алина Кузьмина — Тестировщик
Расскажите о вашем проекте
компании напрямую?
