Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       
19-07-2017, 22:00
Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
Рейтинг:
Категория: Самоучитель CSS

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору сочетания цветов и генераторов палитр. А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.


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



  • откуда черпать вдохновение;

  • как создать собственную палитру;

  • как сделать дизайн доступным людям с нарушениями цветового зрения.


  • 1. Ищем вдохновение


    Краски природы


    Черпайте вдохновение из окружающего вас мира. Все, что вам нужно – просто осмотреться. Модная одежда, обложки книг, дизайн интерьера… вас окружает так много потрясающих вещей. Но лучшие цветовые сочетания – это краски природы. Запечатлите красивый момент и попробуйте создать собственную подборку на основе конкретного изображения.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Лучшие сочетания красок – в природе. Можете получить цветовую схему из любого фото


    Behance


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


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Dribbble Colors


    Dribbble – одна из лучших социальных сетей для дизайнеров, которая пригодится при создании пользовательского интерфейса. Если вы желаете визуально понять, каким образом другие специалисты использовали конкретный цвет, откройте страницу по ссылке dribbble.com/colors и укажите нужное значение.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


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


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Попробуйте указать минимальный процент определенного цвета в Dribbble


    Designspiration


    Designspiration – полезный инструмент в первую очередь тем, у кого уже есть идеи цветовых комбинаций и кто хочет увидеть примеры таких сочетаний. Выберите от 1 до 5 вариантов, и найдете картинки, соответствующие указанным параметрам.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    В Designspiration найдете разные примеры цветовых комбинаций


    Tineye Multicolr


    С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти бесплатные картинки в идеальной палитре.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Colorzilla


    ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания CSS-градиентов и многое другое.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Расширение ColorZilla доступно в Chrome и Firefox


    Shutterstock Spectrum


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


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Причем вам не потребуется подписка, поскольку предварительной оценки картинки будет вполне достаточно (даже несмотря на то, что на ней присутствует «водяной знак») .


    2. Создаем цветовую палитру


    Material Design Color Tool


    Сервис подбора цветов для сайта Material Design Color Tool позволит создавать цветовые схемы, делиться ими и просматривать приблизительный пользовательский интерфейс для подобранных вами параметров. Одна из полезных его функций – измерение уровня доступности любого сочетания цветов.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Coolors


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


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Имеется загрузка изображений и считывание палитры из него.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Цветовая схема в Coolors на основе фото 


    Adobe Color CC


    Сервис подбора цвета Adobe Color CC (ранее Kuler), сейчас довольно популярен. Он находится в свободном доступе в интернете, но существует также и десктор-версия. С помощью данного веб-приложения вы сделаете свою палитру, используя цветовой круг:


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Проект позволяет создать/сохранить палитру из 5 значений


    А можете получить определенный результат из готового изображения:


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Подбор цвета для сайта по картинке


    Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в графические редакторы InDesign, Photoshop и Illustrator.


    Paletton


    Его часто сравнивают с предыдущим Adobe Color CC, поскольку эти проекты очень похожи. Разница лишь в том, что в Paletton вы не ограничены пятью параметрами, а можете экспериментировать с дополнительными тонами интерфейса.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    3. Делаем палитру доступной


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


    WebAIM Color Contrast Checker


    Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте WebAIM Color Contrast Checker при подборе цветов сайта.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.


    Coolors


    О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Тип цветовой слепоты в схеме


    Вместо режима «Обычный» выберите тот тип проблемы со зрением, который вы желаете сымитировать. В результате поймете, как именно человек, неспособный различать определенные цвета, увидит ваш дизайн.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Так человек с протаномалией видит палитру


    NoCoffee Vision Simulator для Chrome


    С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.


    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»
    Онлайн сервисы подбора цвета для сайтов и UX-дизайна - «Веб-дизайн»


    Так выглядит проект CNN для человека с дейтеранопией


    Заключение


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


    Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору сочетания цветов и генераторов палитр. А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich. В заметке содержится список лучших сервисов подбора цвета для сайтов и UX-дизайна, которые помогут значительно сэкономить вам время. Благодаря данным проектам вы узнаете: откуда черпать вдохновение; как создать собственную палитру; как сделать дизайн доступным людям с нарушениями цветового зрения. 1. Ищем вдохновение Краски природы Черпайте вдохновение из окружающего вас мира. Все, что вам нужно – просто осмотреться. Модная одежда, обложки книг, дизайн интерьера… вас окружает так много потрясающих вещей. Но лучшие цветовые сочетания – это краски природы. Запечатлите красивый момент и попробуйте создать собственную подборку на основе конкретного изображения. Лучшие сочетания красок – в природе. Можете получить цветовую схему из любого фото Behance В популярном сервисе Behance найдете интересные работы, включенные в наилучшие онлайн-портфолио настоящих профессионалов своего дела. Этот сайт – также прекрасный источник вдохновения. Чтобы просмотреть новые достойные примеры проектов, просто выберите нужный цвет. Dribbble Colors Dribbble – одна из лучших социальных сетей для дизайнеров, которая пригодится при создании пользовательского интерфейса. Если вы желаете визуально понять, каким образом другие специалисты использовали конкретный цвет, откройте страницу по ссылке dribbble.com/colors и укажите нужное значение. Подбирая цвет для сайта здесь можно задать минимальный его процент — поэкспериментируйте, например, попробуйте поставить 30 % синего. Попробуйте указать минимальный процент определенного цвета в Dribbble Designspiration Designspiration – полезный инструмент в первую очередь тем, у кого уже есть идеи цветовых комбинаций и кто хочет увидеть примеры таких сочетаний. Выберите от 1 до 5 вариантов, и найдете картинки, соответствующие указанным параметрам. В Designspiration найдете разные примеры цветовых комбинаций Tineye Multicolr С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти бесплатные картинки в идеальной палитре. Colorzilla ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания CSS-градиентов и многое другое. Расширение ColorZilla доступно в Chrome и Firefox Shutterstock Spectrum Один из лучших способов представить, как же будет выглядеть цветовая гамма, – посмотреть соответствующие изображения. Большинство решений, предлагающих выбор цвета для дизайна сайта, включают подобную функцию, но Shutterstock Spectrum располагает невероятно удобным интерфейсом и предварительным просмотром, что действительно может оказаться полезным. Причем вам не потребуется подписка, поскольку предварительной оценки картинки будет вполне достаточно (даже несмотря на то, что на ней присутствует «водяной знак») . 2. Создаем цветовую палитру Material Design Color Tool Сервис подбора цветов для сайта Material Design Color Tool позволит создавать цветовые схемы, делиться ими и просматривать приблизительный пользовательский интерфейс для подобранных вами параметров. Одна из полезных его функций – измерение уровня доступности любого сочетания цветов. Coolors Coolors – сайт для создания многоцветной палитры. Просто закрепите определенный цвет и нажмите на «пробел». Инструмент хорош также тем, что вы получите не один результат, а можете сгенерировать несколько вариантов, изменив лишь начальные данные. Имеется загрузка изображений и считывание палитры из него. Цветовая схема в Coolors на основе фото Adobe Color CC Сервис подбора цвета Adobe Color CC (ранее Kuler), сейчас довольно популярен. Он находится в свободном доступе в интернете, но существует также и десктор-версия. С помощью данного веб-приложения вы сделаете свою палитру, используя цветовой круг: Проект позволяет создать/сохранить палитру из 5 значений А можете получить определенный результат из готового изображения: Подбор цвета для сайта по картинке Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»: Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в графические редакторы InDesign, Photoshop и Illustrator. Paletton Его часто сравнивают с предыдущим Adobe Color CC, поскольку эти проекты очень похожи. Разница лишь в том, что в Paletton вы не ограничены пятью параметрами, а можете экспериментировать с дополнительными тонами интерфейса. 3. Делаем палитру доступной В настоящее время нарушения цветового восприятия куда более распространены, чем мы предполагаем. Около 285 млн человек в мире испытывают проблемы со зрением. Всегда нужно проверять, доступна ли выбранная вами цветовая гамма таким пользователям. WebAIM Color Contrast Checker Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте WebAIM Color Contrast Checker при подборе цветов сайта. WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях. Coolors О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту. Тип цветовой слепоты в схеме Вместо режима «Обычный» выберите тот тип проблемы со зрением, который вы желаете сымитировать. В результате поймете, как именно человек, неспособный различать определенные цвета, увидит ваш дизайн. Так человек с протаномалией видит палитру NoCoffee Vision Simulator для Chrome С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете. Так выглядит проект CNN для человека с дейтеранопией Заключение Все сервисы подбора цвета для сайтов и UX-дизайна, упомянутые в статье, определенно помогут вам в поисках интересной и эффективной цветовой гаммы. Но помните: лучший способ научиться создавать удивительные палитры – много практиковаться и экспериментировать.

    Теги: CSS Веб-дизайн, Color цвета подбора цветовую цветовой

    Просмотров: 1 218
    Комментариев: 0:   19-07-2017, 22:00
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

     
    Еще новости по теме:



    Другие новости по теме: