Бонус

Если вы подумываете использовать Mobile First, вот несколько советов, которые я могу дать, исходя из собственного опыта:

№ 1: Держите открытой вкладку «Инструменты разработчика». В левом верхнем углу вы найдете кнопку «Переключить панель инструментов устройства». Она позволяет имитировать область просмотра мобильного устройства и видеть страницу в версии с маленьким экраном.

№ 2: По-прежнему в верхнем левом углу вкладки «Инструменты разработчика» вы найдете кнопку «Выбрать элемент на странице для его проверки». Выберите ссылку/кнопку/текст на своем сайте, и во всплывающем окне отобразится оценка его контрастности. Это соотношение между текстом и его цветом фона. Чем выше контраст, тем легче пользователю его прочитать.

№ 3: При условии, что вы больше не будете использовать hover-эффект или подсветку, подумайте о том, чтобы использовать Material Design гайды при создании экранных элементов.

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

Источник: https://design-glory.com/?p=10783

Каким должен быть дизайн в эру голосового UI

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

Читать статью
https://say-hi.me/design/kakim-dolzhen-byt-dizajn-v-eru-golosovogo-ui.html

​​Примитивность vs. простота простым языком

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

Источник

Подробный разбор интерактивных компонентов (Interactive Components) Figma

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

Читать: https://ux.pub/editorial/podrobnyi-razbor-intieraktivnykh-komponientov-interactive-components-figma-4n8g

Что делать, если новый эпизод на Netflix кажется более важным, чем проект

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

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

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

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

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

4. Разбавляйте проект, переставляя шаги
При анимации очень легко погрузиться в рутину. Это трудоемкий процесс, требующий одних и тех же действий снова и снова. У каждого творческого проекта есть свои скучные стороны. «Вместо того, чтобы работать в хронологическом порядке, от А до Я, я работал прерывисто. Первым созданным мной символом была буква А, вторым – буква Y и так далее. Это помогло мне сохранить открытый визуальный язык и подходить к каждой букве как к новому вызову».

5. Покажите проект миру
Speakloop отметили 36 днями типографии, а на Behance проект публиковали дизайн-организации AIGA и Motion. Вероятно, этого бы не произошло, если бы Карло не подумал о последующей жизни своего проекта. «Это может казаться очевидным, но будьте активны в социальных сетях. Если вы достаточно горды, чтобы поставить свое имя под этим проектом, убедитесь, что мир его видит!» «Поделиться своими проектами с коллегами – хороший способ получить обратную связь. Но также попробуйте показать их людям, которые не являются дизайнерами или профи визуала. Вы будете удивлены количеству полезной информации, которую они могут вам дать».

Источник

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

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

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

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

Подобные простои возникают из-за узких мест — самых медленных звеньев цепочки производства. Покажу это на примере из ИТ-сферы.⠀

Допустим, что разработчики могут выполнить пять задач в неделю. Дизайнер может подготовить для них семь задач в неделю. Получается, что дизайнеру достаточно продумывать пять задач в неделю, а оставшееся время он может ничего не делать и, при этом, процесс развития продукта не остановится.
То есть, процесс создания чего-либо зависит от скорости его узких мест. В прошлом примере — разработки. Точно так же группа людей в походе идёт со скоростью самого медленного человека.
Похожую логику можно применить и в личных проектах. Чем бы вы не занимались, есть лишь несколько задач, которые приносят результат. Если вы можете сделать в день только одну такую задачу, то нет смысла забивать все оставшееся время другими задачами, потому что результата они не принесут.
Но что делать, если вы хотите повысить скорость? В компании вы можете нанять дополнительных разработчиков или ускорить их работу, в походе — разгрузить самого медленного человека, в личных проектах — лучше использовать свое время.
Например, я научился готовить черновики публикаций по дороге на работу и обратно, а задачи, требующие продумывания, выполнять во время прогулок.

Подумайте, какие узкие места есть в вашей деятельности.

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

Источник

Почему руководства по «хорошему / плохому» дизайну не всегда подходят для теории цвета

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

Дизайн – это не универсальное решение.

Автор собрал несколько примеров подобных сомнительных рекомендаций.

Читать: https://ux.pub/editorial/pochiemu-rukovodstva-po-khoroshiemu-plokhomu-dizainu-nie-vsieghda-podkhodiat-dlia-tieorii-tsvieta-599e

Руководство по проектированию улучшенной типографики мобильных приложений

Благодаря стремительному развитию Интернета в последнее десятилетие типографика в интерфейсах прошла основные этапы трансформации в цифровой мир. Но дизайн мобильных приложений – это все еще новая сфера.
В этой статье я не буду говорить об общих концепциях типографики, которые можно использовать как в печатной, так и в цифровой среде. Вместо этого я сосредоточусь на нюансах и хитростях, которые можно использовать в типографике дизайна мобильных приложений.
Поскольку разработка приложений очень тесно связана с функциями операционной системы, я часто буду ссылаться на отдельные рекомендации из руководства Material Design для Android и Human Interface Guidelines для iOS.

Читать: https://ux.pub/editorial/rukovodstvo-po-proiektirovaniiu-uluchshiennoi-tipoghrafiki-mobilnykh-prilozhienii-m83

UX дизайн: Закон Фиттса — для определения оптимальных размеров и расположения элементов на сайте

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

Читать: https://vc.ru/design/188963-ux-dizayn-zakon-fittsa-dlya-opredeleniya-optimalnyh-razmerov-i-raspolozheniya-elementov-na-sayte

Обзор 12 лучших портфолио UX-дизайнера: примеры, зачем нужно, из чего состоит

UX-портфолио — это способ упаковать ваши навыки и продемонстрировать, на что вы готовы как дизайнер. В статье собрали 12 сильных образцов портфолио в плотный разбор.

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

Зачем UX-дизайнеру собирать портфолио
UX-портфолио — это международный стандарт работы для каждого дизайнера в отрасли. Портфолио применял Пол Рэнд, его же рекомендует и сейчас собирать Остин Клеон в международном бестселлере «Покажи свою работу». А еще наращивание портфолио является частью бренд-стратегии диджитал-агентств и продуктовых компаний. Одним словом — стандарт.

Перед началом сборки портфолио задайте себе серию вопросов. Какую задачу вы хотите решить с помощью портфолио? С помощью каких элементов вы хотите убедить даже самого требовательного работодателя/клиента в вашем профессионализме? Что вы хотите сообщить клиентам и что они должны узнать о вас и вашей работе при первом знакомстве с портфолио?
Ваше портфолио UX-дизайнера — это не просто виртуальная галерея всех ваших самых красивых работ. Это тщательно продуманная история, которая проводит в закулисье ваших методов и процессов. Хорошее портфолио знакомит с тем, как вы решаете спектр задач по UX-дизайну и проектированию интерфейсов. А также знакомит с вашим ходом мысли и подходом к решению задач.
А еще портфолио должно не просто раскрывать вашу культуру работы, но быть также и приятно упаковано.
Итак, давайте взглянем на 12 примеров портфолио и разберем, чем сильно каждое из них.
Интересный факт: У дизайнеров для привлечения клиентов одинаково хорошо работают: Behance, Dribbble и, конечно же, собственный сайт.

Читать статью: https://ux-journal.ru/top-luchshih-portfolio-ux-dizajnera.html

Сделайте это весело: хаос в продуктовом дизайне

Что общего у брутализма, ваби-саби и виртуальной реальности.

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

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

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

Это парадокс Fun Designer. Чем более эффективным и масштабируемым является продукт, тем более предсказуемым, скучным – а зачастую и успешным – он становится. Как же достичь баланса между весельем и эффективностью?

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

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

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

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

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

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

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

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

Источник

Руководство по созданию эффективного эмоционального дизайна

Что такое эффективный эмоциональный дизайн?

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

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

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

Создайте эмоциональную связь, учитывая «вау-опыт»
«Вау-опыт» присутствует во всех сферах нашей повседневной жизни и вызывает у нас эмоциональную реакцию (даже если мы этого не осознаем). Например, мы говорим: «Вау! Это кресло и правда удобное», «Вау! Этот автомобиль такой навороченный», или «Ух ты! Только посмотри на уникальный дизайн этой книжной полки».

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

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

Читать статью: https://ux.pub/editorial/rukovodstvo-po-sozdaniiu-effiektivnogho-emotsionalnogho-dizaina-209

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

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

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

Читать статью: https://design-glory.com/?p=10965

Топ-9 плагинов Figma для работы с графикой и изображениями

1. Удаление фона изображения — ‘Remove BG’
В идеале, чтобы удалить фон любого изображения, вам придется отредактировать изображение в Photoshop. Альтернативный метод, который я использовал ранее– это выбрать в Figma изображение и использовать опцию «multiply» в меню «Layer», чтобы фон исчез, но это не всегда эффективно. Remove BG – это потрясающий плагин, который удалит фон любого изображения в один клик, и все это не покидая Figma.

2. Преобразование изображений в векторные —’Image Tracer’
Вы, наверное, переносите свои изображения в Illustrator, чтобы трассировать их, не так ли? Но теперь вы можете больше так не делать. С Image Tracer вы можете конвертировать простые черно-белые растровые изображения в векторные. Это необычайно полезно, когда у вас есть изображение, которое вы хотите преобразовать в иконку. Когда вы запустите плагин, то заметите, что на панели есть опции, которые помогут отредактировать плавность кривой и оптимизацию.

3. Создание изометрических фигур — ‘Easometric’
Easometric, как следует из названия, преобразует ваши слои в изометрические фигуры. Он позволяет экономить время, иначе вам придется вручную настроить в Illustrator изометрическую визуализацию перспективы. Панель инструментов интуитивно понятна, и вы можете в один клик выбрать нужную перспективу.

SkewDat и Mockup – пара плагинов, которые также помогут вам исказить слои.

4. Создание 3D-фигур — ‘Oblique’
Oblique – отличный плагин, который помогает создавать проекции, тени, добавлять глубину и экструдировать слои. И все это непосредственно в Figma. Его панель управления проста и помогает установить угол проецирования, расстояние и выбрать цвета для контуров и заливок.

Roto – еще один плагин, который поможет создать экструзии с перспективой, а на панели есть предварительный просмотр в реальном времени.

5. Создание анимации — ‘Motion’
Motion довольно просто использовать, если вы знакомы с такими инструментами анимации, как Principle или After Effects. В нем есть временная шкала свойств объекта, которые вы можете индивидуально контролировать и экспортировать в виде GIF, фреймов, спрайтов или CSS.

Figmotion – это еще один плагин, который поможет создать анимацию, а также позволит экспортировать ее в CSS или JSON, что отлично подходит для передачи проекта разработчикам.
6. Создание эффектов движения —’BeatFlyer Lite’
С BeatFlyer Lite вы можете добавлять крутые эффекты к слоям Figma. Бесплатная версия имеет множество эффектов, таких как масштабирование, вибрация, свечение, размытие при масштабировании, маскирование и десятки других эффектов. Интерфейс простой, слева перечислены все доступные эффекты, и вы можете индивидуально управлять свойствами анимации эффектов, нажав на иконку настроек. Главный экран позволяет управлять скоростью и временем, а также предоставляет параметры экспорта.

7. Конвертирование дизайнов в видео — ‘SUPA — Figma to Video’
Supa – Figma to Video – замечательный плагин для добавления простых переходов к слоям на артборде, и преобразования дизайнов в анимированные видео. Плагин простой в использовании, и вы можете выбирать предустановки анимации, применяемые к проекту, который в дальнейшем можно преобразовать в видео.

8. Воспроизведение и экспорт GIF — ‘GIF’
По умолчанию, даже если ваши GIF-файлы или анимированные объекты выглядят статично на экране редактора, Figma поддерживает GIF-файлы в режиме прототипа. Но плагин GIF от Rogie может воспроизводить ваши GIF-файлы в режиме редактора, а также помогает экспортировать анимированные фреймы в виде GIF-файлов непосредственно из Figma.

9. Создание макета девайса — ‘Clay Mockups 3D’
Плагин Clay Mockups 3D может стать альтернативой этому процессу. Это лучший плагин для создания аккуратных макетов устройств, и вы можете настроить модель устройства, цвет и угол камеры, и все это не покидая Figma. Он экономит уйму времени, и я очень люблю этот плагин.


Источник