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

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

Программа для разработки интерфейсов Adobe XD

Какой же обзор инструментов веб-дизайна обойдется без продуктов Adobe? И в данном случае, при всем богатстве номенклатуры продуктов компании, выбор очевиден – Adobe Experience Design (Adobe XD).

Поддержка векторной графики и возможность быстрого создания визуальных макетов веб-ресурсов, на основе которых впоследствии будет написан код для сайта, делают Adobe XD незаменимым для UX/UI-дизайнеров. Готовые сценарии для устройств с различным разрешением экрана позволяют корректно отображать рабочие прототипы на любых мобильных устройствах.

Инструмент Repeat Grid умеет создавать сетки однотипных элементов дизайна. Экосистема связанных символов сохраняет связь между элементами, даже если они расположены в разных документах. Так что изменения в исходном файле транслируются во все «дочерние». Эти и множество других опций экономят дизайнеру часы монотонной работы. Кроме того, без труда можно найти в интернете множество восторженных отзывов практикующих веб-дизайнеров о функции автоматического анимирования, также сильно уменьшающей трудозатраты на прототипирование.

Несмотря на свой относительно юный возраст, Adobe XD уже обросла большим количеством библиотек и обучающих материалов. Так что можно констатировать появление очень серьезного конкурента у привычных многим специалистам Sketch и InVision. Приложение предназначено для работы в среде операционных систем Windows/macOS. Мы уже рассказывали о полезных программных решениях для дизайн-студий. 

WYSIWYG-редактор анимированных сайтов Tumult Hype

Анимированный и интерактивный HTML5-контент удобно создавать с помощью визуального редактора Tumult Hype. И никакого Flash!

Трудно сказать, остались ли еще в дальних селениях веб-дизайнеры, верящие в преимущества Flash, но всё прогрессивное человечество уже давно выбрало HTML5. А современные программные среды вполне допускают создание с его помощью сайтов с любым уровнем интерактивности и богатой анимацией. Одним из таких средств является Hype от компании Tumult. Простой в освоении, этот инструмент позволяет разрабатывать сложные проекты, вообще не обращаясь непосредственно к программированию.

Анимация на основе ключевых кадров сочетается с возможностью отслеживания действий пользователя, что позволяет создавать сложные интерактивные сценарии взаимодействия с сайтом. Поддержка кривых Безье гарантирует плавность движения, а простая интеграция видео (а также анимированных GIF и PNG) и аудио значительно расширяют возможности воплощения творческого замысла.

Готовый проект Hype превращает в оптимальный код на основе HTML5, CSS3 и JavaScript, который корректно выполняется во всех актуальных браузерах, включая IE версий 6 и выше. Встроенная система макетов обеспечивает воспроизведение контента на любых экранах, включая мобильные платформы.

Можно сказать, что Hype особенно хорош при воплощении всевозможных рекламных проектов. В том числе и благодаря тому, что программа поддерживает интеграцию с распространенными рекламными системами за счет плагинов Export Script.

Стоит только учесть, что это приложение – для macOS.

Облачный редактор для веб-дизайна Figma

Разработка интерфейсов программ, веб-сайтов и мобильных приложений не так уж часто является делом рук одного человека. Куда чаще подобные задачи решаются в составе рабочей группы, которой надо как-то взаимодействовать. Удачным примером инструмента как раз для такой совместной работы и является Figma.

По функциональным возможностям Figma можно сравнить с широко известной Sketch, но изюминка здесь именно в многопользовательском режиме редактирования и возможности удаленного хранения проектов и библиотек компонентов.

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

Для презентации проектов не нужно записывать видео. Заказчик может пройти по полученной от вас ссылке и увидеть прототип таким, каким его видите вы. Прямо в ходе конференц-колла.

Figma отличается высокой скоростью работы в браузерном режиме, однако при необходимости приложение может быть установлено локально. Есть версии для Windows и macOS. При работе в офлайне проект синхронизируется после восстановления подключения к интернету.

Конструктор меню и кнопок Easy Button & Menu Maker

Ищете способ ускорить работу благодаря средствам автоматизации? Именно для решения таких задач компания Blumentals уже более десяти лет развивает свой продукт Easy Button & Menu Maker.

Буквально несколько минут потребуется веб-дизайнеру для создания набора кнопок и меню, благодаря наличию библиотеки шаблонов, включающей свыше 250 различных стилей. Встроенный WYSIWYG-редактор позволяет полноценно работать с Easy Button & Menu Maker при отсутствии опыта использования мощных графических редакторов.

В принципе, быстро набросать прототип интерфейса сайта можно буквально за несколько минут. Причем генерируемый программой код HTML5 одинаково корректно будет отображаться в любом интернет-браузере, включая старые версии. Также меню, созданные с помощью Easy Button & Menu Maker, будут полноценно функционировать при отключенном JavaScript, так как полностью основаны на CSS. Важно отметить, что созданные при помощи приложения меню отлично видны поисковыми системами и без проблем индексируются.

Приложение предназначено для работы в среде Windows.

Программа для моделирования трехмерных объектов Trimble SketchUp Pro

Пожалуй, нет на свете веб-дизайнера, который хоть раз не задумывался над тем, почему он не уделил время освоению инструментов трехмерного моделирования. Среди множества разных проектов рано или поздно встретится тот, который потребует создания моделей зданий, интерьеров, мебели и т. д. Что же теперь, потратить полжизни на изучение Maya? Есть варианты куда проще.

К таковым можно смело отнести достаточно легкий в освоении, но в то же время полнофункциональный пакет SketchUp Pro от компании Trimble, возможности которого могут быть в любой момент увеличены при помощи бесплатных расширений, написанных на языке Ruby.

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

Интеграция с Google Earth предоставляет широкие возможности по архитектурному моделированию, включая такие неочевидные функции, как географически корректные тени при указании координат объекта и даты/времени. 

Проекты SketchUp сохраняются в формате .skp. Поддерживаются импорт и экспорт .3ds, .dwg, .ddf; .jpg, .png, .bmp, .psd, .obj.

Приложение предназначено для работы в среде операционных систем Windows/macOS.