На сером фоне – Текст низкой контрастности — веяние моды или убийца юзабилити

Серый full hd, hdtv, fhd, 1080p обои, серый картинки, серый фото 1920×1080

Серый full hd, hdtv, fhd, 1080p обои, серый картинки, серый фото 1920×1080 Приложение WallpapersCraft

•  7.0 1920×1080  35967 серый, шар, пелена
•  6.3 1920×1080  32374 серый, фон, точки
•  5.8 1920×1080  2959 серый, текстура, стена
•  5.8 1920×1080  2732 серый, цвет, фон
•  5.8 1920×1080  3906 серый, цвет, фон
•  5.6 1920×1080  28384 серый, полосы, вертикальный
• 
   5.5 1920×1080  57363 серый, черный, тень
•  5.4 1920×1080  34485 серый, голубой, линии
•  4.8 1920×1080  19511 серый, волк, выть
•  4.8 1920×1080  30641 серый, фон, пятна
•  4.6 1920×1080  20967 серый, белый, черный
•  4.6 1920×1080  12589 серый, малыш, кролик
•  4.5 1920×1080  20357 серый, черный, рисунок
•  4.4 1920×1080  43291 серый, текстура, поверхность
•  4.4 1920×1080  18873 серый, трещина, коричневый

Базовые цвета для фото, или Как подобрать фон

При заказе очень часто спрашивают, какой оттенок лучше выбрать для съемки. Вернее, даже не отттенок, а цвет, неправильно выразился.
Ответ практически от всех профессионалов дается один — для начала берем базовые цвета — белый, серый и черный.
А вот тут стоит немного остановиться и подумать. В первую очередь, естественно, все зависит от целей использования так сказать, но сейчас не об этом. У каждого фона есть свои нюансы в применениии. Ибо как без них, без пресловутых этих самых нюансов… скучно было бы жить, господа!

Итак.

Белый фон и его оттенки
Из плюсов можно сказать, что это самый простой и доступный материал — простыня, ватман, выбеленые доски.
Еще сильный плюс — с ними проще работать, и фото на белом фоне позитивнее что ли… даже фотостоки охотнее берут фото именно на белом фоне.
Кроме того, белый фон универсален. Он подходит для съемки в стиле флет лей, для ведения блога, для создания единого стиля, для съемки своих работ.

Из минусов — конечно, передача цвета (как обычно) — белый фон сфотографировать так, чтобы он был реально белым, без обработки очень сложно, практически невозможно. Почему? Так работает наш мозг. Он приучен собирать и обобщать информацию извне и делать вывод исходя из своего опыта (немного странно звучит). В общем, если мы знаем, что фон белый, мы видим белый. Вне зависимости от окружения и условий. А фотоаппарат условностями не страдает — он фиксирует так, как «видит», а оттенков белого великое множество. И та же лампа, даже люминесцентная, обязательно даст свой оттенок на белый фон. Кстати, поэтому предпочтительнее снимать при солнечном свете. Так что в этом варианте либо работаем с техникой (баланс белого, серая карта) или правим в редакторе.
Кроме того, на белом фоне сложно снять белый предмет.

Если нет опыта в постобработке, можно взять теплый бежевый фон, светло-светло серый фон. Хороший вариант — белый с потертостями.

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

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

Темный фон
Сюда можно отнести и черный, и глубокий серый и темно-коричневый.

Темный фон создает историю, определенную атмосферу. Можно задать «движение», игру в кадре с помощью света и бликов.
Хорошо снимать светлые предметы или часть объекта съемки, чтобы привлечь внимание, дать рассмотреть детали.

Если нужно снять темный предмет на темном фоне, стоит задуматься об освещении и выделить края предмета светом.

Главная проблема при работе с темным фоном — он подчеркивает все огрешности. Блики, пылинки — все проявится.
Чтобы избежать бликов, стоит использовать в работе матовый фон и постараться как можно дальше отодвинуть его от предмета съемки. Пыль и соринки, даже если сдувать перед каждым щелчком затвора, проявятся всегда на фото, (у нас, по крайней мере, — сколько не притирай, какая-то зараза, но останется в кадре). Тут поможет только постобработка — кисть или штамп, к примеру.
Коричневый фон чуть проще в этом смысле, но зачастую дерево может дать блики на неровностях фактуры, даже если поверхность матовая. Опять же, этим можно «поиграть». И наши любимые потертости и фактура дерева в этом случае играют только в плюс.

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

Эти сняты вечером, когда уже смеркалось, с разницей в десять минут:

А так этот фон на самом деле выглядит:

И напоследок, к слову о сером цвете. Мишка темный или светлый?

Вот и ломаем голову — как лучше подать фото.

Творческих вам успехов, друзья!

Текст низкой контрастности — веяние моды или убийца юзабилити

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

Очевидно, дизайнеры Squarespace.com «намекают» пользователям, что нужно нажать контрастную кнопку «Get Started» в верхнем правом углу. Но хотят ли они, чтобы потенциальные клиенты прочли информацию на странице? Ведь перед стартом неплохо бы узнать, что именно начинаешь.

Контраст фона и текста в данном случае практически отсутствует. А серые буквы на сером светло-сером фоне вызывают ощущение безразличия.

Почему низкая контрастность вредит юзабилити?

1. Страдает четкость

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

2. Теряется доверие

Исследования показывают, что люди менее доверчивы к тексту, который сложно прочитать (по аналогии с мелким шрифтом под звездочкой).

3. Сложнее найти нужное

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

4. Пользователи теряют уверенность

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

5. Использование сайта с мобильных устройств становится еще сложнее

Представьте себе: вы пытаетесь прочитать на экране смартфона серый текст на светло-сером фоне во время прогулки под ярким солнцем. Даже с контрастным текстом это затруднительно. В данном случае — практически невозможно.

6. Доступность сайта для пользователей с ослабленным зрением сводится к нулю

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

Можете ли вы сказать, на какой странице сейчас находится пользователь? На текущее местоположение (в данном случае, раздел «Support») на сайте Apple.com намекает «подсказка»: темно-серая подсветка светло-серого текста. Использование низкой контрастности в таком случае может вызывать серьезные затруднения у пользователей.

На сайте GitHub поле для поиска по каталогу теряется на фоне ярких и крупных блоков, из-за чего становится практически незаметным.

Зачем дизайнеры используют низкую контрастность текста?

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

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

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

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

Стратегии выделения элементов дизайна без ущерба для юзабилити

1. Сократите объем информации

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

2. Найдите оптимальный размер шрифта

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

3. Проверьте цветовые сочетания

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

4. Измените расположение элементов

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

5. Будьте осторожны с раскрывающимся меню

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

Вместо заключения

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

Для начала рассмотрите другие способы выделить важную информацию без ущерба юзабилити.

Высоких конверсий!

По материалам: nngroup.com 

27-06-2015

Проблемы модного серого текста в веб-дизайне

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

 

 

---

Проблемы светло-серого текста

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

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

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

46% яркости

Мало просто понимать, что слишком светло-серый текст сложен в прочтении. Важно знать какой серый слишком светлый. Без конкретных ориентиров «слишком светлый» — понятие относительное.

Консорциум Всемирной паутины (W3C), организация, разрабатывающая и внедряющая технологические стандарты для веба, опубликовала руководство по доступности контента — WCAG 2.0. В нем, помимо прочего, рекомендуется для текста обычного размера использовать коэффициент контрастности не менее 4.5:1.

У серого же цвета нет параметра насыщенности, а есть только яркость. Чем выше яркость, тем светлее серый цвет. Яркость задается в процентах.

Если применит вышеупомянутые пропорции к серому тексту на белом фоне, то получится что серый текст нельзя делать ярче чем 46% (#767676). Это максимальная яркость текста, которую вы можете себе позволить в рамках комфортной для глаза контрастности. Цифра для обратной ситуации также верна. То есть, если вы используете белый цвет на сером фоне, фон должен быть не ярче 46%.

58% яркости для шрифта 18+

Это не ограничение по возрасту, а размер шрифта. Если он больше 18 pt, вы можете сделать его светлее. Все потому, что большой текст проще читать. Ваш серый текст на белом фоне не должен быть ярче 58% (#949494). Более светлый серый сделает сложно читаемой даже текст большого размера.

Порог для светло-серого фона

Вышеуказанные рекомендации и ограничения относились к тексту на белом фоне. Если вы размещаете текст на светло-сером фоне, вы должны сделать текст темнее. Светло-серый цвет для фона не менее 90% (#E6E6E6). Это значит, что в пересчете на коэффициент 4.5:1 мы получим текст яркостью не более 40% (#666666). Для текста 18+ это цифра растет до 50% (#7F7F7F). Яркость вашего текста в этом случае не должна выходить за указанные рамки.

Что значит «слишком светлый»

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

Рекомендации «WCAG 2.0» по коэффициент контрастности задают стандарт для понятия «слишком светлый». Это более не абстрактное понятие, которое каждый трактует сообразно своему опыту. Теперь у дизайнеров есть конкретная тока отсчета, благодаря которой становится намного легче избежать использования слишком светлого текста.

Автор статьи anthony 

Перевод — Дежурка

Смотрите также:

Предложения со словосочетанием СЕРЫЙ ФОН

Ею мощная высокая фигура, затянутая в платье, сшитое по моде семнадцатого века, выделялось ярким пятном на общем сером фоне. Научно-исследовательский центр «Каннон» контрастно выделялся на сером фоне городских построек. Замечала юношу издалека, выхватывала взглядом как яркое, не сливающееся с серым фоном пятно, искала в мутном потоке протекающих мимо лиц. Заднюю подсветку можно также оснастить специальными фильтрами, которые по старинке называют гелями, чтобы окрасить серый фон в любой цвет. Кусочек радуги на безрадостном сером фоне безрадостной каменной планеты.

Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!

Спасибо! Я стал чуточку лучше понимать мир эмоций.

Вопрос: канкан — это что-то нейтральное, положительное или отрицательное?

Положительное

Отрицательное

Даже вывески на лавках поражали своей однотипностью: серый фон, грязно-белые буквы, впрочем, очень аккуратно выписанные. Их чешуя блистала подобно драгоценным камням на сером фоне небес. На сером фоне появились мерцающие точки. Только монотонный серый фон. Странно было то, что около подъезда были разбросаны зелёные еловые веточки. На сером фоне они сильно выделялись. Он хотел спросить о том, но на сером фоне появился конь — тот самый красавец конь, которого не спутать ни с каким другим. На сером фоне холмистой пустыни нечто белое сверкает на солнце. Яркие мазки на сером фоне составляют убийства. Гербы этих дворян имели серый фон, как и их накидки, которые, подобно одежде чиновников, ограничивались длиной. Тут и там на сером фоне вспыхивали разноцветные пятна. Я не знал, как вернуть состояние монитора в изначальный серый фон. В такие моменты он становился видимым — как будто на общем сером фоне он один проступал цветовым пятном. Под стать кружке выглядела и скатерть на столе — тёмные гроздья винограда на сером фоне. Будь громче серого фона земного пути! Все его серые маски, жёлтые шахматы, треугольники и ромбы, на сером фоне холста, тушили в ней всякое стремление восторгаться и понимать. Неожиданно на однообразном сером фоне вблизи горизонта появился шар, окрашенный в розоватые тона. Чуть покачивался мягкий занавес с огромной бело-голубой чайкой на сером фоне. Разум как-то отстранённо отметил, что это выглядит нелепо — жёлтые глаза на сером фоне. Гном, кажется, начал догадываться, что картошкой драконов не удивишь. И чем сильнее он догадывался, тем больше бледнел. Что даже на сером фоне было заметно. Красный плащ гостьи и синий редингот её спутника яркими пятнами выделялись на сером фоне подъездной дорожки. Если точнее — нарисованным на сером фоне, скучным типом в чёрном костюме и с взъерошенными волосами. Сосуды эти изготовлены на круге, имеют хороший обжиг и украшены тёмно-красной росписью по розовато-желтому или серому фону. Я шагнула в тень, надеясь стать незаметной на сером фоне. Песчаные холмы и деревья начали прорисовываться из общего серого фона. Белые мундиры нескольких батальонов пехоты резко отделялись на сером фоне окружных зданий. И всё это на великолепном сером фоне дождя, ветра, волн в океане. Они расписывали синим по серому фону. На сером фоне зарождавшегося дня виднелись развалины старого аббатства. Бабушка осталась дрожащим жёлтым пятном на сером фоне. — Тот вздрогнул, снова коснулся комма, и картинка исчезла, остался нейтральный серый фон и синева, заполняющая собой индикатор хода процесса. Кто-то обратил внимание на её чистейшую белизну, столь поразительную на сером фоне прочих городских строений, припорошённых пылью и закопчённых смогом. Когда же в природе преобладает серый фон, скалы кажутся фурункулами на поверхности горы. Рядом с часами вертикально расположилась на сером фоне полотна двуручная секира, в купе с ним создавая нечто вроде герба или флага. Процесс шёл постепенно, на общем сером фоне ещё проскакивали синие перья, понемногу съедаемые тёмными облаками. Лишь безликим серым фоном. Их на нашем сером фоне замечали за сто шагов. Словно художник нарисовал её на сером фоне, решив оживить городской пейзаж и не пожалев красок.