9 онлайн-инструментов для веб-дизайна

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

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

Gingersauce: для создания брендбуков

Большая часть работы дизайнера связана с презентацией. Поскольку нам платят за то, чтобы вещи выглядели хорошо, тот же подход должен применяться и к нашей работе. Gingersauce — это инструмент для создания брендбуков, который позволяет дизайнерам представлять свои логотипы и шрифты в красиво оформленном и автоматически сгенерированном брендбуке.

Почему стоит использовать Gingersauce?

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

Infogram: для быстрого создания инфографики

Создание инфографики вручную — это хлопотно. Чаще всего работа заключается не в творчестве, а в эффективной организации информации. Поэтому инфографика — это та работа, которую мы всегда стараемся автоматизировать.

Почему стоит использовать Infogram?

• Используйте креативные шаблоны.
• Работайте в интуитивном редакторе с множеством настроек.

SocialSizes: справочник размеров

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

Почему стоит использовать SocialSizes?

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

Rupixel: для качественных стоковых фото

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

Почему стоит использовать Rupixel?

• Используйте изображения свободно, без необходимости указания авторства.
• Прекрасные фотографы: Rupixel привлекает множество творческих художников с действительно удивительными навыками и видением.
• Гибкий поиск: в целом результаты поиска соответствуют первоначальному запросу, чего не было доступно на нашей старой платформе Free Stock Images.

Pixlr: онлайн-альтернатива Photoshop

Нет Photoshop? Не проблема. Наш выбор в качестве альтернативы Photoshop — Pixlr. Это простой, интуитивно понятный редактор с базовыми функциями: вы можете обрезать, вырезать, применять фильтры, изменять размер, добавлять слои, сохранять в разных форматах и т.д.

Почему стоит использовать Pixlr?

• В качестве бесплатной альтернативы Adobe Photoshop.
• Работайте на интуитивно понятной платформе, которую легко объяснить коллегам из других отделов.
• Выполняйте простое графическое редактирование без необходимости иметь под рукой Photoshop или другие профессиональные инструменты.

Getkap: запись экрана

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

Почему стоит использовать Getkap?

• Работайте в простом инструменте: функций не так много, поэтому заблудиться невозможно.
• Записывайте экран бесплатно: программное обеспечение с открытым исходным кодом и может быть использовано бесплатно как отдельными дизайнерами, так и командами.
• Получайте высококачественный контент: Getkap поддерживает высокое разрешение и позволяет экспортировать в десятки видеоформатов.

Giphy: для создания GIF

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

Почему стоит использовать Giphy?

• Получайте визуальное вдохновение для всех видов настроений, событий и случаев.
• Создавайте собственные GIF с собственными ресурсами и шаблонами за считанные минуты.

Iconfinder: маркетплейс SVG файлов

Сначала мы не хотели включать платный маркетплейс в список, но с Iconfinder это справедливо. Это наш любимый источник векторных иконок и высококачественных SVG файлов. Это отличная библиотека для поиска вдохновения в векторном дизайне и, иногда, для покупки любимых векторов. Если вы увлекаетесь векторным дизайном, вы можете использовать Iconfinder как маркетплейс для получения оплаты за свою работу. Некоторые дизайнеры в нашей команде сумели сделать это источником пассивного дохода.

Почему стоит использовать Iconfinder?

• Получайте идеи для своих векторных файлов.
• Покупайте доступные SVG файлы для своих клиентских и личных проектов.
• Загружайте свои векторные дизайны и продавайте их онлайн.

Расширения для Chrome: для повседневных задач

Существует так много отличных расширений для Google Chrome — выбрать лучшие было нелегко. Тем не менее, мы попытались составить список своих любимых и самых часто используемых. Некоторые из них будут более интересны веб-разработчикам, но как креаторы, мы часто используем веб-ориентированные инструменты.

Color Picker: получите точный цветовой код для любого объекта в интернете, просто наведя курсор на изображение или фон.
Ruler: измеряйте любой элемент на веб-сайте автоматически, не покидая страницы.
ColumnCopy: легко копируйте HTML таблицы и превращайте их в адаптивные макеты в своей работе.
WhatFont: определяйте конкретные шрифты на веб-странице, просто наведя курсор на текст.
Responsive Web Design Tester: проверяйте, как ваши дизайны выглядят на настольных компьютерах, мобильных устройствах и планшетах.
Browser Width: просматривайте свои работы в нескольких браузерах, больших и маленьких окнах.

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

Итог

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