15 советов для улучшения UX форм регистрации и входа в систему

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

Содержание статьи 
1. Автофокус на первом поле
2. Используйте специализированные мобильные клавиатуры
3. Немедленно проверьте поля
4. Сделайте метки интерактивными
5. Покажите требования к паролю, когда пользователи создают его
6. Разрешите пользователям отображать пароль
7. Используйте текст кнопки, чтобы показать, что ожидает пользователя при нажатии
8. Разрешить единый вход
9. Сэкономьте клик, уведомив пользователей, что они согласны с условиями обслуживания (не требуя их явного разрешения)
10. Используйте разные термины для «входа» и «регистрации»
11. Позвольте легко переключаться между «входом» и «регистрацией».
12. Вход в систему с помощью электронной почты, а не имени пользователя
13. Если пользователь пытается выбрать пароль, объясните, почему он недействителен
14. Запомните значения, введенные между попытками ввода пароля
15. Экран «сбросить пароль» должен запоминать, какой адрес электронной почты вы уже ввели
Еще вопросы по UX-дизайну форм регистрации?

Читать: https://ux.pub/15-sovetov-dlya-uluchsheniya-ux-form-registratsii-i-vhoda-v-sistemu/

Руководство: как выбрать идеальный цвет для логотипа

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

Читать:
https://say-hi.me/design/rukovodstvo-kak-vybrat-idealnyj-cvet-dlya-logotipa.html

Создание убедительных баннеров, которые не разрушат ваш UX

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

Содержание статьи 
Баннеры – экстраверты!
Анатомия баннера
Типы баннеров
Требующие действия:
Информационные:
О чем следует помнить при проектировании баннеров
1. Размещение баннера
2. Они должны выделяться
3. Проектируйте для масштабируемости
4. Баннерная слепота
5. Злоупотребление

Читать:
https://ux.pub/sozdanie-ubeditelnyh-bannerov-kotorye-ne-razrushat-vash-ux/

Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне

У начинающего дизайнера может возникнуть соблазн пропустить консультационный процесс с клиентом. Но подход, построенный на «основных принципах», совсем не освобождает вас от этого этапа. Принципы дизайна существуют по определенной причине, а знание того, когда и как их можно нарушать, отличает великих дизайнеров от посредственных.
Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?
На самом деле, бывают ситуации, когда простой подход будет как никогда кстати. Хитрость в том, чтобы знать, когда именно.

Что такое «основные принципы»?
Даже если вы летали в облаках на курсах дизайна или вообще на них не ходили, вы, наверное, уже знаете основы. Если вы придерживаетесь основных принципов, вы не ошибетесь. И это правда. Вот некоторые примеры:
Цвет и контрастность: используйте максимум 2-3 цвета, выделяйте важные элементы с помощью контраста;
Чистое пространство: оставляйте большое количество чистого пространства с учетом всех пропорций;
Макет: симметричная сетка. Всегда размещайте элементы для привлечения внимания в верхней части экрана;
Типографика: используйте не более 2-3 шрифтов;
Логотип: длинный логотип, верхний левый край;
Сложность и простота: найдите баланс между сложными и простыми элементами так, чтобы ваша работы была визуально интересной;
Визуальная иерархия: используйте цвет, контраст, размер и комплексность подходов для выделения важных элементов;
Согласованность: со всеми вышеперечисленными принципами, что бы вы ни решили, размешайте элементы согласовано;

Читать статью: https://say-hi.me/design/principles-or-research.html

​​Инновационные технологии для современной медиаиндустрии

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

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

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

27 октября компания Dell Technologies приглашает вас познакомиться с актуальными трендами и современными технологическими решениями для индустрии развлечений в рамках виртуального мероприятия «Инновационные технологии для современной медиаиндустрии».

Зарегистрируйтесь сейчас на платформе Zoom для участия в мероприятии, чтобы быть в курсе технологий, который изменят мир уже завтра!

https://zoom.us/webinar/register/5716330020825/WN_mR5CsexcSiGFa51hoKRADA

Дизайн-системы

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

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

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

В статье:

— Почему стоит использовать дизайн-систему?
— Почему не стоит использовать дизайн-систему?
— Элементы дизайн-системы
— Как подойти к внедрению дизайн-системы

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

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

Содержание статьи 
1. Вы не можете быть милым со всем
2. «Я в порядке», – часто говорят несчастные люди
3. Вы им больше не друг
4. «Рок-звезды» – это не только благо, но и проблемы
5. Люди не скажут вам спасибо за политику

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

Читать статью: https://ux.pub/5-gorkih-urokov-dizayn-menedzhmenta-kotorye-ya-hotel-by-usvoit-ranshe/

Принцип завершения образа (замкнутости) в визуальном дизайне

Люди склонны заполнять пробелы, чтобы воспринимать объект целиком.
В начале 20 века гештальт-психологи разработали набор принципов, направленных на описание того, как люди визуально воспринимают и организуют мир. Эти принципы обычно называют законами гештальта или принципами гештальта. К самым популярным принципам относятся: близость, сходство, общие области, и замкнутость. Дизайнеры могут применять эти принципы для создания удобных интерфейсов.

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

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

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

Содержание статьи 
Логотипы компании
Иконки интерфейса
Применение принципа завершенности к сигналу о наличии дополнительного контента
Проверьте сегментированные элементы

Читать: https://ux.pub/printsip-zaversheniya-obraza-zamknutosti-v-vizualnom-dizayne/

4 типичные ошибки дизайнера и как их избежать

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

1. Лишняя работа

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

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

3. Создание старомодных портфолио
Бормальм и Фрисби ставят под сомнение актуальность старомодных портфолио, суть которых сводится к демонстрации большого количества графических работ. Бормальм называет такие портфолио пережитками рекламных агентств. По ее мнению, дизайнеры уделяют слишком много внимания для создания «красивых плакатов».
«Я думаю, что в них просто нет смысла», – сказала она. «Как менеджер, мне совершенно неинтересно видеть то, что вы когда-то создали. Я хочу увидеть, о чем вы думали, когда столкнулись с проблемой, как вы взаимодействовали с заинтересованными сторонами. Также важно то, как вы расставили приоритеты в зависимости от объема работы, бюджета и так далее».
Хотя Фрисби все еще считает портфолио важной частью оценки кандидата, он согласился с тем, что гораздо важнее понимать контекст работы. «Я соглашусь, что старомодное портфолио – это не то, что стоит демонстрировать работодателю. Мне не нужно большое количество графики, я хочу видеть тематические исследования, аргументацию решений, существовавшие ограничения, процесс формирования дизайна».

4. Неясное определение карьерных целей
По словам Фрисби, дизайнеры часто имеют слишком поверхностное представление о том, как они будут продвигаться по карьерной лестнице. «Не рассчитывайте в кратчайшие сроки стать главным дизайнеров», – говорит он. «Сосредоточьтесь на своей собственной карьеры, а не на знакомом, который стал директором всего лишь за два года. Такие случаи встречаются крайне редко. Четко сформулируйте собственные цели развития и выясните, что такое для вас успех».
“Как вы распорядитесь своей жизнью?” – спрашивает Боремальм. «Если вы считаете успехом пост генерального директора, это круто. Но есть и другие варианты карьерного роста. Подумайте о том, чем вы хотите заниматься. Чтобы достичь успеха нужно идти по пути своих интересов и желаемого карьерного роста».

Источник

42 совета по Figma, которые ускорят вашу работу

Экономия времени в процессе проектирования побуждает сохранять творческий подход. Когда мы увязаем в дизайне, креативность уменьшается. Поэтому мне всегда нравятся использовать при проектировании сочетания клавиш и ловкие приемы.
Ранее я уже публиковал статью из этой серии. В ней вы можете найти еще несколько простых методов. Однако с обновлениями Figma постоянно добавляет новые сочетания клавиш. Так что я постараюсь поддерживать эти статьи в актуальном состоянии. А теперь перейдем к комбинациям клавиш:
Примечание: клавиша Cmd соответствует клавише Ctrl в Windows, а Option – клавише Alt.

1 — Cmd при выделенном изображении: вы можете обрезать изображение, нажав кнопку Cmd.
2 — Ссылки на странице / перенаправление: вы можете ссылаться на элементы на странице, например, якорные ссылки на веб-сайтах.
3 — Control (^) + C или клавиша I: выбор цветовой палитры.
4 — Cmd, затем «число» (значение непрозрачности): после выбора элемента и нажатия кнопки Cmd вы можете изменить непрозрачность, нажимая клавишу от 1 до 9 (1 для 10%, 9 для 90%). Вы, наверное, уже знали об этом. Но, если дважды быстро нажать 0, непрозрачность изменится на 0%. Или, если вы быстро нажмете две клавиши, например, 8 и 9 непрозрачность составит 89%).
5 — Control + Option + T: Упорядочить. Выравнивает разбросанные элементы определенным образом.
6 — Реорганизация упорядоченных элементов: после упорядочивания группы выделенных элементов, их можно регулировать курсором. Кроме того, можно заменять элементы друг на друга без нарушения порядка / соотношения.
7 — Перетаскивание + Пробел: если вы хотите изменить расположение выбранной области, вы можете использовать клавишу пробела после ее выбора.
8 — Cmd + «число» (вкладок): вы можете переключаться между вкладками с помощью комбинации Cmd + «число», как в браузерах, если открыто более одного файла / вкладки. Конечно, домашняя страница – это тоже вкладка.
9 — Cmd + точка (.): Закрывает правую и левую панели. Так вы получите измените рабочее пространство. Вы можете использовать ту же комбинацию клавиш, чтобы открывать панели.
10 — Cmd + |: эта комбинация также скрывает только левую панель. Вы можете использовать ту же комбинацию, чтобы открыть ее снова.
11 — Cmd + G: Группировать выбранные элементы.
12 —  Cmd + Option + G: объединить выбранные элементы во фрейм, как при группировке. Иногда при изменении размеров элементов более выгодно использовать фреймы вместо групп.
13 — Control + Shift +?: Отображение всех сочетаний клавиш. Так вы сможете попробовать сочетания, которых нет в этой статье.
14 — Shift + Cmd + K: выбор фотографий из файлов. Таким образом, можно выделить группу фотографий. Вы также можете размещать фотографии, кликая по фреймам, прямоугольникам и т. д. (каждый элемент, который может содержать изображение) один за другим.
15 — Выбор цвета: давайте выберем элемент, который можно заливать цветом. Выбрав параметр заливки элемента, вы можете найти светлые и темные тона цветов с помощью клавиш со стрелками вверх (светлые) и вниз (темные). Для этого необходимо выбрать заливку. Кроме того, если вы нажмете клавишу Shift, вы сможете быстрее уловить тональные различия.
16 — Автоматическая высота и ширина текста: когда мы хотим изменить размер текстового поля, мы делаем это на правой панели. Если мы выбираем текст для копирования и вставки, этот текст копируется со своим стилем по умолчанию. На этом этапе мы можем последовать небольшому совету: изменить текст с автоматической высоты на автоматическую ширину, дважды щелкнув по любому краю текстового поля.
17— Отображение элемента: в больших файлах может быть сложно найти элемент на холсте, но мы можем найти его на левой панели. Следовательно, если вы щелкните по иконке, появившейся рядом с элементом на левой панели, этот элемент выделится на холсте и будет отцентрирован.

Остальные советы и примеры: https://ux.pub/42-soveta-po-figma-kotorye-uskoryat-vashu-rabotu/