Большая подборка инструментов для веб-дизайнера

Хотите немного полезных инструментов? Получайте много! 40+ сервисов со ссылками. Просто перечень и краткое описание инструмента. Никакой воды, лишней информации и лирических отступлений.

Мы нашли для вас много интересных сервисов и инструментов. И объединили их в группы по категориям – чтобы сразу выбрать нужное направление. По несколько разных решений, подбирайте наиболее соответствующие или пробуйте разные.

Рекомендуем начинать работу над проектом уже имея достойное решение для контроля версий. Есть много вариантов для командной работы или индивидуальной.

• Kactus — решение подходит для командной работы, можно управлять изменениями, синхронизироваться с другими участниками с доступом, документировать работу.
• Folio — система, основанная на Git. Хорошо подходит для агентств, дизайнерских команд и прочих совместных проектов.
• Versions — работает с Azure Devops, Bitbucket, GitHub и GitLab. Есть управление версиями, инструменты для разрешения конфликтов.
• Abstract — платформа, заточенная под файлы Sketch. Есть опция совместной работы, простое управление.

Работаете себе, никого не трогаете, а тут клиенту подавай анимацию. Если не владеете навыками их создания – попробуйте эти инструменты.

Сервисы облегчают процесс рисовки анимированных переходов, ховер-эффектов, анимации на основе скролла, микро-взаимодействий и подобных задач.

• Spirit — очень интересный инструмент, который работает в реальном времени в браузере, позволяет создавать объекты и управлять анимацией.
• Adobe After Effects — это приложение уже можно отнести к динозаврам мира веб-дизайна, но оно все еще отлично работает и подойдет для создания цифровых визуальных эффектов.
• Haiku — на основе ключевых кадров создается анимация, а еще попутно она соединяется с кодом, который потом при разработке легко использовать.
• BeatFlyer — поможет быстро и без лишних сложностей создавать из многослойных композиций зацикленные анимации. Если работаете в Figma, то можно для анимации использовать плагин BeatFlyer Lite.
• Kite Compositor — приложение заточено под Mac и iOS.
• Tumult Hype — тут можно делать не только анимацию, но также интерактивные файлы HTML5. Но только для macOS.

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

• Tilda — про этот сервис вы уже знаете, скорее всего. Он популярен благодаря удобству, огромному количеству шаблонов, бесплатному использованию и возможности расширять функционал за деньги.
• Blocs For Mac — создание сайтов без написания кода, простой интерфейс, много мощных инструментов. И самое главное – тут делаются адаптивные страницы.
• Bootstrap Studio — сервис на базе фреймворка Bootstrap, тоже позволяет создавать адаптивные веб-сайты.
• Readymag — тут можно создавать не только лендинги и сайты, но также портфолио, презентации. Неплохой инструмент для быстрого проектирования без лишних заморочек.
• Mobirise — этот сервис позволяет работать офлайн. Иногда это критично, особенно для фрилансеров.
• STUDIO — здесь предусмотрен командный доступ, можно в реальном времени вместе править прототип и создавать сайты с нуля.

Работа с собственными дизайн-системами, их организация:

• Lucid — можно вести библиотеки стилей и компонентов, добавлять подробные описания. Его ближайший аналог – Frontify. Тут функционал похож, вопрос только в удобстве и личных предпочтениях.
• Brand.ai — сервис с автоматической поддержкой руководства по стилю компонентов интерфейса.
• Lingo — есть опция командного доступа, поэтому данный инструмент отлично подходит для агентств, а не для одиночек.

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

Вот есть программы, в которых создаются и проектируются приложения для AR:

• Torch — сервис, заточенный под создание 3D-дизайна и прототипирования непосредственно для мобильных устройств. В целом, мобайл – это как раз самый популярный запрос.
• Spark AR Studio — тут можно создавать дополненную реальность для Инстаграма. Самое важное – не требуется лезть в код.
• Lightform — простой, но удобный сервис для проектирования AR.

Мы всегда рекомендуем сначала создавать прототип с текстами, а потом уже делать дизайн. В любом случае прототипирование – частая задача. Это ваш путь к минимизации правок от заказчика. Утвердите прототип, потом двигайтесь дальше.

Инструменты создания прототипов:

• Balsamiq — один из самых популярных сервисов, который обладает обширным функционалом, но иногда это неуместно для простых задач.
• Axure RP — удобный интерфейс, а еще опция совместного доступа и генерации спецификаций.
• Framer X — не все заказчики понимают схематичное изображение. Им подавай реалистичность. Поэтому тут можно создавать интерактивные прототипы.
• Creo — здесь кроме прототипирования есть еще встроенный конструктор мобильных приложений. Удобно, если задача именно в их создании.
• Flinto — сервис Mac, который позволяет делать дизайн приложений и анимированные интерактивные прототипы. Еще одно решение на Мас – Keynote. Оно изначально предназначено для создания презентаций, но для прототипов тоже подойдет.
• Proto.io — здесь прототип будет настолько реалистичным, что будет работать на демонстрации так же, как приложение или сайт.
• ProtoPie — очень много интересных функций, можно сделать уникальные проекты, которые впечатлят заказчика. Например, прототип с сенсорным управлением.

Ну вы в курсе, много сервисов для работы со шрифтами не бывает. То подбор нужен, то поиск, то “поиграться”. Вот немного ссылочек для этого:

• Adobe Fonts — библиотека шрифтов, 1000+ вариантов.
• Typeface — удобный предварительный просмотр шрифтов.
• Fontface Ninja — расширение, которое пригодится, если нужно узнать, какие шрифты используются на определенном сайте.
• FontSpark — подбор шрифтов для проекта.
• RightFont — масса функций для управления шрифтами: просмотр, упорядочивание, синхронизация и т.д.

Без них сложно работать, а стандартные решения ужасны и не подходят даже для рядового пользователя, не то что для дизайнера. Вот перечень классных сервисов для создания скриншотов, которые не только функциональны, но и бесплатны:

• Teampaper Snap — скриншоты выбранной области, просто и удобно.
• CloudApp — очень обширный инструмент, который позволяет делать не только скриншоты, но еще видео, добавление комментариев, создание GIF-изображений.
• Lighshot — мой фаворит, не очень функциональный в сравнении с другими, но максимально удобный, к нему привыкаете моментально и выполняете действия на автомате.
• Giphy Capture — интересный сервис, который поможет, если захват нужно сохранить в формате GIF или MP4.
• Quicktime — запись экрана.
• Screenie — тут можно сохранять скриншоты, фильтровать их, а еще изменять формат созданных изображений.

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

• Logo Package Express — экспорт и упаковка пачки разных вариантов логотипов в течение 5 минут.
• Logo Lab — тут можно тестировать свой результат при содействии различных инструментов.

Материал подготовлен командой образовательной платформы WAYUP