Лендинг для российского IT-интегратора ИННИР

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

В октябре 2024 директор ИННИР обратился к нам с задачей разработать сайт с нуля: продумать дизайн, структуру, написать тексты и сверстать на Тильде. В кейсе рассказываем, как мы выстраивали работу и что получилось в результате.

Посмотреть сайт

Погрузились в проект

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

Работу мы начали с подготовки структуры сайта. Наш редактор созвонился с командой клиента, задал вопросы об их целевой аудитории, услугах, опыте работы, специалистах. После встречи клиент прислал материалы с подробной информацией о продуктах.

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

На этапе текстов сразу оставляли комментарии для дизайнера и добавляли визуальные референсы

Написали тексты

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

По итогу у нас получился документ на 14 тысяч знаков. Утвержденные тексты вычитал корректор, чтобы в них не осталось случайных опечаток.

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

Предложили идеи по дизайну

На старте мы подготовили три варианта оформления сайта. Подробного брендбука у нас не было, поэтому ориентировались на общие описания. По цветам — сочетание синего и оранжевого, приглушенные тона, сдержанный и аккуратный дизайн.
Первые версии смотрите в карусели →

Первая версия дизайна с анимированной сеткой на фоне

Другой вариант — бегущие пиксели, отсылающие к технике

Третья идея — яркие текстовые блоки, совмещенные с фотографией. Картинку здесь добавили как референс

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

Листайте карусель, чтобы посмотреть все идеи →

Выполнили первый экран в темной теме — в качестве центрального образа использовали отсылку к данным и индивидуальности человека, через отпечаток пальца

Аналогичный дизайн, но в светлой теме с ярким красным пятном

Другая идея — использовать в качестве центрального образа мужчину в шлеме, отсылающего к кибертехнологиям

Тот же дизайн в светлой теме

А вот — более абстрактный образ, сфера имитирует массив сложных данных

Третью версию дизайна также подготовили в светлой теме

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

Экспериментировали с разными образами:
— данные, аналитика, прогнозирование, искуственный интеллект
— индивидуальность в человеке: радужка глаза, отпечаток пальца, ДНК, мозг, мысль

Суммарно мы предложили 10 вариантов. Вот те, которые прошли финальный отбор.

Решили остановиться на светлой теме и создать ярко-красное изображение, которое будет притягивать внимание

По итогу клиент выбрал вариант с абстрактным изображением данных на платформе.

Вот так выглядит финальный вариант дизайна

Сделали дизайн-макет в Фигме

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

Разберем поэтапно, как решали возникшие трудности.

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

Вот, как выглядел один из экранов на этапе ТЗ

В первом варианте дизайна

И финальный вариант дизайна

А чтобы структурировать информацию на длинном лендинге, мы добавили вкладки. Каждая вкладка — раздел про конкретное направление работ: Аналитическая платформа, Мультимедиа и Кибербезопасноть.

Первая вкладка рассказывает про платформу Sage от Т-Банка

Вторая вкладка — про направление работ с мультимедиа-пространствами

А третья посвящена технологиям информационной безопасности

Сверстали сайт на Тильде

Когда дизайн-макет был полностью согласован, мы перешли к финальному этапу верстки. Собрали страницу на Тильде, настроили анимации, сделали мобильные адаптивы. Вот несколько креативных идей, которые предложили на верстке.

Оформили ключевые услуги как плашки, при наведении они витают в воздухе вокруг футуристичной сферы

Интегрировали много каруселей. Это помогло дополнительно структурировать информацию и добавить яркие визуальные акценты.

Карусель листается по стрелочкам и при перетаскивании элементов в сторону

Добавили анимацию с этапами работ. Когда открывается экран, появляется лента с номерами и тексты с кратким описанием. Из-за особенностей верстки с вкладками внедрили это решение через код страницы.

Структурировали информацию на уровне текста, дизайна и верстки

Результаты

Погрузились в техническую тему и написали тексты
Предложили 6 вариантов дизайна
Сгенерировали 15 изображений для сайта с помощью ИИ
Сверстали сайт и настроили анимации
Выполнили и согласовали все работы за 5 месяцев

Отзыв

Юлия Борисова

администратор проектов «ИННИР»

В октябре 2024 года у нашей компании возникла потребность в полном обновлении существующего сайта. Было решено доверить все работы по разработке сайта с нуля специалистам компании «Сделаем» — от дизайна и структуры до верстки на Тильде.

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

Процесс создания лендинга занял гораздо больше времени, чем оговаривалось изначально. Но в данном случае это того стоило. То, что получилось в итоге, нас полностью устраивает.
Большой плюс в работе агентства, что специалисты видят и понимают клиента и делают всё возможное, чтобы выполнить работу наилучшим способом.

команда

проекта

Яна Мичурина

проджект

Ира Крымская

автор

Влад Ерошенко

дизайнер

Лена Мазурова

редактор

Вова Муравьев

верстальщик

Катя Косарева

корректор

Эксперт по продукту

Написать в Телеграм

Наталия Соловьева

Давайте обсудим ваши задачи по контенту

Погрузимся в вашу задачу, подберем оптимальный формат работы и сделаем расчет стоимости. Если не знаете точно, какой контент вам нужен — подумаем вместе.

Давайте обсудим