{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}
Дизайн
Roman Kamushken

13 свежих и полезных дизайн-ресурсов уходящей осени

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

Итак, что на сегодня: интерактивные кнопки и виджеты, стайлгайды, очень много классной информации по сетке, генераторы 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

0
5 комментариев
Популярные
По порядку

Спасибо за качественную подборку - добавил в избранное.

2

Спасибо за полезную подборку! 👍

1

Редкость для подборок, Но забрал почти всё, красота)
Спасибо огромное, за такое даже коммент не лень написать)

1

Ну я бы еще добавил визуальный конструктор структуры сайтов Octopus.
Спасибо за обзор.

1
Читать все 5 комментариев
«СберПрайм» ввёл лимит на бесплатную доставку продуктов из «СберМаркета» — её называли выгодой для подписчиков Статьи редакции

Сервис сделал платным то, что обещал сохранить бесплатным: на сайте было указано, что подписка для пользователей «всегда бесплатная».

Webmoney на полгода приостановила переводы по рублёвым кошелькам Статьи редакции

Владельцы кошельков смогут только оплачивать покупки и штрафы, а также выводить деньги на собственную карту.

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

9 декабря банк «Открытие» и Яндекс.Бизнес проводят очередное бизнес-шоу «Цифровая эволюция бизнеса»

Тема шоу — как компаниям малого и среднего бизнеса продвигать продажи и завоевывать новую аудиторию покупателей через онлайн-каналы

Взломан аккаунт VK и вместо помощи поддержки, получаешь от них блокировку

У меня нет аккаунта в VK, а у моей жены есть, точнее был. Обычный такой аккаунт , мамашки, где она админ 2 групп родкома в школе детей ( причем единственный админ и сейчас в эти группы никого не добавить и себя с нового аккаунта) и доступ в группы совместных закупок, аккаунт старый, причем аккаунт открыт только для друзей.

vc.ru превратился в книгу жалоб

Вам не кажется, что vc.ru превращается в сайт для жалоб на разные сервисы и компании?

Pinterest купила белорусский сервис для редактирования видео Vochi Статьи редакции

Покупка поможет Pinterest развивать видеонаправление.

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

Глава СберМаркета Асан Курмангужин запустил подкаст Asan Talks в YouTube

В выпусках Асан берет интервью у топ-менеджеров крупных компаний и обсуждает вопросы саморазвития и лидерства

Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

«У одного человека — половина спутников в мире»: Европейское космическое агенство обвинило SpaceX в монополии в космосе Статьи редакции

Илон Маск устанавливает собственные правила — это может мешать конкуренции, считает глава исследовательской организации.

null