Вт

19

ноя

2013

Выбор цветовой гаммы сайта

Выбор цветовой гаммы сайта

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

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

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

  • Гамма сайта должна соответствовать его тематике.
  • Цвета должны быть согласованы друг с другом.

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


Три примера применения вместе совершенно несовместимых, неудобных и болезненных для глаз цветов

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

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

В таких случаях вам поможет достаточно простой в использовании сервис Colorscheme.ru. Стоит лишь определиться с одним единственным основным цветом, а остальные, идеально сочетающиеся с основным цвета система вам подскажет сама. Основной цвет вы можете выбрать либо произвольно, кликнув на подходящем вам цвете в большой круговой палитре слева, либо задав для него уже к тому моменту известный вам так называемый hex-код (показан справа снизу от палитры и, кликнув по нему, вы сможете задать свое собственное значение). После выбора основного цвета можно попробовать "поиграть" с шестью имеющимися режимами программы (они выстроены в ряд сверху от круговой палитры). Каждый из этих режимов покажет вам новый набор цветов и оттенков, на основе которых вы можете безбоязненно построить свой сайт. Скажем, режим "Моно" покажет вам ваш только что выбранный основной цвет + еще четыре его оттенка, режим "Контраст" добавит к этому набору один контрастный выбранному цвет с четырьмя оттенками, "Триада" удалит контрастный цвет, но добавит в набор три родственных основному цвета + оттенки, и так далее.

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

 Сохранить результат своих трудов в сервисе Colorscheme.ru можно в любом удобном виде. Опытные в работе с Adobe Photoshop пользователи могут сохранить гамму в формате .aco, тогда как остальные могут просто сделать скриншот содержания вкладки "Список цветов", открыть его в своем любимом графическом редакторе и в процессе работы над графикой для сайта копировать цвета со скриншота с помощью инструмента "Пипетка" ("Eyedropper Tool").

2. У вас есть изображение (иллюстрация или фотография), на основе которой вы бы хотели построить дизайн

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

3. Вам хотелось бы увидеть уже готовые удачные примеры гамм и, возможно, выбрать что-нибудь из них.

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

Надеемся, использование этих сервисов вдохновит вас на создание прекрасных сайтов!

Команда Jimdo

Ещё по теме:

ru.jimdo.com Blog Feed

Новые шаблоны: Lima и Havana
>> Далее

Советы по использованию шаблонов: Dubai
>> Далее

Советы по использованию шаблонов: Chicago
>> Далее

Советы по использованию шаблонов: Cape Town
>> Далее


Комментарии: 48 (Дискуссия закрыта)
  • #1

    Сергей (Вторник, 19 Ноябрь 2013)

    Полезная информация.Спасибо

  • #2

    Виктор Алексеевич Анисимов (Вторник, 19 Ноябрь 2013 12:32)

    Спасибо!

  • #3

    telic (Вторник, 19 Ноябрь 2013 14:09)

    спасибо за информацию

  • #4

    td-ksm (Вторник, 19 Ноябрь 2013 14:28)

    ОГО А Я И НЕ ЗНАЛ!!!!!!!!!!!!!!!!!!!!

  • #5

    Дамир (Вторник, 19 Ноябрь 2013 15:06)

    Подскажите, а эта возможность в расширенной версии???

  • #6

    Jimdo-Team (Вторник, 19 Ноябрь 2013 15:25)

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

  • #7

    Amadeus (Вторник, 19 Ноябрь 2013 15:26)

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

  • #8

    metodik (Вторник, 19 Ноябрь 2013 18:08)

    Спасибо!Супер!

  • #9

    oficer-pensioner (Вторник, 19 Ноябрь 2013 18:19)

    Спасибо,интересно!

  • #10

    Regina Geis (Вторник, 19 Ноябрь 2013 19:06)

    это класс спасибо

  • #11

    Шепель Наталия Ивановна (Вторник, 19 Ноябрь 2013 19:15)

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

  • #12

    Белкельме (Вторник, 19 Ноябрь 2013 19:19)

    занимательно и познавательно!

  • #13

    Олег (Вторник, 19 Ноябрь 2013 19:35)

    Про Colorscheme.ru знаю и пользуюсь - очень полезная вещь! Также посоветую воспользоваться kuler.adobe.com. Отличная штукенция!

  • #14

    Ariu (Вторник, 19 Ноябрь 2013 22:11)

    круто! это пригодиться

  • #15

    historybrands (Среда, 20 Ноябрь 2013 00:20)

    я сам себе цвета подобрал, никто еще не жаловался) значить я умею, да?)

  • #16

    Юлия Анатольевна (Среда, 20 Ноябрь 2013 04:28)

    Спасибо, за просвещение!

  • #17

    otvet-sovet (Среда, 20 Ноябрь 2013 04:37)

    Ну здОрово, что можно поиграться с цветом! )))))

  • #18

    fire-arms (Среда, 20 Ноябрь 2013 08:59)

    Я своей цветовой гаммой доволен! Фон белый,текст почти чёрный (но всё же ближе к серому,чтобы глаза не резало),дополнительный цвет зелёный и совсем кааапелька синего.Сочетается почти со всеми изображениями и баннерами!

  • #19

    Галина (Среда, 20 Ноябрь 2013 10:49)

    большое спасибо, очень полезно!

  • #20

    vendik (Среда, 20 Ноябрь 2013 19:24)

    Спасибо!

  • #21

    Светлана (Четверг, 21 Ноябрь 2013 12:39)

    спасибо за информацию

  • #22

    gorodanapa (Четверг, 21 Ноябрь 2013 13:23)

    Интересная и полезная статья

  • #23

    Виктор (Понедельник, 25 Ноябрь 2013 06:51)

    статья полезна для начинающих разработчиков сайта ... Вообще здесь часто выкладывают полезную информацию ... не только для участников проекта , но и для сторонних наблюдателей ... Респект !!!

  • #24

    Eugene (Понедельник, 02 Декабрь 2013 23:49)

    Работа со светом всегда интересна и многое зависит на сайте от подобранной цветовой гаммы. Статья интересная, спасибо

  • #25

    Ilya Old (Вторник, 03 Декабрь 2013 14:20)

    да, весьма познавательно! спасибо...

  • #26

    chulpanshavalieva71 (Среда, 04 Декабрь 2013 14:17)

    как установить бегущую строку?

  • #27

    Jimdo-Team (Среда, 04 Декабрь 2013 14:28)

    Пример кода: "<marquee behavior="alternate" direction="right">Бегущая строка</marquee>"

  • #28

    Александр (Четверг, 05 Декабрь 2013 10:39)

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

  • #29

    Armon (Воскресенье, 15 Декабрь 2013 08:10)

    ого ... спасибо за информацию

  • #30

    uniquenessoftheworld (Воскресенье, 15 Декабрь 2013 12:16)

    как поставить их?это платно?

  • #31

    Jimdo-Team (Воскресенье, 15 Декабрь 2013 13:18)

    @uniquenessoftheworld, вы имеете ввиду код? Если да, то вы можете установить данный код (как и любой другой) с помощью модуля "Widget / HTML" - как в платной, так и в бесплатной версиях Jimdo.
    Подробнее о работе с данным модулем вы узнаете в нашем разделе помощи по ссылке: http://ru-help.jimdo.com/основы/модули/widget-html/

  • #32

    stopgame54 (Среда, 18 Декабрь 2013 14:21)

    https://www.youtube.com/watch?v=0hdzy5DpnRo

  • #33

    bodyartprophoto (Четверг, 19 Декабрь 2013 00:49)

    Благодарю ха информацию.

  • #34

    larmuzey (Пятница, 20 Декабрь 2013 02:57)

    Спасибо. Очень полезная информация. Для оформления сайта школьного музея нужна школьная атрибутика.

  • #35

    RODION (Пятница, 20 Декабрь 2013 05:44)

    СПАСИБО

  • #36

    MarrYana (Суббота, 21 Декабрь 2013 21:52)

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

  • #37

    MarrYana (Суббота, 21 Декабрь 2013 23:35)

    Аааа! Все получилось! Спасибо!!!!

  • #38

    Отдых в Лоо (Четверг, 26 Декабрь 2013 22:26)

    Это во всех дизайнах сайта можно поменять? Не нашел у себя ((

  • #39

    Павел Сикора (Четверг, 23 Январь 2014 18:47)

    Спасибо за нифу

  • #40

    OrfoSchool 2014 Administration (Суббота, 25 Январь 2014 13:42)

    ;-)

  • #41

    OrfoSchool 2014 Administration (Суббота, 25 Январь 2014 13:56)

    Спасибо, Jimdo Team! Я поставил себе бегущюю строку с надписью:
    "Создано с помощью Jimdo."
    Красиво.

  • #42

    ??? ??? ??? (Понедельник, 10 Февраль 2014 10:06)

    hello ))

  • #43

    Баев Павел Михайлович (Понедельник, 17 Февраль 2014 01:14)

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

  • #44

    rubusiness (Вторник, 04 Март 2014 14:52)

    Да, надо поработать со своим сайтом: и шрифт, и цвета поменять. Теперь, надеюсь вдохновит. )) А сервисы, помогающие выбрать коллекцию шрифтов существуют?

  • #45

    Jimdo-Team (Вторник, 04 Март 2014 17:35)

    @rubusiness, попробуйте воспользоваться советами по ссылке: http://blog.weemss.com/post/2857-the-psychology-of-fonts#.UxYAXfR5N7p

  • #46

    MrTvix (Пятница, 20 Июнь 2014 11:47)

    спасибо за информацию

  • #47

    Антон (Среда, 08 Октябрь 2014 21:11)

    Спасибо! Полезная статья

  • #48

    Елена (Вторник, 11 Ноябрь 2014 12:28)

    Спасибо, интересная и полезная информация