Поговорим о модульности

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

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

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

Плюсы модульного проектирования:
😎 Модульность помогает соблюдать единообразие в дизайне продукта. Макеты строятся из модулей с заготовленными внутренними и внешними отступами и правилами верстки.

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

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

Дизайнерам, которые используют принцип модульности в работе, проще поддерживать консистентность при создании продукта, а также быстро и легко собирать или редактировать макеты.

Ниже подробнее о некоторых👇

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

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

Рассказываем, какие специалисты в области дизайна существуют и как их различать🛠

📌Графический дизайнер.
Что делает: передает информацию с помощью графики — шрифтов, текста или иллюстраций. В этой профессии много направлений: брендинг и фирменный стиль, реклама, навигация, печатные издания. Также графические дизайнеры работают в вебе: например, рисуют иконки, баннеры или помогают адаптировать фирменный стиль для сайта или приложения.

Ценность для бизнеса:
Графический дизайнер воплощает идеи и бизнес-требования в визуальные решения, которые передают нужные сообщения для потребителей.

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

Ценность для бизнеса:
Веб-дизайнер помогает бизнесу продвигать товары и услуги в Интернете. Такой специалист может сделать запоминающийся лендинг, осуществить редизайн сайта или создать новый.

📌UX/UI-дизайнер
Что делает: проектирует интерфейсы. UX (user experience) — скелет продукта: архитектура, проработанные сценарии и пользовательские пути. UI (user interface ) — внешний вид интерфейса: кнопки, цвета, типографика, анимация.

Ценность для бизнеса:
UX/UI-дизайнер проделывает большой объем работы: собирает информацию от бизнеса, изучает ЦА будущего продукта и составляет её портрет, проводит аудит конкурентов. Основная задача — предоставить пользователю удобный и доступный продукт, в том числе с помощью исследований. UX/UI-дизайнер также отвечает за визуальную часть интерфейса: цветовая палитра, сетка, UI-кит, типографика. UX/UI-дизайнер берет во внимание те показатели, которые важны для бизнеса: конверсия, стоимость привлечения одного клиента, средний доход с пользователя и отток клиентов.

📌CX-дизайнер
Что делает: CX (Customer experience) — опыт, который формируется у клиента при его взаимодействии с компанией, предоставленными ей продуктами и услугами. CX-дизайнер улучшает опыт этот взаимодействия на всех точках соприкосновения.

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

📌Продуктовый дизайнер
Что делает: формирует концепцию цифрового продукта и определяет, как с ее помощью решить проблемы потребителя. Продуктовый дизайнер вместе с менеджментом ведет продуктовую команду к воплощению стратегии, учитывая ограничения и потребности рынка и технологий. Такой специалист постоянно «варится» внутри отрасли и имеет глубокое понимание аудитории, целей и задач бизнеса.

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

📌Дизайнер 3D-графики
Что делает: 3D-дизайнер — специалист по трехмерной графике, который моделирует, визуализирует и анимирует объемные реалистичные объекты разной сложности. 3D-графика используется в интерфейсах, промышленности, рекламе, телевидении, интернет-маркетинге и других отраслях. Дизайнер 3D-графики умеет изобразить несуществующий объект так, что вы никогда не усомнитесь в его реальности.

Ценность для бизнеса:
Визуализатор проектирует то, чего в реальном мире еще нет, чтобы помочь заказчику представить, как это будет выглядеть. Дизайнер 3D-графики предоставляет возможность тщательно просчитать и просмотреть все нюансы модели. В интерфейсах сайтов и приложений все чаще встречается анимированная графика, которая привлекает внимание, удерживает пользователя и является конкурентным преимуществом компании.

📌Fullstack-дизайнер
Что делает: владеет компетенциями фронтенд-разработчика и дизайнера. Он способен с нуля создать цифровой продукт: не только спроектировать структуру сайта или приложения, определить дизайн элементов, но и самостоятельно построить его архитектуру и пользовательский интерфейс.

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

Fullstack-дизайнер владеет компетенциями фронтенд-разработчика и дизайнера. Он способен с нуля создать цифровой продукт: не только спроектировать структуру сайта или приложения, определить дизайн элементов, но и самостоятельно построить его архитектуру и пользовательский интерфейс.

📌Motion-дизайнер
Что делает: анимирует иллюстрации и графику. Его задача — оживить графическую идею, привлечь и удерживать внимание к продукту.

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

📌Дизайнер дополненной реальности
Что делает: вписывает 3D-модели в реальность. Эти 3D-модели не просто существуют, а привязаны к объектам реального мира: улица, лицо, тело, земля, здание... Работает это так: человек заходит в Интернет-магазин, чтобы заказать обувь, и открывает камеру на смартфоне. Далее на экране появляются 3D-модели кроссовок, которые пользователь может виртуально примерить, наводя камеру на ноги.

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

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

Привет🙂 Сегодня поговорим про типографику, но для начала небольшой #test 🙂

Устроить себе небольшую проверку по знанию базовых моментов или нюансов в типографике — это отлично. Решили еще поделиться с вами некоторыми рекомендациями💡

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

На что обратить внимание при работе с текстом для мобильных приложений или адаптивной верстки🔽

Не забывайте про официальные руководства по дизайну для конкретной платформы. Поэтому для начала следует изучить соответствующие разделы гайдлайнов для IOS и Android.

📌Используйте достаточно крупный шрифт основного текста (от 14 до 17 пунктов) для комфортного чтения без необходимости увеличивать текст. Помните, что размер подбирается индивидуально под каждый выбранный шрифт, потому что один и тот же кегль у разных шрифтов будет иметь разную высоту.

📌Избегайте слишком тонких начертаний шрифтов — Thin, ExtraLight, Light. Они трудно различимы на мобильных устройствах.

📌Поддерживайте хорошую контрастность между текстом и фоном. Общие рекомендуемые значения контрастности: для основного текста не менее, чем 7:1 и 4,5:1 для заголовков или крупного текста. Чтобы проверить контрастность, воспользуйтесь онлайн-сервисами, например, Webaim.

📌Избегайте использования сложных декоративных шрифтов или множества разных стилей.

📌Разбивайте текст на короткие абзацы по 4-6 предложений. Для улучшения логического восприятия информации используйте отступы. Поддерживайте визуальную иерархию с помощью выделения размера, цвета, начертания шрифта. Значимые элементы текста оформляйте большим размером, контрастным или акцентным цветом, менее важные элементы оставьте в нейтральном стиле.

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

📌Используйте выравнивание по левому краю для основного текста. Ровный край делает текст аккуратнее и проще для чтения. Для оформления небольших объемов текста в 2–3 строки можно использовать выравнивание по центру.

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

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

Источники:
— Простые правила мобильной типографики
— Справочное руководство по типографике в мобильном веб‑дизайне
— Contrast Checker
— Самый полный гайд по контрастности в интерфейсах
— Мобильная типографика
— 15 лучших практик по типографике в мобильном дизайне
— Webaim

Казалось бы, CPM-система должна повышать эффективность работы, а не тратить лишнее время пользователей👀

⚙️ Так вот, задача: наша команда подключилась к проекту, на котором нужно сделать редизайн внутренней CPM-системы крупного промышленного предприятия. Пользователей не устраивал сложный дизайн, а на выполнение одних и тех же сценариев они тратили очень много времени. Нам предстояло разобраться в проблемах пользователей, ... еще