Веб-дизайн и SEO: все, что должны знать дизайнеры

Статьи по дизайну

UX-дизайн и надежная стратегия SEO неразрывно связаны. Дизайн призван повысить удобство работы пользователей, вдохновить пользователей проводить больше времени на ваших страницах и обеспечить, чтобы они не покидали ваш сайт разочарованными. Таким образом, он сводит к минимуму показатели отказов и превращает ваших посетителей в потенциальных клиентов и, в конечном итоге, в продажи. Однако создание безупречного сайта…

Эффект дуотона: что это такое и как создать дизайн дуотона

Статьи по дизайну

«Дуотон» — это забавное слово. Его многочисленным гласным, катящемуся тону и коротким слогам присуща музыкальность. Но это также слово, которое часто ассоциируется с «модным», словом, которое иногда сочетается с ушком.

Duotones "width =" 700 "height =" 410 "/> <figcaption> Иллюстрация Duotone от OrangeCrush </figcaption></figure> <p> В то время как дуотоны являются современной тенденцией, эффект дуотонов имеет долгую историю в дизайне. И, несмотря на свою ограниченную цветовую гамму, он может иметь сотни воплощений, от преуменьшенного до эклектичного, и обладает неограниченным творческим потенциалом, чтобы предложить дизайнерам и их проектам. </p> <p> При всей этой двухцветной схеме мы проведем вас через правильное проектирование дуотонов. </p> <h2> Что такое дуотоновый дизайн? <br /> — </h2> <p> Дизайн Duotone относится к творениям, которые состоят из двух контрастных цветов. Подобно тому, что он описывает, слово «дуотон» состоит из двух частей: «дуэт», означающий «двойной», и «тон», означающий цвет. В фотографии тонирование — это процесс перекрашивания изображений в градациях серого, а двойное тонирование описывает это с помощью двух цветов — замены темных на один и световых на другой. </p> <figure data-id= 1967 Плакат Джефферсона "Самолет" и "Джими Хендрикс" от Клиффорда Чарльза Сили "width =" 608 "height =" 960 "/> <figcaption> 1967 Плакат Джефферсона" Самолет "и Джимми Хендрикс от Клиффорда Чарльза Сили для" Филмора "</figcaption></figure> <h3> История дуотонов </h3> <p> Дуотоны существуют до тех пор, пока существуют камеры. </p> <p> В девятнадцатом веке наиболее распространенным воплощением эффекта дуотона была фотография сепия, где различные оттенки коричневого цвета использовались частично в качестве консерванта и частично для согревания сурового вида людей в оттенках серого в индустриальную эпоху ( которые, как свидетельствуют фотографические свидетельства, были неспособны к улыбкам). </p> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'> <!-- Yandex.RTB R-A-268541-2 --> <div id=

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

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

Дуотонная тенденция в цифровую эпоху

Дизайн Duotone для музея естествознания "width =" 1231 "height =" 1540 "/> <figcaption> через Моро Манон </figcaption></figure> <p> В последнее время популярность дуотонов возросла таким образом, что это связано не столько с мерами по сокращению расходов, сколько с эстетической смелостью. </p> <p> Есть много причин, почему это так. Многие считают, что рекламные кампании Spotify вернули эту тенденцию в мейнстрим, и, без сомнения, это сыграло ключевую роль. </p> <p> Но, скорее всего, идея возвращается еще дальше. Подумайте о том, как нас научили быстро тонировать фотографии в Instagram и Facebook — то есть, взошел всемогущий фотофильтр. И в то время как остальные из нас использовали фильтры, чтобы стереть наши гусиные лапки и дать нашим селфи немного легкого студийного освещения, дизайнеры придумали более экстремальные методы перенастройки своих изображений. </p> <h2> Различное использование дуотонов <br /> — </h2> <p> Дуотоны — теперь невероятно универсальный способ переназначения фотографий для дизайнерских проектов. Поскольку существует множество способов реализации этой техники, мы собираемся рассказать вам о наиболее распространенных сегодня применениях эффекта дуотона в дизайне. </p> <h3> Фоновое изображение </h3> <figure data-id= Адам Багус <figcaption> </figcaption></figure> <p><p> Многие веб-дизайнеры считают полезными дуотоны для изображений героев. фон создает непосредственный визуальный интерес в заголовке, а уменьшенная цветовая схема также позволяет копировать и кнопки для всплывающих окон больше, чем они могли бы на многоцветном изображении. </p> <figure data-id= Дизайн логотипа, в котором используется двухцветный фон "width =" 675 "height =" 675 "/> <figcaption> от gaga vastard </figcaption></figure> <p> Аналогичным образом, в логотипах могут быть полезны дуотоны и дизайн фирменного стиля для макетов. Дизайнеры выбирают фотографию представителя бренда, отключают ее с помощью выборочного тонирования, а затем накладывают на нее готовый логотип как часть впечатляющей презентации для клиента. </p> <h3> Координатор </h3> <p> Вопреки их роли в качестве второстепенных игроков, дуотоны также прекрасно работают в качестве основного элемента дизайна. Как гласит "клише всего": меньше значит больше. Случается так, что когда вы заменяете множество цветов на фотографии только двумя, это изображение сразу становится более ярким, потому что оно так не похоже на изображения, которые мы обычно видим. </p> <p> Воспользуйтесь этим, сделав двойную фотографию главной особенностью дизайна. Это хорошо работает для плакатов и обложек книг, где копия не так важна, как запоминающееся изображение. </p> <h3> Срез </h3> <p> Дуотоны могут быть резкими и захватывающими, а иногда это не то, что вы хотите. В этом случае полоса двухцветного цвета, нарезанная по полутоновому изображению, может обеспечить тонкую окраску. Наклонный срез также дает вашему глазу вектор, который следует за дизайном. </p> <figure data-id= Двойной дизайн брошюры "width =" 1398 "height =" 789 "/> <figcaption> от A-Sz </figcaption></figure> <p> В целом, этот стиль хорошо работает с более корпоративными потребности в дизайне, такие как брошюры, где вы хотите, чтобы дизайн выглядел хорошо, не будучи слишком авангардистским. </p> <h3> Раскол </h3> <p> Благодаря Photoshop современные дуотоны не ограничиваются традиционными методами (наложение разных отпечатков экрана непосредственно друг на друга). Это позволяет дизайнерам стать немного более креативными с их реализацией дуотонов. Разделенное тональное изображение не только захватывает, но и созрело для визуальной метафоры и представляет дуальность в большей степени, чем традиционный дуотон. </p> <h2> Как создавать двойные конструкции <br /> — </h2> <p> Чтобы создать двухцветный дизайн, вы накладываете изображение в градациях серого на два цвета, но, конечно, гораздо больше дизайнерских размышлений приводит к получению хорошего результата. В этом разделе мы познакомим вас с некоторыми лучшими практиками, чтобы убедиться, что вы правильно делаете дуотоны. </p> <h3> Подготовьте изображение </h3> <p> Мгновенное восстановление необработанного изображения может сработать для селфи, но для профессионального дизайна это будет выглядеть лениво. Имейте в виду, что любая фотография, с которой вы работаете, вероятно, уже прошла некоторые профессиональные настройки, которые были предназначены для повышения оригинального тонирования, а не ваших дуплексов; поэтому вам необходимо подготовить изображение, прежде чем применять к нему новую ограниченную цветовую схему. Вот что вам нужно сделать: </p> <figure data-id= Сравнение иллюстрации и градаций серого в одном ряду "width =" 1738 "height =" 1082 "/> <figcaption> Начните с преобразования изображения в оттенки серого. Сделано из изображения с помощью иллюстраций старой книги </figcaption></figure> <ol> <li> Преобразовать его в оттенки серого. Это можно легко сделать с помощью черно-белого корректирующего фильтра в Photoshop. </li> <li> Увеличьте контраст. Это самое главное. Поскольку вы будете работать только с двумя цветами, вы должны сделать их заметными на финальной части. В Photoshop есть несколько опций для работы с контрастом, в частности, фильтры регулировки уровней и кривых. Вы также можете настроить таргетинг на определенные цвета в черно-белом корректирующем фильтре и перемещать каждый ползунок, чтобы увеличить насыщенность цвета (делая их темнее / светлее в оттенках серого). Задача состоит в том, чтобы устранить большинство серых оттенков среднего тона и поддерживать высокие блики и низкие тени. </li> </ol> <h3> Выбирайте цвета осторожно </h3> <p> Здесь вам пригодится ваша базовая теория цвета. В то время как вы можете работать с аналогичной цветовой схемой для получения более приглушенного эффекта, обычно смысл ограничивать себя двумя цветами — это высокая контрастность, например, дополнительная цветовая схема. Затем вы просто подключаете выбранные цвета к корректирующему фильтру Photoshop Gradient Map или аналогичному инструменту. </p> <figure data-id= Сравнение инвертированных дуотонов бок о бок "width =" 1738 "height =" 1082 "/> <figcaption> Одни и те же два цвета могут создавать радикально разные эффекты в зависимости от того, как они реализованы. Сделано из изображения с помощью иллюстраций к старым книгам </figcaption></figure> <p> Помните, какие цвета вы выбираете для отображения на темных и светлых тонах вашего изображения. Например, яркий, насыщенный цвет может быть сильнее при отображении на тени. Поэкспериментируйте с переворачивая карту градиента и различные значения насыщенности, пока не получите желаемый результат. </p> <h3> Пара однотонных и белых цветов </h3> <figure data-id= Двухцветный дизайн с белым текстом и нарисованными от руки элементами "width =" 586 "height =" 845 "/> <figcaption> через Давида Малека </figcaption></figure> <p> Один из дизайнеров испытаний Лицо, ограничивающее себя двумя цветами, означает включение других элементов дизайна. </p> <p> Например, с помощью кнопок на веб-сайте вам может понадобиться немного изменить правила и поработать с третьим цветом, возможно, в зависимости от того, что компания указала для CTA, поскольку это должно выделяться на изображении. </p> <p> Просто убедитесь, что заранее выбрали цвета для своего двойного изображения, которое не будет конфликтовать с этим цветом, но и не затмит его. </p> <p> Для типографики и нарисованных от руки элементов лучше всего подойдет белый цвет, особенно если вы хотите стать дуотоном-пуристом. </p> <h3> Не ограничивайте свои дуотоны фотографией </h3> <p> То, что дуэтоны появились в секторе фотографии, не означает, что они бесполезны для всех других ваших дизайнерских проектов. Важной частью ренессанса тренда является его переосмысление, иначе эти дуотоны просто выглядят устаревшими и винтажными. Так что не стоит ограничиваться традиционными правилами, касающимися дуотонов. Они могут быть отличным способом добавить стилистический стиль в иллюстрацию, упаковку и все, что вы можете придумать. </p> <h2> Придайте дизайну правильный тон <br /> — </h2> <p> Дуотоны — это красивая техника дизайна, которая полезна практически для любого проекта. Но настоящая магия больше связана с тем, как дуотоны делают возможным противоречие. Вычитая цвета, вы добавляете визуальную привлекательность. Вы можете усилить контраст и по-прежнему удобно разместить дизайн на заднем плане. Вы делаете изображения менее расшифрованными, а зрители хотят расшифровать их больше. </p> <p> Дуотоны могут работать практически на любую марку, поэтому неудивительно, что у дуэтонов сейчас особый момент. И учитывая, как долго в истории проектирования им удавалось оставаться на месте, они всегда будут мощным инструментом для хранения в вашем наборе инструментов. </p> <div class=

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