Дизайн системы UI в Figma

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

Если вы про дизайн-системы ничего не знаете — начните изучение вопроса с этих библиотек дизайнов интерфейсов доступных в Фигме или просто используйте их:

Bootstrap 5 https://www.figma.com/community/file/1044316192441037087

United UI https://www.figma.com/community/file/1020079203222518115

Tailwind CSS UI https://www.figma.com/community/file/768809027799962739

Medusa UI https://www.figma.com/community/file/1278648465968635936

Align UI https://www.figma.com/file/PJ630SzPS3x2D807GYKHOk/

Дизайн ФУД-системы Лукино

Опубликовал на сайте студии «Разумный подход» рассказ про ФУД-систему Лукино. Автоматизация учёта обработки заказов на кухне интернет-магазина.
https://podhod.ru/portfolio/lukino-kitchen

Давно сделал.
Если это не продуктовый дизайн, то что.

Как сделать логотип: от эскиза до вектора

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

Посмотрите как я создаю уникальное написание (леттеринг). Начинаю с эскизов на бумаге, придумываю десяток вариантов, выбираю наиболее подходящий. В Adobe Illustrator создаю векторные буквы, оттачиваю формы знаков и выравниваю. Внимательно проверяю все формы, минимизирую число узлов, избавляюсь от ощущения искуственности. Комментирую все свои действия.

https://youtu.be/rwBLFr0eM7w

ЛИКБЕЗ: Как сделать логотип для сайта. От эскиза до вектора.

Что купить на Black Friday веб-разработчику?

Всем, кто делает сайты на WordPress рекомендую приобрести Crocoblock, там скидка 40% на Black Friday. В этом наборе плагинов есть мощнейший плагин JetEngine, позволяющий создавать записи любого типа и содержания. Один заменяет весь неудобный зоопоарк из плагинов ACF, Custom Post Type UI и Types. Поддержите украинских разработчиков:
https://vovkasolovev.ru/go/crocoblock/

Если вы знаете что такое Elementor, то знаете, что там только что появился простенький конструктор для Listing Grid — дизайн вывода карточек постов на сайте. В Crocoblock JetEngine давно есть намного более продвинутый конструктор Listing Grid, добавляющий возможность создания условий к запросу и встраивание других карточек.

Кроме этого в Crocoblock JetEngine есть собственный конструктор Личного кабинета. Сможете создать закрытую часть сайта, в которой пользователи могут заполнять и хранить свои данные. В комбинации с их же плагином JetFormBuilder это невероятная мощь! Ради личных кабинетов больше не нужно заводить проекты на Yii, Symfony или Laravel.
https://vovkasolovev.ru/go/jetformbuilder/

Crocoblock JetEngine работает и с редактором Gutenberg и c Elementor. Если вы до сих пор не пользуетесь Elementor, то очень рекомендую и его к приобретению на Black Friday. Окупите первым же созданым сайтом. Elementor это самый удачный, популярный и кастомизируемый конструктор страниц и дизайна темы (Page Builder и Site Builder).
https://vovkasolovev.ru/go/elementor/

О глобальной популярности Elementor очень легко судить — это единственный конструктор, для которого есть специальный раздел на Envato Market ThemeForest. Элементор — невероятно мощный инструмент. Позволяет визуально конструировать свои лендинги из готовых настраиваемых блоков. Лучше чем Tilda и WebFlow. Я даже в нем сразу прототипирую, Figma не нужна.
https://vovkasolovev.ru/go/envato-elementor/

Набор WordPress + Elementor + Crocoblock это достаточный набор чтобы решать практически любую сайтостроительную задачу. Работаю с этой связкой уже 3 года, это самый удобный стек для дизайнера сайтов. 

Обновлённый дизайн купюры сто рублей

Банк России в своём телеграм-канале показал видео с презентацией обновлённым дизайном купюры сто рублей. Из видео можно получить достаточно чёткое изображение новой 100 рублёвой купюры.

На лицевой стороне сторублёвки, где ранее был вид на Большой театр, теперь изображена Спасская башня со стрелками часов установленными симметрично вниз на 8:22, здание МГУ, смотровая площадка парка Заречье и телебашня в Останкино. В орнаменте можно заметить знак рубля ₽, силуэт монумента Юрию Долгорукому и вид на Шуховскую башню снизу.

На оборотной стороне, где ранее была колесница Аполлона с фасада Большого театра, изображён монумент солдата в плаще из журавлей и автоматом ППШ, монумент из Ржевского мемориала, на фоне вида с воздуха на музей-заповедник «Куликово поле» в Тверской области и карту России с выделенным Центральным Федеральным округом. В орнаменте присутствуют изображения колосьев и сетки Вороного. С обоих сторон во множестве вариантов расположены орнаменты из мелкого текста слов «СТО РУБЛЕЙ БАНК РОССИИ».

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

Шрифт на новой купюре очень похож на Segoe UI компании Microsoft.

На старой сторублёвой купюре был использован без лицензии шрифт AdverGothic компании ParaType. На новых, уже выпущенных, 200 и 2000 рублях также используется Segoe UI, который невозможно приобрести для легального тиражирования.

Жаль, что в обновлённом оформлении буквально пара элементов символизируют 21 век, всё остальное из СССР. Жаль что вставили изображение оружия. И при этом используется американский шрифт.