Полезные дизайнерские онлайн инструменты №16 и немного вдохновения

С момента публикации прошлой подборки полезных веб-сервисов №15 прошло немало времени, и у нас накопилась масса новых интересных ссылок, которыми хочется с вами поделиться. Их насколько много, что они все физически не помещаются в один пост. Поэтому разделим ее на две части — второй блок с классными онлайн-проектами ожидайте через несколько недель.

Сегодня будем говорить про генераторы, паттерны, цвета, логотипы, UX-элементы и др. Линки традиционно спрятаны в картинках. Также в одном из вебмастерских блогов недавно был неплохой дайджест полезных статей по веб-разработке, если вам близка и эта тема.

Blush.design

Отличная платформа для создания, редактирования и генерирования оригинальных иллюстраций, которые вам разрешается бесплатно использовать в своих проектах. Принцип работы достаточно прост – переходите в одну из категорий изображений: растения, люди, город, толпа, веселье, завитки и т.п. Затем предлагается на выбор несколько “сценариев” для композиции – большой/маленький город, даунтаун, пригород. После этого вы можете выбирать параметры самой картинки – количество зданий, деревьев, машин и др. В итоге получаете иллюстрацию, полностью скомпонованную по вашим параметрам. Супер идея и реализация!

Beautiful Dingbats (Pattern Generator)

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

Что касается самого проекта от Beautiful Dingbats, то здесь надо пройти несколько этапов для создания нужного фона. Сначала задается вид объектов на нем: кривые, полоски, точки, круги, зигзаги, пересечения и др. Затем из предложенных 12-ти комбинаций выбираете ту, что нравится вам больше всего, и для нее уже меняете разные параметры – начиная от размера элементов, их вращения и заканчивая цветами.

Print to CSS

Автор этой разработки признается, что всегда был без ума от журнальной верстки и типографики. На странице он придумал и реализовал 9 вариантов оформления контента, которые напоминают по стилистике наполнение журнала. Кликайте по ссылке “Grid Demo” чтобы посмотреть реализацию и ее код в новом окне. Если вам нужно оригинально разместить текстовку сайта, советуем обратить внимание на Print to CSS.

50 Best Websites of 2019

Классная статья для вдохновения, где собраны 50 лучших сайтов за прошлый год. Да, мы в курсе, что через неделю уже лето 2020, но большинство работ из поста все еще очень актуальны. Каждый пример имеет свой оригинальный стиль и выглядит необычно.

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

Gradient Magic

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

Сначала выбираете одну из рубрик: простые решения либо разные наборы кругов, либо сетки, либо полосы и т.п. Затем на странице еще и сможете фильтровать варианты по цветам. При клике на конкретное решение попадаете на страницу с его настройкой и возможностью скопировать CSS-код.

Tiny Helpers

На сайте найдете коллекцию бесплатных простых и небольших онлайн-инструментов для начинающих и более опытных веб-разработчиков. Все они поделены на 2 десятка категорий, среди которых есть: цветовая палитра, командная строка, CSS, шрифты, фавиконки, JavaScript, JSON, безопасность, SVG, изображения, формы и др.

Как видите, группируются ссылки по технологиям, сферам веб-разработки, решаемых задачам и тому подобным критериям. Всего собрано более 220 сервисов. Токовый проект.

Neumorphism.io

Инструмент позволяет генерировать приятные глазу элементы UX-интерфейса по выбранным вами параметрам. В настройках справа задаете цвет, размер, радиус закруглений блоков, размытие, интенсивность, форму и др. параметры, после чего автоматически получите CSS-код для вставки на сайт. Слева в реальном времени отображаются все изменения объекта и вы можете видеть как данный блок в итоге будет выглядеть. Простенько, но интересно.

Logobook

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

В принципе дабы понять какие логотипы принимаются достаточно взглянуть на имеющиеся примеры в коллекции. Для удобства она разделена на несколько подразделов: цифры и буквы, формы, объекты, природа, бизнес.

Calcolor

Разработчики Calcolor предлагают новый подход к построению цветовой гаммы для веб-проектов. Они хотят уйти от всевозможных сервисов диаграмм и генераторов палитр по RGB или HSL кодам, и формировать цвет как композицию нескольких базовых оттенков.

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

The 78 Best Book Covers of 2019

Напоследок приготовили для вас еще одну заметку для вдохновения. Она включает в себя 78 классных обложек книг за прошлый год. В первую очередь материал должен приглянуться иллюстраторам, т.к. здесь есть много оригинальных визуальных решений как в плане композиции, идеи, типографики, так и по технике исполнения. Как дополнение к этой статье советуем посмотреть супер оригинальные старые постеры, которыми мы показывали пару лет назад.

По традиции у нас получилось 10 полезных ссылок по разным направлениям. Как и обещали в начале, вторая часть подборки должна выйти через несколько публикаций (дабы сильно не затягивать с этой темой). Если хотите поделиться какими-то интересными сайтами/сервисами, присылайте линки в комментариях.