Апрель 2020

Веб-дизайн дайджест #46

Подборка интересных материалов для веб-дизайнера за март 2020. Статьи и видео для развития: про UI, UX и мобильные приложения; новинки Sketch, Figma и Framer X, полезные веб-сервисы, бесплатные кириллические шрифты, проекты для вдохновения и другое. Изучайте, вдохновляйтесь и становитесь лучше!

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

Для развития

10 основных когнитивных и поведенческих паттернов UX-дизайна

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

Четыре уровня влияния дизайна на бизнес, или когда нужен редизайн

Уровень 1: Дизайн выглядит профессионально и современно, пользователь доверяет сайту

Уровень 2: Дизайн приносит конверсию

Уровень 3: Дизайн отстраивает компанию от конкурентов и запоминается

Уровень 4: Бренд-дизайн

29 сайтов, на которых дизайнер может продать свои работы. Не выходя из дома

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

Фундаментальные основы цвета в дизайне интерфейсов

Простые правила создания профессиональной цветовой схемы

Полное иллюстрированное руководство по дизайну под iOS 13

Все, что нужно знать, чтобы создавать iOS-приложение, соответствующее стандартам iOS 13

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

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

Почему нужно быть «специалистом универсального профиля»

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

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

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

Посмотреть

Как создавать элементы в стиле Neumorphism

Sketch

Sketch 64 — Поиск, оттенки и новое меню компонентов (опять!)

Tints (Оттенки) – Теперь вы можете сразу изменить цвета всей группы символов.

Новое меню компонентов – Теперь вы можете использовать старые добрые выпадающие меню, а также быстро искать стили и символы.

Поиск – Теперь вы получили настоящий поиск!

Фильтр / панель поиска переместились наверх

Обновленные артборды – артборд Chromebook теперь поддерживает разрешение Pixel Slate (1333 x 888), Pixelbook теперь 1200 x 800.

Новые сочетания клавиш

Повышена эффективность Smart Layout – более быстрая работа с файлами, содержащими много символов Smart Layout.

Framer X

Как дизайнеру оседлать четыре строчки кода и больше никогда не загружать картинки для интерфейса: гайд по Framer X

Разберём знакомую для многих боль — подбор контента для нарисованных экранов и/или потеря контента при обновлении компонентов.

Figma

Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Основной принцип этой системы – стиль описывает не носимый им цвет, а его роль в интерфейсе.

Я бог продуктивности: пять шагов, чтобы познать радость быстрых правок в ките Figma

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