AZAT Team: корпоративный сайт IT-компании

Задача

AZAT Team — IT-компания: делает для бизнеса сайты, веб-сервисы и мобильные приложения. Я работала в ней дизайнером, и сайт компании был одним из моих проектов.

У компании уже были опыт и кейсы, но сайт этого не показывал. Он устарел: одна страница на английском, без страниц услуг и без рассказа о команде, работы — карточками с парой строк.

От нового сайта хотели пять вещей: больше доверия к компании, больше заявок, портфолио и экспертиза в удобном виде, единый стиль и понятная структура.

Открыть в полном размере

Пользователи и роли

Ролей и личных кабинетов здесь нет: это открытый сайт. Его читают люди, которые выбирают подрядчика на разработку:

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

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

Что было сложным

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

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

Ключевые решения

Шаблон страницы кейса

Проблема. Портфолио — главный довод компании. На старом сайте работа была карточкой с парой строк: что сделали и зачем, из неё не понять.

Что я сделала. Шаблон, по которому кейс рассказывается по порядку: вводные данные и карточка с фактами — сфера, город, срок, услуги; цели и задачи; что входило в работу; решение по шагам; технологии; кто работал над проектом; ключевые моменты и планы. Между блоками — экраны самого проекта. Тексты кейсов писали основатели.

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

Открыть в полном размере

Доверие: люди, отзывы, цифры

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

Что я сделала. На первом экране — три цифры о команде. Ниже — блок «Наша команда» с фотографиями сотрудников. Отзыв клиента стоит рядом с логотипом его компании и благодарственным письмом, а над отзывами — ссылки на площадки, где о компании пишут: Яндекс, Trustpilot и hh.ru. Фотографии, цифры и отзывы собрали основатели.

Открыть в полном размере

Сайт из общих блоков вместо одной страницы

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

Что я сделала. С главной можно перейти в любое из пяти направлений: кастомное программное обеспечение, web-разработка, мобильные приложения, техническая поддержка сайтов и DevOps. У раскрытого направления видны его темы — например, CRM-системы или разработка MVP.

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

Открыть в полном размере

UI-kit и передача в разработку

В UI-kit — палитра из семи цветов и шрифт Steppe в одиннадцати размерах: от заголовка 61 px до тегов 12 px.

Открыть в полном размере

Элементы нарисованы с состояниями: теги — в четырёх, кнопки — в двух, вкладки — активная и неактивная. Отдельно собраны карточки отраслей и моделей сотрудничества, поле формы и полоса логотипов клиентов.

Открыть в полном размере

Главную я сделала и для телефона — на ширину 360 px, вместе с меню.

Открыть в полном размере

Макеты я передала в разработку и потом проверяла, как их сверстали.

Взгляд на доступность: что я исправила бы сегодня

Это типичный красивый сайт компании: свои задачи он решает, но о доступности тогда не думали. Сегодня я сделала бы иначе:

• Серые подписи. Названия площадок с отзывами и должность автора отзыва — #7D8387 на светло-сером #F5F5F5, контраст 3,5:1. Нужно от 4,5:1. Затемнила бы серый. Критерий 1.4.3.
• Форма заявки. Подпись поля — только текст внутри него: он исчезает, как только человек начинает печатать. Цвет подписи на поле — 4,0:1, а само поле почти сливается с фоном — 1,1:1. Поставила бы подписи над полями и дала бы полю заметную границу. Критерии 3.3.2, 1.4.3 и 1.4.11.
• Мелкий красный текст на чёрном. Ссылка «Пригласить в тендер» в подвале — #D70000 на чёрном, 3,9:1. Для мелкого текста нужно от 4,5:1. Сделала бы такой текст белым, а красный оставила бы заголовкам и кнопкам. Критерий 1.4.3.
• Движение и клавиатура. Для бегущих строк с логотипами и надписью «Наша команда» я не предусмотрела паузу. В UI-kit нет видимого фокуса для тех, кто ходит по сайту с клавиатуры. Добавила бы и то и другое. Критерии 2.2.2 и 2.4.7.

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

Итог

Сайт запущен и работает: azat.team. Вместо одной страницы у компании теперь главная, страницы услуг и кейсы, собранные из общих блоков.

Это хороший крепкий дизайн по заданному направлению. Что на сайте поменяли после передачи макетов, я не сверяла; данных о заявках у меня нет.