Как подобрать комбинацию цветов для сайта и не только
Недавно я сидел-сидел, медитировал на свой блог, и думал: “Чегой-то он какой-то устаревший уже, выглядит уже как древность из музея Египта”. Стал вспоминать, оказывается я менял дизайн блога лет 6 назад. Батюшки!
Ну и вот затеял смену дизайна на блоге. Результат вы можете видеть прямо сейчас перед собой. Хотя это еще не окончательный вариант, кое-что хочу еще поменять, но процентов на 80% уже так и будет.
Как по мне, стало гораздо лучше. Более простая и четкая структура, легкое юзабилити, приятные прямые линии. Кстати, помогите протестировать форму комментариев, напишите, как вам новый дизайн.
Ну и ради такого события я приготовил для вас новый видеоурок. Он показывает, какой инструмент я использовал при смене дизайна для подбора комбинации цветов, которые хорошо бы сочетались друг с другом. У меня это вечно сопровождалось многочасовыми сидениями в фотошопе. Весь экран был перемазан десятками разных красок, а результат всё время был не очень, мягко говоря. Ну, знаете, как обычно начинающий “писатель” сидит над чистым листом бумаги. Час сидит, два сидит, а мысль все не прет. Потом он выводит пару строк и через минуту понимает, что это полная ересь, а не проза. Со злостью рвет бумагу на клочки и берет новый лист…
Вот так и у меня было, когда я пытался сделать качественный подбор цветов. Сидишь полдня, потом в сердцах нажмешь Del и понимаешь, что откровенная ерунда получается.
Недавно я от хорошего человека узнал о специальном сервисе, который позволяет легко и очень быстро подобрать цвета при создании сайта (любой полиграфии, дизайне интерьера, да чем угодно). Там собраны миллионы комбинаций цветов, которые приятно смотрятся друг с другом. Причем люди там могут ставить лайки за ту или иную палитру, поэтому вы можете заранее видеть, понравится эта цветовая комбинация вашим будущим посетителям или нет.
Т.е. вы можете выбирать готовые палитры, если еще вообще не определились в какой гамме будет ваш продукт. Либо, если у вас есть уже какой-то элемент, который вы точно решили использовать в дизайне, взять его цвет за основу и к нему подобрать подходящие цвета-компаньоны.
Теперь я трачу всего несколько минут на подбор цветов. Как я это делаю, вы можете посмотреть в этом видео, которое я только что записал. Пользуйтесь этим инструментом, не пожалеете!
И жду ваших комментариев.
Кстати, для хранения и обработки изображений для сайтов есть специальный сервис, расположенный по ссылке image cdn.
Знаете, мне очень понравился новый дизайн сайта.
Отлично – взяла на заметку….
Удачи
Ответить
Доброго дня. Просто , ясно ,чётко. Не грузит глаза, ничего не отвлекаетюПоглядим на оставшиеся 20%. АВ то ведь ложка на бочку-у-у-у…
С уважением и благодарностью.
Ответить
Привет, Костик! Бордюр неудачный – рябит в глазах( Фото слева вверху слишком крупное, оно словно “вылезает” за пределы страницы и создаётся впечатление незаконченности дизайна. Наверное, лучше уменьшить и поставить на “джинсовый” фон. А так нормально – деловая сине-белая гамма. Кстати, старый дизайн тоже был хорошим, стоило ли менять? – это ведь тоже своего рода бренд (как, например, запросная дырка Гугла).
Ответить
Фон я зафиксировал, теперь он не прокручивается и, соответственно, не рябит.
Насчет размеров фотки согласен, мне ее пришлось такой сделать, потому что это не портретная студийная фотка, а вырезана из общей фотографии. Если отдалить, тогда другие люди в кадр попадают. Посмотрю, может получится как-то лишнее затереть. А другими фотками, сделанными профессиональным фотографом, не разжился, все с мыльниц.
Ответить
Но люди-то головами двигают, когда читают)) Цвет нормальный, но мне кажется, фактуру лучше убрать
Ответить
Мне понравилось.Красиво,удобно.
Ответить
…в дополнение к своему посту: как вариант, можно заменить фото, ИМХО, неудачный ракурс – ты смотришь куда-то в сторону от собственного блога и “мимо” посетителя))) И фон не айс – кремовый цвет там как-то не в тему
Ответить
Отличный дизайн, во всяком случае на много лучше чем был, как то по современнее стал! Обидно получается у автора таких замечательных курсов, а дизайна сайта нормального не было, а сейчас сразу видно солидный человек! ;-)
Так держать Константин, Успехов Вам и Удачи!
Ответить
Мне понравилось! По-мальчишески.
Ответить
Очень неожиданно. Неплохо. Я бы даже сказал – ЗДОРОВО! Удачи!
Ответить
Оформление: Просто и неназойливо, скажем, – со вкусом. Информация на виду. Спасибо за информацию.
Ответить
Отличный дизайн! Простой и удобный :)
Мне кажется, что блоки “Новые записи” и “Новые комментарии” лучше перенести из футера в правую колонку сайта.
Ответить
Можно было бы, но там со временем будет другая информация.
Ответить
Сам дизайн я ещё не посмотрел, но хотел бы поделиться своими детскими воспоминаниями. Моя матушка работала над производством пластмассовых изделий(игрушек и т.п.)У неё также возникла проблема оптимального подбора цветов. Компьютеров тогда не было,но у нас была книга Бреиа Жизнь птиц (на немецком языке). Там были великолепные иллюстрации самых экзотических птиц. Вот эту книгу она и взяла как инструмент
Ответить
Классный образец народной смекалки.
Ответить
Спасибо, Константин! Всё, что Вы предлагаете, интересно. Будьте счастливы!
Ответить
Перед тем, как внимательно рассмотреть, уменьшил размер браузера – дизайн адаптивный. Это сейчас актуально. За видео спасибо! Подбор цветов для меня тоже проблема.
Ответить
Да, не ориентироваться на владельцев смартфонов и планшетов больше нельзя.
Ответить
Здравствуйте Константин! И всё таки люди даже вы поменяли окраску блога ни плоха. Сейчас все так делают я после 11 декабря хочу делать купленную новую джумлу там и сайт и блог мне для работы хватит. Письмом заниматься,книгами,одним словам письмо полюбил у вас тоже ни плохое что вы делаете занимаетесь компьютерами.И всего вам хорошего и удачливого в новом году.С уважением Сергей!
Ответить
- Фото меняем;
– Картинку справа удаляем: нужно что-то другое;
Хвалить ещё рано.
Только вперёд.
Желаю успеха, Владимир
Ответить
Картинку в хеадере сделал сам как мог. Возможно со временем закажу дизайнерам более профессиональную.
Ответить
Мне очень понравилось…так притомили эти “мелькашки”…блестяшки”, а здесь все лаконично, глаз не “прыгает”…Ура!
Ответить
Я Вас расстрою, наверное, но блестяшки здесь тоже будут, т.к. любой сайт должен приносить доход, и это нормально.
Ответить
Здравствуйте, Константин! Приятный деловой дизайн сайта. Цвета спокойные. Все четко и ясно. Мне нравится, в том числе и фото (открытый уверенный взгляд и ракурс хороший)
Ответить
Мне нравится!!!! Для тех кому это необходимо-это просто находка!!!
Ответить
Здравствуйте,Константин! Дизайн блога мне очень понравился! И именно тем,что Вы сами отметили, простая и чёткая структура, ощущение лёгкости и,конечно,замечательная цветовая гамма!Мой Вам респект! Благодарю за сервис,для меня это очень своевременно!
Ответить
Точно- рябит задний план, особенно когда мышкой работаешь.
И ещё интересно- я этот комментарий в ответ Александру пишу, как согласие с его мнением. Посмотрим, где он появится – внизу или как положено…Тестировать так тестировать :)
Ответить
Вот, Костя, обратите внимание- коммент не прошел как ответ, а ушел отдельно вниз
Ответить
Если бы все было так просто: включил в настройках вордпресса древовидные комменты и все. Но не тут-то было. Это создает мульон replytocom-дублей, которые похоронят сайт в глазах поисковиков. Пришлось решать эту проблему, прежде чем включать вложенные комменты. Как видите, теперь работает.
Ответить
Мне понравился твой новый сайт.единственное что я бы как-то изменила фото.как то оно бросается в глаза или уменьшить надо, а так все по деловому и ничего лишнего.Удачи на новом сайте.
Ответить
Мне очень понравилось, буду изучать, пока еще новичок в этом деле.
Ответить
Константин, не заморачивайтесь на цветовой гамме, главное удобство сайта. У вас и так было “тики-так”.
Не меняйте часто, лучше что-то подправить или добавить. Сайт должен отличаться от других подобных, иметь своё лицо и на долгие годы. Он должен стать привычным логотипом.
С уважением Ал-др
Ответить
Не чаще, чем раз в 6 лет, обещаю :)
Ответить
Константин, в целом – современно и по деловому. Насчет фото: размер мне не мешает. мешает отсутствие воздуха над головой и срезанный подбородок. Вообще фотография хорошая, как бы объемная. . Подложка сайта тоже не самая хорошая- рябит. Но это все ерунда по сравнению с современным дизайном. Не хватает горизонтальной формы подписки под шапкой- это сейчас самый тренд.Подвал както страшно черный. А просится- темно синий. Я правда не пользовалась инструментом- просто по логике- темно синий лучше. И сайтбар как то гол… Наверное в нем со временм поселятся интересные и полезные вещи. Но повторяю- сайт очень хорош.
Ответить
Работа над формой подписки – это все еще впереди. А можете привести пример? Цвет футера как раз относится к тем 20%, над которыми я еще не работал. Сайдбар, конечно, тоже еще буду заселять.
Ответить
Уважаемый Константин! Большое спасибо за интересные знания о цвете. К сожалению,извените, воздержусь от высказываний в силу не возможности правильной оценки,страдаю дольтонизмом,несмотря,на то что приходилось работать ХУДОЖНИКОМ.С уважением Александр.
Ответить
Константин, сайт получился очень элегантным, всё сделано со вкусом. Единственное, что сразу бросилось в глаза, не хватает точечки после слова зарабатываем в панели бизнес, чтобы всё привести к единообразию)) Но это мелочи. Сайт замечательный!
Ответить
А она там есть, просто ее перекрыло белым кругом, т.к. слово не влезало. Если буду доделывать шапку, попробую впихнуть.
Ответить
Цветовая гамма сайта имеет большое значение. На сайтах информационного характера не должно быть броских и ярких цветов, ничто не должно отвлекать от приятного чтения статей, и должен быть мягкий фон. Вам, Константин, это удалось на ура. Поздравляю! Хотя, честно сказать, у Вас и предыдущий дизайн был далеко неплохим.
Ответить
Константин, все хорошо, ненавязчиво, стильно, современно.
Ответить
Не хочу судить и давть оценку тому,в чём совершенно не разбираюсь. Могу только сказать ,что я уважаю вас и с интересом читаю все ваши материалы; стиль изложения у вас отличный
Ответить
Здравствуйте,Константин.Сайт не понравился,извините.А эти клубочки с мулинэ…..С вашей фотографией, по моему,. не камильфо,но это сугубо моё мнение.За остальную информацию благодарю,попробуем. С уважением Надежда.
Ответить
Надежда, хотелось бы конкретики: что, почему. Мне раньше тоже не нравился этот стиль Windows 8 с его минимализмом и схематичностью, а вот конкретно этот дизайн понравился, и я его исползовал для сайта.
Ответить
Константин,как мне Ваш сайт мне понравился, светлый,строгий не чего лишнего. Удачи Вам.
Ответить
Здравствуйте! Я как пользователь – удобный, понятный сайт. Удачи и успехов!
Ответить
Начало много обещающее, строгий дизайн внушает надежду на много новых технических уроков.С уважением Владимир.
Ответить
Класс!!!!
Ответить
Отлично!
Ответить
Мне понравилось, ничего лишнего, ничто не отвлекает. Удачи! И спасибо за видео
Ответить
Отлично! Спасибо за идею,попробую создать похожий дизайн.
Ответить
Я пенсионерка, поэтому не судите меня строго. Как только открыла сайт- чуть не упала со стула (шутка). Фото! первым делом бросается в глаза, молодой человек внимательно так смотрит на меня (я застеснялась).С фоном фотки всё в порядке, а вот объект желательно немного отдалить, будет не так навязчиво. Дальше – цвет фона в самом низу (чёрный) не очень гармонирует с другими цветами, я думаю, что лучше повторить цвет с верха (джинсовый).Теперь о рамочке или как говорят бордюр. Серый цвет – “бедный”, с синим хорошо гармонирует жёлто – оранжево – золотистый.
Ответить
А по моему, очень даже ничего себе. И дизайн не броский. Мне нравиться, 10 баллов Вам Константин.
Ответить
Дизайн замечательный! Все просто, ясно и красиво!!
Ответить
Всё замечательно!
Ответить
Фотография – классная, но немного обрезанная (сверху-прическа, снизу-подбородок ).
Если ее уменьшить, как предлагают некоторые, то может быть станет не такой impressive.
Название блога – слишком близко к фотографии ,как бы подпирает (упирается) в Ваш подбородок.
Серые бордюры- ну чтож , зависит от настроения, может Вы вступили в этап минимализма.
Что касается подвала- выглядит мрачно, особенно с серыми бордюрами.
Что действительно напрягает- это большие отступы(визуально) между словами и знаками, когда пишешь комментарий, из-за этого- частые подчеркивания.
Хотя то, что фон меняется на приятный оливковый, это- красиво.
Извините за критические замечания.
В России покритиковать- что меду напиться.
С уважением, Ваня.
Ответить
Серые бордюры – это сетчатый фон? По-моему, все тут под бордюром понимают разные вещи.
Не совсем понял про визуальные отступы и подчеркивания. Опишите подробнее, если можно.
Ответить
Константин! Дизайн понравился – современный, лаконичный и неналяпистый. В последнее время в Рунете появилось много сайтов с “тяжелым”, перегруженным всякими деталями и наворотами, дизайнами. Но согласна, что фото нужно изменить и лучше перенести “Новые записи” и “Новые комментарии” на видное место, в Сайдбар. Все-таки не все посетители спускаются до подвала.
Ответить
Мое мнение полностью совпадает, с мнением Светланы
Молодежниковой. Да фото должно быть свободным (т.е.)
полностью видны ваши волосы и подбородок чтобы не закрывала надпись.Бордюр и шапка не гармонируют,относительно друг друга слишком контрастны.
Я думаю, дорогу освоит идущий! Дерзаййте и будет еще лучше.В общем хорошо.
Ответить
Дизайн мне понравился. Просто и ничего не отвлекает. Удачи Константин!!! Надеюсь вы обрадуете нас ещё полезными уроками!!!
Ответить
Скромно и со вкусом. Чёрный цвет выбивает из общей композиции.
Что касается предлагаемого Вами сервиса, – я бы не сказала, что там удачные решения.
И цвета, в основном, все грязные, смешанные. Они наводят тоску и уныние.
Ответить
Очень даже и не плохо.
Ответить
вобщем-то сейчас рано, мне кажется, оценивать. Оставшиеся 20% легко могут перерасти в 80%, было бы желание. Вопрос у меня появился. Просмотров, как я вижу на данный момент 140, а вот справа, где “поделись с друзьями” – какой-то счетчик говорит, что “26”. И они не меняются. Что бы это значило?
Ответить
140 – просмотры статьи. 26 – перепосты в соцсети.
Ответить
Пардон, какие-то изменения пошли. Но почему они разные?
Ответить
Для меня дизайн нормальный (у меня пониженный цвет.
Ответить
На мой взгляд дизайн очень удачный, а вот фон… Я бы его чуть-чуть “осветлил”, чтоб он был менее заметен.
Ответить
Константин, спасибо. Я всегда рада твоим письмам и твоим урокам. Отличный сайт!Успехов вам.
Ответить
Уважаемый Константин,дизайн твоего сайта мне понравился,немного необычно,но со вкусом! Ты всегда отличался самобытностью и вкусом!Напоминаю,что я начинал изучать компьютерную грамоту,по твоим рассылкам и курсу “Анти-чайник”,за что тебе и сейчас очень благодарен!Твои уроки вывели меня в Инфо-бизнес!
Ответить
БлагоДарю! с удовольствием посмотрела и сайт и видео. Главное, чтобы вам нравилось! А вообще, впечатление делового стиля, ничего яркого, романтического, нет.
Ответить
Добрый день Константин большое Вам спасибо за Ваши уроки благодаря им мы пенсионеры изучаем компьютер.Насчёт дизайна то он мне понравился,фото хорошее только не стоило подрезать с уважением Владимир
Ответить
C удовольствием посмотрела и сайт и видео.Оформление-лаконично, содержательно. Видеоуроки-супер!
Ответить
Мне новый дизайн понравился именно своей простотой. Ничто не режет глаз. Цветовую гамму обсуждать бессмысленно, на вкус, на цвет… – сами знаете, товарищей нет. За урок спасибо! Даже не подозревала о такой возможности подбирать цвета.
Ответить
Константин!СПАСИБО за Ваши уроки,новый сайт необычный,понравился.С благодарностью Галина.
Ответить
Вообще-то я сначала подумал, что попал на сайт Алекса Экслера (согласитесь, не обидное сравнение), но у него интерфейс продуманней, а если про дизайн, то сайт Жанны Фриске вне конкуренции, правда его давно уже нет.
Ответить
Пожалуйста, напишите шпаргалку про смартфоны и смарт-часы к ним.
Ответить
Тут не шпаргалку, а целый талмуд писать можно. А что именно интересует?
Ответить
Константин! Я не понял для чего верхнее меню дублировать боковым меню “Рубрики” Что это дает посетителям блога?
Ответить
Нет, просто пока сайдбар пустой, воткнул туда это, потом уберу.
Ответить
Позвольте не согласится. Вкус автора должен учитывать вкусы посетителей. Блог делается не для автора. Потребители , в любом случае, остаются главными.
Ответить
Тут нужен баланс. Блог – точка смешения и взаимодействия интересов/взглядов автора и читателей. Если впасть в одну из крайностей, блог станет однобоким.
Ответить
Прошу прощения за поклеп на интерфейс, у Вас он свой, без лишнего пафоса и удобный.
Ответить
Спасибо Нравится.
Ответить
Мне нравитса. Скроьненько но совкусом. Ничего лишнего все по теме и не отвлекает.Удачи Вам и вдохновения.С уважением Виталий.
Ответить
Благодарю Вас, Константин ! Мне, как художнику, это очень интересно. Удачи !
Ответить
Здравствуй Константин! Не буду льстить, скажу своё мнение, как есть. Главное чтоб контент был, как всегда полезным. А на счёт оформления блога, то мне кажется кнопки соц. сетей лучше расположить в конце статьи. Так будет удобней читателю. Дочитал статью и сразу поделился ею с друзьями. То-есть они не уплывут вверх и их невозможно будет пропустить. Шапка блога чем-то мне напоминает одностраничник. А она по идеи то должна отражать тему всего контента сайта. Как-то выглядит серьёзно. Кнопки верхнего меню желательно выразить. Как бы отделить контрастностью от заднего фона под кнопками. А в остальном всё отлично. Не забитый и светлый. В общем хорошо читабельный. Ах да, и стрелка вверх отличное решение.
Ответить
Евгений, спасибо за конструктивную критику и предложения.
Насчет соц.кнопок, то я тоже думал разместить их внизу статьей. Но не все так просто технически. Например, два блока кнопок отказываются работать одновременно. И если в статьях расположение кнопок внизу является логичным, то на главной, статичных страницах и рубриках мне кажется эффективнее располагать их там, где они сейчас, в сайдбаре. А если кнопки будут внедрены в конец записей, то на их страницах они будут выводиться в двух местах, и потому не будут работать. Т.е. тут надо или какой-то плагин, или писать скрипт у программистов, который будет определять где какой тип страницы, чтобы выводить блок в разных местах.
Про шапку я не понял, Вы хотели сказать, что она выглядит слишком серьезно или наоброт, НЕсерьезно? Скорее всего это не окончательный вариант.
Фон горизонтального меню. Если делать его темнее, начинает сливаться с шапкой. Скорее тут надо делать темнее сами надписи меню.
Ответить
И еще неоднозначный момент про кнопки в конце статьи. Там у меня в форме комментирования планируются кнопки соцсетей для того чтобы можно было комментировать через свои профили в социалках. И вот как будут смотреться вместе два ряда одинаковых кнопок, это еще надо посмотреть.
Ответить
Дааа. Нюансов хватает. А я вот что подумал. После наполнения сайтбара блоками, кнопки же можно спустить вниз. Поближе к концу поста. Но ваша идея кнопок в комментариях, это супер. Люди с удовольствием вступают в обсуждения и кликать будут охотней чем по простому заголовку статьи.
Ответить
Да, кнопки в сайдбаре можно расположить под всеми блоками, что там будут. Но это не гаратирует, что они будут располагаться на уровне окончания статьи, ведь они все разной длины :)
Ответить
Константин! Мне очень понравилось-впрочем как и всё чему вы учите))).Удачи! И жду новых уроков.
Ответить
Костя, спасибо за ресурс, показанный в ролике. По дизайну: Цвета действительно подобраны замечательно. Некоторым читателям не понравилось твоё фото. На мой взгляд – фото на месте и подходящих размеров. Поскольку ожидается 20% доработка сайта, надеюсь появятся две необходимые страницы “Главная” и “Карта сайта”
С уважением, Виктор Старченков
Ответить
Спасибо, Виктор. По фотке, я изначально не хотел делать лицо так близко, чтобы оно обрезалось сверху и снизу. Но иначе не получилось вырезать из исходной фотографии. Попробую, может еще получится, и тогда буду смотреть, как больше понравится: как сейчас или более отдаленно.
Карта сайта для людей (XML-карта для роботов уже создана), возможно, не помешает, но по сути, главное меню и является этой картой, т.е. списком всех разделов.
Делать ли ссылку на главную страницу в меню я еще не решил, т.к. по стандартам веб-разработки такой ссылкой является шапка, и кникнув на нее можно всегда попасть на главную. Поэтому пункт меню “Главная” по сути дублирует это. Посмотрим.
Ответить
Есть древняя,но очень актуальная мудрость:”На вкус и цвет товарищей нет”. Слушайте своё внутреннее “Я”. Вы человек явно одарённый, так что всё будет хорошо! PS Главное, как и по жизни не одевать корону! Удачи!
Ответить
Согласен с Александром.И еще,главное своя идея,а хороший отзыв о работе будет твоей наградой Удачи
Ответить
Здравствуйте.
Константин, мы ведем переписку с 2009 года.
Дизайн блога легкий, понятный и главное мы не стоим на месте. У Вас новый блог, а я уже не “чайник”.
С уважением, Владимир.
Ответить
Чисто субъективное мнение – на меня такие цвета наводят тоску…
Ответить
А можете предложить свой вариант (хеадер, меню, фон)?
Ответить
На мой взгляд бордюр светловат. В Вашем Уроке есть замечательный цвет – он последний в полосе /на примере Вашего сайта / Фото -лицо подальше. И спасибо за все Ваши труды ! Успехов !!!
Ответить
А темный будет сливаться с хеадером…
Ответить
Не пойму почему, но эта комбинация цветов взгляд задерживает, спасибо вам за работу.
Ответить
Добрый день Константин! Красивый дизайн – свежо и креативно! скажите, а как можно с Вами связаться. А то я не найду нигде форму обратной связи.
С ув. Олег
Ответить
Спасибо. Можно тут: http://konstantinfirst.com/help (при создании заявки выберите раздел “предложение сотрудничества”, если Вы по этому вопросу). Но я честно скажу, предложений почти не принимаю, т.к. много дел по своим проектам. Хотя может у Вас что-то другое.
Ответить
Может будет полезно http://paletton.com/, этот онлайн инструмент помогает подбирать оптимальные цвета и тона для сайта. Незаменимый инструмент для веб дизайнеров. С помощью него можно сделать сайт контрастным, и в тоже время это будет максимально легко восприниматься. Я использую его, чтобы концентрировать внимание посетителей в нужные участки сайта при помощи сочетаний и правильного распределения цвета.
Ответить
Константин, все что вы делаете- делаете хорошо!
Ответить
Полезная статья! Хорошо и правильно подобрать – не каждому под силу. А еще, чтобы не только автору нравилось, но и посетителям – это вдвойне сложнее :)
Ответить
Как мне встроить картинки. Помогите пожалуйста
Ответить
Опечатка в названии сайта
Ответить