📌Дизайнер 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-системы крупного промышленного предприятия. Пользователей не устраивал сложный дизайн, а на выполнение одних и тех же сценариев они тратили очень много времени. Нам предстояло разобраться в проблемах пользователей, ... еще

Эвристики Якоба Нильсена

Эвристическая оценка (heuristic evaluation) — метод проверки юзабилити интерфейса, при котором один или несколько экспертов оценивают удобство использования продукта. В процессе данной оценки мы просматриваем список эвристик и проверяем, соответствует ли им интерфейс. Эвристическая оценка позволяет доказать бизнесу, что его дизайн должен быть таким, каким его задумали.

Эвристика представляет собой рекомендацию, правило или суждение эксперта, которое принято считать верным. Эвристики Якоба Нильсена — не единственный набор таких правил. Свои эвристики есть у Дональда Нормана, Бена Шнейдермана, Вайншенка и Баркера, а также Иэна Коннелла. Но все они повествуют примерно об одном и том же.

Вот что писал Якоб Нильсен:

«Первоначально я разработал принципы для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году. Четыре года спустя уточнил эвристики на основе факторного анализа 249 проблем юзабилити, чтобы вывести набор эвристик с максимальной объяснительной силой, в результате чего появился этот пересмотренный набор эвристик.

В 2020 году мы обновили эту статью, добавив дополнительные пояснения, примеры и ссылки. Хотя мы немного изменили язык определений, сами 10 эвристик остаются актуальными и неизменными с 1994 года. Если что-то остается верным на протяжении 26 лет, это, скорее всего, будет применимо и к будущим поколениям пользовательских интерфейсов».

Первая из десяти эвристик — видимость состояния системы (Visibility of System Status). Она касается гораздо большего, чем просто дизайн пользовательского интерфейса. По сути, речь идет об общении и прозрачности, которые имеют решающее значение для многих аспектов жизни. Люди стремятся к предсказуемости и контролю. Как правило, больший объем информации приводит к более эффективному принятию решений.

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

Вот несколько примеров👇
📌На сайтах интернет-магазинов подсвечивают товар, который скоро закончится. Если люди знают, что осталось всего несколько товаров, они с большей вероятностью начнут действовать немедленно.
📌В приложениях по доставке еды показывают, через сколько приедет курьер. Пользователи знают, что у них есть, например, 20 минут, чтобы успеть сделать свои дела и принять курьера.

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

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

Источники:
— Jacob Nielsen. How I Developed the 10 Usability Heuristics [2024’s update]
— Jacob Nielsen. 10 Usability Heuristics for User Interface Design
— Aurora Harley. Visibility of System Status
— Nielsen’s Heuristic Evaluation: Limitations in Principles and Practice

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

📍Меню-гамбургер
Меню-гамбургер, или навигационное меню — распространенный значок с 3 горизонтальными линиями. Пользователь нажимает на значок, и открывается меню. За счет этого меню-гамбургер экономит место на экране.

Преимущества:
— Упрощает компоновку экрана
— Обеспечивает прямой доступ к навигации
— Идеально подходит для вторичного доступа
— Легко распознать

📍Плавающая навигационная кнопка
Плавающая навигационная кнопка или FAB — это значок круглой формы, который не отображается в пользовательских интерфейсах. Часто это касается контента для продвижения основного действия в мобильном приложении. Как и меню-гамбургер, FAB занимает мало места на экране телефона. Однако иногда, когда кнопку добавляют на все страницы, это может отвлекать пользователей. В таких случаях содержимое страницы может остаться незамеченным.

Преимущества:
— Занимает мало места
— Легко распознать

📍 Навигация на основе жестов

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

Преимущества:
— Более быстрая, естественная и эргономичная схема навигации
— Простая в использовании
— Используется уникальный шаблон дизайна пользовательского интерфейса
— Улучшает пользовательский опыт

📍Подменю навигации
Этот тип шаблона навигации обеспечивает несколько уровней иерархии в приложении. Один из лучших примеров — приложение Амазон.

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

Преимущества:
— Простой в использовании
— Упорядочивает содержимое приложения
— Помогает легко перемещаться между страницами
— Легко распознать

📍Полноэкранная навигация

Полноэкранный навигационный шаблон занимает все пространство экрана навигации. Ключевые особенности:
— Простота. У каждой страницы – простая навигационная структура, которая обеспечивает удобство работы пользователя.
— Наглядность. Структура полноэкранного навигационного меню понятна и не требует пояснений.
— Согласованность. Пользователи должны понимать, где они находятся и как быстро вернуться к страницам приложения, которые смотрели ранее.
— Ориентация на пользователя. Хорошо продуманное навигационное меню имеет одинаковый дизайн для всех страниц приложения без исключений.

Преимущества:
— Улучшает пользовательский опыт
— Лучше всего подходит для достижения согласованности и простоты
— Отличная ориентация на пользователя
— Шаблон имеет последовательную и понятную структуру

📍Навигация по вкладкам

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

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

Преимущества:
— Легко распознать
— Улучшает пользовательский опыт

📍Навигация по боковой панели

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

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

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

Источники:
— Mobile App Navigation| Patterns and Examples.
— Mobile Navigation Guide: Basic Patterns & Examples
— Basic Mobile Navigation Patterns
— Navigation guides users through different parts of your app.