Перевод статьи UX-дизайнера Мериэл Москерьолы о том, почему не стоит сильно увеличивать шрифт для создания контраста, применять несколько оттенков чёрного и как расчёты помогают подобрать цвета.
Перевод статьи UX-дизайнера Мериэл Москерьолы о том, почему не стоит сильно увеличивать шрифт для создания контраста, применять несколько оттенков чёрного и как расчёты помогают подобрать цвета.
Комментарий недоступен
Ну зачем переводить бред? Многие вещи вырваны из контекста, многие подходят только для одной определенной цели, а не дизайна в целом, что-то вообще подходит ТОЛЬКО для англоязычной аудитории.
Пример с цветом текста и прозрачность разработан не для того, чтобы глаза не уставали, а для быстрой замены цвета на другой с сохранением контрастности, читаемости и без ручного подбора. Гугл 100 раз об этом говорил, но все равно находятся люди, которые воспринимают мателиал как иконостас без возможности шага влево и вправо.
Количество символов в строке напрямую зависит от размера шрифта.Тем более, что диапазон 45-60 символов - это для английского языка http://prntscr.com/j6sxfj
Не очень понятна претензия — если внимательно прочитать, то будет понятно что сначала идет утверждение "черный цвет текста напрягает глаза", а затем "чтобы не плодить оттенки серых, используйте прозрачность". Первое — вопрос личного вкуса и характера дизайна (ну и все-таки есть определенная доля правды в утверждении что избыточный контраст напрягает зрение), второе — удобная практика, да, в том числе и для того чтобы сохранять постоянный контраст с фоном.
Количество символов в строке напрямую зависит от размера шрифта.Правильным будет выбирать длину строки, исходя из размера шрифта и комфортного количества символов. Для русского их в строке должно быть больше, да, так как среднее слово содержит больше знаков чем в английском.
Противоречивая статья. «Чем сильнее контраст, тем лучше.» «Используйте калькулятор, чтобы проверить доступность» («check its accessibility» — вообще почему-то не переведено) и в другом месте «Черный цвет текста (#000) вызывает переутомление глаз, поэтому хорошим решением будет выбрать темную альтернативу простому черному,» как камнем по голове. Лол, что?!
Люди годами читали и читают чёрный на белом. Контрастный текст лучше читается, особенно когда есть проблемы со зрением (или с экраном, освещением и тому подобным). А здесь предлагается ухудшить восприятие. Если у кого-то утомляются глаза, то надо настроить яркость экрана и окружение. Этим вообще не должен за всех заниматься дизайнер.
«Зебры» тоже не лучший совет: они создают мельтешение и в плохих условиях их также может быть попросту не видно, так как фон очень бледный (иначе сильно снизится контраст).
При долгом чтении #111 или #222 воспринимаются глазом лучше, чем #000
Люди годами читали и читают чёрный на белом. Бумага не светится, в отличие от экрана)
«Чем сильнее контраст, тем лучше.» и в другом месте «Черный цвет текста (#000) вызывает переутомление глазОчевидно же что в первом случае речь про контраст в размерах, а во втором про цветовой
Хотела поставить минус за контрастность (слишком яркая действительно уматывает глаза. Присмотритесь к разным сайтам или проведите эксперимент: чистый черный на белом читается менее приятно, чем темно-серый. С белым на черном так же.). Но так же хочу поставить плюс за зебры в списке. Они мало где оправданы (если вообще хоть где-то).
Вам не нужно много оттенков чёрногоИщем всем отделом оттенки чёрного, нашли один
Тем временем в SAP
Режимы наложения в макетах для вэба... Ммммм😏
Can I Use CSS background-blend-mode?
Много спорно. Что точно бросается в глаза:
Пункт 9 ("Вот решение — используйте эти цвета как акцентные")
Без сопоставления с тем, что будет вокруг этого объекта, принятие решения невозможно (нужно ли поднять визуальный приоритет этого объекта-кнопки или нет относительно окружения).
Пункт 10 ("Это поможет избежать помех при чтении такого списка").
Это точно понизит визуальный приоритет заголовка этого списка, что в ряде случаев может стать проблемой (сначала пользователь увидит чекбоксы, которые бессмысленны для него до тех пор, пока он не в курсе что это за список, какой у него заголовок).
Комментарий недоступен
в 5 варианте "do" читается хуже первого, потому что серый текст меркнет из-за голубых полосок. надо сделать основной текст черным. да ладно, автор?
Все по лекалам дриббла, ага. Причем здесь интерфейс — непонятно.
Нормальная статья. Отлично заходит если человек вообще ничего про шрифты не знает. Люди, которые везде черный текст лепят явно трендов не знают. Важный вывод статьи в том, что визуальное пространство надо оформлять с добавлением воздуха, правильного размещения объектов и цветового кодирования. Пример с иконкой вообще классный. Так как многие просто тупо лепят контрастную хрень на фоне
это что такое то? в 10 пункте булеты должны быть с отступами по отношению к подзаголовку (в правую сторону, если не понятно), но не наоборот.
автор вы профан даже в канонических вопросах типографики и иерархии.
еще вопрос по верстке. кто-нибудь когда-нибудь видел верстальщика, который ставит опасити на body текст? вся эта статья какой-то полубред.
Два слова: Material Design)
С этим вообще не согласен, но в целом статья годная.
да всем вообще пофиг
Почему есть дизайнеры, которые не зная этого всего, рисуют круто? Потому что в статье фигня или у художников это в подсознании работает и я без навыков нарисую круто только благодаря этим правилам?
Опять завезли переводы статеек с медиума от непойми кого
а Multiply для текста уже придумали, как реализовывать?
очевидно же, что текст добавлять картинкой (привет, 2003-й)
CSS Compositing and Blending позволяет это сделать, но поддержка ограниченная конечно.
Там же речь о затемнении фона. Экспортироваться это будет одной картинкой с уже затемненной областью под текст, сам текст ставится поверх в верстке
Меня раздражает этот чистый белый цвет для фона. Ей богу слепит глаза хуже солнца. Вот 240-220 уже намного приятнее. Но вообще лучше всегда dark версию делать. Весь про софт от Adobe до Autodesk давно уже понимает почему темный дизайн лучше для глаз.
Срочно нужен web-дизайнер для создания лого и сайта, напишите мне, кто сможет этим заняться +79963032823 (what's up, telegram)
Не согласен с последним пунктом. Визуальная иерархия текста имеется. Булеты на вылет добавляет графического шума, что увеличивает когнитивную нагрузку.