10 онлайн-инструментов которые нужны дизайнерам

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

Renee Fleck

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

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

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

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

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

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

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

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

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

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

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

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

  • Используйте изображения без указания авторства;
  • Известные фотографы: Unsplash привлекает множество творческих художников с действительно потрясающими навыками и уникальным видением;
  • Гибкий поиск: в целом результаты поиска соответствуют первоначальному запросу, чего нет на многих схожих платформах

Несмотря на то, что многие уже используют популярные инструменты для коммуникации и работы (такие как Slack, Trello, Jira и другие), приятно осознавать, что существуют платформы, созданные специально для дизайнеров.

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

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

  • Сотрудничайте с разработчиками и тестировщиками: в Moqhub мне больше всего нравится возможность координировать рабочий процесс с техническими командами;
  • Развлекайтесь: интерфейс платформы не выглядит формальным, что для меня очень важно;
  • Храните активы и общайтесь: я использую Moqhub как своего рода инструмент DAM, и он хорошо работает для меня.

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

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

  • Бесплатная альтернатива Adobe Photoshop;
  • Совместная работа на интуитивно понятной платформе, работе с которой можно легко обучить коллег;
  • Выполняйте простое редактирование графики, не имея под рукой Photoshop или других профессиональных инструментов.

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

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

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

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

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

  • Получите визуальное вдохновение;
  • Создавайте собственные GIF-файлы за считанные минуты.

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

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

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

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

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

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

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

Заключение

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

Больше интересных разборов ищите в нашем блоге и телеграм-канале.

0
7 комментариев
Написать комментарий...
Alexey Vasilevsky

Я бы сюда еще Octopus вставил, для быстрого создания структурый сайта или аппы. Полезный тул

Ответить
Развернуть ветку
Andy Ch

Прикольный сервис, спасибо за наводку! )

Ответить
Развернуть ветку
Andy Ch

Прям дельная подборочка, спасибо автору!
Вопрос по близкой тематике - может кто подскажет источник (кроме упомянутого https://socialsizes.io/), где всегда можно уточнить актуальные требования по медиа для соцсетей. На днях нужно было для FB сделать, там черт ногу сломит. Сайтов с описанием дофига, но масса либо с неактуальной инфой, либо с противоречащей.
Попробовал найти в "первоисточнике" - нормального описания найти не смог. Вот что там например написано про картинку в хидер (приложение)... При этом в реальности картинка выводится размером 980x389.7px... Семь десятых, Карл!!! )))
Все в итоге сделал, но времени только на выяснение истины потратил слишком много. Фэбэшные рукожопы, епт 🤦‍♂️

Ответить
Развернуть ветку
Саша Глибичук

Возможно подойдёт. Хоть и базовая функция: кропнуть под любой формат. Но по крайне мере везде указаны размеры.

https://promo.com/tools/image-resizer/

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Алена Прусакова

Огромное спасибо! Сохранила в закладки 

Ответить
Развернуть ветку
Michael Solar

Большое спасибо

Ответить
Развернуть ветку
4 комментария
Раскрывать всегда