Курс по основам UI-дизайна

Маленький, но важный курс Гэри Саймона на Scrimba, в котором вы разберетесь с базовыми концепциями UI (цвет, контраст, типографика и т. д.) и научитесь правильно их использовать.

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

Пройти курс (бесплатно): https://prglb.ru/vp5o

#video #interface #design

​Дизайн кнопок

Все, что вы должны знать о дизайне важнейшего интерактивного элемента: https://prglb.ru/5qati

#design #css #interface

​SVG-фавикон для темной и светлой темы

Изменяющийся фавикон с помощью SVG и prefers-color-scheme

Ссылка: https://prglb.ru/510g5

#design #css #svg

Дизайн сайта

Плейлист с разбором и применением интерфейсов веб-страниц: https://prglb.ru/fmqw

#design #interface #video

​Основы UI дизайна за 5 минут

Письменная версия бесплатного курса со Scrimba для тех, кто больше любит читать, чем смотреть :)

https://prglb.ru/4q9zu

#design

​Адаптивный дизайн высоты

Зачем тестировать дизайн для разной высоты вьюпорта и как это правильно делать: https://prglb.ru/5hxcf

#css #design #interface

Дизайн-токены способны на большее: создаем единый источник информации о компонентах UI

Как дизайн-токены упрощают разработку в Badoo: https://prglb.ru/55quy

#design

🎨 22 тенденции веб-дизайна в 2020 году, о которых нужно знать

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

https://prglb.ru/1czzv

#design

🎨 Создание дизайн-системы в Figma: практическое руководство

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

https://proglib.io/w/3607b3ea

#tools #design

​Consta

Бесплатная дизайн‑система для быстрой разработки интерфейсов от Газпром-нефть. Есть в Figma (для дизайнеров) и в npm (для разработчиков)

https://proglib.io/w/e7f3cddb

#design

​Переход от сплошного текста к вырезанному при скролле

Интересный эффект изменения стиля текста от сплошного цвета до вырезанного на HTML и CSS: https://proglib.io/w/4bd9d3d6

#css #design

Создание красивых теней в CSS

Веб заполнен нечеткими серыми прямоугольниками, которые совсем не похожи на тени! Как исправить ситуацию?

https://proglib.io/w/b205146f

#css #design

🎨 22 лучших бесплатных учебных курса по UX/UI

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

https://proglib.io/w/18c27a58

#interface #design

​Фронтенд-разработчику: 7 основных принципов дизайна

7 основных принципах дизайна, следование которым позволит создавать привлекательные интерфейсы и приложения: https://proglib.io/w/4c1479e2

#design

Умная техника липкого футера

Необычный и элегантный способ приклеить футер к нижней границе окна: https://proglib.io/w/b2e85f6a

#css #design

​Погружение в тени

Зачем нужны тени в веб-дизайне и как их правильно использовать: https://proglib.io/w/326e386a

#design

Изучение адаптивного дизайна

Курс из 15 глав, из которого вы узнаете все о responsive-дизайне в вебе (англ.): https://proglib.io/w/460794c0

#design #courses