26 декабря 2009 в 16:59

Как достичь профессионального вида с помощью цвета перевод

image

Что заставляет дизайн выглядеть скоординированным, спланированным и профессиональным? Ответ: 'цвет'.

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

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

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


image

Лучший способ заставить вебсайт смотреться не спланированным — выбрать его цвета наугад.
Даже когда посетители просматривают домашнюю страницу вебсайта впервые, цвета влияют на их отношение к содержанию. Этот вебсайт захватывающий? Успокаивающий? Смелый? Мягкий? Политический? Официальный?

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

Скажем, Вас попросили спроектировать профессиональный вебсайт. (И это может запросто превратиться в пьяную игру: стаканчик за каждый раз, когда клиент использует слово “профессиональный,” «качественный» или «современный». Двойную порцию за “мне нравится вот этот (другой) вебсайт. Сделайте такой же.”).

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

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

Обратимся к Шкале яркости

Лучший способ работы с цветом — начать с нуля.
Удаление цвета из проекта раскрывает фундаментальные проблемы, к которым нужно обратиться прежде, чем начинать волноваться, какой же оттенок шартреза работает лучше. Если проект чувствует себя неважно в черно-белом, время делать изменения.

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

Чтобы сделать ре-дизайн, сначала уберите цвет. Простое удаление сверхнасыщенности основными цветами реально покажет, на чем держится сайт. (Фактически, Вы на самом деле должны запустить ре-дизайн, заново оценив свои цели и контент, но это — другая история).

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

И тут вдруг я выровнял слои Photoshop и нажал “Desaturate”, превращающий яркий дизайн copper-and-navy в оттенки серого. Ко всеобщему удивлению, это сработало.
К концу недели у нас был «теплый» серый проект с красными акцентами. Мы поняли что не прогадали, когда на новом просмотре нас осыпали комплиментами бывшие клиенты и больше звонков стало поступать от клиентов потенциальных.

Проанализируйте свою цветовую схему с тестом “squint” Photoshop:
1. Сделайте скриншоты, по крайней мере, трех страниц с Вашего сайта. Откройте их в Photoshop.
2. Копируйте фоновый слой в каждом скриншоте (Layer → Duplicate Layer, or Command + J on a Mac, or Control + J on Windows).
3. Примените размытие Гаусса приблизительно 10 пикселей к новым слоям.
4. Выполните Image → Adjustments → Posterize. Примените от 8 до 12 уровня или просто Filter → Pixellate → Mosaic. Примените 15-30 pixels.

image

Это покажет, какие цвета являются действительно доминирующими. Чем больше доминирующих цветов, тем труднее схема для восприятия посетителем.

Как только структура сайта осталась без цвета, наступило время выбирать палитру. Но какую? И сколько цветов использовать?

Подбираем цвета

image

Цвет имеет три составляющие: оттенок, насыщенность и уровень (иногда называемый lightness).

Насыщенность показывает, насколько богат цвет:: неоновые цвета являются очень насыщенными, в то время как пастели насыщаются меньше.

Уровень обозначает, насколько яркий (то есть, как близко к черному или белому) цвет.

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

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

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

Существует еще способ изменения уровней. Чистый синий цвет и ярко-голубой создает комбинацию так себе, но темно-синий (navy) и светло-голубой (sky blue) контрастируют в достаточной степени, чтобы выделять друг друга. Красный и фиолетовый могут быть достаточно разными, чтобы не конфликтовать, но достаточно близкими, чтобы не выглядеть слишком интенсивно. Светло-красный (розовый) и темная фиалка составят ощутимую разницу.

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

Открываем для себя классные схемы

Откуда же берутся эти классные цветовые схемы? Как выбрать из сотен цветов и тысяч комбинаций?

Дизайнерам маленьких статических вебсайтов проще взять цвет из контента. Обычно это фото.

Дизайн сайта на восемь страниц, которым я недавно занимался, был основан на сложной металлической конструкции на фоне неба цвета индиго. Установив инструмент пипетки Photoshop размером 5×5, я произвел выборку самых темных и самых светлых частей неба и присвоил сайдбару, ссылкам, заголовкам и колонтитулам внизу страницы эти несколько оттенков.

Когда клиент спросил, как у нас получилось сделать дизайн сайта настолько быстро, мы просто ответили — “Это наша работа.” Хотя цвет уже был там. И мне оставалось только найти его.

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

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

Если Вам посчастливилось заполучить фотографии своих потенциальных клиентов, просмотрите их все вместе; Вам необходим средний образ толпы. А если фотографии не доступны — вперед, по магазинам.

У дизайнеров одежды, способных остаться при деле, есть превосходное чувство цвета для каждого настроения и образа жизни. Естественно, это не высокая мода с 5-й Авеню. Поиск в Google “истории с кемпинга,” “детская одежда,” “лыжы и купальные костюмы” и “повседневная жизнь” покажет много прекрасных цветовых комбинаций.

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

Используем текстуры
image

Небольшие изменения оттенка, насыщенности или уровня создают текстуры.

Монохроматические текстуры (то есть текстуры с единственным оттенком) и шаблоны обеспечивают тонкую размерность большинству сайтов без конфликтов.

Простые текстурные фоны, в частности, легко сделать:

o Делаем фотографию внутренней стены, или что-нибудь еще, пустое и с грубой обработкой.
o Открываем фото в Photoshop.
o Копируем фоновый слой и называем его “texture 1.”
o Заполняем фоновый слой цветами своей цветовой схемы.
o Выставляем на слое “texture 1” режим смешения ”Soft Light” и непрозрачность 30 %.
o Пробуем это на своем сайте. Если выглядит не очень, играем с непрозрачностью слоя.

Название слоя выбрано преднамеренно. Можете сколько угодно играть с любым количеством фотографий, но старайтесь избегать названий слоя наподобие “стенная текстура” или “бумажная текстура.” Вам надо сосредоточиться на эффекте для сайта, а не на том откуда оно взялось.

Создаем Хорошую Схему

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

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

Примеры:

image

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

image

В Photoshop два слоя обеспечили оттенки черного и белого. Режим смешения каждого слоя был выставлен в “Soft Light.” Чистый черный был слишком темным для крайнего справа цвета, таким образом непрозрачность черного уровня была откорректирована.

image

Для объединения цветов создан новый слой с чисто красной заливкой. Его режим смешения выставлен в «Color», а непрозрачность убавлена примерно до 40 %. (Примечание: порядок слоев очень важен. Цвета изменятся, если «цветной» слой будет установлен под черно-белым).

image


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

image

Изменения очень важны — таким образом дизайнер экспериментировал. На что были бы похожи цвета на фоне черного? Что произойдет, если мы их немного оттеним?

image

Что, если мы изменили их в целом? Использование Image → Adjustments → Hue/Saturation на «цветном» слое создаст совсем не осеннее чувство, но цвета все еще координированы.

Возможно, эта палитра сможет использоваться для Пасхи.
Итог — цветовая схема: рекомендации, дающие разные (но не слишком) цвета и диапазон оттенков, которые прекрасно сочетаются.

Используем основы

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

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

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

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

Если изображение не соответствует Вашей цветовой схеме, присвойте ему оттенок:

1. Открываем изображение в Photoshop.

2. Создаем новый слой. Режим смешения «Color».

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

4. Ставим непрозрачность цветного слоя в 50 %.

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

6. Эта методика работает на фотографии, иллюстрации и иконках — всё, что основано на пикселе. (Если Вам не принадлежит изображение, убедитесь, что получили разрешение прежде, чем изменить его. Вы можете улучшать его вид относительно своего сайта, но Вы еще позволяете себе вольности с чьим-либо искусством).

Смотрится профессионально

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

Советы

o Если показалось, что у Вас есть хорошая цветовая схема, испытайте ее в течение хотя бы одной недели. Оценка цвета требует интуиции, которая вырабатывается в течение долгого времени. Дайте себе время, для полного восприятия индивидуальности схемы.

o Если показалось, что у Вас есть хорошая цветовая схема, не позволяйте ей протухнуть. Вкусы Ваших посетителей, как и Ваши, изменяются в течение времени. Создайте напоминание, чтобы делать обзор цветов после четырех месяцев. Потом спросите, они еще соответствуют? В противном случае, что изменилось? Какие факторы будут влиять на Ваши корректуры?

o Используйте экономно яркие цвета. Всплеск кое-чего переливающегося привлечет посетителей, но если они будут видеть это везде, они будут блуждать бесцельно.

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

o Избегайте чистых основных выборов — таких как красный, зеленый, синий и желтый. Дайте им оттенок для реального символа: красный, но немного фиолетовый, синий с легким зеленым, «теплым» желтым цветом с оранжевым оттенком.

o Убедитесь в хорошей совместимости цветов во время постепенных изменений. Если выбираете красный, имейте ввиду, что светло-красный может быть женским, а темно-красный может быть похожим на ржавчину или кровь. Желтый берется от постепенно изменения солнечного света к темно-коричневому. Темно-синий является таинственным, а светло-голубой спокойным, или электрическим, если Вы сверхнасыщаете его.

o Пользователи Mac, настройте свой экран. Откройте “System Preferences” и кликните “Universal Access.” Выставьте дисплей “Use grayscale.” Это также пригодится, когда Вы находитесь в настроении для фильма.

o Независимо от того, какую активность Вы хотите передать на сайте, используйте нейтральный фон. Черный, бело-серый хорошо идет с почти каждым оттенком.

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

o Используйте больше оттенков меньшего количества цветов.

image
Перевод: Ben Gremillion
Степан Зинин @fazan
карма
0,0
рейтинг 0,0
Похожие публикации
Самое читаемое

Комментарии (38)

  • +10
    Актуально для конца девяностых — начала двадцать первого века)).
    Насоветую желающим посетить сообщество colourlovers.com в целях научиться составлять грамотные цветовые палитры.)
    • 0
      За colourlovers.com спасибо
      • +8
        Я не учёл того фактора, что многие не знакомы с типографикой и не читали книг по дизайну. За что и получил минусы, впрочем это уже неважно.

        Важно то, что Gremillion привёл только базис, но более полно узнать что за штука этот цвет и продвинутые практики нахождения палитры, можно только прочитав ряд статей и книг по типографике и колористике.
        • +1
          Базис нужен всегда, — начинающие прочитав этот материал хоть задумаются над тем, что цвет и его компоновка берутся не со стены или потолка и, возможно, тогда начнут читать именно те книги, о которых вы говорите… И станет наш web симпатичнее… :)
          • 0
            Можно сколько угодно надеяться на лучшее, но если ничего не делать, то ничего и не изменится. В сказки верят далеко не все :)
          • 0
            Здесь ещё от человека зависит.
            Семь лет назад я нагуглил на запрос «usability» «Designing web usability» Якоба Нильсена. С этого момента началась моя борьба за информацию. Тогда я ещё мало знал обо всем, а фотошоп использовал исключительно для обработки фотографий. Затем был ряд статей на alistapart, ещё несколько книг, затем Иттен, затем типографика, статьи о типографике, затем я изучил html, css, начал использовать нестандартные приёмы — например создание логотипа на чистом html+css.

            А кому-то просто лень набрать запрос, чтобы что-то узнать.

            Gremillion предлагает типичную практику подготовки цвета. Но, дизайнер понимала, для чего она это делала, основываясь на материале, который получила из книги Иттена. Конструирование цветовой палитры это весьма сложный процесс.
        • 0
          Каких именно статей и книг?
          • 0
            • Иоханесс Иттен «Искусство цвета» — подача автора понятна любому технарю. Желательно законспектировать материал. Затем можно приступать к упражнениям с цветом.
            • Джеймс Феличи «Типографика: шрифт, верстка, дизайн» — отличный материал для понимания как надо размещать информацию и как использовать преимущества шрифтов.

            Помимо этого советую почитать alistapart.com рубрику дизайн. И kak.ru.
            Важные вещи о которых вы будете знать после прочтения этой пары книг:
            • Конструирование цветовой палитры для определенной задачи
            • «Цвет» страницы, как его можно и нужно использовать.
            • Композиционное конструирование: текст, изображения и прочее.
            • Общепринятая верстка, очень важный аспект.

            Ну и можно погуглить ещё) я всегда так делаю, когда меня что-то интересует). Статьи лучше читать зарубежные, потому что все что появляется у нас — это переводы авторитетных сайтов, и запоздалые переводы менее авторитетных сайтов.)
            • 0
              спасибо большое
  • +1
    И немного правки:

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

    «Если Вы хотите маленький текст (говорят, 14 шрифт или меньше)»
    14-й кегль это далеко не маленький шрифт.

    «Пользователи Mac, настройте свой экран» единственно необходимая отстройка — уменьшение яркости до яркости win-мониторов. Что бы макеты смотрелись одинаково, как на Mac, так и на остальных дисплеях.
  • +20
    Отличная статья. Не знаю, как профессионалам, но мне (программисту, лишь изредка сталкивающемуся с вопросами дизайна) она показалась весьма интересной. Спасибо.
  • +1
    Есть довольно неплохая книга «Типографика цвета», автор: Тимоти Самара. Правда там больше про шрифты, но все же.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    я запостил как перевод, сейчас в название добавлю если вы об этом
  • +1
    Про Мак — в OS X 10.6 гамма уже такая же, как в венде.
  • +3
    Перевдите все схемы, а то непорядок какой-то. И ссылочку на adobe kuler обязательно ;)
    • +1
      скоро залью картинки с переводом ;)
  • +2
    Обалденно — спасибо. Давно хотел найти, что-то по технологии подбора цвета. Прекрасная статья — все структурировано, есть и новые (для меня) находки.
  • +3
    Не могу не упомянуть отличный сервис подборки цветовой гаммы Adobe Kuler — kuler.adobe.com/
    • +2
      Вообще таких сервисов немало… мне нравится Colorcombos, к примеру. Автор хотел не только рассказать о важности правильно сочетать цвета, но и описать некоторый подход к цветовому оформлению, за что ему спасибо. Как упоминали выше, мне, как неискушенному дизайном программисту, информация пришлась кстати.
    • 0
      Хотел вам ответить, тут
  • +3
    Предпочитаю colorschemedesigner.com, в нем можно сразу генерировать варианты сайтов под схему
    А вообще, существует много браузерных инструментов работы с цветом, список здесь
    • 0
      Спасибо, сразу добавил в избранное, до этого пользовался colourlovers.com
    • 0
      а также colorscheme.ru — русская версия colorschemedesigner.com
  • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Для меня, построение цветовой схемы — это такая мука…
    Код писать проще :-)
    Теперь буду стараться использовать научный подход, вместо метода тыка.
  • 0
    www.egoholic.ru/2009/01/blog-post_31.html
    не сочтите за пиар
  • +1
    Хорошее объяснение :) Я, если нужно быстро набросать цвета, пользуюсь ColourLovers<a/> — теперь буду пользоваться более осмысленно :)
    • 0
      Арргх.
  • 0
    отличная заметка. Если позволите, то предложил бы добавить ещё ссылку на цветовой круг — один из способов представления непрерывности цветовых переходов.
  • +3
    При выборе цвета/контраста/насыщенности автор основывается лишь на собственных ощущениях. Но ведь для этих целей существуют специальные законы, основанные на физике и знаниях о человеческом глазе. В первую очередь это законы цветовой гармонии, потом законы перспективы, правила контраста цветов (7 типов контраста: светлого и тёмного, холодного и тёплого, цветового насыщения, цветового распространения, симультанный, дополнительных цветов, цветовых сопоставлений) и многие другие. Все это давно известно, потому как человечество давно работает с цветом и общие знания сведены в общие законы. А уже дальше, на их основе можно рассказывать как вносить творческую составляющую для определенных целей.
    • +2
      «Искусство цвета» Иоханнеса Иттена?)
      • +1
        Да, это наверно наиболее полное изложение, но мы не художники, обычно мне хватает только основных, что касается выбора гармоничных цветов, правила контраста и может еще чего-нибудь.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    «Лыжы» улыбнули.

    А так забавный материал.

    Но если кто-то аппелирует к основам, то не сочтите за пиар — Уильям Хогарт «Анализ красоты», 1753.
  • +4
    »Цвет имеет три составляющие: оттенок, насыщенность и уровень (иногда называемый lightness).

    У русских людей «уровень» это яркость.
  • 0
    Мне кажется или перевод машинным отдает?
  • 0
    Недавно встретился ресурс с разными цветовыми наборами: kuler.adobe.com

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.