Как одна особенность мешает нам добиваться поставленных целей Если бы я каждое утро спрашивал себя, хочу ли идти на тренировку, то я бы не занимался спортом. Я просто не задаю себе такой вопрос: пью кофе, одеваюсь и выхожу на улицу, вне зависимости от погоды и количества часов сна. Это позволило мне заметно улучшить форму и…
Вы тщательно продумываете рассылку, которая поможет вам продать тонну продуктов. Вы создаете красивый HTML-шаблон, пишете привлекательный текст и проводите A / B тесты. Вы реализуете очевидный и убедительный призыв к действию. И после всей этой работы целевая страница, на которую приходят пользователи с вашего электронного письма, имеет высокий показатель отказов или, что еще хуже, низкий…
Шрифты являются одним из наиболее важных дизайнерских решений, которые необходимо учитывать при разработке фирменного стиля. Лучшие шрифты заставляют вас чувствовать, что вы стали настоящим другом, а худшие — как незнакомец, который не оставит вас в покое.
Согласованность означает, что все буквы, цифры и любые другие используемые символы сохраняют одинаковый внешний вид. Если буква «A» шрифта имеет засечки, мы ожидаем, что у буквы B тоже будут засечки, и так далее.
Аналогично, если шрифт имеет толстые буквы с мягкими закругленными углами, но этот стиль не распространяется на цифры или знаки препинания, шрифт кажется непоследовательным и даже неполным.
Эта статья была изначально написана Алексом Бигманом и опубликована в 2012 году. В нее были добавлены новые примеры и информация.
В 2к20 поры бы уже раз и навсегда выучить разницу между тире, минусом и дефисом, а также какой знак когда правильно использовать. Тире — один из самых неоднозначных знаков препинания. В разных шрифтах оно выглядит по-разному, а типографы спорят, какими пробелами его отбивать и надо ли отбивать вообще. Единого рецепта нет, поэтому важно обращать внимание на то, как этот знак выглядит в выбранном шрифте…
В конце декабря, не знаю у кого как, а у меня вся лента была в итогах. Оказывается, очень многие мои друзья ставят себе цели, а в конце года делают отчет: чего смогли достичь, чего нет, что планируют на следующий год… С одной стороны смотришь на все это, думаешь: молодцы какие! Потом думаешь: может, понты просто……
«Ну и что?», — можете подумать вслух… Ну, до того, как «пользовательский опыт» был принят на должность, как В качестве методологии или просто как части процесса «пользовательский опыт» просто означал опыт пользователя, как у человека, испытывающего продукт или услугу . Конец истории. Термин «дизайн пользовательского опыта » появился в начале 90-х годов, когда Дон Норман…
Екатерина Рокитян, железный дизайнер Redmadrobot Design Lab, изучила приложения и сайты благотворительных организаций и опросила благотворителей, чтобы найти стоп-факторы пожертвований и UX/CX-механики, которые позволяют их преодолеть. Конкуренция за внимание пользователя только усиливается, поэтому примеры полезны для любого бизнеса. Сложно расстаться с деньгами, когда вас просят пожертвовать на что-то абстрактное. По данным Росстата, безоговорочно доверяют благотворительным…
За последние годы я написал много обзоров на разные дизайнерские вакансии (для ясности, скажу, что здесь речь о продакт-дизайнерах. О UX / UI-дизайнерах. Как бы вы их ни называли, вы меня поняли). Многие компании до сих пор требуют от вас наличия диплома дизайнера. Почему-то это всё ещё для них важно. И вот к таким компаниям у меня только один вопрос: а вы уверены, что наличие диплома гарантирует, что перед вами достойнейший из кандидатов? А,…
Марк Старс из Джеймса Кроппера объясняет, как мода вышла из моды среди дизайнеров в Великобритании, с новым порядком влияния на цветовые тренды в игре. На прошлой неделе Pantone представили свой «Цвет года 2020», классический синий. Это было небольшим сюрпризом для команды в Джеймса Кроппера который в начале этого года опросил более 500 дизайнеров брендинга и…
Одним из самых фундаментальных понятий в CSS являются цвета. Это базовое понятие повсюду, но в этой статье мы сосредоточимся на его представлении при таргетинге на браузеры. .
В Интернете каждый цвет представляет собой комбинацию из 3 цветов: красного, зеленого и синего, как будто каждый пиксель на экране состоит из трех лампочек: зеленой, синей и красный. Наиболее распространенным методом представления цветов в CSS является метод «шестнадцатеричных цветов», а следующим распространенным методом является метод RGB / RGBA. Два подхода отличаются в способе представления значений этих цветов.
пикселей вид с близкого расстояния
Метод шестнадцатеричных цветов — каждый из трех цветов представлен с использованием двузначного шестнадцатеричного числа и ' ] # 'знак предшествует трем цифрам. Каждое из двузначных чисел определяет интенсивность соответствующей «лампочки». Первое двузначное число соответствует красной лампочке пикселя, второе — зеленой лампочке, а последнее — синей лампочке. Мы также можем добавить двухзначное число в конце, которое будет определять непрозрачность цвета.
Как вы, вероятно, знаете, шестнадцатеричное основание означает, что значение цифры может быть между 0 и 15, со значениями 10 –15, представленный буквами от A до F. В каждом из двузначных чисел наименьшее число 00 означает, что лампа выключена, а наибольшее значение FF является самым сильным светом этого определенного цвета. Есть 256 уровней интенсивности для каждого из этих трех цветов. С этими тремя лампочками, которые составляют каждый пиксель цвета, мы можем создать любой цвет, отображаемый на нашем экране. Две необязательные цифры, которые определяют непрозрачность цвета, также представляют собой двузначное шестнадцатеричное число. Наибольшее значение FF означает полную непрозрачность, а наименьшее значение 00 означает полную прозрачность. Числа между ними делают элемент полупрозрачным, то есть цвет смешивается с цветом фона.
Вот пример красного цвета (только первая лампочка включена остальные лампы выключены):
Метод цветов RGB / RGBA — этот метод также основан на сочетании каждого красного, зеленого и зеленого цветов. синий. Однако есть два отличия этого метода от шестнадцатеричного. Во-первых, этот метод использует десятичные значения, а не шестнадцатеричные значения предыдущего способа. Во-вторых, синтаксис — это не строка чисел, а функция — rgb () или rgba () . Функции принимают трехзначное число от 0 до 255 для каждой из красных, зеленых и синих «лампочек». 0 означает, что лампа выключена, а 255 означает, что лампа имеет полную яркость. Функция rgba () принимает четвертый параметр — непрозрачность. Его значение представляет собой десятичную дробь, где 0 означает полную прозрачность, а 1 означает полную непрозрачность, а дробные части между ними — это процент прозрачности элемента.
Работа с методами, основанными на сочетании красного, зеленого и синего цветов, ставит несколько сложных задач. Во-первых, этот метод не интуитивен — это не то, как наши умы воспринимают цвета. Когда мы смотрим на цвет, наш мозг не разделяет его на красный, зеленый и синий. Поэтому, когда вы пишете цвета таким образом, мы не можем легко распознать цвет по его номеру RGB, будь то шестнадцатеричный или десятичный.
Еще одна потенциальная проблема — это обслуживание. Веб-дизайнерам иногда может потребоваться множество оттенков каждого цвета, например, 30 типов синего, 20 типов оранжевого и т. Д. При попытке сохранить эти многочисленные вариации с помощью переменных CSS мы можем получить слишком много переменных. Что еще хуже, даже если цвета могут быть разных оттенков одного и того же цвета, их RGB-представления никак не связаны. Поэтому, если веб-дизайнер хочет изменить синюю схему на зеленую, ему может потребоваться обновить десять или более отдельных переменных CSS.
Цветовой метод HSL / HSLA — HSL обозначает оттенок насыщенность и легкость HSL работает так же, как наш мозг воспринимает цвета: цвет, которым мы можем манипулировать с легкостью и насыщенностью.
Свойство оттенка — это цвет, выбранный из палитры. из 360 цветов. Цвета задаются по кругу, и каждый оттенок — это градус в цветовом круге. Выбранный цвет — это основа, из которой мы будем создавать другие оттенки, добавляя насыщенность, яркость или оба.
Свойство насыщенности описывает насыщенность цвета. 0% означает отсутствие цвета (цвет будет серым), а значение 100% покажет цвет в наиболее ярком цвете. Лучше всего использовать значение в диапазоне 10% — 100%, поскольку это позволит нам увидеть основной цвет.
Свойство Lightness описывает интенсивность освещения. Экстремальные значения устранят цвет: 0% будет выглядеть черным, а 100% будет выглядеть белым. Поэтому мы предпочитаем использовать числа от 10% до 90%, поскольку это позволит нам видеть основной цвет.
Свойство альфа-канала (необязательно) — использование HSLA вместо HSL позволяет нам контролировать непрозрачность цвета. Лучше использовать значения в диапазоне 10% — 100%, поскольку это позволит нам увидеть основной цвет (0% означает прозрачный цвет).
Метод HSL решает обе проблемы, которые мы упоминали ранее. Это соответствует тому, как наш разум воспринимает цвета, и это также решает проблему обслуживания. Теперь веб-дизайнеры могут быть удовлетворены, выбрав всего 3–5 базовых цветов и используя их для создания любого количества вариантов цвета.
Теперь, когда мы понимаем, из чего состоит цвет HSL, все, что нам нужно, это структурировать его элегантно.
Веб-дизайнер может выбирать от трех до пяти базовых цветов из палитры оттенков, давая нам от 3 до 5 чисел, которые являются градусами на цветовом круге палитры оттенков.
Эти цвета будут основой, на которой веб-дизайнер может создавать множество комбинаций с параметрами яркости, насыщенности и, возможно, непрозрачности.
Метод HSL дает веб-разработчику и веб-дизайнеру единое целое. место, в котором они контролируют основные цвета сайта. Именно здесь они могут проверять и обновлять цвета в соответствии со своими потребностями.
Базовые начальные точки для параметров насыщенности, освещенности и непрозрачности
Поскольку существуют бесконечные цветовые комбинации, которые мы можем создать из этих базовых цветов, я создал интеллектуальные значения параметров для запуска:
Насыщенность — начинаются со значения по умолчанию 50% — средний диапазон (должен быть значение больше 0%. Поскольку при значении насыщения 0% цвет будет выглядеть сероватым).
Освещенность — начинается со значения по умолчанию 50% поскольку оно должно быть значение больше 0% и меньше 100%; в противном случае цвет будет выглядеть как черный или белый.
Непрозрачность — s tart со значением по умолчанию 100% . Если вы работаете с HSLA, у вас есть параметр непрозрачности, и лучше всего использовать полную непрозрачность. Значение 100% означает полную непрозрачность, а значение 0% сделает цвет прозрачным.
Чтобы элегантно создавать вариации цвета, мы сначала определим степень оттенка каждого базового цвета как переменную CSS , Пример:
Вот и все! Мы создали умную цветовую схему с цветами HSL / HSLA, структурируя ее с теми же базовыми цветами. Преимущество состоит в том, что теперь мы можем легко обновлять базовые цвета, соответствующим образом затрагивая все их зависимые цвета.
Результат палитры цветов HSL
Эта возможность служит как веб-разработчикам, так и веб-дизайнеры. Они оба могут играть с этими основными цветами и видеть, как веб-сайт меняет все свои цвета с этими минимальными основными цветами.
Пример Codepen Live
Создание более общих правил для параметров HSL / HSLA
Если вы веб-разработчик, который хочет сделать еще один шаг вперед, вы можете сгенерировать CSS-переменные для остальных параметров (насыщенность, яркость и непрозрачность), чтобы настроить таргетинг на наиболее часто используемые значения. Например:
: root { / ** обычно используемые уровни насыщенности / яркости / непрозрачности ** / - уровень насыщенности1: 20%; - уровень насыщения2: 50%; / * средний диапазон - нормальный * / - уровень насыщенности3: 80%;
- уровень освещенности1: 75%; - уровень освещенности2: 50%; / * средний диапазон - нормальный * / - уровень освещенности3: 35%;
- уровень непрозрачности1: 100%; / * нет непрозрачности - нормальное * / - уровень непрозрачности2: 80%; - уровень непрозрачности3: 60%; }
Теперь вы Можно использовать различные комбинации этих параметров, чтобы создать лучшую синхронизацию между другими цветами. Пример:
- color1-light: hsla (var (- base-color1), var (- saturation-level2), var (--lightness-level1), var (- opacity-level1));
Полный пример на CodePen
Вот и все. Надеюсь, вы ' Мне понравилась эта статья и я узнал из моего опыта использования лучшего метода для работы с цветами в Интернете. Если вам понравился этот пост, я был бы признателен за аплодисменты и публикацию: -)
Вы можете подписаться на меня через Twitter .
Другие мои сообщения CSS: Новая эволюция адаптивного дизайна Новые логические свойства CSS! CSS Position Sticky — как это действительно работает!
Кто я? Я — Элад Шехтер, веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Вы можете найти меня в моих группах на Facebook: CSS Masters CSS Masters Israel