ABB.IOдизайн · сайты · маркетингОбсудить задачу

Дизайн, который помогает объяснить продукт.

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

Обсудить задачу Посмотреть ситуации

01 / Визуальный принцип

Идея становится макетом и точкой контакта.

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

02 / Ситуации

Когда дизайну нужно собрать разрозненное в понятное целое.

  1. 01

    Запуск

    Новый бренд, продукт или направление

    Запускается новый бренд, продукт или направление.

  2. 02

    Язык

    Визуальный язык потерял цельность

    Визуальный язык устарел или стал несобранным.

  3. 03

    Система

    Страницы не складываются в один опыт

    Сайт выглядит непоследовательно от страницы к странице.

  4. 04

    Ясность

    Предложение не считывается сразу

    Предложение сложно понять с первого взгляда.

  5. 05

    Подача

    Продукт нужно представить убедительнее

    Нужна убедительная презентация продукта или компании.

03 / Работа ABB.IO

Визуальное решение связываем с задачей, а не с набором приёмов.

4 задачи · листайте

01

Нужно ясно объяснить продукт

Визуальный принцип

Выделяем главное в предложении и выстраиваем визуальную иерархию.

Применение

Визуальная концепция и ключевые точки контакта.

На выходе

Направление, с которым проще обсуждать решение.
02

Нужен узнаваемый характер

Визуальный принцип

Собираем правила цвета, типографики и композиции вокруг задачи.

Применение

Айдентика и её элементы, если они входят в задачу.

На выходе

Согласованный визуальный язык.
03

Страницы выглядят разрозненно

Визуальный принцип

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

Применение

Веб-дизайн, макеты страниц и адаптивные состояния.

На выходе

Связанные макеты для разных экранов.
04

Продукт нужно представить убедительнее

Визуальный принцип

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

Применение

Пользовательские сценарии и презентационные материалы.

На выходе

Материалы для понятного представления продукта.

Связаться с ABB.IO

Готовы обсудить дизайн-задачу?

Напишите нам о продукте, задаче и материалах. В ответ уточним детали и предложим следующий шаг.

Обсудить задачу

04 / Развитие идеи

От замысла к материалу, который можно применять.

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

ARC 01 от брифа до запуска5 этапов · листайте ↔
  1. 01

    Идея

    Что важно объяснить

    Бриф: ARC 0101 / 05
    Продукт
    Портативная акустика
    Аудитория
    Дом и работа
    Главная мысль
    Чистый звук без лишнего
    Ключевое сообщениеБольшой звук.
    В компактной форме.
    Демо ARC 01: графитовая портативная колонка

    Один продукт. Одна ясная идея.

  2. 02

    Принцип

    Характер, ритм, композиция

    ARC 01 / HeroDesign
    Портативная акустикаARC 01

    Чистый звук.
    Компактная форма.

    Демо ARC 01: дополнительный ракурс графитовой колонки
    Демо ARC 01: графитовая портативная колонкаГлавный ракурс
    Демо ARC 01: дополнительный ракурс графитовой колонкиДеталь и фактура

    Фокус на продукте

  3. 03

    Язык

    Aa / цвет / сетка

    UI kitARC 01
    Aa
    H1
    Bold / 56
    H2
    Medium / 32
    Body
    Regular / 16

    Цвета

    • Cobalt
    • Orange
    • Lime
    • White
    • Graphite
    Сетка8px

    Компоненты

    Демо ARC 01: дополнительный ракурс графитовой колонки
    ARC 01Портативная акустика24 900 ₽
    Состояния
    АктивноВ корзине
    ВыбраноДоставка завтра
  4. 04

    Макет

    Страница и сценарий

    Страница товараDesktop + mobile
    ARCАкустика

    ARC 01

    Чистый звук.
    Компактная форма.

    Демо ARC 01: графитовая портативная колонка
    • Портативный формат
    • Тканевая отделка
    • Управление на корпусе
    • Cobalt
    • Orange
    • Lime
    • White
    • Graphite
    24 900 ₽
    ARC 01Демо ARC 01: графитовая портативная колонка

    Чистый звук.
    С собой.

    24 900 ₽
    1. Каталог
    2. Товар
    3. Корзина
    Помогаем выбрать
    ✓В наличии
    ↗Доставка от 1 дня
    ⌁Гарантия 2 года
  5. 05

    Применение

    Сайт, презентация, коммуникации

    Одна идея3 носителя
    Сайт / Hero
    ARC 01

    Чистый звук.
    Компактная форма.

    24 900 ₽
    Демо ARC 01: дополнительный ракурс графитовой колонки
    Презентация / 01Звук в вашем ритме.Демо ARC 01: графитовая портативная колонка
    ARC 0124 900 ₽
    КоммуникацииARC 01

    Больше музыки.
    Меньше лишнего.

    24 900 ₽
    Демо ARC 01: дополнительный ракурс графитовой колонки

05 / Передача результата

Что получает команда после дизайн-задачи.

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

  1. 01

    Визуальная концепция

    Зафиксированное направление: характер, композиция, цвет и принцип подачи.

    NORD FORM / directionТёплая фактура.
    Спокойный силуэт.    Фокус: вещи и материал в центре решения
    Демо NORD FORM: визуальное направление женского магазина с пальто, фактурами и палитрой
  2. 02

    Согласованные макеты

    Страницы и ключевые состояния, собранные в единую логику интерфейса.

    01 / каталогNORD
    FORM
    Демо NORD FORM: desktop-макет женского магазина на мониторе и mobile-макет на телефоне
    03 / корзинаВаш выборготово
    desktopmobileсогласовано
  3. 03

    Элементы фирменного стиля

    Знак, типографика, палитра и правила применения — если это входит в задачу.

    NORD FORM
    AaH1 / BoldBody / Regular
    Спокойный editorial тон
    + чистая типографика
    LookbookКаталог
  4. 04

    Веб-дизайн и адаптивы

    Макеты для согласованных экранов и сценариев использования.

    NORD FORMженская одежда

    Пальто Runa

    Тёплая фактура. Свободный силуэт.

    Демо экран женского магазина NORD FORM14 900 ₽В корзину
    NORD FORM9 900 ₽В корзину
  5. 05

    Презентационные материалы

    Материалы, которые помогают понятно представить продукт, услугу или идею.

    NORD FORM / 01Новая
    коллекция.    Демо NORD FORM на обложке презентации
    02Вещи
    на каждый день
    03 / сценарийГардероб
    в деталях
  6. 06

    Подготовленные исходники

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

    FigmaNORD FORM / e-commerceГотово
    СтраницыКаталогТоварКорзинаСтили и компоненты
    каталогтоваркорзинастили
    структурированоготово к передаче

Кейсы ABB.IO

Три проекта — три разные задачи.

Откройте кейс, чтобы посмотреть задачу, решение и материалы проекта.

Обсудим задачу

Расскажите, что хотите изменить.

Опишите задачу — так будет проще подготовиться к разговору.

Только цифры, номер России.

Поля со звёздочкой обязательны.