{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Дайджест Cedro

Привет! Мы Cedrо — дизайн-студия из Армении. Делаем цифровые продукты и сервисы. За последние несколько месяцев у нас накопилось много кейсов с классным дизайном — лучшие мы собрали в этот дайджест.

1. Cайт консалтинговой компании Bright Rich

Клиент

Bright Rich — это консалтинговая компания. Помогает найти подходящий офис, склад и коворкинг.

Задача

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

Решение

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

Теперь искать недвижимость в каталоге Bright Rich легко: на главной можно выбрать локацию, цену, метраж и тип услуги — продажа или сдача в аренду. Дальше пользователь попадает на страницу с карточками объектов и, если нужно, открывает её в формате карты. После — переходит к дополнительным фильтрам, например выбирает отделку, год постройки, этаж или статус строительства. Результаты поиска по каждому запросу можно сохранить.

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

Для этого проекта мы сделали ещё и видеокейс. Рассказываем там подробно про работу, но уже на английском языке.

2. Сайт производителя уличной мебели «Аданат»

Клиент

Видели классные деревянные и бетонные скамейки, беседки или урны — скорее всего, их сделали на производстве «Аданата». Они лидеры на рынке уличной мебели. Благоустроили «Зарядье», сад «Эрмитаж» и парк развлечений «Остров мечты».

Задача

Старый сайт компании устарел, да ещё и конкуренты начали обновлять свои, поэтому «Аданат» пришёл к нам за новым — современным и стильным, как их мебель.

Решение

Фирменный стиль у клиента уже был, поэтому мы взяли его за основу и разработали дизайн — лёгкий, понятный и с акцентом на визуал.

Самая важная часть сайта — это каталог с поисковой строкой, фильтрами и продуманной вёрсткой. Для небольших предметов мы сделали квадратные маленькие карточки, а для продолговатых — прямоугольные. Так товар занимает всё пространство внутри превьюшки, а пользователю удобно его рассматривать.

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

3. Сайт производителя полезных продуктов O12

Клиент

O12 — это компания, которая разрабатывает белковые продукты без сахара, спортивную одежду и линейку бадов.

Задача

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

Решение

Брендбука у O12 не было, поэтому мы по-быстрому собрали референсов, устроили колл на полчаса и моментально друг друга поняли.

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

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

4. Сайт управляющей компании «Река ФМ»

Клиент

«Река ФМ» — это управляющая компания с 2 млн м² коммерческих и жилых помещений в 7 городах России.

Задача

Разработать современный дизайн, продумать путь пользователя и как результат — создать удобный ресурс.

Решение

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

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

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

5. Сайт производителя оборудования для цифровой радиографии «Экоскан»

Клиент

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

Задача

Взять контент «Экоскана» с кучей схем и терминов из физика, превратить его в понятный рассказ и дополнить современным дизайном.

Решение

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

Над проектом работала почти вся команда — в том числе иллюстратор и 3D-художник. Первый отрисовал иконки для категорий в каталоге. А второй сделал модель логотипа «Экоскана» — она разбавила фото оборудования.

Чтобы клиентам «Экоскана» было проще решиться на покупку, мы добавили на сайт калькулятор — он рассчитывает, когда прибор окупится.

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

0
9 комментариев
Написать комментарий...
alex

а ссылки на лайв?

Ответить
Развернуть ветку
Сedro
Автор

в смысле на сайты? некоторые пока на вёрстке, поэтому пока так

Ответить
Развернуть ветку
Vasek Romanov

Крутые проекты)) 2 нашел в лайве, потыкаю. Спасибо что делитесь.

Ответить
Развернуть ветку
Евгений

Аданат по скринам действительно сделан аккуратно и грамотно. Надеюсь, в скором времени сверстают

Ответить
Развернуть ветку
Alex

Сообщение удалено

Ответить
Развернуть ветку
Сedro
Автор

релоцировались уже, надо поменять, да

Ответить
Развернуть ветку
Alex

Да понял, что особо не важно. Играем в игру в сложившейся ситуации) Хорошие кейсы, удачи вам

Ответить
Развернуть ветку
Сedro
Автор

спасибо)

Ответить
Развернуть ветку
Dmitriy Islamov

А почему у Bright Rich решили сделать строку поиска внизу первого экрана? Логично же поднять её выше, чтобы пользователь сразу мог с ней взаимодействовать.

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

У «Река ФМ» аналогичная проблема — не продумано, кроме красивых картинок, как будет пользователь добираться до основных функций ресурса.

Ответить
Развернуть ветку
6 комментариев
Раскрывать всегда