Design Quiz

2022-08-31 11:45:29 Устал использовать Montserrat и Roboto в своих работах? Тогда самое время подписаться на самый удобный канал со шрифтами «Што за шрифт?» и открыть для себя много новых, бесплатных шрифтов.

Подписаться: @wtfont Открыть/Комментировать

2022-08-30 08:29:55 Что такое гайдлайны и для чего они нужны?

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

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

Гайдлайны описывают не только принципы UX. Большое внимание в них уделено и UI ― они содержат рекомендации по шрифтам, цветам, вёрстке, анимации. Ведь приложения должны быть не только удобными, но и красивыми ― качественный софт обеспечивает популярность операционной системы.

Собственные инструкции есть у Samsung для Galaxy Edge и у Microsoft для Windows Phone. Мы остановимся на двух главных гайдлайнах для самых популярных операционных систем: Google Material Design System, которым пользуются дизайнеры при разработке приложений для Android, и Apple Human Interface Guidelines для разработчиков под iOS.

Принципы Material Design:
- Иерархия строится за счёт расположения объектов на разных слоях, отделённых друг от друга при помощи теней.
- За основу типографики взяты принципы печатного дизайна.
- Анимация подчиняется законам физики, ничего не появляется «ниоткуда».
- Поверхности двигаются в трёх измерениях и также действуют по законам реального мира.

Принципы Human Interface:
- Все элементы ― картинки, шрифты, отступы, цвета ― должны помогать пользователю отделить важное от второстепенного.
- Управление происходит, в основном, не с помощью меню, а с помощью понятных для владельцев техники Apple жестов.
- Анимация может быть любой, но не отвлекающей от основного взаимодействия. Открыть/Комментировать

2022-08-29 12:45:44 Где искать дизайн-вдохновение?

@CreativeMotion - Тот самый канал, где делают вдохновляющие эффекты. Дизайн и сами работы этих постов мне понравились, советую и вам. Открыть/Комментировать

2022-08-28 17:14:01 Что такое affordance (ухватистость или провоцировательность) в web дизайне?

Affordance — это подсказки, которые говорят нам, как элемент может взаимодействовать с нами. Представьте себе дверь. Ручка — это «подсказка», которая сообщает нам, что её можно тянуть или толкать.

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

Полная статья с типами и примерами тут. Открыть/Комментировать

2022-08-25 21:27:22 Оптическая компенсация? Супер статья, объясняющая всё.

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

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

Читать полностью Открыть/Комментировать

2022-08-25 12:45:34 Самое большое и полезное медиа
для дизайнеров и айтишников.

Подписывайся: @designdealer Открыть/Комментировать

2022-08-24 20:24:26 Что такое стилизация и зачем она нужна?

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

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

Стилизация — про поиск баланса между креативом и читабельностью.

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

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

Новичку может показаться, что это довольно лёгкая задача, но хорошая стилизация — настоящее искусство. Если вы напечатаете слово в графическом редакторе и начнёте двигать векторные кривые в буквах, то быстро обнаружите, как осмысленная надпись превратилась в симпатичную «кракозябру». Открыть/Комментировать

2022-08-24 14:11:53 Figma теперь в телеграм!

Figma — самый популярный графический онлайн редактор в мире! Он очень прост и именно с него нужно начинать изучение веб-дизайна. А сейчас в телеграмме появился официальный русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться! Открыть/Комментировать

2022-08-23 21:14:50 Что посмотреть и почитать про дизайн?

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

Lapa Ninja
Land-book
Httpster

Ниже выделили студии, задающие тренды в мировом дизайне. Их работы — что-то вроде идеала:

Immersive Garden
Clay Global
Bakken & Bfontsæck

Дельные статьи про принципы и правила дизайна, а также про колористику:

Про законы гештальта
Про закон близости
Правило внутреннего и внешнего
Про модульную сетку
Базовые понятия в колористике

Ресурсы по шрифтам и шрифтовой схеме:

Type Scale
Material.io
Google Fonts

Сервис для поиска бесплатных иконок:

Iconfinder.com Открыть/Комментировать

2022-08-22 21:38:17 Constraints в Figma. Что такое Constraints? Зачем они нужны?

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

Чтобы увидеть блок Constraints, надо выделить любой элемент вашего дизайна и посмотреть в правый бар программы . Блок представляет из себя «крестик», в котором вы задаёте значения для позиционирования вашего элемента.

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

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

Чтобы задать «резиновую» ширину/высоту, надо выбрать либо значение Scale, либо Left&Right(Top&Bottom).
Scale — означает, что размер элемента будет меняться пропорционально изменению размера родительского блока.

Left&Right — в свою очередь, фиксирует левый и правый край, а ширина(высота) элемента изменяется. Отлично подходит для создания тянущихся полей ввода

Полный гайд тут. Открыть/Комментировать