Основатель бюро «Багет» Артур Пайкин в колонке для «Нетологии» собрал инструменты для дизайнеров и разработчиков — в список вошли иконки, шрифты, цвета и иллюстрации, сетка, плагины для редактора кода и векторной графики, чит-коды к С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 — все без потери качества.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.