Shendrikov Education

О сетках в Figma

2020-06-19T13:28:20.922Z

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

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

И это все, конечно же, важно, но есть кое что ВАЖНЕЕ!

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

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

В основе хороших правил - душа.

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

Решили поделиться несколькими способами использования сеток для ускорения процесса проектирования – от изменения размеров фреймов
до визуализации интервалов и отступов.

Основы

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

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

Внешний вид сетки – Вы можете контролировать внешний вид (цвет и непрозрачность) каждой сетки, чтобы их было легко дифференцировать.

Существует три вида сетки на выбор: uniform grid, column grid и row grid. Uniform grid создает серию равномерно распределенных полей по всему фрейму (представьте лист бумаги в сетку) любого размера, который вы укажете. У остальных есть еще несколько вариантов создания столбцов и строк. В column и row сетках вы также можете контролировать их положение и масштабирование.

Вложенные сетки

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

В отличие от других инструментов, вы не будете ограничены одной сеткой на уровне «артборда». Поскольку вы можете применить сетку к любому фрейму, это означает, что вы можете применить их к фреймам, вложенным в ваш дизайн. Поэтому не стесняйтесь делать из своего дизайна "матрешку" и создавайте сетки в сетках внутри сеток (если того требует контент, без лишней надобности не плодите фреймы внутри фреймов).

Применение ограничений (constraints)
к сеткам

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

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

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

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

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

Визуализация внутренних отступов

Иногда вам нужно визуализировать внутренние отступы, чтобы гарантировать, что содержимое остается равноудаленным от границ элемента. Для этого вы можете создать сетки, стилизуя column и row grid с одной строкой / столбцом, устанавливая желоба в 0 и поле с нужным интервалом. Если ваша дизайн-система имеет стандартизированные значения интервалов для отступов, вы можете быстро добавить их и применить их к фреймам или компонентам своего дизайна.

Совместное использование сеток
со стилями

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

Оригинал: Thomas Lowry

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

Это всего лишь советы, а не нерушимые догмы.

17 июня конференция Adobe 99U — бесплатно!

2020-05-25T10:50:57.797Z

Ежегодная конференция Adobe 99U — это, как правило, дорогостоящее мероприятие, которое проводится в Нью-Йорке для креативных людей, цель которых — узнать что-то новое и получить всплеск вдохновения от экспертов в разных областях искусства.

В этом году мероприятие пройдёт в онлайн-режиме, и более того, вход на конференцию будет абсолютно бесплатным для всех.

Решение о том, что 12-я ежегодная конференция Adobe 99U будет проведена в онлайн режиме было вполне очевидным, ведь в связи с ситуацией, которая сложилась в мире, иначе быть и не могло. Но вот новость о том, что вход на конференцию будет бесплатным и открытым для всех, стала приятным сюрпризом, учитывая, что билеты, как правило, стоили от $1000.

На конференции 2020 года будет рассмотрен вопрос: «Что значит быть креативным?»

А вот привычная локация в Нью-Йорке переместится в прямой эфир на Behance 17 июня. Ключевые семинары и мастер-классы будут проводиться в цифровом формате. Некоторые из спикеров довольно известны в различных областях творчества. Так, на конференции вы сможете увидеть: художника Kelli Anderson, вице-президента Hulu по дизайну John S. Couch, тренера по творческой карьере Tina Essmaker и многих других не менее интересных личностей. Роль ведущего исполнит вице-президент Adobe — Will Allen. Узнать больше о мероприятии и увидеть полный список спикеров, семинаров и мастер-классов вы можете перейдя по этой ссылке . На данный момент Adobe ещё не опубликовала план, по которому будет проводиться конференции в этом году, но как только они его сформируют, вы сможете найти его всё по той же ссылке.

Если вы заинтересованы в участии, то сперва вам потребуется зарегистрироваться, перейдя по ссылке — Behance.net/99u.

Руководство по созданию призыва к действию

2020-04-05T09:46:52.280Z

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

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

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

Проще говоря, CTA – это действие, которое вы хотите, чтобы посетители вашего сайта сделали.

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

Привлекательный текст

Сила слов прекрасно иллюстрирует Брайан Кларк из Copyblogger. Социальный психолог Эллен Лангер попросила пропустить ее вне очереди на ксерокс. Она пробовала три разных способа просьбы:

Простите, у меня пять страниц. Можно я воспользуюсь ксероксом? – 60% сказали: «Окей»
Простите, у меня пять страниц. Можно я воспользуюсь ксероксом, потому что я очень спешу? – 94% сказали: «Окей»
Простите, у меня пять страниц. Можно я воспользуюсь ксероксом, потому что мне нужно сделать несколько копий? – 93% сказали: «Окей»

Триггерное слово «потому что» настолько мощно, что, кажется, не имеет значения, что названная «причина» звучит по-детски.

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

Например, Slack использует двойное значение слова free! Не только бесплатность, но и свобода передвижения и выбора влияют на подсознательное поведение пользователя.

Еще одна стратегия, которую многие сайты используют в тексте призыва к действию – это тон сообщения. Глаголы действия представляют простой, ориентированный на действие подход, побуждающий пользователя предпринять конкретное действие, потому что они отвечают на основной вопрос: «Почему я должен нажать эту кнопку?».

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

Я набросал несколько общих фраз, а также взял несколько примеров из моей предыдущей статьи.

Контрастный цвет

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

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

Я набросал несколько общих фраз, а также взял несколько примеров из моей предыдущей статьи.

Контрастный цвет

Карта внимания сгенерированная плагином VisualEyes

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

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

Отличным инструментом, который поможет вам с проверкой контраста при проектировании, является плагин Stark.

Как вы заметили, причудливые градиенты или яркие цвета не всегда проходят тест на контрастность в соответствии с плагином Stark!

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

Целевая страница приложения Sketch – это прекрасный пример, иллюстрирующий важность контраста призыва к действию по сравнению с контентом страницы. Они не только учитывают брендинг продукта, но и сумели создать смелую кнопку призыва к действию, привлекающую внимание большинства посетителей.

Проще говоря, такую кнопку нельзя не заметить!

Карта внимания сгенерирована плагином VisualEyes

Размер имеет значение

Размер и положение играют основополагающую роль в заметности и доступности призыва к действию. Значительное количество переменных определяет правильный размер кнопки.

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

Исследование показывает, что самая высокая точность была замечена при использовании кнопок размером от 42 до 72 пикселей. Это означает, что 42 пикселя – это минимум, а 72 пикселя – это максимальный размер кнопки, наиболее оптимальный для пользователей.

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

Мобильные интерфейсы сталкиваются с еще одной распространенной проблемой. Термин «Проектирование для больших пальцев» (Designing for Thumbs) был предложен Скоттом Херффом. Это означает создание интерфейсов, наиболее удобных для использования в естественной, широкой дуге большого пальца.

Тепловая карта зоны большого пальца, примененная к дисплеям некоторых моделей iPhone

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

Плыть по течению

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

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

Карта внимания сгенерированная плагином VisualEyes

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

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

В примере ниже дизайнеры Airbnb придерживаются другого подхода. Они используют преимущества Z-паттерна и диаграммы Гутенберга. Кнопка призыва к действию расположена в Терминальной области, чтобы избежать отвлечения внимания и способствовать действию.

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

Выводы

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

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

7 полезных советов для начинающего дизайнера

2020-03-24T08:57:14.626Z

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

Поэтому устраивайтесь поудобнее и наслаждайтесь чтением наших советов.

01. Почему ваша креативность намного важнее, чем выбранный инструмент дизайна

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

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

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

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

02. Почему принципы дизайна всегда должны быть превыше трендов

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

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

Я изучал графический дизайн еще в колледже (тогда в мире была популярна сепия), и именно там я начал изучать и понимать основные принципы дизайна. Следуя этим довольно простым правилам, я обнаружил что создаю более понятные, сильные и последовательные дизайны. Эти принципы и правила остались неизменными, и по-прежнему актуальны применительно к UI дизайну.

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

03. Хотите больше успевать делать? Попробуйте тайм-блокинг

«Тайм-блокинг» применим ко многим отраслям, включая дизайн. Уверяю вас, что он положительным образом изменил мой подход к дизайнерским проектам.

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

Я всегда предполагал, что, если просто буду работать, то добьюсь цели. Если я буду работать 12 часов в день, я каким-то образом сделаю все важные вещи. Но это не так. Оглянувшись назад и посмотрев, что я на самом деле сделал за это время, я понял, что по крайней мере треть, если не половину времени, отвлекался на посторонние дела. Поэтому я предположил: «Если я работаю по 12 часов в день, я, должно быть, выполню больше работы, чем парень, работающий по 6 часов в день». Это полная чушь, и я сам себя обманывал.

В соответствии с упомянутым ранее методом тайм-блокинга, я хотел бы в первую очередь получать наиболее важную работу. Утром, скажем, с 9:00 до 13:00. Именно в это время большинство из нас достигают пика продуктивности, прежде чем появится творческая усталость во второй половине дня, и наш индикатор фокуса начинает мигать красным.

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

04. Будьте более уверенны в себе, не сравнивайте себя с другими дизайнерами

Многие из нас смотрели на коллегу и думали, что его дизайн – величайшая вещь, когда-либо украшавшая цифровое устройство, а наш дизайн в некотором роде уступает ему. Кто-нибудь испытывал синдром самозванца?

Стоп!

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

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

Станьте лучшим дизайнером, не сравнивая себя с другими.

05. Никогда не обесценивай себя, как профессионала

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

Многие проекты, сулившие мне несметные богатства почти ни к чему не привели, и не по моей вине. Я делал активы дизайна, но в итоге проект иссякал и так и никогда не видел свет. Когда вы начинающий молодой дизайнер, вас могут втянуть в такого рода «сотрудничество», когда 90% потраченного времени ни к чему не приводит.

По мере накопления опыта я начал устанавливать строгий контрольный список с критериями, обязуюсь ли я это делать или нет?

Если кто-то ищет подлинное партнерство и уважает вашу работу, то он должен быть готов заплатить за ваше время и усилия. К сожалению, подобная практика обещания несметных богатств в будущем после того, как вы уже отдали свое время бесплатно, сегодня так же распространена, как и 10 лет назад.

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

06. Готовы ли вы к этому очень длинному путешествию?

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

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

Не отчаивайтесь в своем путешествии, учитесь, совершенствуйтесь, знайте, чего вы хотите достичь в своей карьере, и делайте шаги, необходимые для этого. Вдохновляйтесь работой других дизайнеров, заводите связи в сообществе, читайте (да, много читайте), и не забывайте иногда отрываться от экрана и впитывать мир вокруг вас.

Будьте открыты для критики. Люди просто выражают свои мысли о работе, которую вы демонстрируете.

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

07. Должны ли дизайнеры хотя бы понимать, как работает код?

Должны ли дизайнеры кодить? Да, сейчас 2020 год, и дискуссия продолжается. Я поделюсь своими мыслями о том, почему может быть весьма полезно хотя бы понимать, как работает код.

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

Попутно я собрал достаточно знаний о кодинге и это помогло мне в работе над проектом. Это заставило бы меня задуматься: «Если я спроектирую это определенным образом, это будет просто кошмар, когда я попытаюсь это кодить?».

Несколько лет назад, если вы какое-то время работали фрилансером, вы вполне могли еще и кодить. Но, если вы работали в компании, то, вероятно, выполняли определенную роль, для которой и были наняты.

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

Если у вас есть определённые знания о коде, какими бы ограниченными они ни были, они действительно улучшат ваше взаимодействие с разработчиком. От этого выиграют все участники проекта. Это намного лучше, чем заявить: «Я спроектирую это, и пусть они думают, как заставить это работать. Я на это не подписывался».

Понимание того, как работает код, не всегда необходимо, но необычайно помогает, независимо от того работает ли UI / UX дизайнер в команде или нет.

Спасибо за прочтение.

Принципы использования межбуквенного интервала

2020-03-11T13:20:21.877Z

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

Что такое леттер-спейсинг

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

Зачем менять расстояние между буквами

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

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

Кроме того, имейте в виду, что создатели шрифтов думают о межбуквенном интервале и кернинге при разработке каждого нового шрифта. То есть нет острой необходимости применять эти приемы в каждом своем дизайне. Однако, чтобы понимать, когда это действительно нужно, важно усвоить базовые принципы, а также использовать качественные, хорошо продуманные шрифты (Google Fonts отличное место для поиска таковых).

Влияние межбуквенного интервала на читабельность текста

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

Заглавные буквы

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

Заголовки

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

В леттер-спейсинге нет строгих правил: в мире множество шрифтов и каждый из них требует к себе индивидуального подхода. Но, если вы внимательно понаблюдаете, как в крупных компаниях, таких как Google и Apple, обращаются со своими шрифтами, вы можете найти там много интересной и полезной информации.

Давайте внимательнее посмотрим на шрифты Roboto и San Francisco (первый используется в Material Design, а второй – в экосистеме Apple). Заголовки, размером от 20 до 48 пикселей имеют либо положительное значение межбуквенного интервала, либо ноль. Если размер шрифта увеличивается, то значение показателя становится отрицательным. Конкретно эти цифры не подойдут ко всем другим видам шрифтов, но попробовав много разных подходов, могу точно сказать, что это своего рода универсальный шаблон действий.

Я попробовал на практике несколько гайдов по леттер-спейсингу и тот, что был опубликован агентством “Bazen”, на самом деле хорошо работает со многими популярными шрифтами. Для вас это может стать отличной отправной точкой, хотя, конечно, вы всегда можете что-то добавить или убавить:

H1 — 96px — -1.5%
H2 — 60px — -0.5%
H3 — 48px — 0%
H4 — 34px — 0.25%
H5 — 24px — 0%
H6 — 20px — 0.15%
Subtitle — 16px — 0.15%

Если вы сейчас занимаетесь дизайном приложений или планируете делать это в будущем, то вот вам мой совет: что сэкономило мне много времени во время работы в “Messapps”, так это использование стандартных шрифтовых гайдов “Material Design” и “Apple”.

Основной текст

Если вы когда-нибудь что-нибудь читали о межбуквенном интервале, вы, вероятно, видели эту популярную фразу типографа Фредерика Гуди: «Любой, кто будет менять межбуквенный интервал у строчных букв, будет воровать овец» (ориг. “Anyone who would letter-space lowercase would steal sheep”). Однако есть мнение, что речь шла о готических шрифтах. Некоторые дизайнеры взяли его слова за правило и теперь никогда не корректируют строчные буквы. Основываясь на собственном опыте, и на опыте многих других шрифтовых дизайнеров, я не могу согласится с известными словами, потому что иногда незначительные изменения могут очень сильно повлиять на внешний вид всего текста. Давайте возьмем, к примеру, сжатые (Condensed) шрифты. При маленьком размере буквы расположены слишком близко друг к другу, так что текст становится очень сложным для восприятия. Увеличив расстояние между буквами всего лишь на 1,5%, вы увидите, что текст становится значительно легче для прочтения.

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

Возвращаясь к предыдущему примеру, в гайдах для шрифтов Roboto и San Francisco в основном тексте применяется дополнительный межбуквенный интервал. Стоит отметить, что San Francisco имеет модификации «SF Pro Display» для заголовков и «SF Pro Text» для основного текста, но для них также можно использовать изменения межбуквенного интервала, чтобы получить более гармоничный вид.

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

Межстрочный интервал

Если у вас межстрочный интервал более 120%, скорее всего отрицательное значение леттер-спейсинга приведет к разбалансировке всего текста. Чтобы этого избежать, нужно либо оставить значение без изменений, либо немного увеличить.

Белый текст на темном фоне

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

Главные значения для основного текста

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

Body 1 — 16px — 0.5%
Body 2 — 14px — 0.25%

Подписи

В отличие от заголовков и основного текста, шрифты меньшего размера не имеют большого количества вариантов межбуквенного интервала. Это обычная практика, когда для размеров шрифта, который меньше 13px, делают увеличенное пространство между буквами, чтобы сделать его более разборчивым. Но всегда есть исключения (гайд «SF Pro Text» предлагает использовать положительный межбуквенный интервал только для размеров в 11px и меньше), поэтому обязательно экспериментируйте с настройками, а не просто копируйте и вставляйте предоставленные значения.

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

Caption — 12px — 0.5%
Overline — 10px — 1.5%

Финальный совет

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

Особенности проектирования темной темы

2020-02-27T12:42:02.657Z

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

Для многих UX-дизайнеров темная тема оказалась в новинку, потому что только с недавних пор операционные системы стали поддерживать ее. Фактически, темная тема теперь настолько распространена, что стала почти обязательной функцией для многих приложений. Помимо этого, она пробивается в Интернет. Однако, в ответ началась обычная негативная реакция, и некоторые люди подвергают сомнению ее ценность.

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

Что такое темная тема?

Все приложения должны иметь как светлые, так и темные (или дневные, и ночные) темы.

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

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

Темная и светлая темы приложения Google News

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

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

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

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

Темная тема для темных сред

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

Задолго до того, как темная тема стала модной и, в конечном счете, получила поддержку на уровне ОС, я проектировал приложения и веб-сайты с темными палитрами. Почему? Ну, в некоторой степени, для экономии заряда батареи. Дисплеи на мобильных телефонах обычно являются основным потребителем электроэнергии, и с ростом количества пикселей с подсветкой, как в AMOLED-дисплеях, количество потребляемой дисплеем энергии напрямую связано с общим количеством света, которое он излучает. Приложение с темной палитрой потребляет на 90% меньше энергии, чем приложение со светлой.

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

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

Мобильное приложение Netflix

Большинство стриминговых сервисов по умолчанию используют темную тему, потому что люди часто смотрят видео ночью или в плохо освещенных местах. Таким образом, темная тема интерфейса – лучший вариант, гарантирующий, что интерфейс не будет отвлекать от контента. У нас не так много телевизоров без рамки, не так ли?

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

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

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

Типичная страница в темной теме в пять-шесть раз менее яркая, чем при светлой.

Несколько слов о контрасте

Дизайнеры скрытно уменьшают контрастность в дизайнах со светлой темой.

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

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

Цвет состоит из трех компонентов, которые я сейчас попытаюсь объяснить настолько просто, насколько смогу:

оттенок – спектр, в котором появляется цвет.
насыщенность – насколько интенсивно представлен оттенок.
яркость – количество черного или белого, добавляемое к цвету.

Примечание редактора. Для более глубокого изучения теории цвета для цифровых дисплеев см. серию статей Pabini Gabriel-Petit на сайте UXmatters. Часть 1 охватывает свойства цвета и основы контраста; часть 2 углубляется в эффекты контраста; Часть 3, посвящена применению теории цвета к цифровым дисплеям.

Во всяком случае, для большинства людей (в том числе дизайнеров, разработчиков и продакт-менеджеров), в большинстве ситуаций, термин цветболее или менее означает часть оттенка. Красный или зеленый цвет, например. Таким образом, для этих людей термин цветовой контрастподразумевает, что контраст относится к оттенку, но это не так.

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

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

Контраст в темной теме

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

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

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

Их примеры создания темной темы содержат такие странные решения, как замена простых линий по краям карточки на почти неразличимый темно-серый фон.

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

Мобильное приложение Dish Anywhere

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

Вкладки приложения Dish – просто текст, серого или красного цвета. Независимо от того, страдает ли пользователь от красно / зеленой цветовой слепоты или просто на экране видны блики, маловероятно, что он увидит разницу между этими двумя вкладками.

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

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

Темный не значит черный

Быстрый и простой способ начать создавать темную палитру – это создать тени (shades) для всех цветов.

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

Тень (shade) не является разновидностью цвета, но означает добавление к цвету черного. Ненасыщенный тон (tint) означает добавление белого. Таким образом, розовый – это ненасыщенный тон красного цвета.

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

Я почти ничего не проектирую на чистом черном фоне. Исключения, когда черный является ключевой частью бренда. Вместо этого я выбираю другой темный цвет из палитры – или сам делаю тень (shade) – и обнаруживаю, что он оказывает тот же эффект, что и черный или очень темный серый, усиливая при этом ощущение индивидуальности бренда.

Мобильное приложение Twitter, с включённой темной темой, как показано на рисунке 4, использует для фона несколько темных синих оттенков. Это делает их фирменные синие элементы более эффективными и несколько менее резкими, чем чистый черный цвет.

Рисунок 4. Темная тема мобильного приложения Twitter

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

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

Исследования темной темы

Но неожиданно темная тема заметно лучше читается при ярком освещении, чем светлая.

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

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

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

Но неожиданно, темная тема заметно лучше читается при ярком освещении, чем светлая.

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

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

Вывод

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

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

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

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

Ценность быстрого визуального сторителлинга для дизайнеров

2020-02-20T11:55:14.662Z

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

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

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

Если я обсужу с заинтересованными лицами дизайн проекта, я либо неправильно объясню, либо они неправильно меня поймут. Это просто случается.

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

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

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

Всякий раз, когда мы подходим к вопросу, который я не до конца понимаю, я показываю набросок моего понимания этого вопроса, и спрашиваю мнение собеседника.

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

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

10-минутные скетчи

Несколько лет назад я работал удаленно из США, в то время, как члены моей команды были разбросаны по Австралии. Наш клиент также находился в Австралии. Во время первоначальной разработки веб-сайта мы работали над деталями проекта.

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

Осознавая, что мы по-разному понимаем вопрос, и, что команде разработчиков, вероятно, потребуется потратить несколько десятков часов на проверку альтернативного направления, я быстро схватил свой iPad. Примерно за 10 минут до нашего следующего звонка клиенту я набросал следующий юзерфлоу:

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

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

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

Мой дом

Когда мы с женой строили новый дом на севере штата Айдахо, мы столкнулись с проблемой, когда быстрый набросок может избавить от множества проблем.

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

Мы приняли, казалось бы, простое решение изменить размер окна в гостиной:

Мы попросили, чтобы окна были 3 фута в ширину и 6 футов в высоту. Примерно 1 метр в ширину и 2 метра в высоту. Мы хотели наслаждаться красивыми закатами:

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

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

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

В этом случае простой набросок задней стенки дома сразу бы показал нам, что что-то не так. И, чтобы это увидеть, нам не пришлось бы ждать пока проект будет наполовину сделан.

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

Инструменты

Какие инструменты я люблю использовать для создания эскизов? Почти все.

Как минимум, вам нужно что-то, чем рисовать и на чем рисовать. Это могут быть карандаш и бумага, маркеры и картон, мел и доска или даже ручка и ваша рука.

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

В настоящее время я использую iPad Pro с Apple Pencil и переключаюсь между Linea Sketch, Procreate и Paper от FiftyThree. У каждой из программ есть свои сильные стороны, но любая из них отлично подойдет для создания примеров, которыми я поделился в этой статье.

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

Используя эти фигуры, чтобы передать взаимодействие или рассказать историю, вы можете создать что-то вроде этого:

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

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

Как правильно подойти к процессу редизайна и повысить ценность дизайна

2020-02-10T09:32:56.773Z

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

Изменение – это не событие. Это процесс

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

Отличный способ начать редизайн – использовать модель «double diamond». Вам нужно пройти четыре основных этапа, чтобы перейти от проблемы к ее решению:

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

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

Начните с формирования общего понимания проблемы

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

Но ваша основная цель – пользователи. В частности, вас должны интересовать следующие вопросы:

Почему вы выбрали именно этот продукт, а не другие?
Что вам больше всего нравится в этом продукте / функции?
Что вы больше всего ненавидите в этом продукте?

Прежде чем вносить изменения, нужно знать, кто что делает? Почему и как они это делают?

Существует множество инструментов создания ассоциограмм. Например, X-Mind, который поможет вам структурировать эту информацию даже во время интервью.

Ничего не воспринимайте, как должное

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

Определите фронт работ

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

Разберите существующий дизайн

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

Обзор аналитики

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

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

Поведенческая блок-схема
Она поможет вам понять, как ведут себя пользователи.

Сроки и конверсия. Создание и анализ воронки
Анализируйте конверсию и создавайте базовые метрики для сравнения нового дизайна.

Обзор конкурентов

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

Осознайте свое место на рынке

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

Выйдите за рамки своей сферы деятельности

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

Определите ключевые проблемные области

Как только вы все поняли с помощью данных из аналитики, вы можете приступить к выявлению ключевых проблемных областей существующего дизайна. Эти проблемы могут варьироваться от проблем юзабилити до багов, несоответствий, неправильных паттернов или экзотических решений без какой-либо причины. Для проверки юзабилити, в качестве шпаргалки, вы можете использовать десять эвристик юзабилити. https://www.nngroup.com/articles/ten-usability-heuristics/

И найдите возможности для улучшений

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

Понимание ценности и требуемых на нее усилий

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

Трудно добиться отличного дизайна

Идеальных дизайнов не существует, и всегда есть место для улучшений. Но отличный пользовательский опыт сопряжен с большими затратами. Создание незначительного улучшения в и без того великолепном дизайне потребует экспоненциально больших вложений ресурсов, чем превращение плохого дизайна в обычный. Но не позволяйте этому обескураживать вас. В великой книге «От нуля к единице. Как создать стартап, который изменит будущее» Питер Тиль объясняет, что незначительные улучшения помогут нам в будущем. Иногда, чтобы существенно улучшить опыт, вам нужно заново его изобрести.

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

Наброски, сделанные от руки – отличный способ начать переносить идеи из вашей головы в физический мир. Вы можете использовать технику под названием «Crazy eights». Вы заставляете себя генерировать восемь идей за 8 минут. Это отличный способ заставить себя отказаться от одного варианта и изучить другие безумные идеи. Будет идеально, если вы сможете проделать это с заинтересованными сторонами и разработчиками. Некоторые идеи, отраженные в этих эскизах, уникальны и креативны.

Быстро получите фидбек с помощью раскадровки низкой точности

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

Если вы не тестируете с пользователями, вы теряете время

Это так просто. Каждый может с уверенностью сказать, что он лучше знает, что нужно пользователям. Что «пользователи не знают, что им это нужно, пока они это не получат». Это утверждение верно только в очень редких случаях. Не забывайте, что все, что вы делаете, вы делаете для пользователей.

Продайте свой дизайн

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

Пользователи ненавидят перемены

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

Всегда есть место для улучшения

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

Делитесь в комментариях своими советами по редизайну.

Основы UX: закон Парето или правило 80/20, которое должен знать каждый дизайнер

2020-01-31T15:25:39.912Z

Вы когда-нибудь замечали, что используете небольшое количество функций и приложений на своем телефоне? У него есть сотни функций, но вы когда-нибудь использовали их все?

Некоторые из них всегда под рукой, потому что мне нравится иногда брать их и открывать на случайной странице. Одна из этих книг – «Универсальные принципы дизайна» – фундаментальная книга для любого дизайнера. Она объясняет 150 принципов дизайна в очень простой и понятной форме.

Недавно я открыл ее и наткнулся на следующий принцип. Правило 80/20, также известное как закон Парето. Итак, начнем с его определения.

Что такое закон Парето?

Закон Парето – это правило, которое гласит, что 20% усилий дают 80% результата.

Например, вы когда-нибудь замечали, что используете небольшое количество функций и приложений на своем телефоне? У него есть сотни функций, но вы когда-нибудь использовали их все?

Что насчет вашего любимого веб-сайта… вы просматриваете каждую страницу или просто смотрите на небольшое количество страниц, которые вас больше всего интересуют?

Используете ли вы все функции на этой странице или просто нажимаете случайную кнопку «Мне нравится»?

Закон Парето

В 1906 году итальянский экономист по имени Вильфредо Парето (1848–1923) заметил, что каждый год 20% стручков гороха в его саду давали примерно 80% гороха. Он нашел это очень интересным, и заметил, что эту пропорцию можно применить в более широком масштабе. Например, в экономике, чтобы показать неравномерное, но предсказуемое распределение богатства в обществе – 80% богатства и дохода принадлежали 20% населения.

«Для многих событий примерно 80% последствий происходит от 20% причин»– Вильфредо Парето

Этот принцип может быть применен к большей части вашей повседневной жизни. Бьюсь об заклад, вы склонны регулярно носить только 20% вашей одежды 80% времени.

Другие примеры закона Парето:

80% пробок на 20% дорог
80% дефектов продукта вызваны 20% его компонентов
80% работы выполняется за 20% нашего продуктивного времени
80% времени тратится на 20% функций продукта
80% трафика продукта происходит на 20% периода времени
80% результатов генерируются 20% сотрудников
80% выручки приходится на 20% клиентов
80% книги – это подготовка к 20% интересного контента

Проще говоря относительно небольшое количество вещей оказывает значительное влияние.

Это правило не высечено в камне, а указанные значения приблизительны. Закон Парето следует рассматривать, как эмпирическое правило. Фактические проценты могут быть больше или меньше, например, 70/30, 90/10.

Дело в том, что большинство результатов исходит от меньшинства причин. И меньшинство результатов происходит от большинства причин.

Как это связано с дизайном?

Если вы продуктовый дизайнер или UX-дизайнер, вы должны учитывать принцип 80/20 в своей повседневной работе. Это правило может использоваться в различных областях UX-дизайна для улучшения рабочих процессов.

У вас две цели при использовании закона Парето:

Подчеркнуть самые ценные функции. Чем раньше вы поймете, какие функции вашего продукта наиболее ценятся, тем лучше. Если ваши продукты будут иметь как можно больше функций, это только ухудшит пользовательский опыт.
Вы можете понять, какие функции работают, а какие нет. По принципу 80/20 вы можете понять, какие функции могут оказаться не такими эффективными, как вы думали (80), а какие функции либо в основном используются, либо имеют потенциал, который можно улучшить (20).

Как определить эти 20%?

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

1. Используйте аналитику

Используйте аналитику, чтобы определить 20% того, что ваши пользователи используют чаще всего. Используйте такие инструменты, как Google Analytics, для определения наиболее важных и наиболее часто используемых элементов на вашем веб-сайте.

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

Упростите пользовательский опыт вашего сайта без потери качества дизайна.

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

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

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

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

Выбор адреса по умолчанию в приложении Uber

2. Проведите исследование пользователей

Сконцентрируйте свои исследования пользователей на ваших лучших юзерфлоу. Какие 20% функций используют 80% посетителей вашего сайта, программы или приложения? Это хороший способ улучшения функций, которые действительно популярны. И для этого вам нужно провести исследование ваших целевых пользователей, их потребностей и целей.

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

Джефф Сауро (Jeff Sauro) – основатель MeasuringU, и пионер в количественной оценке пользовательского опыта, четко описал это правило:

«Этот принцип был поразительно точным. Наше исследование показало, что 18% наших основных областей продукции вызывают 83% разочарования наших клиентов»– Джефф Сауро

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

3. Юзабилити-тестирование

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

Это поможет вам:

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

Юзабилити-тестирование проводится реальными пользователями. Они могут выявить проблемы, которые люди, знакомые с продуктом, могут больше не замечать. Наблюдение за поведением людей во время использования вашего продукта дает вам представление о том, на что они больше всего ориентируются при использовании продукта.

Подводя итог

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

Резюмируя этот принцип:

80% результатов поступают только от 20% вложений
80% всех последствий происходят только от 20% причин
80% ваших результатов приходят только от 20% ваших усилий и времени
80% прибыли вашей компании приносят только 20% продуктов и клиентов

И не забывайте, что его также можно применять к нашей реальной жизни:

Какие 20% ваших текущих усилий приводят к 80% желаемых результатов и делают вас счастливым?
Какие 20% ваших текущих усилий вызывают 80% ваших проблем и несчастий?

Вредные привычки дизайнера: 8 вещей, которые вам следует перестать делать

2020-01-27T15:47:11.394Z

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

Иногда дизайнеры просто хотят «угодить» заинтересованным сторонам и доделать работу в срок. Хотя во многих случаях мы тратим много времени на поиск или проектирование решения, в первую очередь нам следует рассмотреть сам вопрос – из-за этого мы сбиваемся с пути, не осознавая своих ошибок.

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

1. Перестаньте плагиатить с Dribbble

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

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

Тем не менее, имея определенный опыт работы дизайнером, вы согласитесь, что мы все берем примеры интерфейсов с Dribbble, Behance, Awwwards и т. д. На мой взгляд, примеры работ с указанных сайтов должны оставаться источником вдохновения. Одно дело вдохновляться, а другое – копировать чужой дизайн целиком. Всегда приятно получать мотивацию от других («вдохновляться»). Например, от вашего любимого дизайнера – вам всегда будет нравится его работа, стиль дизайна, цветовая палитра, взаимодействия и многое другое… но его язык и стиль дизайна может не соответствовать вашему продукту.

Не копируйте! Сперва поймите, будет ли это работать для вашего продукта или нет

Скопированные интерфейсы сэкономят ваше время, и не дизайнер никогда не заметит плагиат. А если серьезно. Зачем? – Если после многих лет работы дизайнером, плагиат по-прежнему ваш путь, мой друг, пришло время внести некоторые изменения. Творческий процесс – это упражнение, которому нужно уделить время и тренировать свой ум. Как только вы преодолеете творческий кризис, у вас появится что-то свое.

2. Выберите примеры и экономьте время

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

Конечно, это не означает, что вам не нужно их делать. Но действительно ли необходимо создавать визуальные элементы, прежде, чем вы завершите макет? – Нет.

Давайте рассмотрим пример: вы создаете «Страницу пригласить друга», для которой хотите добавить иллюстрацию. Поэтому вы разрабатываете макет страницы соответствующим образом. Сейчас, вместо того, чтобы делать эту иллюстрацию… не спешите. Вы знаете, какую иллюстрацию хотите – парень с телефоном и друг рядом с ним. Хорошо, теперь продолжайте искать похожий тип иллюстрации в качестве «плейсхолдера» на Dribbble и используйте его в своем дизайне.

Выберите эталонное изображение из Dribbble

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

Тем самым:

Вы представили структуру своей страницы намного быстрее
Сэкономили время на переделку графических элементов
Сроки проекта не пострадали из-за задержек в проектировании

Окончательная работа над иллюстрацией перед релизом!

3. Не пытайтесь делать дизайн в соответствии с пожеланиями продакт-менеджера

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

Задайте вопросы: __Какова цель? __Что, мы думаем, поймет пользователь? __Эта информация нужна пользователю? __Будет ли эта структура последовательной для пользователя? __Что произойдет, если не будет данных для отображения? И так далее…

Вы не обязаны делать все, как говорит продакт-менеджер

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

Смотрите на требование с вашей точки зрения. Автор: Agatha Yu

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

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

4. Не размещайте на странице все, выбирайте то, что нужно

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

«Дизайнер организует детали на странице, но Хороший дизайнер устраняет все ненужные детали».

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

Рассматривайте свой дизайн как историю, у которой есть начало, середина и конец. Каждая предоставляемая вами небольшая функция – это отдельная история, и каждая страница, которую вы проектируете, сплетает эту историю вместе. Не перегружайте пользователя, бросая ему в лицо какие-то вещи и позволяя ему самостоятельно придумывать историю. Вместо этого проведите его до конца. Дизайн должен заинтриговать его настолько, что он вынужден будет остаться до конца.

Два подхода: Добавление в дизайн всего сразу vs. Добавление того, что действительно нужно

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

…Нужно меньше, больше не нужно!

5. Не рассматривайте каждую страницу, как свой чистый лист

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

Допустим, однажды вас попросили изменить дизайн «Страницы профиля». Итак, вы идете и просматриваете все дизайны страниц профиля на Dribbble. Вам понравился дизайн, с цветными иконками и градиентами, и затем вы используете его как источник для создания своей страницы профиля. Браво! Вы выполнили свою задачу! На следующий день, вас попросят создать «Страницу подробностей» внутри «Страницы профиля», которая будет иметь множество текстовых полей, действий и контента. Итак, вы повторяете процесс – идете на Dribbble, ищете похожие примеры и проектируете свою страницу. Почему?…

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

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

Сохраните компоненты, которые можно использовать повторно – Styleguide!

Визуальная последовательность важна. Схожие элементы, которые воспринимаются одинаково, составляют визуальную последовательность. Размеры шрифта, интервалы, стиль кнопок, цвета и даже ширина линиииконок должны быть одинаковыми для всего продукта. И так мы создаем библиотеку / руководство по стилю.

…Не усложняйте, используйте компоненты повторно!

6. Напишите свой собственный контент, даже если он не идеален

Если вы один из тех дизайнеров, которые думают, что написание контента – это не моя работа… я напишу «lorem ipsum», а затем вставлю контент, который получу от продакт-менеджера или команды по контенту – прекратите так делать. Даже если вы чувствуете, что ваш язык далек от совершенства, попробуйте написать свой собственный текст.

Контент стратегия и UX копирайтинг – составные части UX. Лучшие компании в отрасли (Airbnb, Slack, Dropbox, Patreon, Squarespace) следуют контент-стратегии, в качестве практики дизайна. Кроме того, важно знать, что контент добавляет к основному продукту, и как далеко он выходит за пределы метрик и рентабельности инвестиций.

«Написание контента своими словами поможет вам решить, как дизайн должен работать и выглядеть, вместо того, чтобы пытаться вписать контент в дизайн». Как дизайнер, вы имеете четкое представление о пути пользователя и о том, что пользователь ожидает прочитать или увидеть на определенном экране. Поэтому написание текста поможет вам поддерживать согласованность контента и дополнительно предоставит контекст UX-копирайтерам для создания единого тона продукта способами, недоступными дизайнеру.

Контент живет в дизайне, а дизайн общается через контент.
Добавляя lorem ipsum в свой дизайн, вы одеваете своего короля прежде, чем узнаете его размер.

Хорошей практикой является написание контента самостоятельно в процессе проектирования вместо использования текста-заполнителя. Это действительно будет отличать ваш стиль дизайна от других.

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

Я знаю, как интересно продемонстрировать свои дизайнерские навыки. Как дизайнеры, мы хотим сделать лучший интерфейс и взаимодействия. Это похоже на мечту дизайнера :). Вы предпочтёте сидеть изолированно, пока не закончите свои сумасшедшие проекты, и только потом передадите их разработчикам. Создание красивых пикселей без знания технической осуществимости – это просто трата времени.

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

Любовь между дизайнерами и разработчиками

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

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

8. Перестаньте пытаться доказывать, насколько усердно вы работаете дома

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

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

Большую часть своего времени я проводил перед ноутбуком РАБОТАЯ. Все мы знаем, что процесс обучения никогда не закончится. У нас достаточно времени для продуктивной работы. Иногда я все еще беру свой ноутбук и работаю поздно ночью в своей «пещере». Суть в том, что мы все можем выбирать, хотим ли мы много работать или работать мало и с умом.

Я могу вам посоветовать:

«Перестаньте работать количественно, начните работать качественно»

Не удовлетворяйтесь своим дизайном, вы всегда сделаете лучше на следующий день. Поставьте себе цель, по крайней мере, попытайтесь ее достичь … Продолжайте работать– теряйте сон, творите, вводите новшества, работайте дома (не имеет значения :), главное делайте удивительные дизайны.

Shendrikov Education

О сетках в Figma

Основы

Вложенные сетки

Применение ограничений (constraints) к сеткам

Визуализация внутренних отступов

Совместное использование сеток со стилями

17 июня конференция Adobe 99U — бесплатно!

Руководство по созданию призыва к действию

Привлекательный текст

Контрастный цвет

Контрастный цвет

Размер имеет значение

Плыть по течению

Выводы

7 полезных советов для начинающего дизайнера

01.

Почему ваша креативность намного важнее, чем выбранный инструмент дизайна

02.

Почему принципы дизайна всегда должны быть превыше трендов

03.

Хотите больше успевать делать? Попробуйте тайм-блокинг

04.

Будьте более уверенны в себе, не сравнивайте себя с другими дизайнерами

05.

Никогда не обесценивай себя, как профессионала

06.

Готовы ли вы к этому очень длинному путешествию?

07.

Должны ли дизайнеры хотя бы понимать, как работает код?

Принципы использования межбуквенного интервала

Что такое леттер-спейсинг

Зачем менять расстояние между буквами

Влияние межбуквенного интервала на читабельность текста

Заглавные буквы

Заголовки

Основной текст

Межстрочный интервал

Белый текст на темном фоне

Главные значения для основного текста

Подписи

Финальный совет

Особенности проектирования темной темы

Что такое темная тема?

Темная тема для темных сред

Несколько слов о контрасте

Контраст в темной теме

Темный не значит черный

Исследования темной темы

Вывод

Ценность быстрого визуального сторителлинга для дизайнеров

10-минутные скетчи

Мой дом

Инструменты

Как правильно подойти к процессу редизайна и повысить ценность дизайна

Изменение – это не событие. Это процесс

Начните с формирования общего понимания проблемы

Ничего не воспринимайте, как должное

Определите фронт работ

Разберите существующий дизайн

Обзор аналитики

Обзор конкурентов

Осознайте свое место на рынке

Выйдите за рамки своей сферы деятельности

Определите ключевые проблемные области

И найдите возможности для улучшений

Понимание ценности и требуемых на нее усилий

Трудно добиться отличного дизайна

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

Быстро получите фидбек с помощью раскадровки низкой точности

Если вы не тестируете с пользователями, вы теряете время

Продайте свой дизайн

Пользователи ненавидят перемены

Всегда есть место для улучшения

Основы UX: закон Парето или правило 80/20, которое должен знать каждый дизайнер

Что такое закон Парето?

Как это связано с дизайном?

Как определить эти 20%?

1. Используйте аналитику

2. Проведите исследование пользователей

Применение ограничений (constraints)
к сеткам

Совместное использование сеток
со стилями