Инструменты веб-дизайнеру и не только №9 — Sketch плагины, мокапы, верстка

Прошлая заметка с обзорами дизайн сервисов была опубликована несколько месяцев назад, поэтому пришло время рассмотреть парочку новых проектов. Начиная с этого выпуска мы решили включать в подобные статьи не только ссылки на полезные сайты, но и публиковать разные интересные материалы, что могут пригодиться в работе. То есть по формату составляющие части подборки могут кардинально отличаться, но всех их объединяет тематика дизайна для Web’а и не только.

FontRapid

Начнем с бесплатного плагина FontRapid под Sketch, позволяющего создавать шрифты непосредственно в редакторе. На выходе получите полноценный OpenType Font, который пригодится в печати и интернете. Все параметры и метрики шрифта (линия глифа, кернинг) легко настраиваются, можете добавлять лигатуры для красоты. В программе сразу доступен просмотр результатов в реальном времени. Полученный шрифт экспортируется в формате .otf.

50 бесплатных иллюстраций

Набор 50 illustrations является бесплатной версией одноименной премиальной разработки и содержит 50 детализированных классных иконок-иллюстраций. Все они доступны в трех стилях: цветные, монохромные и упрощенные (линейные). По тематике картинки связаны с разными видами работы и профессиональной деятельности.  Допускается использование даже в коммерческих задачах!

DesignCap

Проект DesignCap позволяет создавать красивые постеры: рекламные, праздничные, спортивные и под любые другие мероприятия. Визуально похож на сервис Canva. На сайте найдете сотни готовых шаблонов, а также разные стоковые материалы: формы, шрифты, иконки и др. В редакторе имеются инструменты для модификации картинки: выравнивание, фоны, изменение размеров, повороты и т.п. Работать в DesignCap можно абсолютно бесплатно. Советуем также глянуть оригинальные и старые постеры для вдохновения.

CSS Cheat Sheet

В сервисах дизайнеру №6 была подборка подсказок по HTML тегам, а сегодняшняя CSS Cheat Sheet посвящена таблицам стилей CSS. Если вы только начали изучать верстку, то подобные ресурсы вам пригодятся, т.к. там всегда можно посмотреть правильное написание и атрибуты всех используемых элементов.

На странице CSS Cheat Sheet слева содержится меню основных тем: селекторы, псевдо классы, фоны, позиционирование, шрифты, а также CSS Grid и списки. При клике/выборе нужного пункта идет переадресация на портал разработчиков mozilla.org, где все детально описано (правда, на английском).

Free Email Template — Material Design

В этом проекте на Behance дизайнер Paul Goddard представил бесплатные шаблоны писем Email рассылки в стиле Material Design от гугла. Автор удачно протестировал использование макетов на 33 разных почтовых клиентах от Win, Mac, онлайн сервисах и т.п. Письма корректно смотрятся и на мобильных устройствах. Графика не его, используется только как пример.

iOS 11 UI Kit для iPhone X

Пакет iOS 11 UI Kit содержит самый полный набор инструментов под Sketch, которые встречаются в iPhone X и iOS 11. Все детали, типографика созданы в соответствии с руководствам по интерфейсу Apple. Есть светлая и темная версия графики, для символов и разных элементов дизайна можно менять размеры. Если вдруг по каким-то причинам вам нужна графика более «древних» моделей телефона, посмотрите PSD макеты iPhone 7.

Logo Integrity

Напоследок будет небольшая игра/эксперимент Logo Integrity. По словам дизайнера Paul Rand, идеальный логотип за счет свой устоявшейся неизменной формы узнаваем практически в любых условиях. На странице представлены 20 лого популярных мировых брендов, и ваша задача угадать их. Для картинок применен эффект размытия, но нажав на кнопку «Sharpen the Logos» вы можете его слегка ослабить (если совсем ничего не получается). Чем раньше идентифицируете бренды тем больше баллов получите.

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