{"id":9389,"title":"\u041c\u0438\u043b\u043b\u0438\u043e\u043d \u043d\u0430 \u043e\u0431\u043b\u0430\u043a\u0430 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u043e\u0432","url":"\/redirect?component=advertising&id=9389&url=https:\/\/vc.ru\/promo\/318366-korotko-poluchit-million-na-testirovanie-oblachnoy-infrastruktury&placeBit=1&hash=573eeb526e6c42315ad14d1bf2a7c0879182f777f5702dcd30be48e10aa549e1","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 комментариев
«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

null