Всем привет! В этом выпуске мы отобрали для вас лучшие ссылки на ресурсы, которые актуальны в индустрии дизайна и разработки, добавят вам вдохновения и ускорят рабочие процессы. Всем этим мы пользуемся сами, и думаем, что подборка будет полезна.

Итак, что на сегодня: интерактивные кнопки и виджеты, стайлгайды, очень много классной информации по сетке, генераторы UI-челленджей и шотов в Dribbble, крутые паки иконок и многое другое.

Самый топчик мы оставили напоследок — там лидеры по количеству репостов из канала «Полезное Дизайнеру». Все эти ссылки уже сияли там, просто отобрали лучшее.

13. Узнай шрифт

Вы наверняка сталкивались с такой ситуацией: вам понравился шрифт на каком-либо сайте, но вы не знаете где найти о нем информацию. Ресурс Font Of Web поможет.

Надо ввести URL сайта, в котором вам приглянулся шрифт, и через пару секунд у вас будет вся необходимая информация: название основного шрифта, перечень запасных вариантов этого шрифта, все типоразмеры для параграфа и заголовков, а также все спецификации (размер, толщина, высота строки и даже ссылки для скачивания).

12. Освой сетку в Фигме

Ресурс Making layout grids work for you является интерактивной инструкцией по тому, как наладить динамическую сетку в Фигме. Вы узнаете, как работает сетка в Фигме, узнаете, чем разметочный вариант отличается от Auto Layout, и обучитесь работе на живых примерах.

Контент ресурса состоит из 6 разделов:

a) Введение в сетку: здесь представлена анатомия, а также инструкция по тому, как применять в Фигме.

b) Фигма и разметка: этот раздел поможет вам понять работу с фиксированными и растягиваемыми, и узнаете про Constraints.

c) Сетка базовых линий: здесь вы научитесь работать со стандартными сетками базовых линий, а также как использовать её при работе с текстом и в дизайне иконок.

d) Практическое применение: в этом разделе вы научитесь равномерно распределять элементы, масштабировать сложные макеты и работать с Auto Layout.

И т.п.

11. Cгенерируй Dribbble шот

ScreenBean – отличный помощник для создания шотов в Dribbble и не только. Закидываете любой скриншот, и система автоматически сгенерирует сочный шотик!

Что генерится автоматически: цветовая палитра, закругленные углы картинки, а также несколько фоновых режимов - обычный, с градиентом, с тенями, и так называемый “игривый” фон (с кругами разных размеров, разбросанными по фону).

10. Инспернись UI анимацией

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

С одной стороны, все анимации в данной коллекции являются визуально цепляющими. С другой стороны - они просты и не навязчивы, что также является хорошим трендом в наши дни. Такие кнопки, как Загрузка, On/Off, Поиск, Добавить в корзину, Отправить сообщение, эмодзи-реакции и многое другое – годных идей по UI анимации здесь просто море.

9. Скачай иконки

Glyphs Icons являет собой дизайн-систему, состоящую из почти из почти 3000 boolean иконок, созданных в Фигме. Эти иконки оптимизированы под работу в браузере.

Можно экспортировать иконки из Figma с помощью его API, как в виде простых SVG файлов, так и в виде веб-компонентов.

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

Весь процесс работы над созданием Glyphs Icons, автор описывает в этом треде на Reddit.

8. И вот эти тоже качни!

Phosphor Icons – это убойный пак иконок для любого проекта, будь то создание интерфейсов, диаграмм или презентаций. Этот ресурс представляет собой 3500+ гибких иконок на все случаи жизни.

На сайте выбираете какие иконки нужны и в каком виде: возможно контурные или заполненные, или же двухцветные. Вы можете настроить толщину, выбрать нужный размер посредством слайдера, задать нужный цвет в поле HEX-кода. Также, иконки доступны в библиотеке Figma как в виде файла, так и в качестве плагина.

7. Сделай CSS сетку

Layoutit Grid — это интерактивный генератор CSS-сеток с открытым исходным кодом. Он позволяет вам создавать разметку и видеть код в процессе. Вы можете взаимодействовать с кодом, изменять размеры контейнеров, видя при этом изменения CSS и HTML в реальном времени.

Закончив работу с макетом, вы можете перейти в CodePen, получив код. После этого, вы можете переходить к своему следующему проекту. Этот инструмент выводит код на передний план, помогая вам изучить CSS-сетку, работая непосредственно с ней.

6. Прокачай UI скилл

UI Coach – это генератор дизайн-челленджей. Идеальный вариант для тех, кому нужно набить руку в дизайне для органичного роста. Всё просто — после нажатия на кнопку, для вас сгенерируется задача сделать UI дизайн чего-либо.

Что дано: спецификация проекта (например, “Создайте веб-сайт, на котором продаются темы и плагины WordPress”), цветовая палитра, сочетания шрифтов, а также ссылка на бесплатный ресурс (например, иллюстрации).

Если вам не подошел какой-то отдельный пункт, вы можете нажать на кнопку Обновить, и система сгенерирует вам другой пункт. Или же вы можете нажать на Refresh All, и вам будет выдана полностью новая задача.

5. Задизайни styleguides

Многие иногда испытывают трудности при оформлении стайлгайдов для проектов. И если вы столкнулись с такой же проблемой - то этот обширный мудборд на Dribbble вам точно не помешает.

Всего 98 шотов от 79 дизайнеров. Он постоянно обновляется и состоит из топовых работ, на которые стоит ориентироваться.

Эта коллекция не ограничивается стайлгайдами по UI-китам и дизайн-системам. У вас будет возможность понять, как оформлять стайлгайды для логотипов, а также паттерны, которые используются на сайтах и приложениях. К примеру: как оформить раздел FAQ, и т.д.

4. Узнай популярный инструмент

UX Tools Survey по праву называют самым важным ежегодным опросником по популярности дизайн-инструментов. Это прекрасный источник информации, если вам нужны статистические данные для анализа. Недавно выложили данные за 2020 год.

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

Вот список доступных разделов:

a) Из каких стран дизайнеров больше

b) В чем проводят Мозговой штурм и генерят идеи,

c) Где дизайнят поток пользователей и карты сайта;

d) Какие инструменты для вайрфрейминга еще живы;

e) Какие инструменты для UI дизайна в топчике;

f) Где нынче прототипируют;

И т.п.

UX Tools Survey представляет удобный и визуально приятный интерфейс для сравнения инструментов, где у вас есть возможность просмотреть большой объем самой разной информации: каков коэффициент использования, работает ли инструмент в режиме офлайн, поддерживает ли синхронное редактирование и многое другое

Все данные доступны для скачивания.

3. Собери сайт в конструкторе

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

Сейчас создатель Aspectapp проводит работу над интеграцией React в свое приложение, а также над возможностью экспортировать дизайны прямо из Sketch, Figma и XD.

С подробностями этого проекта вы можете ознакомиться в этом треде на Reddit.

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

2. Рассчитай сетку

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

Kolumna – отличное решение, если вы хотите, чтобы ваш контент был упорядочен, работа ускорена, а ваши дизайны были более сбалансированными.

1. Познай сетку (80lvl)

Лидером нашего сегодняшнего дайджеста стала статья Responsive Grid Design: Ultimate Guide (eng). Мы много говорили о сетке, но этот материал является самым обширным. После прочтения этой статьи, у вас будет полное понимание того, как устроена сетка и как с ней работать в качестве продвинутого пользователя.

Вы узнаете:

a) Как устроена анатомия сетки - основная информация о столбцах, полях и межколонниках;

b) Как разработать интерфейс с использованием адаптивной сетки - как работать с изображениями, текстами и другими элементами пользовательского интерфейса, которые находятся внутри видимых или невидимых родительских контейнеров;

c) Как устроена структура столбца и как работают контрольные точки;

d) Поведение сетки - все о фиксированных сетках, гибких сетках, а также о гибридных сетках;

И т.п.

На этом всё все. Хорошо, если что-то пригодилось! Как только наберётся материала, ждите новый пост.

Мы постоянно публикуем интересные новости из мира дизайн-индустрии. Поэтому, чтобы всегда оставаться в курсе всего нового и ловить вдохновение, подписывайтесь на канал Полезное дизайнеру и на наш Dribbble