Лучшие сервисы для веб-дизайна. Часть 2: Работа с цветом, типографика и фотостоки

Наверх

Количество инструментов, которыми могут пользоваться дизайнеры в своей работе – огромное множество. И постоянно появляются новые программы, плагины, ресурсы, которые закрывают нужды специалистов в той или иной функциональности.

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

Инструменты для работы с цветом

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

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

Adobe Color CC

Эта программа позволяет выбрать оттенок из цветового круга. Несомненным плюсом сервиса является возможность извлечь все цвета из загруженной фотографии или картинки.

Минусы

• высокая стоимость, как и у других продуктов семейства Adobe;
• необходим достаточно мощный компьютер для работы.

Для работы с цветом дизайнеры используют и другие программы, они в основном отвечают за подбор оттенков:

• Adobe Color – онлайн-сервис, позволяющий выбирать цвета из палитры.
• material design palette – генератор цветов, позволяющий подобрать цвета акцента к основному цвету.
• Paletton – даёт возможность предварительно выбрать цвета из круга;
• Color Hunter – позволяет загрузить понравившееся изображение и получить информацию о всех использованных цветах;
• ColorZilla – расширение, которое позволяет узнать обозначение любого цвета, встретившегося вам на любом сайте, который вы посещаете, при этом цвет запоминается, а вы можете использовать его в фотошопе или в таблице стилей.

Инструменты для работы с типографикой

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

Font Squirrel

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

Минусы:

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

Google fonts

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

Минусы:

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

WhatTheFont

Если вам понравился шрифт, который используется на том или ином сайте или на баннере, вы можете загрузить в этом сервисе изображение (скриншот) и узнайте – как называется этот шрифт. Сервис бесплатен, не ограничен по использованию.

Минусы:

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

Tableau Public

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

Минусы:

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

Где брать графические элементы?

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

Платные стоки

depositphotos

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

Shutterstock

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

Бесплатные стоки

365 Psd

Это хранилище бесплатных макетов для работы в программе Photoshop. Тематика – разнообразна: иконки, профессиональные фотографии, прототипы сайтов.

Freepik

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

Iconfinder

Этот сервис ориентируется на иконки, есть бесплатные, платные варианты. В базе более 800 тысяч вариантов, при этом, количество иконок постоянно пополняется, так как на этой платформе дизайнере делятся своими вариантами.

Noun Project

На этом сайте можно найти большое количество иконок для скачивания. Есть определённое количество бесплатных объектов, но есть и авторские экземпляры, за которые придётся заплатить.

Pixabay

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

Unsplash

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

Сервисы для вдохновения

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

Dribble

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

Logopond

По сути – это сервис для поиска вдохновения. Тут дизайнеры могут посмотреть работы авторов по той или иной теме, найти идеи, пообщаться с авторами, узнать о новых техниках. Единственный минус – сайт англоязычный.

Siteinspire

Этот блог позволяет найти свежие мысли, найти техники, новые идеи для своего проекта. Здесь огромное количество работ дизайнеров в разных стилях. Можно найти проекты в разных решениях и тематиках.

Вывод

Описанные в этой статье инструменты позволяют дизайнеру добавить «изюминку» в свою работу, использовать нетривиальные техники. Таким образом можно достичь результата, когда все элементы на сайте будут смотреться гармонично, и при этом он не будет выглядеть таким же, как у дюжины конкурентов.

Используя разные инструменты и сервисы, дизайнеры «Цифрового Элемента» создают оптимальные цветовые сочетания для уникального дизайна и всегда остаются в тренде. 

Заказать дизайн сайта

Заказать услугу