Цвет. Человеческий глаз может различить более 16 миллионов оттенков.
Я знаю этот факт, потому что только на прошлой неделе у меня была возможность подсчитать каждого из них на странице родного города AOL, которой я наслаждался. Благослови их маленькие сердца, они, безусловно, были тщательны 😉
Я помню, как думал про себя: «Эй, они все свободны, так что нет смысла экономить на них, верно?»
Конечно нет, но это поднимает очевидный вопрос —
- Сколько цветов мне действительно нужно использовать?
- И какие цвета «хорошо играют» вместе?
Ниже приведен четырехэтапный контрольный список, который поможет вам выбрать правильную ногу.
Правило 1: выбор настроения
Попробуйте это, когда начнете. Напишите название вашего сайта на листе вкладыша, а затем под ним наберите от 20 до 30 слов, которые описывают «настроение и чувства», которые вы хотите дать своим посетителям. Сделайте это, и очень быстро ваш лист будет покрыт такими словами, как гладкий, свежий, профессиональный, веселый, информативный и дружелюбный. Теперь обведите пять лучших слов, которые описывают ваш новый сайт, и прикрепите свою страницу туда, где вы сможете увидеть ее во время работы.
Эта страница будет вашим руководством и поможет вам в следующий раз, когда вас соблазнит этот сумасшедший немецкий техно-сайт с великолепным, нечитаемым шрифтом, когда вы начнете перепроектировать BassFishing-tips.com.
Правило 2: ограничьте свою палитру
Как только вы настроились на настроение, начинается самое интересное. Сядьте и выберите два, три или максимум четыре цвета, чтобы создать вокруг себя весь сайт. В общем, я обнаружил, что монотонные и дуотонные сайты имеют интенсивность, которую трудно воспроизвести с большим количеством цветов. Если это качество важно на вашем сайте, не используйте цвета. Вы можете заручиться бесплатной помощью на этом этапе процесса. Существует множество бесплатных, хорошо спроектированных программ, облегчающих эту важную задачу, и я перечислил здесь несколько своих любимых.
BjColorizer V1.5 — простое небольшое приложение, оснащенное ползунками для настройки цветов переднего и заднего плана.
ColorPad 2.3 — этот крошечный, красивый, умный и крутой инструмент позволяет анализировать и корректировать цвета из любой точки экрана, включая другие веб-сайты. Убедитесь, что вы просматриваете файл «ReadMe.txt», прежде чем начать использовать этот инструмент.
Color Picker 2.0 — еще одно приложение «пипетка», такое как ColorPad, но оно позволяет вспомнить палитру из шести цветов (возьмите себе копию «Штангенциркули», пока вы там, отличное маленькое приложение тоже).
Правило 3: цвет не дизайн
Не забывайте, что выбор вашего цветового набора — это только одно оружие в вашем арсенале дизайна. На самом деле, попробуйте этот эксперимент …
Сделайте снимок экрана вашего текущего дизайна и обесцветите его с помощью вашей графической программы. Если ваш дизайн не работает «вставать» в черно-белом режиме, возможно, вам нужно больше работать. Помните, что цвет — это только один из шести основных «элементов дизайна».
Остальные пять:
- Линия: основная структурная основа почти всей графики. Дизайн, подобный тому, который используется на Dennisinter.com, очень сильно зависит от их работы.
- Форма: фигуры, созданные линиями, сливающимися, соприкасающимися и пересекающимися. Такие сайты, как Nike.com и GlobeShoes.com, подчеркивают формы своих спортсменов и обувь в своем веб-дизайне.
- Значение: относительная яркость, темнота и затенение элементов на странице. Это ключ к хорошим монохромным дизайнам, таким как Australianinfront.com.au или Nickciske.com/binary .
- Пробел: биты, которые вы намеренно оставляете пустыми. Иногда используется для создания иллюзии глубины, иногда для создания движения, а иногда просто для того, чтобы дать вашему глазу «передышку». Marchfirst.com — отличный пример дизайна с использованием пространства.
- Текстура и рисунок. Другой «тактильный» элемент дизайна, созданный сочетанием линии, формы и стоимости. Наиболее успешно применяется при тонком использовании на сайтах, таких как K10K.net или Entic.net
Каждый дизайн, который вы когда-либо делали, использовал комбинацию всех этих элементов, хотя вы, вероятно, не осознавали этого до сих пор. Поэтому, прежде чем добавить новый цвет в микс, спросите себя, можете ли вы получить больше пользы от настройки одного из пяти элементов.
Правило 4: используйте цвет для руководства ваших пользователей
Если ваш цвет существует только как «оформление витрин», то, честно говоря, он не работает достаточно усердно. Каждому сайту нужна «иерархия контента» или «важная лестница контента». Существует высокая вероятность того, что ваши «Последние новости» могут оказаться на вершине уровня важности ваших сайтов, а ваше сообщение об авторских правах может оказаться в нижней части. Цвет (наряду с размером и положением экрана) — ваше ключевое оружие, помогающее пользователям понять вашу иерархию. Чем больше они используют ваш сайт, тем больше они учатся сканировать для определенных цветов и стилей текста.
Сам SitePoint.com является хорошим примером этого. «Тематические статьи» и «Горячие темы для обсуждения» помечены большими интерактивными текстовыми ссылками насыщенного синего цвета. Прокрутите целевую страницу быстро вниз и вверх, и вы заметите, что эти основные ссылки все еще бросаются в глаза среди размытия текста. Более старые статьи выделены менее привлекательным серым текстом, ссылки на карту сайта помечены умеренно-синим цветом, а основной текст «сорта сада» представлен простым черным. Простой заказ для любого пользователя.
При проектировании всегда держите иерархию на переднем крае мышления.
В заключение, самое главное, оставаться верным для цели сайта. Некоторые аудитории (например, рэйв-культура) будут легко отождествлять себя с выбором цветов и стилей, которые более широкая аудитория не потерпит. Если это ваша аудитория, я советую вам хорошо знать их, прежде чем вы начнете разрабатывать для них. Они, как правило, очень хорошо пахнут подделкой.
С другой стороны, если ваша аудитория шире, потратьте дополнительное время, чтобы убедиться, что ваш выбор цвета не повредит вашему опыту.
Помните, что выбор цвета сам по себе вряд ли сможет гарантировать ответный визит пользователя. Однако этого может быть более чем достаточно, чтобы гарантировать, что они этого не делают.