Полезные инструменты дизайнера и разработчика

Время на прочтение: 2 минуты
6 апреля 2024

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

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

Рекомендуем использовать Atom (atom.io), как SublimeText, только более современный. Вот несколько основных плагинов для него:

  • AutocompletePaths (atom.io/packages/autocomplete-paths) — дополнение путей к изображениям, стилям и чему-либо еще, на основе папки проекта.

  • ColorPicker (atom.io/packages/color-picker) — выбор цвета из палитры, не покидая редактора.

  • Pigments (github.com/abe33/atom-pigments) — отображение кружочка с цветом возле кода цвета.

Шрифты

  • Font CDN (fontcdn.org) — эстетично показывает любой набранный вами текст различными шрифтами из каталога Google, удобный выбор.

  • Google Webfonts Inspiration (tobiasahlin.com/typesource), Hello Happy (hellohappy.org/beautiful-web-type), Fontpair (fontpair.co) — хорошие сочетания бесплатных шрифтов.

Иконки

  • IcoMoon (icomoon.io/app) — поиск по большому каталогу различных платных и бесплатных иконок, экспорт в векторный формат SVG.

  • The Noun Project (thenounproject.com) — огромный популярный каталог иконок с поиском по множеству слов.

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

  • Swiss Color (swisscolors.net) — приятный минималистичный каталог. Названий нет, только цвета.

  • Name That Color (chir.ag/projects/name-that-color/#6195ED) — после ввода цветового кода или выбора любого цвета сервис выдает удобное благозвучное название для него.

  • Crayon CSS (riccardoscalco.github.io/crayon) — хорошая цветовая палитра с удобными именами для верстки, а также готовым файлом с переменными.

  • Unsplash (unsplash.com) и Unsplash.it (unsplash.it) — огромная коллекция бесплатных фото и сервис, в котором можно без труда обрезать любое понравившееся изображение, отобразить случайное или размытое.

Прочее

  • ImageOptim (imageoptim.com) - убирает лишнее gif, png, jpg без потери качества.

  • Give ’n’ go (give-n-go.co) — превращает изображения с Dribbble в действующие браузерные прототипы на HTML/CSS.

  • U.S. Web Design Standards (standards.usa.gov/accordions) — гид по спискам, цветам, типографике, формам, сетке, кнопкам и прочему.

  • Animate CSS (daneden.github.io/animate.css) — популярнейшая библиотека CSS-анимаций.

  • CSSgram (una.im/CSSgram) - инстаграм-фильтры на CSS.