Всем привет! В этом выпуске мы отобрали для вас лучшие ссылки на ресурсы, которые актуальны в индустрии дизайна и разработки, добавят вам вдохновения и ускорят рабочие процессы. Всем этим мы пользуемся сами, и думаем, что подборка будет полезна.
Итак, что на сегодня: интерактивные кнопки и виджеты, стайлгайды, очень много классной информации по сетке, генераторы 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
