Текст на белом фоне: Как повысить читабельность текста на картинке: 10 способов

Содержание

Создаём в Фотошоп белый текст на белом фоне / Creativo.one

В этом уроке вы научитесь создавать длинные тени, использовать приёмы светотеневого рисунка, чтобы белый текст на белом фоне был не только видим, но читаем ( при условии, что текст достаточно большого размера).

Шаг 1

Начните с создания нового документа в Photoshop, который составляет 1600 x 900 пикселей, 72 PPI и RGB Color с белым фоном.

Шаг 2

Используя инструмент «Текст», создайте новый текстовый слой со словом White (Белый). Я использую бесплатный шрифт Montserrat размером 340 px. Если у вас нет этого шрифта и вы не хотите его искать и устанавливать, то вполне можно использовать похожий шрифт.

Шаг 3

Щелкните правой кнопкой мыши по слою с текстом и «Преобразовать в смарт-объект»

Шаг 4

Дважды щелкните по слою со смарт-объектом, чтобы вызвать окно с настройками стилей слоя. Используйте стиль слоя Наложение цвета (Color Overlay). Используйте белый цвет (#FFFFFF).

Шаг 5

В результате наш текст стал невидимым.

Чтобы это исправить, нужно добавить освещение и тень. Но сперва мы изменим цвет фона, сделав его немного темнее. Для этого используйте Слой – Новый слой-заливка –Цвет (Layer – New fill layer – Color). с цветом # F7F7F7.

Шаг 6

Дублируйте слой со смарт-объектом, поместите его в новую группу под названием «Long Shadow» (Длинная тень) и переместите под исходный слой.

Шаг 7

К слою внутри группы «Long Shadow» (Длинная тень) примените стиль слоя Наложение цвета (Color Overlay). Цвет # 000000.

Шаг 8

К этому же слою примените фильтр Размытие в движении

(Motion Blur). Установите Угол (Angle) 45, Смещение (Distance) 20.

Шаг 9

Для слоя, к которому мы применили фильтр Размытие в движении, непрозрачность снизьте до 2%, чтобы он был едва заметен.

Шаг 10

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

Это не займёт много времени, если использовать горячие клавиши. Сначала увеличьте изображение на 50%, затем, удерживая нажатой клавишу ALT, нажмите стрелку вниз один раз, чтобы дублировать слой и сместить его вниз. Затем нажмите клавишу со стрелкой влево, чтобы сдвинуть дублированный слой влево.

Клавиши со стрелками обычно смещают на 1 пиксель. Однако, если вы увеличите документ до 50%, тогда он переместит слой на 2 пикселя, что больше подходит для наших нужд.

Шаг 11

Повторите процесс, удерживая клавишу ALT и нажимая стрелку вниз, затем стрелку влево еще 14 раз.

Шаг 12

Чтобы эффект длинной тени выглядел лучше, добавим эффект освещения. Под группой

«Long Shadow» (Длинная тень) создайте новый слой-заливку Градиент (Слой – Новый слой-заливка – Градиент (Layer – New fill layer – Gradient).

Шаг 13

Используйте градиент от черного к белому по умолчанию и установите Угол на 45 °.

Шаг 14

Установите непрозрачность (opacity)слоя-заливки градиента на 3%. Это создаст иллюзию ненавязчивого источника освещения.

Шаг 15

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

Шаг 16

И примените стиль слоя Тень (Drop Shadow) с настройками:

цвет (color) #FFFFFF
Режим наложения – нормальный
непрозрачность (Opacity): 80
Угол (Angle): -135 °,
Смещение (Distance): 3 px,
Размах (Spread): 0;
Размер (Size) 6px.

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

Результат

И вот окончательный результат:

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

Мы также можем редактировать содержимое смарт-объекта в любой момент, чтобы изменить текст, добавить фигуры или логотип своей компании:

Автор: Tony Thomas

Источник: medialoot.com

Белый текст на белом фоне в фотошоп

Шаг 1

Начните с создания нового документа в Photoshop, который составляет 1600 x 900 пикселей, 72 PPI и RGB Color с белым фоном.

Шаг 2

Используя инструмент «Текст», создайте новый текстовый слой со словом White (Белый). Я использую бесплатный шрифт размером 340 px. Если у вас нет этого шрифта и вы не хотите его искать и устанавливать, то вполне можно использовать похожий шрифт.

Шаг 3

Щелкните правой кнопкой мыши по слою с текстом и Преобразовать в смарт-объект.

Шаг 4

Дважды щелкните по слою со смарт-объектом, чтобы вызвать окно с настройками стилей слоя. Используйте стиль слоя Наложение цвета(Color Overlay). Используйте белый цвет (#FFFFFF).

Шаг 5

В результате наш текст стал невидимым.

Чтобы это исправить, нужно добавить освещение и тень. Но сперва мы изменим цвет фона, сделав его немного темнее. Для этого используйтеСлой – Новый слой-заливка –Цвет(Layer – New fill layer – Color). с цветом # F7F7F7.

Шаг 6

Дублируйте слой со смарт-объектом, поместите его в новую группу под названиемLong Shadow(Длинная тень) и переместите под исходный слой.

Шаг 7

К слою внутри группыLong Shadow (Длинная тень) примените стиль слояНаложение цвета (Color Overlay). Цвет # 000000.

Шаг 8

К этому же слою примените фильтрРазмытие в движении(Motion Blur). Установите Угол(Angle) 45,Смещение(Distance) 20.

Шаг 9

Для слоя, к которому мы применили фильтр Размытие в движении, непрозрачность снизьте до 2%, чтобы он был едва заметен.

Шаг 10

Чтобы создать эффект длинной тени, нам нужно дублировать и перемещать размытый слой несколько раз. Это не займёт много времени, если использовать горячие клавиши. Сначала увеличьте изображение на 50%, затем, удерживая нажатой клавишуALT, нажмите стрелку вниз один раз, чтобы дублировать слой и сместить его вниз. Затем нажмите клавишу со стрелкой влево, чтобы сдвинуть дублированный слой влево.Клавиши со стрелками обычно смещают на 1 пиксель. Однако, если вы увеличите документ до 50%, тогда он переместит слой на 2 пикселя, что больше подходит для наших нужд.

Шаг 11

Повторите процесс, удерживая клавишу ALT и нажимая стрелку вниз, затем стрелку влево еще 14 раз.

Шаг 12

Чтобы эффект длинной тени выглядел лучше, добавим эффект освещения. Под группойLong Shadow(Длинная тень) создайте новыйслой-заливку Градиент(Слой – Новый слой-заливка – Градиент (Layer – New fill layer – Gradient).

Шаг 13

Используйте градиент от черного к белому по умолчанию и установитеУголна 45 °.

Шаг 14

Установитенепрозрачность(opacity)слоя-заливки градиента на 3%. Это создаст иллюзию ненавязчивого источника освещения.

Шаг 15

Шаг 16

И примените стиль слоя Тень(Drop Shadow) с настройками:

цвет(color) #FFFFFF
режим наложения– нормальный
непрозрачность(Opacity): 80
угол(Angle): -135 °,
смещение(Distance): 3 px,
размах(Spread): 0;
размер(Size) 6px.

Автор урока: Rose

Желаю успехов !

Всегда для Вас: photoshoplesson.ru

У Вас возникло желание показать результаты Ваших трудов ? Выложите свои работы на наш форум !

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

ПОХОЖИЕ УРОКИ:

Выбор цвета и шрифта для рекламы

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

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

Цвет

Прежде всего, определимся, делать рекламу цветной или черно-белой.

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

Согласно исследованиям, воспринимаются наиболее положительно и больше притягивают взгляд следующие цветовые сочетания:

Черные буквы на желтом фоне.
Зеленые буквы на белом фоне.
Красные буквы на белом фоне.

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

Красный – очень интенсивный, «активный» цвет, он сразу обращает на себя внимание. Это цвет страсти, который просто не может оставить наблюдателя равнодушным. Однако с ним надо быть осторожнее, потому что переизбыток будет оказывать нежелательное воздействие: утомит и вызовет раздражение.

Желтый – цвет радости, позитива. Используя его, вы получите и другое преимущество: желтый зрительно увеличивает площадь, на которой используется, придает ощущение объема. Однако не стоит использовать слишком много интенсивно-желтых элементов: этот цвет способен легко утомить.

Голубой, синий – цвета холодной части спектра. Светлые оттенки также придают ощущение объема. Они дают чувство спокойствия (темные оттенки – стабильности и шика), подталкивая вдумчиво и рассудительно вчитываться в информацию.

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

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

Белый – цвет чистоты, придает дополнительный объем, как бы «расширяет» пространство рекламного обращения. Белый – универсальный фон для какого-либо текста, он традиционно используется наиболее широко.

Выбирая палитру для рекламного обращения, следует избегать следующих решений:

Ни в коем случае нельзя давать большие объемы текста «вывороткой» (светлые буквы на более темном фоне). Это очень быстро утомляет и в конечном итоге приводит к тому, что рекламное обращение игнорируют. Однако допустимо использовать этот прием для небольших частей рекламного обращения, дабы особенно выделить их, подчеркнуть значимость подаваемой таким образом информации.
Использование несочетаемых цветов. Зеленые буквы на красном фоне, вне всякого сомнения, очень оригинальное решение. Вот только привлечет оно разве что маленьких детей, которым интересны все яркие предметы. Более взрослая аудитория будет воспринимать такую рекламу как безвкусную, уже не говоря о том, что снижение читаемости информации приводит к ее игнорированию.
Использование бледных оттенков для текста при белом или светлом же фоне. Для того, чтобы «зацепить» аудиторию, пастельные тона не всегда годятся.

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

Шрифт

Современные технологии предлагают колоссальную свободу в выборе шрифта для рекламы.

Однако вы помните, что руководствоваться исключительно своими предпочтениями нежелательно, выше мы уже уточняли, почему.

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

Для рекламы рекомендуется использовать шрифт с засечками. Мы привели для вас пример букв такого шрифта. Посмотрев на рисунок, вы сразу сможете понять, что означает этот термин: вертикальные элементы каждой буквы сделаны с горизонтальными «палочками» (могут быть выполнены как в виде прямоугольников, так и иметь скругления). Эти «палочки» — ориентиры для наших глаз: взрослый человек, обладающий достаточными навыками в чтении, читает «по вершинам» — то есть, взгляд направлен на верхнюю часть букв, по их очертаниям и распознаются знакомые символы.
В целом же шрифт должен быть легкочитаемым (то есть, давать большие объемы информации рукописным шрифтом или буквами с оригинальными очертаниями бессмысленно – изящная вязь может вызвать интерес, но будет препятствовать быстрому прочтению и восприятию информации).
Кегль шрифта следует выбирать исходя из конкретной ситуации. Большие буквы привлекают внимание, выделяют информацию. Однако не стоит давать большие объемы текста только заглавными буквами – это утомляет.
С выделениями текста полужирным начертанием тоже следует быть осторожными: это может утомлять и снижать читаемость.

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

7 Убийственных Ошибок Дизайна Вашего Сайта – GeniusMarketing

Уверенны, что ваш сайт внешне не пугает, а привлекает клиентов?

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

На самом деле, важно другое.

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

Но как же выяснить:

какой дизайн подходит именно вашему сайту?
как найти ошибки и устранить их?

Ответы на эти вопросы вы найдете в этой статье!

Итак…

Что в дизайне вашего сайта может убивать конверсию:

Ошибка №1. Маленький шрифт

Первая и самая распространенная ошибка – это использование маленьких шрифтов в интерфейсе сайта.

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

Исследования показали:

У вас есть только 8 секунд, чтобы заинтересовать посетителя в вашем сайте;

В среднем люди читают только 28% текста на странице.

Чтобы сразу же привлечь внимание пользователей, вам нужно сделать следующее:

Составьте привлекательный и захватывающий заголовок;

Напишите интересный контент, чтобы его захотели прочитать дальше вступления;

Используйте крупные шрифты для заголовков;

Убедитесь, что шрифт вашего текста достаточно большой и легко читается. Оптимально — 16-18 пикселей. Учитывайте также особенности выбранного шрифта. Например, 16 пикселей «Times New Roman» визуально меньше, чем 16 «Arial».

Совет!

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

Ошибка №2. Использование слайдов

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

Как вы думаете, это эффективно? Это на самом деле увеличивает конверсию?

В большинстве случаев ответ – нет!

Как показали исследования, при наличии на сайте слайдов пользователи воспринимают информацию гораздо хуже, а иногда и вовсе не замечают ее. Только 1-2% посетителей нажимают на один из слайдов, а 84% — кликают по первой картинке.

Почему же тогда так много интернет-предпринимателей совершают эту ошибку?

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

Несколько рекомендаций:

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

Ошибка №3. Низкая контрастность текста

Еще одна огромная ошибка – использование букв с низкой контрастностью.

Например:

Светлый шрифт на светлом фоне,
Темный — на темном.

Возможно, для печатной продукции это и подходит, но в интернете – точно нет!

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

Вы всегда можете решить эту проблему — сделайте текст контрастным.

Если фон темный, шрифт должен быть светлым.
Если фон светлый, шрифт — темный.

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

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

В результате:

70% людей хорошо воспринимают черный текст на белом фоне, 19% — средне и 11% — плохо.
Только 12% участников эксперимента отметили, что белый текст на черном фоне воспринимается кое-как; 88% — сказали, что плохо.
82% пользователей считают белый текст на фиолетовом фоне плохим решением; и только 2%-м это сочетание понравилось.
Белый текст на синем фоне — это ужасно, по мнению 96% опрошенных.

Итог: черным по белому гораздо лучше, чем белым по цветному.

Помните об этом, когда будете готовить техзадание для разработчика.

Ошибка №4. Маленький интервал между строк

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

Я вас порадую! Хорошие профессиональные дизайнеры априори выбирают междустрочный интервал, который идеально вам подойдет.

Но что не очень хорошо, разработчики среднего уровня об этом могут вообще забыть.

Как избежать этой ошибки?

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

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

Ошибка №5. Неправильная длина строки

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

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

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

Ошибка №6. Невзрачный призыв к действию

Еще одна ошибка заключается в отсутствии цветового акцента в призыве к действию.

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

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

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

Как выбрать правильный цвет:

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

Ошибка №7. Нарушение основных принципов структурирования страниц сайта

Например, строка поиска товара должна быть вверху, а не внизу. А логотипы и слоганы — в левом верхнем углу, а не в другом месте.

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

Некоторые владельцы сайтов хотят быть супер креативными и стараются придумать все новые и новые способы отображения меню. Но понравиться ли это пользователям?

Свежие креативные идеи — это круто. Но прежде чем отойти от основ и внедрить какую-то новую фишку, подумайте дважды.

Помните, о чем я писал в самом начале? Основная ваша цель — сделать сайт максимально удобным для пользователя!

Заключение

Теперь вы знаете, какие главные ошибки допускают интернет-предприниматели в дизайне своего сайта. И, что самое важное — вы знаете, как их устранить!

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

Ваш сайт станет привлекательней, вы сможете дольше удерживать внимание пользователей и заинтересовывать их в ваших предложениях. А значит, конверсия вырастет!

Ставьте лайк, если вам было полезно!

Есть 4 минуты? В предыдущей статье я рассказываю о простых и быстрых способах написания мощного СТА. Интересно? — Читайте прямо сейчас: 5 Способов Всего за 5 Минут Составить Эффективный Призыв к Действию

7 практических советов по дизайну интерфейсов

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

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

Легко поднять руки и сказать: «Я никогда не смогу сделать это хорошо, я же не художник!» Но, оказывается, есть множество фич, которые вы можете использовать, чтобы улучшить свою работу, без необходимости знаний в области графического дизайна.

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

1. Используйте для создания иерархии цвет и вес шрифта вместо размера

Распространенная ошибка, когда для управления иерархией стиль текста интерфейса слишком сильно зависит от размера шрифта.

«Этот текст важен? Давайте сделаем его больше».

«Этот текст вторичен? Давайте сделаем его меньше».

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

«Этот текст важен? Давайте сделаем его полужирным».

«Этот текст вторичен? Давайте используем более светлый цвет».

Попробуйте придерживаться двух или трех цветов:

Темный (но не черный) цвет для основного содержимого (например, заголовок статьи)
Серый для вторичного контента (например, дата публикации статьи)
Более светлый серый для вспомогательного контента (возможно, уведомление об авторских правах в нижнем колонтитуле)

Аналогично, обычно для интерфейса достаточно два веса шрифтов:

Обычный шрифт (400 или 500 в зависимости от шрифта) для основного массива текста
Более тяжелый шрифт (600 или 700) для текста, который вы хотите выделить

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

2. Не используйте серый текст на цветном фоне

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

Это потому, что эффект, который мы видим с серым текстом на белом фоне, уменьшение контрастности.

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

Есть два способа уменьшить контрастность при работе с яркими фонами:

Уменьшите непрозрачность белого текста

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

Выберите цвет текста, на основании цвета фона

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

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

3. Смещение теней

Вместо того, чтобы использовать большие значения размытия и растягивания, чтобы сделать тени блока (box shadows) более заметными, добавьте вертикальное смещение.

Это выглядит намного более естественно, потому что так имитируется источник света сверху, что мы привыкли наблюдать в реальном мире.

Это относится к внутренним теням, которые вы можете использовать, например, для форм ввода:

Если вам интересно узнать больше о дизайне теней, то руководство Material Design – это фантастический учебник.

4. Используйте меньше границ

Когда вам нужно создать разделение между двумя элементами, попытайтесь не использовать границы.

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

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

Используйте тень для блока

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

Используйте два разных цвета фона

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

Добавьте дополнительный отступ

Увеличение отступа – отличный способ создать различие между группами элементов без необходимости переработки интерфейса.

5. Не растягивайте иконки

Если вы разрабатываете что-то, что может использовать большие иконки (например, раздел «функции» лендинга), вы можете использовать бесплатный набор иконок, таких как Font Awesome или Zondicons, и увеличивать их размер до тех пор, пока они не будут соответствовать вашим потребностям.

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

Хотя верно, что качество векторных изображений не ухудшается, когда вы увеличиваете их размер, иконки, которые были нарисованы в размере 16-24px, никогда не будут выглядеть профессиональными, если вы растяните их в 3-4 раза от их предполагаемого размера. Им не хватает детализации, и они всегда воспринимаются непропорционально «массивными».

Если у вас есть маленькие иконки, попробуйте поместить их в другую фигуру и придайте фигуре цвет фона:

Это позволяет сохранить иконку ближе к ее предполагаемому размеру, при этом заполняя большее пространство интерфейса.

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

6. Используйте акцентные границы, чтобы разнообразить дизайн

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

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

Например, рядом с предупреждающим сообщением:

…или выделить активные элементы навигации:

…или даже в верхней части всего вашего макета:

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

Трудно подобрать цвета? Попробуйте выбрать из ограниченной палитры, как поиск цвета Dribbble, чтобы избежать ощущения перегруженности бесконечными возможностями традиционной палитры.

7. Не всякой кнопке нужен цвет фона

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

Фреймворки, подобные Bootstrap, поощряют это, предоставляя вам меню семантических стилей для выбора, когда вы добавляете новую кнопку:

«Это позитивное действие? Сделайте кнопку зеленой».

«Это действие удалит данные? Сделайте кнопку красной».

Семантика – это важная часть дизайна кнопок, но есть более важное измерение, о котором часто забывают: иерархия.

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

При разработке этих действий важно сообщить их место в иерархии.

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

«А как насчет деструктивных действий, разве они не всегда будут красными?»

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

Используйте красный и смелый стиль, когда это негативное действие действительно является основным действием в интерфейсе, например, подтверждение в диалоговом окне:

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

Белым по чёрному. Разгружаем глаза / Хабр

Все слышали выражение “чёрным по белому написано”. Пришло оно к нам из бумажного мира и как-бы утверждает, что именно это сочетание цветов для текста и фона дает наилучший контраст и читабельность. Предлагаю опровергнуть это предположение и чаще пользоваться противоположной цветовой схемой. В этой статье я не буду убеждать в целесообразности цветового решения “белым по чёрному” (и некоторые утверждения могут быть спорными). Цель этой статьи сделать обзор инструментов, которые позволяют быстро и удобно инвертировать яркие цвета в часто используемых приложениях с целью уменьшить нагрузку на глаза. А также предлагаю инвертировать упомянутое выражение и в эпоху ЖК дисплеев говорить “белым по чёрному ~~написано~~ напечатано”.

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

Может быть, эффективность “чёрным по белому” и справедливо относительно бумаги (кстати, откуда на бумаге взялся именно черный и белый?¹), но когда речь идет о мониторах, то здесь уже нет бумаги и отраженного света. Большинство мониторов являются источниками света и белый фон может быть утомительным для глаз, поскольку белый цвет это максимум светового потока который излучает пиксель (при заданной яркости монитора). Соответственно суммарное световое излучение на глаза наибольшее при белом фоне. Как альтернативный вариант, многим более приятна и менее утомительная противоположная схема — белый текст на чёрном фоне*, который суммарно излучает меньше света. Должен признать, что здесь не всё так просто с излучением, поскольку у человеческого зрения довольно сложный механизм и на восприятия света влияет много факторов как яркость дисплея, тип дисплея, расстояние, внешнее осветление, зрительная адаптация, хроматическая адаптация, а также индивидуальные психофизиологические особенности.

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

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

*А также, когда упоминаю “белым по чёрному” я не имею ввиду абсолютно белый и абсолютно чёрный (и не буду вдаваться в нюансы “чёрности”). Даже наоборот — не рекомендую использовать эти крайности. При слишком большом контрасте сильнее чувствуется рассеивание света в глазах и белые буквы начинают “расползаться” на чёрном фоне. Этот эффект хорошо иллюстрирует оптическая иллюзия иррадиации. Лучше выбирать градации серого (напр., светло серый на темно сером). Главное — удобный контраст. Наверное, правильнее было б называть эту схему ”светлым по темному”, но звучит как-то не очень.

И так, список популярных приложений в которых легко засидеться и где чёрный фон поможет уменьшить нагрузку на глаза:

Браузер

до и после

Chrome (Chromium)

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

Для удобства авто разширения предоставил возможность переключения при помощи горячих клавиш. Лично мне сочетание из трёх клавиш (Ctrl+Alt+?) кажется неудобным. Хром позволяет отдельно настроить горячие клавиши для вызова конкретного расширения: Tools > Extensions, внизу есть Configure Commands (у меня Alt+R).

High Contrast
Более простое решение. Им иногда удобнее пользоваться чем Clearly (напр. , на форумах). Есть возможность быстро создать исключение или задать схему по умолчанию.

HotkeysДля себя настроил следующим образом — горячие клавиши Alt+H, расширение включено (Enabled) постоянно, режим Normal установил по умолчанию, а для нужных сайтов включаю Inverted Color. Так я косвенным образом веду список сайтов, на которых инверсия включается автоматически и не нужно вручную переключать туда-сюда режимы.
Существенный минус расширения в том, что цвет изображений также изменяется.

К сожалению, сочетание клавиш (Shift+F11) нельзя поменять в настройках. Но если очень хочется, то можно копнуть исходники. У меня расширение находиться в:
%LocalAppData%\Chromium\UserData\Default\Extensions\djcfdncoelnlbldjfhinnjlhdjlikmph\0.4_0\
или просто в поиске найти highcontrast.js, довольно уникальное имя для файла. Далее делаем следующие изменения в файлах:
highcontrast.js, строка 12, evt.keyCode == 122 меняем на нужный, и заодно если не нравится Shift, то evt. shiftKey меняем на evt.altKey или evt.ctrlKey.
А также для внешности — в popup.js, строка 100 и в manifest.json, строка 8.

Stylish
Позволяет использовать на посещаемой странице произвольный стиль. Доступно множество готовых на userstyles.org. Минус в том, что их авторы не всегда вовремя обновляют стиль при изменениях на сайте. Полезные тёмные стили: Wikipedia, Google Search, Habrahabr, StackOverflow, YouTube, Facebook.
_{предлагайте(или создавайте свои) тёмные стили для популярных сайтов, добавлю в список}

Theme
Для того, что бы элементы интерфейса браузера не контрастировали с тёмной расцветкой содержимого страницы, лучше также выбрать какую-нибудь тёмную тему. У меня James White.

Что мне не нравиться в Хроме, так это мелькание белого фона при прорисовке страницы. Насколько я понимаю, это происходить на уровне движка, и на пользовательском уровне изменить нельзя, даже если поменять цвета в ОС. Считаю, что на этом месте нужно кинуть камень в огород Хром разработчиков. Почему они цвет канваса определяют самостоятельно, а не берут из системных настроек ОС? То же самое касается Skype и ряда других “серьезных” приложений.

Firefox

Clearly
См. описание выше.

Blank Your Monitor
Похоже на High Contrast.

HotkeysПрисутствует то же неудобство сочетания из трёх клавиш. Можно исправить с помощью Customizable Shortcuts: Options > Shortcuts > Action: Other — bymer-key.

Stylish
См. описание выше.

Шкуры для лиса. У меня FT DeepDark.

Opera

С Оперой не так густо. Всё, что удалось найти, это расширение Contrast Changer. Или более простой вариант в виде bookmarklet.
Как альтернатива Clearly можно использовать онлайн сервис Instapaper и их bookmarklet.
Также с недавних пор появился Stylish разширение.
Подбираем тёмную тему. Например, Opera Simple Dark.
альтернатива StylishНа userstyles.

org каждый стиль можно сохранить в виде userscript. Складываем все скрипты в одну директорию, переименовываем так, чтобы имена файлов заканчивались на “.user.js” и указываем путь в настройках:
Tools > Preferences > Advanced > Content > JavaScript Options > User JavaScript folder. К сожалению, не все стили отображаются также как в Stylish.

Internet Explorer

С выбором разширений для этого браузера все грустно, ничего путевого не нашел. Но похоже, что цвета можно поменять следующим образом — Internet Options > Appearance: Colors, но перед тем надо отметить Accessibillity > Formatting: Ignore colors specified on webpages. Насколько хорошо работает не знаю, лично не пробовал.

Обозреватель документов

Adobe Reader
Позволяет инвертировать цвет документа, но только если не скан/изображение:
Edit > Preferences (Сtrl+K) > Accessibility > Documents Color Options: Replace Document Colors, Use High Contrast Colors.

Удобнее читать во весь экран (Ctrl+L), чтобы не мешали яркие элементы интерфейса (или менять цвет этих элементов в ОС).
HotkeysAdobe Reader запоминает последнюю позицию меню в настройках. Если позиция осталась на Accessibility и её не менять, то можно инвертировать цвет сочетанием клавиш Ctrl+K | Tab | Space | Enter. Можно автоматизировать при помощи макросов.

WinDjView
Быстрый DjVu обозреватель с возможностями аннотации (только под Windows). Позволяет инвертировать цвет всего документа, включая скан/изображения:
File > Settings (Ctrl+,) > Display: Invert Colors. Удобней читать во весь экран (Ctrl+L).

HotkeysWinDjView также запоминает последнюю позицию меню в настройках. Если её не менять, то можно инвертировать цвет сочетанием клавиш Ctrl+, | Space | Enter. Можно автоматизировать при помощи макросов.

Текстовый редактор

Microsoft Word 2010
до и после

Чтобы изменить цвет интерфейса:
File > Options > General > User Interface options > Color Scheme: Black.

Чтобы изменить цвет бумаги (фон), нужно менять цвета в ОС.
Для старых версий офиса ничем не могу помочь.

Google Docs

до и после

С инвертированием цветов в Google Docs отлично справляется chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph>High Contrast и BlankYourMonitor. High Contrast немножко тормозит в больших документах. Есть другой вариант, это минималистичный стиль Write Room, который также убирает панель инструментов (при наведении курсора появляется назад).

Sublime Text

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

Среда разработки

Visual Studio
Расцветка меняется в настройках (Tools > Options > Environment > Fonts and Colors), но это может быть длительная процедура, поскольку тяжело подобрать подходящие цвета с первого раза.

Есть более удобные решения для последних версий (2005/2008/2010/2012). Онлайн приложение Visual Studio Theme Generator генерирует конфигурационный файл (.vssettings) с выбраными цветами. А также сформировалось целое сообщество стилеводов на Studio Styles, где есть выбор среди множества готовых стилей.
В любом случае, перед изменением цветов лучше сделайте бекап текущих настроек (Tools > Import and Export Settings), можно экспортировать исключительно цветовые параметры.

К сожалению, не все цвета меняются из настроек студии и для того, что бы поменять цвет фона в окнах Solution Explorer, Output и т.п., нужно обязательно менять цвет в ОС.

Visual Studio 2010

до и после

Чтобы каждый раз не менять настройки студии, специально для изменения цветовой схемы было создано расширение Visual Studio Theme Editor (добавляет дополнительное меню Theme). В этом посте об использовании, хотя там все довольно интуитивно. Я использую тему Expression отсюда.

Visual Studio 2012
В этой версии разработчики наконец-то включили возможность изменения темы в стандартные настройки, среди которых есть и Dark Theme. Для этой студии также отдельно есть расширение Visual Studio 2012 Color Theme Editor. Зачем? Не знаю. Лично VS2012 еще не видел.

Eclipse
Цветовые возможности похожие с Visual Studio. Можно установить Eclipse Color Theme Plugin и использовать теми (.xml) для этого плагина. Или использовать конфигурационные файлы (.epf). Широкий выбор тем на Eclipse Color Themes. Делайте бекап настроек перед изменениями.

Matlab
Все цвета меняются вместе с цветами ОС (по крайней мере в Win7). Если отдельно от ОС, то есть инструкция для Dark theme for Matlab 2007. Эти же установки подходят для 2010 (предполагаю для других версий так же).

Разное

Windows 7
до и после

Тем, кому не хочется основательно менять цвета всех окон, предлагаю поменять хотя бы цвет taskbar, чтобы он не контрастировал с темным браузером или редактором (Control Panel > Appearance and Personalization > Personalization > Window Color).

Остальные цвета находятся там же в Advanced appearance settings.
В поиске по ключевым словам “dark theme” или “black theme” найдете множество сайтов с темами. Много качественных (не только для Windows) находятся на deviantART.
Первое, что мне подошло это Dark Soft (использовал только стили, бинарные файлы (explorer.exe) не применял).

Linux, MacOS, Windows 8, Windows XP
Как работать со стилями этих ОС не знаком. Добавляйте в комментариях, будем пополнят список.

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

Могу только предложить пользователям Opera Mobile не самое удобное решение — он умеет, как и его старший брат, накладывать произвольные стили.

Еще бонус “белового на чёрном” для мобильных устройств в том, что такое сочетание потребляет меньше энергии (т.к. излучает меньше света). На сколько меньше? Не знаю. Подозреваю, что при длительном чтении весьма ощутимо. Было б интересно увидеть статистику.

VLC Player

до и после

При чём здесь видео к чтению? А ни при чём 🙂
на самом деле, тем, кто смотрят видео уроки и длительные туториалы, где в основном присутствует символьная и/или графическая информация на белом фоне, удобно сделать инверсию цвета. Я так делаю почти для всех курсов Coursera.
Tools > Effects and Filter (Ctrl+E) > Video Effects > Colors > Negate colors. К сожаление горячих клавиш для эффектов нету, и это очень не удобно. Но можно автоматизировать при помощи макросов.

Total Commander

до и после

Цвет меняется в Configuration > Options > Color. Для полностью тёмной версии нужно менять цвета в ОС. Вот мои цветовые параметры, заменять в wincmd.ini:
wincmd.ini

[Colors]
InverseCursor=0
InverseSelection=0
BackColor=0
BackColor2=-1
ForeColor=47360
MarkColor=253
CursorColor=12632256
CursorText=-1
ColorFilter1=*. mp3;*.wav;*.mp2;*.wma; *.aac;
ColorFilter1Color=11452183
ColorFilter2=*.jpg;*.jpeg;*.gif;*.tiff;*.png;*.bmp;
ColorFilter2Color=6667080
ColorFilter3=*.pdf;*.odt;*.txt;
ColorFilter3Color=8421504
ColorFilter4=*.doc;*.docx;*.rtf;*.xls;*.xlsx;*.ppt;*.pps;
ColorFilter4Color=12615680
ColorFilter5=*.avi;*.mpeg;*.mpg;*.mp4;*.vob;*.mov;*.flv;*.wmv;
ColorFilter5Color=16745613
ColorFilter6=*.exe; *.lnk;
ColorFilter6Color=4227200
ColorFilter7=*.zip; *.rar; *.7zip;*.iso;
ColorFilter7Color=39835

Gmail
В наличие есть несколько тёмных тем, они обозначаются чёрным треугольником на иконке. К сожалению, фон открытого письма остается белым. Думал исправить это стилем, но не нашел подходящего. Может кто-то из вас напишет такой стиль? Или по крайней мере обновит Gmail Dark Message Pane?

Не уверен насколько MediaMonkey популярна, но кому-то должно пригодится — VitreousDark.

Контрастность

Как уже упоминалось выше, не используйте слишком сильный контраст (макс.

белый на макс. чёрном). Контрастность ≠ читабельность. Светло серый на тёмно сером более комфортно воспринимается. Какая именно градация серого — подбирайте индивидуально.

Контраст играет роль не только в изображении на дисплее, но и с окружающим миром. То есть, берите во внимание освещение в помещении и старайтесь избегать слишком сильного контраста между освещением и яркостью дисплея/цветов. Особенно это касается полуночников. Если уж работаете в темноте, переключитесь на тёмные цветовые схемы — глаза будут уставать гораздо меньше. Конраст между темной и свтелой темой в темном помещении может отличаться в 20 раз и больше!

Расстояние

Не забывайте о законе обратных квадратов. Если вы привыкли наклонятся к монитору, то при чтении увеличьте шрифт (Ctrl+) и отклонитесь хотя бы на 15см более назад. Это существенно уменьшит количество света излучаемого на глаза. Конечно у монитора слишком большая площадь, чтобы считать его точечным источником света и применять к нему этот закон.

Но как показывает простой эксперимент — при не слишком ярком окружающем освещении, отклонившись назад с расстояния 55см к 75см, освещение от монитора уменьшается в 1.5 раза (а в темноте и то больше). Рекомендуемое расстояние от монитора — 50-70см.

Перерывы

Регулярные перерывы от работы за монитором более полезны для зрения, чем всё вышеперечисленное вместе взято. Но как же это не забывать делать регулярные перерывы?

Мне исключительно понравилось приложение Workrave. Настраивается на разные промежутки времени и разные по длине паузы (напр., 3 коротких через каждых 15мин., 1 длинная каждый час). Умеет блокировать систему на определенное время без возможности отмены, что очень мотивирует встать с рабочего места 🙂 Имеет много маленьких удобностей в настройках. Например, за несколько секунд перед блокировкой выскакивает предупреждение и если уж сильно заняты и сейчас не до паузы, то просто продолжаете работать — приложение заметить активность (клавиатуры, мыши) и отменит блокировку. Также самостоятельно определяет когда вы сами делаете перерыв и сбрасывает свой таймер.

Упражнения

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

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

Второй тип это фейс-пальминг.

фейс-пальмингДа-да, именно оно. Так что каждый раз, когда реагируете на эпикфейл, имеете возможность размять глаза. Этот метод также известен как пальминг. Вокруг этого слова по сей день много спекуляций и неоднозначных личностей. Поэтому сразу оговорюсь, что рекомендую это упражнение не как метод улучшить зрение, а как метод расслабить глаза. Темнота дает возможность “отдохнуть” фоторецепторам, а тепло разогретых рук расширяет сосуды глаз и стимулирует кровообращение. Также это увлажнит глаза, поскольку при работе за монитором человек почему-то моргает в разы меньше. Ну и учитывая, что мозг большинство энергии тратит на обработку визуальной информации, то это также способ немножко расслабить извилины.
Чтобы самому убедится в некоторых утверждениях сделанных в этой статье, я провёл простой эксперимент, в котором измерял количество света излучаемого на глаза в разных условиях. Измерял освещённость с помощью Minolta CL-200A. Фотодатчик держал на уровне глаз развернутым в сторону дисплея.

В качестве светлой схемы взял за пример Google Docs (скрин), в качестве тёмной — Sublime (скрин).
Осветление. Старался смоделировать повседневные ситуации — яркое освещение с помощью люминесцентных ламп (офис), более мягкое освещение с помощью металлогалогенной лампы (дом) и без освещение (ночью). Дневной свет исключил поскольку результат сильно зависит от множества факторов (напр., погода) и имеет большой разброс в измерениях.
Расстояние. За дальнее расстояние взял длину своей руки 75 см. Ближнее — уклон на ~20 см вперед ближе к монитору.
Яркость дисплея. В условиях без осветления проводил измерения дважды — с максимальной яркостью дисплея и, соответственно, — минимальной.
Результаты измерений. Все данные свёл в одну таблицу. Для сравнения использовал соотношение между освещённостями в разных условиях. Как видно с таблицы при „среднем“ освещении отклонившись назад, освещённость уменьшается в 1.5 раза. А в темноте, если использовать темную схему, то освещённость уменьшается в 25 раз.

Disclaimer! Результаты эксперимент не претендуют на универсальность выводов, так как эксперимент делался “на коленке”. Но смею предположить, что похожие результаты будут наблюдаться у множества повседневных ситуациях.

Вот и всё. Надеюсь изложенный здесь материал кому-то пригодиться и поможет хоть немного разгрузить глаза.

_{¹В прошлом большинство бумаги делалось с древесины или растений, в которых содержится целлюлоза и/или лигнин. Именно эти вещества придают бумаге желтоватый цвет, который со временем научились отбеливать. Лигнин также источник ванильного аромата старых книг. А чернила (само слово уже намекает на цвет) уже делались чёрными для лучшей контрастности. В древности сажа была основным сырьем для чернил, потом долгое время были популярны чернила из дубовых орехов.}

Когда следует использовать белый текст на темном фоне

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

Чтение или сканирование?

Когда дело касается текста на сайте, то пользователи читают либо просматривают (сканируют) текст. Чтение — это упор на слова для тщательного осмысления предмета. Сканирование включает считывание слов для более широкого понимания предмета. То, когда вы должны использовать белый текст на темном фоне зависит от того, читают или сканируют пользователи текст.

Текст параграфа

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

Белый также отражает свет со всеми длинами волн. Потому слова и буквы в абзаце текста компактны и близки друг к другу. Когда лист бумаги отражает свет, свет рассеивается и распространяется на соседние слова и буквы. Черный фон делает форму слов и буквы трудными для восприятия. Сравните черный текст, где он поглощает свет вокруг каждого слова и буквы, что делает их как бы выделенными.

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

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

Рубрики, названия и заголовки

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

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

Оригинал на английском: When to Use White Text on a Dark Background

Знаки и цветовой контраст — designworkplan

Цветовой контраст

В статье исследуется значение цвета и способы различения цвета в информационных слоях.

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

Основы цветовых групп: Цветовой круг

Швейцарский художник и дизайнер Йоханнес Иттен создал цветовое колесо, которое представляет собой организацию из 12 цветовых оттенков по кругу, показывающих взаимосвязь между цветами. Цвета представлены следующим образом:

Основные цвета: синий, красный и желтый
Дополнительные цвета: зеленый, оранжевый и фиолетовый
Дополнительные цвета: красно-оранжевый, красно-фиолетовый, желто-оранжевый, желто-зеленый, сине-фиолетовый и сине-зеленый.

Теория цвета Гете представила первое систематическое исследование физиологических эффектов цвета (1810 г.). Наблюдения за эффектом противоположных цветов привели его к симметричному расположению цветового круга, «поскольку цвета, диаметрально противоположные друг другу … это те, которые взаимно вызывают друг друга в глазах». (Гете, Теория цвета, 1810)
Википедия

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

Цветовой контраст по науке

Артур и Пассини описали в своей книге «Поиск пути» 1992 года надежный метод расчета разницы в контрасте между двумя цветами. Формула основана на показаниях светоотражающей способности (LR) в процентах для каждого из двух задействованных цветов. Вычитая более темный цвет из более светлого, разделив разницу на более светлый и умножив на 100, мы получим разницу яркости.Когда разница в яркости составляет 70 процентов или выше, четкость изображения гарантирована. Когда он меньше, разборчивость не может быть гарантирована, и эти цвета не следует использовать в этой комбинации.

Примеры цветов и значения

Черный ассоциируется с силой, элегантностью, формальностью, смертью, злом и тайной.

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

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

Белый ассоциируется со светом, добротой, невинностью, чистотой и девственностью. Считается цветом совершенства.

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

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

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

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

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

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

Рекомендуемые рабочие зоны: предупреждающие знаки, общественные места, использование внутри и снаружи помещений.

Желтый — это цвет солнечного света. Он ассоциируется с радостью, счастьем, интеллектом и энергией.

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

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

Рекомендуемые рабочие зоны: указатели аэропортов, дорожные знаки, общественные места, внутреннее и внешнее использование.

Синий — это цвет неба и моря. Часто это ассоциируется с глубиной и стабильностью. Он символизирует доверие, верность, мудрость, уверенность, интеллект, веру, истину и небеса.

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

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

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

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

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

Рекомендуемые рабочие области: офисные вывески, дизайн паспортных табличек, общественные места, внутреннее и внешнее использование.

Типографика и цветовой контраст

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

Проверить текст и фон на достаточный цветовой контраст

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

Для соответствия уровню AA критерий успеха WCAG 2.0 1.4.3 рекомендует, чтобы обычный текст имел минимальный коэффициент контрастности 4,5: 1, а крупный текст (18 пунктов или 14 пунктов жирным шрифтом) имел минимальный коэффициент контрастности 3: 1. Эти соотношения были рассчитаны с научной точки зрения, чтобы гарантировать, что текст может быть прочитан людьми с умеренно слабым зрением, и что контраст будет достаточным для тех, у кого есть дефицит цвета.При решении проблемы цветового контраста веб-дизайнеры часто задаются вопросом, каких цветов следует избегать. Речь идет не столько о том, чтобы избегать цветов, сколько о том, чтобы цвета, используемые в веб-дизайне, имели соответствующий контраст.

Примеры цветовой контрастности
Сочетание цветов	Цветовой код	Коэффициент контрастности	Мелкий текст	Крупный текст
Черный на желтом OR Желтый на черном	Черный: # 000000, Желтый: # ffff00	19.56: 1	Пройдите AA	Пройдите AA
Синий на оранжевом ИЛИ Оранжевый на синем	Синий: # 0000ff, Оранжевый: # ffa500	4,35: 1	Ошибка AA	Пройдите AA
Белый на фиолетовом OR Пурпурный на белом	Белый: #ffffff, Фиолетовый: # 800080	9.42: 1	Пройдите AA	Пройдите AA
Зеленый на красном ИЛИ Красный на зеленом	Зеленый: # 008000, Красный: # ff0000	1,28: 1	Ошибка AA	Ошибка AA

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

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

Цветовой контраст для лучшей читаемости

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

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

Должен заметить, что я далек от эксперта по доступности. Моя цель здесь — просто показать, что немного усилий может иметь большое значение, когда дело доходит до выбора цветов с учетом оптимальной читаемости. Посетите W3C для более подробного объяснения. Также ознакомьтесь с Contrast Rebellion, чтобы получить интересный взгляд на проблему контрастности.

1. Установите цветовую палитру (с оттенками, тонами и оттенками)

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

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

Установка оттенков, тонов и оттенков. Из предыдущей статьи «От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков».

2. Найдите хороший анализатор цветового контраста

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

Colorable Брента Джексона (Демо)

3. Изучите контраст основного текста

Во-первых, полезно установить правильные значения основного текста. Обычно я начинаю с нейтральной цветовой палитры и стремлюсь к максимально светлому серому с рейтингом WCAG AAA (соответствует Разделу 508). Рейтинг AAA обеспечивает оптимальную читаемость, а некоторая яркость позволяет сделать текст мягким.Обратите внимание, что названия цветов — это произвольные названия, которые я присвоил цветам (из предыдущей статьи «Придание цветам более ярких названий»).

Тестирование нейтральной цветовой палитры в виде текста на белом фоне (из предыдущей статьи: Оттенки серого — да, правда.)

# 373D3F или «Ворон» — мой самый светлый серый цвет в рейтинге доступности AAA.

4. Оценить яркость кнопки и ссылки

Следующим шагом будет поиск подходящего варианта цвета для кнопок и ссылок (действий).Здесь я придерживаюсь немного другого подхода. Вместо того, чтобы использовать AAA, я ищу AA (разумный стандарт, к которому нужно стремиться), чтобы я мог получить более яркий цвет, контрастирующий со статическим текстом и привлекающий внимание к важным ссылкам. Для этих целей тестирую белый цвет (#FFFFFF) в сочетании с разными цветами.

У синих и красных цветов больше шансов на успех, а у желтых и зеленых — меньше.

Я выбрал «Darkest Alice» (# 107896) для хорошего сочетания контраста и яркости.«Рубин» (# C02F1D) тоже неплохой вариант.

5. Установите различные сочетания цветов

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

Мой базовый пример с темно-серым текстом «Ворон» и ярким синим цветом «Самая темная Алиса» для ссылок и кнопок.

Пример с темными тенями на более светлом фоне.

Пример с освещением на более темном фоне.

6. Документируйте в своем руководстве по стилю

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

Образец документации для руководства по стилю.

Черный текст на белом фоне — не единственный вариант

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

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

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

7 смертных грехов веб-дизайна, которые вы, возможно, совершаете

Веб-дизайн — непростая тема.

Люди по-разному относятся к тому, что является хорошим веб-дизайном, а что нет.

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

Оба ответа верны в зависимости от того, о какой отрасли или бизнесе вы говорите. Но как понять, что подходит именно вам? И как сделать так, чтобы ваш веб-дизайнер знал, о чем говорит, и не делал ошибок?

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

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

Ошибка №1: слишком мелкие шрифты

Первая ошибка, которую делают люди, — это создание сайта со слишком маленькими шрифтами.

Причина этого в том, что в свое время на большинстве веб-сайтов использовались мелкие шрифты. Стандарт был где-то около 12 пикселей (9 пикселей), и почти все следовали этому стандарту.

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

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

Исследование показало, что средняя продолжительность концентрации внимания людей составляет 8 секунд, что на одну секунду меньше, чем у золотой рыбки. Это вообще возможно? Flickr: фотограф23 , Лицензия Creative Commons

Чтобы сразу привлечь внимание людей, вам необходимо сделать следующее:

Составьте отличные заголовки, привлекающие внимание читателей.
Напишите интересный контент, который заставит их прочитать более 28% того, что вы написали.
Используйте шрифты заголовков, достаточно большие, чтобы привлекать внимание.
Убедитесь, что основной шрифт достаточно большой для чтения, чтобы читатели не сдавались, потому что они устали щуриться.

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

Вот несколько примеров исключительного веб-дизайна с большим размером шрифта:

Vero

Заголовок: 41 пикс.
Тело: 18 пикселей

Блог Help Scout

Вступительный текст: 26 пикселей
Тело: 19 пикселей

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

Также необходимо помнить, что не все шрифты имеют одинаковый размер. Шрифт Arial размером 16 пикселей может быть меньше, чем версия другого шрифта на 16 пикселей. Это то, о чем вам нужно знать при выборе размера шрифта, поэтому вы не выбираете произвольно 19 пикселей, как это сделал другой сайт, только для того, чтобы узнать, что ваша версия 19 пикселей не такая большая.

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

Совет от профессионалов: Чтобы определить размер шрифта, который вы хотите использовать, в зависимости от веб-сайтов, которые вам нравятся, загрузите расширение WhatFont для Google Chrome. Это плагин Chrome, который позволяет очень легко нажимать на шрифты, чтобы узнать, какой тип и размер шрифта использует веб-сайт.

Ошибка № 2: перемещение ползунков

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

Насколько они эффективны? Они обращаются? Являются ли они лучшим способом представить вашу информацию клиентам?

В большинстве случаев это не так.

Еще в 2017 году Пип Лая написал для ConversionXL статью под названием «Не используйте автоматические карусели или слайдеры изображений, игнорируйте причуду».

В статье он цитирует Криса Говарда из WiderFunnel и Тима Эша из SiteTuners, которые говорят следующее:

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

А…

Вращающиеся баннеры — это абсолютное зло, и их следует немедленно удалить.
-Тим Эш

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

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

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

Второе исследование было проведено в Университете Нотр-Дам. Они обнаружили, что только около 1% посетителей нажимали на ползунок, при этом 84% кликов нажимали на элемент на первой позиции.

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

В 2019 году веб-дизайнер Джо Ринальди прокомментировал: «Если вы в настоящее время используете слайдер на своей домашней странице или рассматриваете его для будущего редизайна веб-сайта […], откажитесь от слайдера» и замените его чем-то более эффективным.

Какой смысл в слайдере веб-сайта, если только 1% людей нажимает на элемент, который занимает самую ценную часть вашей домашней страницы, особенно когда 84% этих кликов в любом случае приходится на первый элемент? Зачем раздражать людей движением, за которым сложно уследить? Почему бы не предоставить им один вариант на выбор, поскольку большинство все равно щелкает первый элемент?

Так почему же так много людей используют ползунки, если они кажутся такими неэффективными?

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

Но владельцы веб-сайтов должны подумать о том, будут ли они эффективны и будут ли они лучшим способом донести информацию на своем сайте. Пип Лаха, Крис Говард, Тим Эш и многие другие умные специалисты по интернет-маркетингу больше не считают, что дело.

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

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

Он и его деловой партнер подошли ко мне и сказали: «Привет, мы хотим создать веб-сайт… и мы хотим, чтобы на главной странице был слайдер с этой информацией», а затем он показал мне листовку, которую они раздают в школах для рекламы их обслуживание. Флаер был красивым, невероятно хорошо передавал информацию и, к удивлению, удивлению, не содержал слайдера (эти надоедливые ползунки, похоже, не подходят для мира печатных листовок).

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

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

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

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

Опять же, если вы не хотите верить мне на слово, вот несколько статей, которые подтверждают эту точку зрения, вы можете прочитать:

Ошибка № 3: Низкоконтрастные шрифты

Еще одна большая ошибка, которую делают люди, — это использование шрифтов с низкой контрастностью.

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

Вы всегда хотите, чтобы содержание вашего веб-сайта было максимально легко читаемым. В упомянутой выше статье Smashing Magazine говорилось, что количество света, проходящего через наши глаза в 40 лет, составляет лишь половину того количества света, которое проходит через наши глаза в 20 лет. К 60 годам оно падает до 20%. , почти 9% американцев имеют слабое зрение.

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

Низкая контрастность шрифтов — всегда плохая идея.

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

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

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

Вот несколько примеров отличного контраста шрифтов:

Блог Help Scout

Evernote

Это пример хорошего контраста на изображении, что непросто.

Harry’s

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

Дополнительный совет: Важен не только высокий контраст, но и экономное использование реверсивного шрифта. (Обратный шрифт — белый текст на черном (или цветном) фоне вместо черного текста на белом фоне.)

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

Согласно исследованию, ниже приведен список уровней понимания для разных цветов и фонов:

Черный текст на белом: 70% хорошо, 19% удовлетворительно, 11% плохо
Белый текст на черном: 0% хорошо, 12% удовлетворительно, 88% плохо
Белый текст на фиолетовом: 2% хорошо, 16% удовлетворительно, 82% плохо
Белый текст на синем фоне: 0% хорошо, 4% удовлетворительно, 96% плохо

Разве это не невероятно? Результаты для черного текста на белом фоне по сравнению с белым текстом на цветном фоне почти противоположны!

Выводы:

Всегда не забывайте использовать высококонтрастные шрифты, но также…
Экономно используйте реверсивный тип.

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

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

Ошибка №4: неправильная высота строки текста

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

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

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

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

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

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

Ошибка № 5: слишком длинная строка

Еще одна ошибка, которую вы можете сделать, — это создание слишком длинных строк текста.

Итак, какова оптимальная длина строки?

Институт Баймара опубликовал статью, в которой говорится, что лучше всего от 50 до 60 символов в строке, при этом допускается до 75 символов.

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

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

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

В то время, когда была написана упомянутая статья, Институт Баймарда решил эту проблему, установив максимальную ширину для своего текста в 516 пикселей, что оставляет в среднем 65 символов на строку при размере шрифта 18 пикселей.Это создает отличные впечатления от чтения, как вы можете видеть на изображении ниже.

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

Ошибка № 6: Отсутствие акцента для призыва к действию

Следующий грех веб-дизайна — отсутствие акцентного цвета.Вот что я имею в виду:

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

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

Вот несколько практических правил выбора цвета акцента:

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

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

Ошибка № 7: Общие нарушения принципа проектирования

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

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

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

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

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

Заключение

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

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

К вам: Пропустил ли я какие-нибудь смертельные грехи веб-дизайна, которые вы часто видите совершенными в Интернете?

Об авторе: Джо Патнэм — основатель ConversionEngine, агентства, которое объединяет CRO с PPC, чтобы помочь предприятиям проводить прибыльные платные рекламные кампании.Он помог организациям в 10 раз увеличить SEO-трафик, вдвое снизить стоимость приобретения и в 20 раз увеличить количество потенциальных клиентов из Google Рекламы. Посетите сейчас, чтобы узнать больше.

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Создание разборчивого белого на белом тексте с помощью Photoshop — Medialoot

Тонкие методы освещения и длинная тень

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

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Шаг 6

Шаг 7

Шаг 8

Шаг 9

Шаг 10

* клавиши со стрелками обычно смещаются на 1 пиксель, однако, если вы увеличите масштаб документа до 50%, он переместится на 2 пикселя, что больше подходит для наших нужд, и в результате потребуется вдвое меньше дубликатов.

Шаг 11

Шаг 12

Шаг 13

Шаг 14

Шаг 15

Шаг 16

Результат

Темный режим лучше для ваших глаз?

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

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

Читаемость

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

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

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

Какова мораль этой истории? Для наших электронных книг мы рекомендуем использовать «светлый режим» или темный текст на светлом фоне.

Растяжение глаза

До сих пор нет ответа на вопрос, лучше ли темный режим для снижения нагрузки на глаза, но мы можем подтвердить несколько вещей:

Темный режим позволяет снизить нагрузку на глаза в условиях низкой освещенности.
100% контраст (белый на черном фоне) затрудняет чтение и вызывает большую нагрузку на глаза.
Может быть сложнее читать длинные фрагменты текста с темой «светлый-темный».

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

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

Итак, каков вердикт?

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

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

Также приходите к нам. Лучший способ сохранить ваши глаза в безопасности и здоровье — это регулярно их проверять.

alexxlab

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное