8 лучших инструментов для веб-дизайнера

От выбора инструментария зависит скорость работы, качество выполнения проектов и даже процесс взаимодействия с заказчиками. Например, если вы не умеете рисовать, то это не значит, что ограничены в использовании иллюстраций – есть сервисы, где их можно скачать или даже создать. А если нужна помощь в генерации идей, то необязательно организовывать созвон с командой – на этот случай тоже есть простые решения. 

Эта статья поможет начинающим специалистам с ответом на вопрос, как выбрать тот самый инструмент. А «продолжающим» – найти для себя что-то новое и упростить работу над проектами.

Figma

Начнем нашу подборку сервисов с основного инструмента веб-дизайнера – Figma. Это профессиональный графический редактор, предназначенный для отрисовки интерактивных прототипов, макетов сайтов и мобильных приложений, векторных иллюстраций, элементов интерфейса и многого другого. Весь процесс работы автоматически сохраняется в облаке – можно создавать макет сайта и не беспокоиться, что проект пропадет. Также вы можете работать над одной задачей совместно с другими пользователями в режиме онлайн – для этого достаточно предоставить ссылку и открыть доступ. 

При всем этом Figma – не такой сложный инструмент, как Photoshop. Освоить большинство необходимых функций для отрисовки макета можно всего за 1-2 часа даже неподготовленному пользователю. 

Стоимость: бесплатно для одиночного использования, для команды от $12 за пользователя

Официальная страница: Figma

Principle

Principle – полезный инструмент для веб-дизайнера, который подойдет владельцам MacOS. Он поможет создать анимацию элементов макета и сгенерировать интерактивный прототип. С помощью этой программы вы сможете презентовать свой проект заказчику со всеми вытекающими: переходами между страницами, прелоадером, анимированными элементами и прочим. Кроме того, Principle также поможет вам, если версткой сайта занимается другой специалист. Например, вы можете создать проект и показать, как должна выглядеть анимация, чтобы верстальщик смог ее без проблем перенести в формат кода.

Из аналогов на Windows подойдет программа ProtoPie и незаменимая Figma, функционала которой может не хватить для сложных проектов, но она вполне справится с созданием полноценного прототипа и простой анимации. Например, в ней можно показать появление элементов при скролле страницы или как будет изменяться кнопка при наведении курсора. 

Стоимость: $129

Официальная страница: Principle

InVision

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

Стоимость: есть бесплатная версия, для работы с командой нужно оплатить тариф PRO за $4

Официальная страница: InVision

Blush

Blush – это сервис, который позволяет создавать различные иллюстрации в форматах PNG и SVG. Он работает как конструктор: вам предлагается готовая картинка с разными модификациями. Например, персонажу можно изменять прическу, одежду, форму головы и так далее. Таким образом можно получить классную иллюстрацию для своего проекта без привлечения дополнительного специалиста. Также Blush можно интегрировать сразу в Figma или Sketch в виде плагина.

Единственный минус сервиса в том, что бесплатно он позволяет скачивать готовые файлы только в маленьком разрешении и в формате PNG. Чтобы выгрузить в SVG, потребуется оплатить подписку.

Стоимость: $12

Официальная страница: Blush

Craftum

Craftum – это онлайн-конструктор, позволяющий создавать сайты без навыков программирования. С его помощью вы можете преобразовать свои дизайн-макеты в работающий веб-ресурс. Это особенно актуально для тех, кто хочет продавать себя не только как дизайнера, но и как полноценного разработчика сайтов под ключ. 

Вот что можно сделать с помощью Craftum: 

• Создать сайт на основе шаблона. Отличный вариант, когда нужно сделать проект в короткие сроки. Достаточно выбрать шаблон для нужной ниши, заполнить его своим контентом и сайт готов. 

• Сделать уникальный сайт. Craftum – это не только про шаблоны, здесь есть инструмент «Дизайн-блок», позволяющий конструировать веб-страницу так, будто вы работаете в графическом редакторе. Например, можно собрать сайт по макету, сделанному в Figma.

• Создать свое портфолио. Персональный сайт позволит эффектно презентовать свои услуги и повысить доверие со стороны заказчиков. Вы можете разместить свои работы, рассказать о себе и показать, почему стоит обратиться именно к вам.

Чтобы начать работать с Craftum, необходимо зарегистрировать аккаунт, затем выбрать подходящий шаблон или пустую страницу. Почитать подробнее о работе с конструктором вы можете в статье «Создаем сайт на Craftum: пошаговое руководство».

Стоимость: 10 дней бесплатно, далее стоимость подписки начинается от 159 рублей в месяц

Официальная страница: Craftum

Trello

Если вы уже слышали о Trello, то, скорее всего, думаете, что это программа для крупных веб-студий, в которой удобно отслеживать задачи всех сотрудников. Это так, но инструмент также подойдет для организации своей работы и управления временем. В Trello вы можете добавлять различные доски, разбитые на категории. Допустим, можно создать доску для нового проекта и добавить на нее несколько колонок. В первой вы можете расписать все задачи, а в остальных отмечать статусы, например «В работе», «Ревью», «Готово» и так далее. Перемещение задач из одной колонки в другую позволит вам визуализировать процессы, а также понимать и планировать свою загрузку.

Еще у Trello есть мобильные приложения для Android и iOS, так что работать с сервисом вы сможете не только на рабочем месте, а, например, по дороге домой или в кафе.

Стоимость: бесплатная версия подойдет для одиночного использования, есть тарифы для команд от $6 в месяц

Официальная страница: Trello

Toggl

Toggl – еще один инструмент из категории «тайм-менеджмент», который можно использовать как на ПК, так и на смартфоне. Все, что нужно для работы – это создать задачу и запустить таймер. Таким образом вы можете показать заказчику, сколько времени ушло на создание проекта. Отлично подойдет тем, кто предпочитает почасовую оплату. В остальных случаях вы можете использовать Toggl, чтобы просто следить за своей продуктивностью. 

Стоимость: бесплатно

Официальная страница: Toggl

GIPHY

GIPHY – замыкающий в нашей подборке сервис, который поможет вам создавать крутые GIF-анимации для своих проектов. С помощью этого инструмента можно скачивать как готовые гифки, так и создавать свои собственные. Например, вы можете совместить несколько картинок или преобразовать видео в зацикленную GIF. Также вы можете делиться собственными наработками, созданными в сервисе.

Чем еще хорош GIPHY, так это тем, что с помощью сделанных гифок можно показывать, как работает сайт. Это будет полезно, когда, например, в портфолио на Behance нужно продемонстрировать какую-то фишку своего проекта, скажем, анимацию первого экрана. Для этого вам нужно будет сделать скринкаст, преобразовать видеофайл в GIF-анимацию и добавить ее в свой кейс.

Стоимость: бесплатно

Официальная страница: GIPHY

Бонус: +9 полезных сервисов, которые упростят работу

Хотелось бы еще рассказать о дополнительных инструментах, которые помогут вам создавать интересные фишки и ускорят работу над проектами. 

• Duotone – позволяет привести все картинки на сайте к общей стилистике; 
• Cssgradient – создает CSS-градиенты;
• Gradient-animator – задает анимацию для градиента и генерирует готовые CSS-стили; 
• Getwaves – создает «волны», которые можно использовать для плавных переходов между блоками; 
• Designspiration – поможет найти фотографии в едином стиле по указанным цветам;
• Blobmaker – создает классные «блобсы»;
• Remove BG – сервис для веб-дизайнеров, который позволяет убрать фон с фотографии за несколько кликов;
• Tinypng – поможет сжать любое изображение без потери качества;
• Дока – документация по основам HTML и CSS, которая будет полезна каждому, кто хочет говорить с верстальщиком на одном языке.

Еще больше крутых ресурсов для веб-дизайнера вы найдете в нашей статье «76 полезных ресурсов для дизайнера». 

Заключение

Каждый из рассмотренных выше инструментов способен упростить жизнь веб-дизайнера и сделать его проекты более интересными. Например, Blush поможет вам создать иллюстрацию в несколько кликов, а Remove BG удалит фон быстрее, чем запустится Photoshop. Не забывайте и о сервисах Trello и Toggl – они позволят вам навести порядок в делах и сделать каждый день более продуктивным. 

В целом, все рассмотренные выше инструменты – это крутой подарок для специалиста, занимающегося созданием макетов и сайтов. Используйте их в совокупности: например, делайте прототипы в InVision, создавайте дизайн в Figma и переносите всё в Craftum. Освоив такой набор инструментов, вы определенно станете профессиональным и востребованным дизайнером. Желаем удачи :)