29 полезных ресурсов и инструментов для дизайнера и разработчика24.05.2016 17:52

Основатель бюро «Багет» Артур Пайкин в колонке для «Нетологии» собрал инструменты для дизайнеров и разработчиков — в список вошли иконки, шрифты, цвета и иллюстрации, сетка, плагины для редактора кода и векторной графики, чит-коды к Сhrome Developer Tools.

1. Цвета и иллюстрации

  • Crayon CSS — отличная палитра цветов с красивыми удобными названиями для верстки (banana, asparagus, caribbeangreen и frostbite), и даже готовым файлом с переменными. Фронтенд-разработчик скажет спасибо.

  • Swiss Color — еще одна минималистичная и приятная коллекция, на этот раз без названий, просто цвета.

  • Name That Color — выбираете любой цвет или вводите код, а сервис генерирует вам для него поэтичное удобное название.

  • Многие, наверное, слышали про Unsplash — большую коллекцию бесплатных фотографий. Но есть еще один сервис, который дополняет Unsplash — Unsplash.it. В нем можно легко обрезать любую понравившуюся картинку «на лету» (https://unsplash.it/200/300), отобразить случайную (https://unsplash.it/200/300/?random) или размытую (https://unsplash.it/200/300/?blur). Посмотрите.

2. Иконки

  • The Noun Project — самая популярная коллекция иконок, на любое слово можно найти иконку. Есть бесплатные, но чаще всего условно бесплатные: заплатите $2 (большая часть денег пойдет автору) или используйте бесплатно, но с указанием авторства. Мой любимый иконочный ресурс.

  • IcoMoon — ищет по большой коллекции разных платных и бесплатных иконок, экспортирует в векторный формат SVG

3. Шрифты

  • Google Webfonts Inspiration, Hello Happy, Fontpair — хорошо сочетаемые пары бесплатных шрифтов для вдохновения.

  • Font CDN — красиво показывает любой набранный вами текст разными шрифтами из коллекции Google, удобно выбирать.

4. Векторная графика

Я использую Sketch, он мне очень нравится. И я не одинок в своих пристрастиях. К сожалению, пока только для Мака. Для Виндоуса и Линукса есть Иллюстратор и Inkscape.

К Скетчу есть много крутых плагинов, выделю следующие:

  • Craft — добавляет в ваши макеты настоящие данные — фото, имена, заголовки, тексты. Может размножить профиль пользователя до двадцати профилей и самостоятельно добавить каждому уникальную фотографию и биографию, выстроив все по сетке. Магия. Посмотрите обзор.

  • Compo — превращает сгруппированый объект в умный компонент, например, кнопку, которая сама увиличится в ширину, если текст станет больше. Поддерживает привязку выравнивания по краю и настройку отступов как в CSS. Обзор.

  • Типограф для Скетча. Правильные кавычки, тире, форматирование телефонных номеров — все в наборе.

5. Редактор кода

Я про Atom, конечно. Раньше был Саблайм, но Атом круче, хоть и медленнее. С подборкой плагинов лучше меня справился автор блога Three Chords, упомяну несколько:

  • Pigments — отображает кружочек с цветом рядом с кодом цвета.
  • Color Picker — дает выбрать цвет из палитры не выходя из редактора.
  • Autocomplete Paths — дополняет пути к картинкам, стилям или чему-то еще, на основе папки проекта.

6. Сетка

Мне нравится CSS-сетка Адама Каплана и его анализ сеток год спустя. Я обычно не использую такие готовые сетки для верстки сайтов или интерфейсов, а задаю семантические классы и в них уже нужные размеры. Но сетка полезна, например, когда верстаешь блог и нужно дать автору возможность самому легко сверстать несколько колонок.

В Бутстрапе неплохая сетка для вдохновения, но, на мой взгляд, тяжеловата для большинства случаев. И вот хороший пример использования в статье «Зачем мы пишем книгу в Индизайне».

7. Chrome Developer Tools

Очевидное, но невероятное. Прочитайте обзор полезных возможностей Developer Tools, большую часть из которых я совсем не знал, хотя пользуюсь ими почти каждый день. Любимое: Expand All Child Nodes, палитры цветов (особенно «Page Colors» — палитра генерируется автоматически из цветов на открытой страницы), доступ к выбранному элементу по $0.

8. И напоследок

  • Инстаграм-фильтры на CSS
  • Animate CSS — лучшая известная мне библиотека CSS-анимаций
  • U.S. Web Design Standards — гид по кнопкам, сетке, формам, типографике, цветам, спискам. Полезно изучить.
  • Give n go — картинки с Dribbble превращаются в действующие прототипы в браузере на HTML/CSS
  • SVGO — экспортировали иконку из Скетча или, ой, Иллюстратора? Пропустите через SVGO — вырежет лишнее, сожмет, сделает прекрасным. Если не любите консоль, то есть программка вот. А раз уж мы про оптимизацию картинок, то ImageOptim мой фаворит: уберет лишнее из JPG, PNG, GIF — все без потери качества.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Полный текст статьи читайте на Нетология