Мы уже давно запилили из Фигмы секцию 'Chips' в react компоненты на основе фреймворка Material-UI, но вот ознакомительный видос получился только вчера. Сделано в Movavi, видосы сняты прямиком из браузера, т.е. это production-ready компоненты. Озвучка собственноручная, местами сам запутался уже в бесконечных фрагментах записи, которые я начитывал отдельно от фильма, поэтому за местами косячное произношение не вините сильно) Работы про Реакту еще дофига, следующая киношка будет посвящена инпутам. Со временем навыки подтянутся, а пока что вот: https://www.youtube.com/watch?v=gGmBT-S9poQ

Вот это, кстати, горячий дизайнерский приемчик, который был замечен особенно после редизайна slack.com. Суть простая - толстые контуры у иллюстрации / иконки и смещение фона. Вуаля!

Статья создателя сервиса оплаты цифровых продуктов Gumroad.com о трудностях, ошибках и внезапных поворотах на пути развития продукта. Я сам использую этот сервис. В нём безусловно есть что улучшить, но на дизайн-просторе это популярный способ закрыть кредиткой любой материал, софт, ui kit. Кстати, рост выручки Gumroad'a за последнее время нельзя не связывать с ростом интереса к цифровым продуктам и покупательской способности ui kit'ов в целом по рынку. Интерес к таким продуктам растёт и люди становятся лояльнее. Вспомните, что несколько десятилетий назад мы не покупали воду в бутылках. Так и с цифровыми штуками. https://medium.com/@shl/reflecting-on-my-failure-to-build-a-billion-dollar-company-b0c31d7db0e7

А вот тут много экстраординарных HD видосов для вашего продакшна: люди, эффекты, города, электроника. Бесплатно и бэкссылок не требуют https://mixkit.co/

Скоро все останемся без работы: машинное зрение распознает на доске чертеж и сразу генерит html-код (эксперимент, не сервис... пока что:) https://www.reddit.com/r/web_design/comments/agiy53/from_wireframe_to_html_code_a_great_milestone/

В начале января провел несколько улучшений по навигации сайта и вот результат! Тильда конечно эффективный инструмент. Но вот эта гиковость на дурацкий интерфейс + Футура в кач-ве системного шрифта, просто не дают продукту развиваться еще интенсивнее. Имхо

Яндекс-метрика и карта кликов какбы говорят: использовать слайдшоу с шевронами, ведущими на следующий / предыдущий слайд на посадочной - все еще актуальный паттерн, который активно пользователями используется. Кстати, добавление гамбургер-меню на десктопную версию тоже улучшило показатель Pageviews (но об этом как-нибудь потом)

Рабочий процесс: "Иногда самое сложное в дизайне - сделать ПРОСТО"

Greatsimple обновили лендос и он прекрасен. Видно, что и типографику переосмыслили, от рынка не отстают. Последнее время вижу, как многие успешные организации, создающие готовые UI kit'ы, уходят в более нишевые направления. Это одна из причин, по которой я решил оставить идею back to Sketch, чтобы размножить свои системы из Фигмы https://platforma.ws/

Я напоминаю, что есть класная штука, чтобы быстро копипастить себе в диз текстовые плейсхолдеры из сотни тематик. Раньше данный ресурс дико тупил, но вот намедни пофиксили. Сайт летает, навигация странновата, но аналогов нет https://listsdesign.herokuapp.com/

После года с небольшим полностью переключившись на создание темплейтов и ui kit'ов для Фигмы, я понял следующее: круто было бы иметь возможность нативно купить дизайн-систему прямо не покидая инструмент. Встроенный маркетплейс прямо в фигме: открыл вкладочку, а в ней магазин - вайрфреймы, приложухи, иллюстрации... Представьте себе объемы! Фигма забирает себе процент с продажи и все довольны. Это новый рынок, новые возможности. Дизайнеры начинают делать то, что им нравится и суммарно сообщество может выйти на совершенно новый дизайн уровень. А пока, скачай пробный темплейт тут : http://setproduct.com/web

Но очень тянет на другие рынки! В разгаре весны выйдет либа с React компонентами и десктоп темплейтами практически из будущего :) Вот такими например получаются инпуты, после небольшого retouch'a:

А вот альтернативный стиль, пополотнее и для десктоп приложений:

Вот, сами поиграйтесь (валидированный инпут пока размещен только как альтернативный стиль) https://test-figma2react.firebaseapp.com/fdenseMob2

Фигма скоро будет стримить о том как 100500 человек делают из компонентов нечто волшебное! (надеюсь😏) https://www.youtube.com/watch?v=yRnP7Cs0AfY&frags=pl%2Cwn

Задачка из области элементарного webdev'a и CSS: как прикрутить градиент к border'у простого прямоугольника со скруглёнными углами? Ответ - никак! Без хаков, костылей, SVG-картинок фоном и прочего это нереализуемо. Поддерживается браузерами только, если border-radius: 0. Вот такой вот потолок или неэффективность, однако! Даже css-tricks.com не помог...

Нормальная шпора по CSS-анимации (eng). Вытащено из топов Reddit'a за последний месяц: https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c