User flows (пользовательские сценарии, UX-сценарии, Wire, UI или IX сценарии)
User flow – это визуальное представление последовательности действий, которые пользователь выполняет для достижения своей цели.
Может охватывать как какую-то отдельную функцию, так и полностью весь продукт.
UX
User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом.
Удается ли ему достичь цели и на сколько просто или сложно это сделать.
UI
User Interface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает.
Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку на сайте, читабельным ли будет текст и тому подобное
UI-кит
или Компоненты пользовательского интерфейса (User Interface components)
Набор модулей, элементов и шаблонов для создания единообразного и согласованного дизайна пользовательского интерфейса (UI) веб- или мобильного приложения.
Sketch (набросок, эскиз)
Первоначальный моментальный набросок от руки того, что придет в голову.
Wireframe (вайфрейм, блок-схема)
Низкодетализированный набросок дизайна экрана, упор в котором делается не на визуальную составляющую, а на расположение элементов, структуру и содержание экрана.
Он чётко должен показывать:
Основные группы содержимого. Что?
Информационную структуру. Где?
Описание взаимодействия пользователя с интерфейсом и его примерную визуализацию. Как?
Mockup (мокап, mock-up, макет)
Средне или высоко детализированное статичное представление дизайна.
Очень часто мокап — это черновик дизайна или даже фактический дизайн-макет. Хороший мокап:
Представляет информационную структуру, визуализирует контент и демонстрирует базовую функциональность в статике;
Поощряет оценку визуальной стороны проекта.
Prototype (прототип)
Средне или высоко детализированное представление конечного продукта, которое имитирует взаимодействие пользователя с интерфейсом.
Он должен позволять пользователю:
Оценить содержание и интерфейс;
Протестировать основные способы взаимодействия, как если бы это был готовый продукт.
Модель Double Diamond (двойного алмаза, модель двойного бриллианта)
Подход для поиска решений, который основан на 4 этапах:
открытие и исследование — знакомство с проблемой (расхождение);
определение и синтез — область для сосредоточения (схождение);
разработка и идеация — потенциальные решения (расхождение);
результат реализация — решение, которое работает (схождение).
Темные паттерны (dark patterns)
Уловки в продуктах, которые вынуждают пользователя вести себя не так, как ему самому бы хотелось.
SD — Service Design
Это процесс конструирования взаимоотношений между конечным клиентом и бизнесом с целью уравновесить потребности клиента и потребности бизнеса.
User Story Mapping (USM, построение карты пользовательской истории)
Инструмент целостного проектирования продукта на основе пользовательского пути
Design Thinkin (Дизайн-мышление)
Это интегрированный подход на стыке рациональной аналитики и эмоционального творчества.
Цель дизайн–мышления — создать продукты и услуги, совершенствующие жизнь людей, прорывы, нарушающие правила, меняющие ситуацию и картину мира.
Классические инструменты рынка здесь не подходят — недостаточно спросить клиента, чего он хочет, ведь он может не знать.
Процесс дизайн мышления состоит из 5 элементов :
Эмпатии (Empathize)
Определения (Define)
Генерации идей, или идеации (Ideate)
Прототипирования (Prototype)
Тестирования (Test)
Design Sprint (Дизайн Спринт)
Небольшой и интенсивный интервал времени, в течение которого команда работает над созданием идей и их максимально быстрой реализации на практике, чтобы быстро получить обратную связь и начать совершенствоваться.
Prototyping process
Процесс, в рамках которого дизайнеры создают, экспериментируют и воплощают в жизнь концепцию, начиная от заметок на бумаге и заканчивая цифровым проектированием.
Lean UX canvas
Мощный инструмент для описания и обсуждения бизнес-модели стартапа или нового продукта.
Six thinking hats
Техника, предложенная Эдуардом де Боно, которая помогает структурировать и улучшить процесс обсуждения и принятия решений в группе.
Каждая «шляпа» представляет определенный вид мышления или роли, которые участники могут принять.
Customer experience, CX (клиентский опыт)
Восприятие и взаимодействие клиента с компанией на протяжении всего цикла взаимодействия, включая все точки контакта и каналы общения.
Клиентский опыт включает в себя эмоции, ощущения и впечатления, которые клиент испытывает при взаимодействии с продуктом, услугой или брендом компании.
User Experience, UX (опыт взаимодействия)
Восприятие и ответные действия пользователя, возникающие в результате использования и/или предстоящего использования продукции, системы или услуги
Flat Design (Плоский дизайн)
Тенденция в дизайне, когда объекты изображаются без передачи объёма. Направление обрело популярность в 2012–2014 годах и остаётся актуальным по сей день. В его основе — чистые, лаконичные, схематичные изображения без лишней детализации.
Interaction Design (Интерактивный дизайн)
Процесс, направленный на создание привлекательных для пользователей веб-интерфейсов с логичной и продуманной схемой поведения и действий.
Material Design (Материальный дизайн)
Дизайн-система для создания интерфейсов программного обеспечения и приложений, разработанная компанией Google.
Iterative Design (Итеративный дизайн)
Это методология, которая позиционирует ваш цифровой опыт как живой проект, который регулярно настраивается и улучшается по мере продвижения, а не создается за один присест раз и навсегда.
Design sprints (Дизайн-спринты)
Фреймворк для команд любого масштаба, используемый для решения и тестирования различных задач по дизайну всего за 2-5 дней.
Brand Identity (Фирменный стиль)
Наборграфических и визуальных элементов, таких как логотип, цветовая схема, типографика, изображения и другие дизайн-элементы, которые уникальны и идентифицируют компанию, бренд или организацию. Фирменный стиль помогает создать единую и узнаваемую внешность и визуальное впечатление о компании или бренде.
Mood board (Доска настроения)
Любое единое пространство — большой лист, полотно или доска — на котором собраны разные визуальные элементы.
То есть это коллаж из образов, которые отражают желаемую стилистику и настроение проекта.
Storyboard (Раскадровка)
Серия изображений, которая иллюстрирует последовательность событий или историю для создания фильма, видеоролика, анимации или других мультимедийных проектов.
User Journey Maps / UX Flow / Flowchart
UJM
Карта пути онлайн-пользователя внутри продукта, когда он находится на сайте или в приложении.
UX Flow
Диаграмма из блоков и связей. Она подобна карте: отражает каждый шаг пользователя и главные действия, которые он должен совершить с момента запуска приложения или входа на сайт и до достижения своей цели.
Flowchart
Флоу-чарт (flowchart) — это диаграмма, которая используется для представления последовательности шагов или процессов в системе или программе.
Он визуально отображает логику и управление потоком данных или информации в процессе.
Wireflow
Объединение блок-схемы и wireframes.
Wireframe
Низкодетализированный набросок дизайна экрана, упор в котором делается не на визуальную составляющую, а на расположение элементов, структуру и содержание экрана.
Wireframe (Каркас)
Базовое двухмерное визуальное представление веб-страницы, интерфейса приложения или макета продукта.
Mockup (Макет)
Реалистичная модель предмета, которая помогает показать, как дизайн будет выглядеть в контексте: на экране телефона, футболке или на улицах города.
Low and High-fidelity protos
Low-fidelity (низкая степень детализации) и high-fidelity (высокая степень детализации) прототипы – это разные уровни и степени детализации прототипирования, используемые в процессе разработки продукта или интерфейса.
Adaptive design (Адаптивный дизайн)
Адаптивный дизайн, или динамический показ — проектирование сайта с условиями, которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины.
Responsive design (Отзывчивый веб-дизайн)
Проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах
Affordance (Ухватистость или провоцировательность)
Подсказки, которые говорят нам, как элемент может взаимодействовать с нами.
Picker (Сборщик)
Cборщик позволяет пользователям выбирать цель из ряда опций. Обычно он включает один или несколько прокручиваемых списков различных значений, например часов, минут, дат, измерений, валют и т. д.
Bar (Панель навигации)
Раздел пользовательского интерфейса с интерактивными элементами, позволяющими пользователю быстро выполнять некоторые основные шаги взаимодействия с продуктом, а также может информировать пользователя о текущем этапе процесса.
UI Element
Элементы пользовательского интерфейса (UI) — это все различные части интерфейса, которые нам нужны для запуска определенных действий или обхода приложения или веб-сайта. Подумайте о кнопках, полях ввода, переключателях и переключателях.
UI Pattern
Шаблоны пользовательского интерфейса — это многократно используемые решения распространенных проблем удобства использования в продуктах или в Интернете, выраженные в виде набора элементов пользовательского интерфейса.
Widget (Виджет)
Просто экранный элемент, с которым взаимодействуют пользователи. Примеры виджетов: ползунки, инструменты календаря, кнопки, контактные формы.
Pixel (Пиксель)
Отдельная точка на изображении. На мониторе компьютера пиксель обычно представляет собой квадрат. Каждый пиксель имеет цвет, и все пиксели вместе составляют изображение. Это не определенный цвет, а скорее изменение, позволяющее отображать разные изображения и графику.
Lorem Ipsum (Текст рыба)
Также известное как «фиктивная копия», lorem ipsum — это общий текст-заполнитель, используемый, когда настоящий текст недоступен. Он используется в качестве текста-заполнителя, чтобы продемонстрировать, как будет выглядеть дизайн после того, как будет добавлен реальный основной текст.
Legibility (Разборчивость)
Мера того, насколько легко отличить одну букву от другой. Разборчивость во многом зависит от выбора шрифта и того, как его использовать, то есть более простые шрифты с засечками или без засечек обычно лучше подходят для основного текста меньшего размера.
Microcopy (Микрофотокопия)
Это небольшие фрагменты текста, которые вы видите в приложениях или на веб-сайтах, которые помогают вам перемещаться по нему. Подумайте о ярлыках на кнопках, сообщениях об ошибках, тексте-заполнителе в полях ввода и тексте во всплывающих подсказках. Небольшие фрагменты текста — большое влияние на UX вашего продукта.
Grid System (Сетка)
Системы сеток — это организационные инструменты, которые помогают дизайнерам (особенно графическим дизайнерам) размещать контент на экране. Они состоят из вертикальных и горизонтальных линий, образующих то, что мы называем столбцами и строками.
Scale (Масштаб)
Масштаб характеризует изменение размера объекта при сохранении его формы и пропорций. Большой масштаб может создать драму, а маленький может создать мелкие детали.
Color Theory (Теория цвета)
Изучение того, как цвета заставляют людей чувствовать и реагировать. Определенные цвета имеют тенденцию вызывать у людей определенные подсознательные эмоции и чувства — например, мы склонны ассоциировать синий цвет с доверием и надежностью, поэтому так много корпоративных предприятий используют синие логотипы и бренды.
Cool Colors (Холодные цвета)
Цвета, которые заставляют вас думать о более низких температурах, например, синий, зеленый, фиолетовый и т.д. Эти цвета создают спокойную и успокаивающую атмосферу. Предположим, вы можете добавить более холодные тона к фотографии, если увеличите синие тона в вашем изображении.
Warm Colors (Теплые цвета)
Цвета, которые заставляют вас думать о тепле, например красный, желтый, оранжевый и т.д. Эти цвета, как правило, кажутся более уютными, дружелюбными и веселыми. Вы можете добавить больше теплых тонов к изображению или фотографии, увеличив оранжевые тона в вашем изображении.
Gradient (Градиент)
Постепенное изменение цвета от одного тона к другому.
Opacity (Прозрачность)
Степень прозрачности элемента. Чем ниже непрозрачность, тем прозрачнее элемент.
Resolution (Разрешение)
Количество деталей в изображении. Как правило, чем выше ваше разрешение, тем лучше выглядят ваши изображения и тем больше деталей отображается. В то время как изображения или графика с более низким разрешением, как правило, выглядят размытыми, пиксельными или мутными.
Contrast (Контраст)
Степень различия между двумя соседними элементами. Некоторые другие распространенные типы контраста: темный против светлого, толстый против тонкого, грубый против гладкого и т.д.
Saturation (Насыщенность)
Степень интенсивности и яркости цвета. Например, цвет с низкой насыщенностью может казаться бледным и блеклым, тогда как более насыщенный цвет может казаться более ярким и красочным.
Композиция
Перспектива
Золотое сечение
ИНТЕРЛИНЬЯЖ
Шрифты с засечками и без
Иерархия
Кернинг
Отступы
Гайды
Вектор
Растр
Майдмеп