Полезное дизайнеру / разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 8

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

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Faune Font

Немного сказочный и интересный по стилистике display-шрифт Faune. Отдаленно напоминает шрифт, который использует блог-площадка Medium. Доступно 6 начертаний, использовать можно в коммерческих целях. Русификации нет.

Haiku for Mac

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

Bulma CSS framework

Бульма :) — это свежий CSS фреймворк, основаный на FlexBox. 100% адаптивный и имеющий модульную архитектуру. Удобно, что с некоторыми элементами можно взаимодействовать уже на лендинге.

Git viewer

Просмотрщик Git репозиториев в терминальном режиме. Эдакий консольный по стилю темплейт. Разработчики дополнительно предлагают несколько фич: фильтры, автоапдейт, хоткеи и т.п.

#sketch #react #tutorial #development

Sketch > browser > React

Очередной подробный и увлекательный туториал по организации связки Скетч + Браузер + React (eng)

Chrome React UI

Некоторый UI браузера Chrome сделанный на React. Открываете превью и видите браузер в браузере. Занятный эксперимент.

Entrepreneurial List

Если Вы дизайнер или программист, который интересуется предпринимательством или имеет собственное дело, обратите внимание на «Предпринимательский Список». В нем собрано много ресурсов (eng), которые необходимо отслеживать, чтобы быть впереди всех в своей нише.

Watermark Ink

Браузерный инструмент для нанесения watermark'ов на фотографию. Подгрузив изображение, можно добавить свой логотип, надпись. Есть предустановленные темплейты, но потребуется регистрация.

Wordcounter

Инструмент для подсчета слов в тексте. Продукт, во-первых, оформлен на высоком уровне, а во-вторых подсчитывает наиболее популярные слова; и показывает рейтинг их плотности

Telegram API

Телеграм тем временем выпустил нечто больше, чем просто API Бота и предлагает каждому площадку для создания своего «Телеграма».

Telegram login widget

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

Omnicalculator

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

#sketch #development #tutorial

Why your app looks better in Sketch

Nathan Gitter в своей medium-статье (7.3K!) «Почему ваше приложение выглядит лучше в Скетче» сравнивает рендеринг текста, градиентов и прочих мелочей в iOS и Sketch. Разница действительно есть! И фиксы тоже теперь есть, спасибо автору.

Flat illustrations tips

Студия Tubik пишет в статье о «6 особенностях хорошей flat-иллюстрации» (eng). Понятно, что все ради пиара собственных сервисов, но иллюстрашки очень крутые.

Font Awesome git

Знаменитые бесплатные иконки версии 5.0 теперь прописались в репозитории!

Font Awesome Sketch library

Font Awesome иконки в виде Скетч-библиотеки. Подозреваю, что выполнены в виде символов и менять можно через overrides. Традиционно для всех free файлов на Gumroad — вводим «0$», чтобы скачать бесплатно.

Slice revealer effect

Tympanus выкладывает бесплатно интересный мозаичный эффект появления изображений «slice revealer». В архиве три вариации.

Paddy Sketch plugin

Плагин-выравнивалка отступов для Sketch. Вводите нужные значения в инпут, нажимаете enter, система приводит в визуальный порядок набор элементов. Ресайзит автоматом тело кнопки, если вы редактируете label, а отступы по вашей системе должны быть строго равны определенному значению.

Audi UI

Концерн Audi видимо собирается в скором времени издать собственную дизайн-систему. Уже сейчас доступны некоторые компоненты из Audi UI kit в CSS, Vanilla JavaScript, и HTML

Phase design tool

Вот пожалуйста, анонсировали еще один «Скетч». Умеет и то, и вот это, и даже это и естественно будет на голову лучше остальных. Доступна пока что лишь подписка на будущий «early access». Естественно нам обещают очередную революцию среди дизайн-инструментов. Одни уже обделались, назвав точную дату релиза своего «Студио», понаблюдаем теперь за другими. Однако, с таким лендингом уже слабоватый старт.

Figma design system

Вышло обновление до версии 1.3 для material дизайн-системы в среде Figma. Любые production-ready прототипы теперь собираются еще быстрее. По ссылке можно ознакомиться с составом обновлений.

#tutorial #hints #figma

Isometric illustration tips

Дизайнер Ryan Morrison работает в Фигме и предлагает способ создания изометрических иллюстраций через Group Selection. Смотрите твит с гифкой!

JS Winamp2

Тут кто-нибудь скучает по старому доброму Winamp'y? Вот вам браузерная версия! Разумеется своя музыка подгружается также как и раньше, по клику на кнопку «eject». Сразу как-то вспомнился звук раскручивающегося диска в CD-ROM'e…

Split UI kit

GetCraftWork начали бесплатно раздавать свой UI kit для Скетча под названием «Split». Гайдлайны не нативные, библиотека символьная. Не уверен, что из этого набора можно собрать что-то серьезное, но для обучения вполне.

Space icons

77 векторных иконок на космическую тематику. Отрисованы в handdrawn стиле. Доступны в формате SVG, PNG, AI, EPS. Запуск родстера Теслы в космос откладывает отпечаток и на дизайнерах :)

Dribbble viewer

Вышел новый неофициальный дрибббловский клиент под Android. Так что, если вы проводите много времени на этом ресурсе и вам импонирует material design — устанавливайте и пользуйтесь.

SVG backgrounds

Набор кастомизируемых SVG фонов. Доступно множество орнаментов, можно изменять масштаб, цвета и сразу получить CSS-код

CSS hover effects

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

#development #js #api

Blotter JS effects

Вышла интересная JS-надостройка позволяющая создавать стильные glitch-эффекты (и не только) для текста.

Signato font

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

CSS paralax effects

Более продвинутые paralax эффекты в связке с CSS. Например, при скролле объект можно сделать не только смещающимся в нужную сторону, но и добавить вращение или трансформ через CSS анимацию.

Gangbase design list

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

Silhouette font

Woff / TTF шрифт с качественно прорисованными силуэтами людей. Около 30 разнообразных силуэтов доступно в наборе.

Grad Pad

Конструкторы для создания градиентов выпускаются регулярно, но вот этот действительно конструктор! Удобный, продвинутый, позволяет собирать градиент быстро, удобно и экспортировать сразу в CSS

Вы можете поделиться этой статьей. Давайте вместе развивать дизайн-сообщество и поддерживать разработчиков, помогая им распространять их полезные и бесплатные продукты. Спасибо за внимание!