[Веб-дизайн, Разработка веб-сайтов, Интерфейсы, Usability, Дизайн] 13 свежих и полезных дизайн-ресурсов уходящей осени
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Всем привет! В этом выпуске мы отобрали для вас лучшие ссылки на ресурсы, которые актуальны в индустрии дизайна и разработки, добавят вам вдохновения и ускорят рабочие процессы. Всем этим мы пользуемся сами, и думаем, что подборка будет полезна.
Итак, что на сегодня: интерактивные кнопки и виджеты, стайлгайды, очень много классной информации по сетке, генераторы 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
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, JavaScript, Программирование] Детальный обзор Well-known Symbols (перевод)
- [Информационная безопасность, Разработка веб-сайтов, Habr, Тестирование веб-сервисов] 5 способов краулинга веб-сайта (перевод)
- Доступен пакетный менеджер GNU Guix 1.2 и дистрибутив на его основе
- [Производство и разработка электроники, Процессоры] Опубликован конкурс на 32-ядерный процессор «Эльбрус» и стоимость его разработки
- [Разработка под Arduino, DIY или Сделай сам] Самодельный гироскутер
- [Программирование, C#, ООП, Промышленное программирование] Методы без аргументов — зло для неизменяемых объектов, и вот как его полечить
- [Интерфейсы, Графический дизайн, Разработка под Windows] Microsoft вновь обновляет интерфейс windows 10
- [Разработка веб-сайтов, PHP] Встречаем PHP 8 вместе: советы по обновлению, мнения за и против и интервью с одним из ключевых разработчиков
- [PHP, Программирование, Java] Финальные классы в PHP, Java и других языках (перевод)
- [Разработка игр] Исправляем кривой запуск первого Mass Effect (перевод)
Теги для поиска: #_vebdizajn (Веб-дизайн), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_interfejsy (Интерфейсы), #_usability, #_dizajn (Дизайн), #_grid, #_setka (сетка), #_figma, #_dizajn (дизайн), #_ui, #_icons, #_freebies, #_web, #_razrabotka (разработка), #_prototipirovanie (прототипирование), #_vebdizajn (
Веб-дизайн
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_interfejsy (
Интерфейсы
), #_usability, #_dizajn (
Дизайн
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 23:56
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Всем привет! В этом выпуске мы отобрали для вас лучшие ссылки на ресурсы, которые актуальны в индустрии дизайна и разработки, добавят вам вдохновения и ускорят рабочие процессы. Всем этим мы пользуемся сами, и думаем, что подборка будет полезна.  Итак, что на сегодня: интерактивные кнопки и виджеты, стайлгайды, очень много классной информации по сетке, генераторы 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 =========== Источник: habr.com =========== Похожие новости:
Веб-дизайн ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_interfejsy ( Интерфейсы ), #_usability, #_dizajn ( Дизайн ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 23:56
Часовой пояс: UTC + 5