Графических редакторов мало для полноценной работы веб-дизайнера. Есть еще масса вспомогательных инструментов, современных мультизадачных программ и просто приложений, которые облегчают задачу. Ловите подборку из 15 крутых сервисов.
Кроме основных программ для дизайна нам нередко требуются дополнительные приложения и расширения. Они не являются обязательными для работы, но сильно ее облегчают и ускоряют. Наша команда выделила 15 полезных сервисов, которые пригодятся как начинающему, так и опытному веб-дизайнеру.
Сервис для подбора шрифтов. Вы вводите текст в поле, он показывается в различных вариантах. Собираете несколько удачных решений и используете в проекте. Сам сервис предлагает публиковать результат в соцсетях или отправлять на почту. Но можно и просто запомнить название шрифта. Особенно удобно для текстовых логотипов, заголовков.
2. FontPair
Снова про шрифты. Здесь уже подбираются пары. Очевидно, что эта задача важна – мало найти красивый шрифт, нужно, чтобы он сочетался с остальными в проекте.
Для выбора есть несколько семейств, классика жанра: различные комбинации Sans, Serif, Cursive. Можно вдоволь наиграться разными вариантами и скачать архивом удачное решение.
3. Palleton
Создавать цветовые комбинации – задача творческая, но у дизайнера она перерастает в рутину. Подобрать цвета для проекта можно быстро и легко. Для этого есть этот инструмент.
Он имеет свои преимущества перед аналогичными сервисами. Потому что не просто показывает комбинации с номерами цветов, но и позволяет просмотреть их в разных вариантах, учитывая отклонения цветовосприятия. А еще можно конвертировать цвета. Выбранную палитру легко сохранить в PNG, Gimp, CSS.
4. ColorSpace
Еще один инструмент для подбора палитры. Можно взять готовые на платформе, но мы уже рассказывали, почему это не работает. Можно делать подбор по собственноручно загруженному цвету. Это очень удобно, если у вас на руках нет готового фирменного стиля, но есть пожелания клиента или логотип, что частенько встречается. Вот по такому исходнику легко подобрать остальную палитру.
Бонус: градиенты по цветовому коду.
5. HEXNAW
Если вы не приемлете автоматические подборы и делаете все сами – это отлично. Но при ручном подборе палитры неплохо бы проверить удачность сочетания цветов. Вручную искать соответствия в цветовом круге долго и муторно. Можно просто ввести код цвета в HEXNAW и увидеть все сочетания, контрасты и совместимость.
Этот сервис полезен новичку, который старается развивать вкус. Вы стараетесь без дополнительных инструментов подобрать оттенки, вырабатываете виденье и навык. А потом проверяете, насколько хорошо справились с задачей.
6. TinyPNG
Не стоит лишний раз упоминать, что быстрая загрузка страницы – важное условие для хорошего сайта. И вес элементов тут играет роль. Онлайн-сервис, с помощью которого можно сжать файл PNG и существенно снизить его вес, но не слишком потерять в качестве. Присутствует “умная” технология, которая оптимизирует процесс. Благодаря этому на выходе невооруженным взглядом сложно увидеть изменения, но размер будет намного меньше. Работает сервис быстро, результат легко отправить в dropbox или скачать.
7. Boxy-SVG
Онлайн-аналог Adobe Illustrator или Sketch. Это редактор, который вы всегда сможете скачать на любой компьютер или использовать онлайн. Довольно функциональное решение, которое позволяет выполнять основные дизайнерские задачи.
Можно рассматривать как основной инструмент. Но в чем фишка – это палочка-выручалочка, если вам нужно внести правки в проект, а с собой нет своего рабочего ПК. Такое бывает. Идите в ближайший коворкинг или к соседям, проситесь поработать, используйте Boxy-SVG и избегайте срывов проекта!
8. GetCover
Вот вы сделали макет, надо показать заказчику, как страница будет смотреться в браузере. В разных браузерах. На разных устройствах. И этот сервис как раз пригодится. GetCover покажет, как сайт выглядит в разных популярных гаджетах и ОС. Просто загружайте дизайн и выбирайте просмотр по нужному признаку. Делайте сразу несколько превью – это легко реализовать и результат будет наглядным. Можно использовать для генерации портфолио.
9. Stylifyme
Видите крутой сайт? Исследуйте его. Вы можете вытянуть шрифты, цветовые палитры, узнать размеры элементов, шрифтов и изображений. Все это удобно сделать всего лишь с применением одного сервиса – Stylifyme. Возьмите себе за привычку использовать сервис при просмотре кейсов на Dribbble, Behance или Pinterest – это поможет сформировать вкус, набраться новых идей, отметить лучшие сочетания.
10. Flaticon
Специализированный инструмент для подбора иконок. Огромное количество интересных сетов, которые можно сразу же настроить по размеру и цвету. Много бесплатных. Разные стили, новинки и классика. Если нужны иконки – берите тут. Если нужны уникальные иконки – делайте их самостоятельно, руководствуясь подсказками из нашего вебинара.
11. Remove.bg
Вырезать объект из фона – задача, которая преследует веб-дизайнера постоянно. Сделать это быстро, удобно и (самое главное!) качественно можно в Remove.bg. Реально в два клика. Но есть нюанс – сколько угодно раз можно проворачивать такой фокус и скачивать превью. А если понадобится изображение в оригинальном качестве, то бесплатно это можно сделать один раз. Ну как один – при регистрации одного имейла. Если региться каждый раз с новой почты, то ограничений тоже нет. Или оплатите сервис и не мучайтесь, если задача по вырезанию действительно частая.
12. Kukla-kit
Больше сотни бесплатных иллюстраций, иконок и 3D-объектов на прозрачном фоне. Есть больше, но уже за деньги. Но в платной версии доступна также кастомизация, так что оно того стоит. Трендовые элементы дизайна, которые уже готовы к применению в вашем проекте.
13. Storytale
Огромная библиотека иллюстраций. Преимущественно платные, но есть и бесплатные паки. Почему в этом списке именно этот сервис, а не один из массы бесплатных? Потому что тут много действительно оригинальных решений, которые вы не встретите на стоках. Большой выбор разных стилей, тематик и смыслов. Если надоело видеть и делать однотипные страницы, то это ваш выбор.
14. Pdf Converter
Если есть запрос на работу с большим количеством тяжелых PDF-материалов, то этот сервис пригодится. Тянет файлы более 100 МБ. Может объединять их, сжимать. Удобная штука.
15. Visual eyes
Про карту внимания на сайте слышали все. Тестировать ее очень полезно. Но этот инструмент позволяет анализировать карту не по “живым” меткам, а с помощью искусственного интеллекта! Сервис моделирует карту внимания и выдает прогноз с точностью 93%. Это отличный способ исправить слабые места еще до выхода продукта. Что удобно – сервис есть в виде плагина для Figma, так что получится исследовать свой сайт/приложение прямо в программе.
Материал подготовлен командой образовательной платформы WAYUP
