<?xml version="1.0" encoding="utf-8" ?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:tt="http://teletype.in/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/"><title>DesignLingo</title><subtitle>Переводим лучшие англоязычные статьи о дизайне на русский! Вдохновляйтесь, обсуждайте, создавайте. 💡✨</subtitle><author><name>DesignLingo</name></author><id>https://teletype.in/atom/designlingo</id><link rel="self" type="application/atom+xml" href="https://teletype.in/atom/designlingo?offset=0"></link><link rel="alternate" type="text/html" href="https://teletype.in/@designlingo?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=designlingo"></link><link rel="next" type="application/rss+xml" href="https://teletype.in/atom/designlingo?offset=10"></link><link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></link><updated>2026-04-05T14:06:30.736Z</updated><entry><id>designlingo:bI5kZoHeD0n</id><link rel="alternate" type="text/html" href="https://teletype.in/@designlingo/bI5kZoHeD0n?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=designlingo"></link><title>Основы UX  </title><published>2023-08-05T21:34:30.921Z</published><updated>2023-08-05T21:35:17.989Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img4.teletype.in/files/75/15/7515c0c9-4810-4ce4-a6f1-68b9e5277104.png"></media:thumbnail><category term="osnovy-dizajna" label="Основы дизайна"></category><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/05/4d/054dcc33-de08-4b26-a271-b7da5b3deb72.jpeg&quot;&gt;UX-дизайн быстро революционизирует мир вокруг нас и то, как мы взаимодействуем с продуктами, предприятиями, услугами и друг с другом. Это важно для создания полезных и желанных продуктов, которые помогают компаниям, потребителям и даже целым обществам находить решения сложных или вызывающих беспокойство проблем.</summary><content type="html">
  &lt;h2 id=&quot;LM90&quot;&gt;&lt;strong&gt;1. Что такое UX?&lt;/strong&gt;&lt;/h2&gt;
  &lt;figure id=&quot;qHHP&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/05/4d/054dcc33-de08-4b26-a271-b7da5b3deb72.jpeg&quot; width=&quot;376&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;BhMw&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;Anlf&quot;&gt;UX-дизайн быстро революционизирует мир вокруг нас и то, как мы взаимодействуем с продуктами, предприятиями, услугами и друг с другом. Это важно для создания полезных и желанных продуктов, которые помогают компаниям, потребителям и даже целым обществам находить решения сложных или вызывающих беспокойство проблем.&lt;/p&gt;
  &lt;p id=&quot;K0if&quot;&gt;Но что именно такое пользовательский опыт? И почему это так важно?&lt;/p&gt;
  &lt;p id=&quot;n2ni&quot;&gt;Во-первых, давайте разберем, что мы имеем в виду, когда говорим “пользователь”, или, еще лучше, кого мы имеем в виду. Проще говоря, пользователь - это человек, который покупает продукт, цифровой интерфейс или услугу или взаимодействует с ними. Следовательно, пользовательский интерфейс (UX) - это последовательность событий, которые происходят, когда этот человек фактически использует продукт, цифровой интерфейс или услугу.&lt;/p&gt;
  &lt;p id=&quot;ncRm&quot;&gt;А UX-дизайн - это процесс выявления потребностей пользователей и разработки решений для их удовлетворения.&lt;/p&gt;
  &lt;h2 id=&quot;dzxY&quot;&gt;&lt;strong&gt;2. Пять основных принципов UX-дизайна&lt;/strong&gt;&lt;/h2&gt;
  &lt;p id=&quot;b0pM&quot;&gt;В UX-дизайне есть много важных принципов, но чтобы немного упростить ситуацию, мы разбили их на пять основных концепций: эмпатия, стратегия, удобство использования, инклюзивность и валидация.&lt;/p&gt;
  &lt;h3 id=&quot;YS9u&quot;&gt;&lt;strong&gt;Эмпатия&lt;/strong&gt;&lt;/h3&gt;
  &lt;p id=&quot;3HZ6&quot;&gt;Качественный UX-дизайн ставит потребности пользователей во главу угла при разработке продукта. Чтобы понять пользователя и с какими препятствиями он сталкивается, UX-дизайнеры должны практиковать &lt;strong&gt;эмпатичный дизайн&lt;/strong&gt;. С помощью эмпатии дизайнеры могут поставить себя на место пользователя и узнать об их повседневной жизни, о том, какие проблемы им необходимо решить, какие ожидания у них возникают при взаимодействии с определенными продуктами и каким им кажется хороший опыт.&lt;/p&gt;
  &lt;h3 id=&quot;i9wU&quot;&gt;Стратегия&lt;/h3&gt;
  &lt;p id=&quot;vfnZ&quot;&gt;Разработка эффективных решений сложных проблем может быть сложным процессом. Поэтому важной частью UX-дизайна является наличие четко определенного плана и набора целей перед началом любого проекта. Многие дизайнеры &lt;strong&gt;разрабатывают стратегию UX&lt;/strong&gt;, в которой описываются различные цели UX, включая выбранные методы исследования, предпочтительные системы проектирования и тестирования, а также то, как выглядит успех как для пользователя, так и для бизнеса. Хотя стратегия UX является важным руководством для подражания, она не является неизменной и может быть изменена по мере продвижения дизайнеров в процессе проектирования.&lt;/p&gt;
  &lt;h3 id=&quot;b45x&quot;&gt;Удобство использования&lt;/h3&gt;
  &lt;p id=&quot;drVe&quot;&gt;В мире быстро развивающихся и порой сбивающих с толку технологий потребители часто склоняются к продуктам, для работы с которыми требуется мало мозговых усилий. Последнее, чего хочет пользователь, - это чувствовать, что заказ доставки еды по телефону эквивалентен составлению пазла из 1000 частей. Большая часть UX-дизайна заключается в создании продуктов и сервисов, простых и интуитивно понятных в использовании для людей всех возрастов и способностей. Чтобы сделать это, дизайнеры принимают во внимание такие вещи, как поведенческая психология, доступность, &lt;strong&gt;affordances&lt;/strong&gt; и &lt;strong&gt;ментальные модели&lt;/strong&gt; при проектировании для оптимального и легкого использования.&lt;/p&gt;
  &lt;h3 id=&quot;nOND&quot;&gt;Инклюзивность&lt;/h3&gt;
  &lt;p id=&quot;OpEQ&quot;&gt;Распространенная фраза, которую вы можете услышать в индустрии UX, — “дизайн для всех”, что означает, что наши усилия по проектированию должны учитывать потребности людей всех рас, возрастов, полов, происхождения, социально-экономического статуса и многого другого. UX-дизайнеры обладают способностью формировать мир вокруг себя с помощью своих разработок и способностью решать сложные проблемы, которые затрагивают широкий круг людей.&lt;/p&gt;
  &lt;p id=&quot;JPgz&quot;&gt;&lt;strong&gt;Примерный UX-дизайн учитывает опыт и потребности недопредставленных или угнетенных групп людей и даже может найти решения для их уникальных проблем.&lt;/strong&gt;&lt;/p&gt;
  &lt;p id=&quot;HBYe&quot;&gt;&lt;strong&gt;Инклюзивный дизайн&lt;/strong&gt; гарантирует, что при проектировании для разных групп населения будут услышаны различные мнения.&lt;/p&gt;
  &lt;h3 id=&quot;PFPn&quot;&gt;Проверка&lt;/h3&gt;
  &lt;p id=&quot;lTIb&quot;&gt;Каким бы впечатляющим ни казался дизайн, он ничего не будет значить, если не будет подтвержден &lt;strong&gt;пользовательским тестированием&lt;/strong&gt;. Одним из наиболее важных аспектов UX-дизайна является тестирование предлагаемых решений с людьми, которые действительно будут использовать их в реальной жизни.&lt;/p&gt;
  &lt;h2 id=&quot;yerE&quot;&gt;3. Что делают UX-дизайнеры?&lt;/h2&gt;
  &lt;p id=&quot;AoJt&quot;&gt;&lt;strong&gt;Инструментарий UX-дизайнера&lt;/strong&gt; обширен, а набор навыков, как правило, довольно широк. Изо дня в день UX-дизайнеры выполняют такие задачи, как исследование пользователей, тестирование удобства использования, создание набросков &lt;strong&gt;каркасов&lt;/strong&gt; и &lt;strong&gt;прототипов&lt;/strong&gt;, проведение фокус-групп или представление своей работы заинтересованным сторонам.&lt;/p&gt;
  &lt;p id=&quot;5uCs&quot;&gt;Чтобы немного больше понять, чем занимаются UX-дизайнеры, давайте рассмотрим процесс UX-дизайна:&lt;/p&gt;
  &lt;figure id=&quot;svDd&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/21/5b/215b5c43-b048-45a8-8017-5cdb4bdb73b1.png&quot; width=&quot;512&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;Fd16&quot;&gt;Сопереживайте&lt;/h3&gt;
  &lt;p id=&quot;aFXb&quot;&gt;Сопереживание является ключевым фактором, и исследование пользователей необходимо для того, чтобы найти это понимание и связь с потребностями и целями ваших пользователей. Итак, первый шаг - провести обширное и &lt;strong&gt;всеобъемлющее исследование&lt;/strong&gt; о людях, которые будут взаимодействовать с продуктом.&lt;/p&gt;
  &lt;h3 id=&quot;joTd&quot;&gt;Фокусировка&lt;/h3&gt;
  &lt;p id=&quot;k4Ov&quot;&gt;После того, как они пришли к пониманию потребностей и целей своих пользователей, разработчики UX выясняют и определяют, какие проблемы требуют решения, и устанавливают прямые ориентиры для предстоящих задач.&lt;/p&gt;
  &lt;p id=&quot;cojh&quot;&gt;Здесь дизайнеры UX получают четкое представление о проекте, который готовит для них их клиент или работодатель, и о том, каковы цели бизнеса. Дизайнеры также могут сотрудничать со своими командами дизайнеров и предлагать эффективный подход к созданию дизайнерских решений.&lt;/p&gt;
  &lt;h3 id=&quot;hbXf&quot;&gt;Придумайте&lt;/h3&gt;
  &lt;p id=&quot;otkN&quot;&gt;Этот этап часто выполняется рекурсивно на всех этапах определения, прототипирования и даже тестирования — вы обнаруживаете потребности пользователя, и ваше воображение начинает придумывать способы решения этих проблем!&lt;/p&gt;
  &lt;h3 id=&quot;vF2s&quot;&gt;Прототип&lt;/h3&gt;
  &lt;p id=&quot;ocW4&quot;&gt;Теперь пришло время взяться за ручку и бумагу и приступить к проектированию! Это этап, о котором думает большинство людей, когда речь заходит об UX-дизайне, поскольку он включает в себя фактическое создание продукта или услуги. Дизайнеры создают &lt;strong&gt;макеты и прототипы&lt;/strong&gt;, чтобы изначально протестировать свои идеи и убедиться, что они действительно будут работать так, как задумано.&lt;/p&gt;
  &lt;h3 id=&quot;3FE0&quot;&gt;Тест&lt;/h3&gt;
  &lt;p id=&quot;6nxo&quot;&gt;Как мы уже намекали, ни один процесс UX-дизайна не будет полным без тестирования ваших дизайнерских решений, чтобы убедиться, что они действительно будут работать так, как вы задумали!&lt;/p&gt;

</content></entry><entry><id>designlingo:Zf6VICwYpYq</id><link rel="alternate" type="text/html" href="https://teletype.in/@designlingo/Zf6VICwYpYq?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=designlingo"></link><title>Что такое типографика и почему она важна? Руководство для начинающих </title><published>2023-08-05T21:15:22.119Z</published><updated>2023-08-05T21:16:43.014Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img1.teletype.in/files/4d/e4/4de42925-22f1-4979-88e3-a2f579fbde2e.png"></media:thumbnail><category term="osnovy-dizajna" label="Основы дизайна"></category><summary type="html">&lt;img src=&quot;https://img3.teletype.in/files/aa/46/aa46f21e-4871-4293-afd0-1aa3fad1ee3b.jpeg&quot;&gt;Давайте начнем с основ: что такое типографика?</summary><content type="html">
  &lt;h2 id=&quot;VC6d&quot; data-align=&quot;center&quot;&gt;1. Что такое типографика?&lt;/h2&gt;
  &lt;figure id=&quot;5tDx&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/aa/46/aa46f21e-4871-4293-afd0-1aa3fad1ee3b.jpeg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;ud0H&quot;&gt;Давайте начнем с основ: что такое типографика?&lt;/p&gt;
  &lt;p id=&quot;YqNe&quot;&gt;&lt;strong&gt;Типографика — это искусство расположения букв и текста таким образом, чтобы текст был разборчивым, четким и визуально привлекательным для читателя.&lt;/strong&gt;&lt;/p&gt;
  &lt;p id=&quot;PlPv&quot;&gt;Он включает в себя стиль, внешний вид и структуру шрифта, которые призваны вызывать определенные эмоции и передавать определенные сообщения. Короче говоря, типографика — это то, что оживляет текст.&lt;/p&gt;
  &lt;h2 id=&quot;2DHI&quot; data-align=&quot;center&quot;&gt;2. Почему важна типографика?&lt;/h2&gt;
  &lt;p id=&quot;thPB&quot;&gt;Типографика — это гораздо больше, чем просто выбор красивых шрифтов: это жизненно важный компонент дизайна пользовательского интерфейса .&lt;/p&gt;
  &lt;p id=&quot;j38U&quot;&gt;Хорошая типографика создаст сильную визуальную иерархию , обеспечит графический баланс веб-сайта и задаст общий тон продукта. Типографика должна направлять и информировать ваших пользователей, оптимизировать читабельность и доступность, а также обеспечивать отличный пользовательский опыт.&lt;/p&gt;
  &lt;p id=&quot;d5XD&quot;&gt;Давайте немного углубимся в то, почему типографика так важна.&lt;/p&gt;
  &lt;h3 id=&quot;8Voo&quot;&gt;Типографика повышает узнаваемость бренда&lt;/h3&gt;
  &lt;p id=&quot;rvSN&quot;&gt;Мало того, что хорошая типографика улучшит индивидуальность веб-сайта, ваши пользователи подсознательно начнут ассоциировать шрифт, представленный на вашем сайте, с вашим брендом.&lt;/p&gt;
  &lt;p id=&quot;x8l1&quot;&gt;Уникальная, последовательная типографика поможет вам завоевать доверие пользователей, завоевать доверие пользователей и способствовать продвижению вашего бренда.&lt;/p&gt;
  &lt;h3 id=&quot;jLv0&quot;&gt;Типографика влияет на принятие решений&lt;/h3&gt;
  &lt;p id=&quot;5NQj&quot;&gt;Типографика оказывает глубокое влияние на то, как пользователи переваривают и воспринимают информацию, передаваемую текстом.&lt;/p&gt;
  &lt;p id=&quot;qJh9&quot;&gt;Привлекательный шрифт гораздо более убедителен, чем слабые шрифты, которые не усиливают смысл текста.&lt;/p&gt;
  &lt;h3 id=&quot;GaYR&quot;&gt;Типографика удерживает внимание читателей&lt;/h3&gt;
  &lt;p id=&quot;1MgY&quot;&gt;Хорошая типографика может быть разницей между тем, кто останется на вашем сайте на одну минуту или на полчаса.&lt;/p&gt;
  &lt;p id=&quot;TEEH&quot;&gt;Важно, чтобы ваш веб-сайт был визуально стимулирующим и запоминающимся, и типографика играет в этом процессе огромную роль.&lt;/p&gt;
  &lt;h2 id=&quot;h9l8&quot; data-align=&quot;center&quot;&gt;3. Различные элементы типографики&lt;/h2&gt;
  &lt;p id=&quot;AihL&quot;&gt;Чтобы начать работу с типографикой, вам сначала нужно разобраться с восемью основными элементами типографского дизайна.&lt;/p&gt;
  &lt;h3 id=&quot;U2nJ&quot;&gt;Шрифты и гарнитуры&lt;/h3&gt;
  &lt;p id=&quot;nwWb&quot;&gt;Существует некоторая путаница, связанная с разницей между гарнитурами и шрифтами, и многие считают их синонимами.&lt;/p&gt;
  &lt;p id=&quot;ymzA&quot;&gt;&lt;strong&gt;Гарнитура — это стиль дизайна, который включает в себя множество символов разного размера и веса&lt;/strong&gt; , тогда как &lt;strong&gt;шрифт — это графическое представление текстового символа&lt;/strong&gt; .&lt;/p&gt;
  &lt;p id=&quot;N6mA&quot;&gt;Проще говоря, гарнитура — это семейство связанных шрифтов, в то время как шрифты относятся к весу, ширине и стилям, которые составляют гарнитуру.&lt;/p&gt;
  &lt;figure id=&quot;RxYU&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://d3mm2s9r15iqcv.cloudfront.net/en/wp-content/uploads/old-blog-uploads/typeface-vs-typograp-j5kbj.jpg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;5TZ0&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;YA0S&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;R6lT&quot;&gt;Существует три основных типа шрифта: с засечками, без засечек и декоративный.&lt;/p&gt;
  &lt;p id=&quot;7iaF&quot;&gt;Вот наглядный пример каждого&lt;/p&gt;
  &lt;figure id=&quot;JkMd&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://d3mm2s9r15iqcv.cloudfront.net/en/wp-content/uploads/old-blog-uploads/kinds-of-typeface.jpg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Gshk&quot;&gt;:с засечками&lt;/p&gt;
  &lt;p id=&quot;W9JQ&quot;&gt;Как видно из приведенного выше визуального примера, шрифты с засечками идентифицируются по дополнительным знакам в конце букв.&lt;/p&gt;
  &lt;p id=&quot;W5oJ&quot;&gt;Добавление этих небольших штрихов и элементов придает шрифтам с засечками атмосферу традиции, истории, авторитетности и целостности.&lt;/p&gt;
  &lt;p id=&quot;DRry&quot;&gt;Поэтому неудивительно, что вы увидите этот «классический» стиль, используемый, например, для газетных заголовков или для шрифта, используемого в книгах.&lt;/p&gt;
  &lt;h4 id=&quot;arxo&quot;&gt;Без засечек&lt;/h4&gt;
  &lt;p id=&quot;Av2p&quot;&gt;Как следует из названия, шрифты без засечек определяются тем, чего им не хватает.&lt;/p&gt;
  &lt;p id=&quot;7zuM&quot;&gt;Без более традиционных штрихов и тире с засечками семейство шрифтов без засечек выглядит гораздо более современным и смелым. В результате он легко читается и при использовании в заголовках привлекает ваше внимание больше, чем шрифт с засечками.&lt;/p&gt;
  &lt;h4 id=&quot;x0HA&quot;&gt;Декоративный&lt;/h4&gt;
  &lt;p id=&quot;eJc9&quot;&gt;Опять же, судя по названию, функция этого шрифта скорее эстетическая, чем удобочитаемая. В результате вы, скорее всего, увидите их в названиях брендов, логотипах и кратких названиях&lt;/p&gt;
  &lt;h2 id=&quot;UY8I&quot; data-align=&quot;center&quot;&gt;4.Лучшие практики пользовательского интерфейса для использования шрифтов&lt;/h2&gt;
  &lt;h3 id=&quot;zwwJ&quot;&gt;Контраст&lt;/h3&gt;
  &lt;p id=&quot;GqUg&quot;&gt;Подобно иерархии, контраст помогает передать читателям, какие идеи или сообщения вы хотите подчеркнуть.&lt;/p&gt;
  &lt;p id=&quot;PjNU&quot;&gt;Если вы потратите некоторое время на контраст, ваш текст станет интересным, значимым и привлекающим внимание. Большинство дизайнеров создают контраст, играя с различными шрифтами, цветами, стилями и размерами, чтобы создать впечатление и разбить страницу.&lt;/p&gt;
  &lt;figure id=&quot;LYdy&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/99/b6/99b63780-5285-44f6-8311-de76c1feab29.jpeg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;vaTA&quot;&gt;Последовательность&lt;/h3&gt;
  &lt;p id=&quot;9ujn&quot;&gt;Поддержание единообразия шрифтов является ключом к тому, чтобы избежать запутанного и беспорядочного интерфейса.&lt;/p&gt;
  &lt;p id=&quot;f70k&quot;&gt;При передаче информации важно придерживаться одного и того же стиля шрифта, чтобы ваши читатели сразу поняли, что они читают, и начали замечать закономерность.&lt;/p&gt;
  &lt;h3 id=&quot;EjLJ&quot;&gt;Белое пространство&lt;/h3&gt;
  &lt;p id=&quot;5Ld2&quot;&gt;Часто называемое «негативным пространством», пустое пространство — это пространство вокруг текста или графики.&lt;/p&gt;
  &lt;p id=&quot;WPI1&quot;&gt;Его часто упускают из виду, и пользователь, как правило, остается незамеченным, но правильное использование пустого пространства гарантирует, что интерфейс не загроможден, а текст удобочитаем.&lt;/p&gt;
  &lt;h3 id=&quot;tspX&quot;&gt;Выравнивание&lt;/h3&gt;
  &lt;p id=&quot;n8Kr&quot;&gt;Выравнивание - это процесс унификации и компоновки текста, графики и изображений для обеспечения равного пространства, размера и расстояний между каждым элементом.&lt;/p&gt;
  &lt;p id=&quot;H2E2&quot;&gt;Многие дизайнеры пользовательского интерфейса создают поля, чтобы их логотип, заголовок и основная часть текста были выровнены друг с другом.&lt;/p&gt;
  &lt;p id=&quot;LFXl&quot;&gt;При выравнивании пользовательского интерфейса рекомендуется обращать внимание на отраслевые стандарты. Например, выравнивание текста по правому краю покажется нелогичным для читателей, которые читают слева направо.&lt;/p&gt;
  &lt;p id=&quot;LOmC&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;Kw5D&quot;&gt;Цвет&lt;/h3&gt;
  &lt;p id=&quot;0r7l&quot;&gt;Цвет - один из самых захватывающих элементов типографики. Именно здесь дизайнеры могут по-настоящему проявить творческий подход и поднять интерфейс на новый уровень.&lt;/p&gt;
  &lt;p id=&quot;kPSs&quot;&gt;Однако к цвету текста не следует относиться легкомысленно: выбор цвета шрифта может выделить текст и передать тон сообщения&lt;em&gt;—&lt;/em&gt;но неправильное его использование может привести к неряшливому интерфейсу и тексту, который не соответствует цветовой гамме сайта.&lt;/p&gt;
  &lt;p id=&quot;JgTe&quot;&gt;Цвет состоит из трех ключевых компонентов: значения, оттенка и насыщенности.&lt;/p&gt;
  &lt;p id=&quot;TWko&quot;&gt;Хороший дизайнер будет знать, как сбалансировать эти три компонента, чтобы текст был привлекательным и четко читаемым даже для людей с нарушениями зрения. Часто дизайнеры проверяют это, просматривая текст в &lt;strong&gt;оттенках серого&lt;/strong&gt; (без цвета) и внося изменения, если текст слишком темный или слишком светлый на фоне цвета фона.&lt;/p&gt;
  &lt;h3 id=&quot;7zP5&quot;&gt;Иерархия&lt;/h3&gt;
  &lt;p id=&quot;dz11&quot;&gt;Установление иерархии - один из важнейших принципов типографики.&lt;/p&gt;
  &lt;p id=&quot;iEmr&quot;&gt;Иерархия типографики направлена на создание четкого различия между выделяющимися фрагментами текста, которые следует заметить и прочитать в первую очередь, и стандартной текстовой копией.&lt;/p&gt;
  &lt;p id=&quot;BvLu&quot;&gt;В эпоху нехватки внимания, вызванной социальными сетями, дизайнерам настоятельно рекомендуется быть лаконичными и создавать шрифты, которые позволяют пользователям получать необходимую информацию за короткое время.&lt;/p&gt;
  &lt;p id=&quot;PVHL&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;K1fe&quot; data-align=&quot;center&quot;&gt;5. Как вы выбираете правильный шрифт для своего сайта?&lt;/h2&gt;
  &lt;h3 id=&quot;1FNJ&quot;&gt;Подумайте о личности&lt;/h3&gt;
  &lt;p id=&quot;X38S&quot;&gt;Что вы хотите, чтобы чувствовали ваши пользователи, когда они впервые заходят на ваш сайт? Вы хотите создать дружественную атмосферу?&lt;/p&gt;
  &lt;p id=&quot;j3aP&quot;&gt;Вы хотите, чтобы сайт выглядел высококлассным, гостеприимным, игривым или серьезным?&lt;/p&gt;
  &lt;p id=&quot;R079&quot;&gt;Крайне важно, чтобы типографика отражала индивидуальность бренда или продукта. Хорошей отправной точкой при решении этой задачи является определение основных черт вашего бренда и начало подбора шрифтов, отражающих эти черты.&lt;/p&gt;
  &lt;p id=&quot;dmIU&quot;&gt;С этого момента вы можете начать замечать тенденцию.&lt;/p&gt;
  &lt;h3 id=&quot;NWRR&quot;&gt;Подумайте о тоне&lt;/h3&gt;
  &lt;p id=&quot;Lj6z&quot;&gt;Не менее важно учитывать, как шрифт гармонирует с тоном сообщения.&lt;/p&gt;
  &lt;p id=&quot;lfgJ&quot;&gt;Например, если вы хотите передать серьезную информацию, выберите менее стилизованный или декоративный шрифт, который будет хорошо читаемым и не будет отвлекать внимание.&lt;/p&gt;
  &lt;h3 id=&quot;rGAE&quot;&gt;Не экономьте на функциональности&lt;/h3&gt;
  &lt;p id=&quot;SxDN&quot;&gt;Функция так же важна, как и форма: нет ничего хуже, чем веб-сайт, который выглядит красиво, но совершенно неразборчив, что приводит к тому, что вы нажимаете не ту кнопку или поворачиваете не туда, потому что инструкции были неясны.&lt;/p&gt;
  &lt;p id=&quot;DL5v&quot;&gt;Решая, какие шрифты включить в свой интерфейс, отложите в сторону стиль, эстетику и озвучку и подумайте о том, является ли шрифт разборчивым, читабельным и доступным.&lt;/p&gt;
  &lt;p id=&quot;xyP0&quot;&gt;Может ли текст быть разборчивым без напряжения? Достаточно ли отчетливы символы?&lt;/p&gt;
  &lt;h3 id=&quot;ROWx&quot;&gt;Рассмотрим производительность&lt;/h3&gt;
  &lt;p id=&quot;TAhZ&quot;&gt;Одна вещь, которую многие дизайнеры часто упускают из виду, - это выбор шрифтов, удобных для веб-браузера.&lt;/p&gt;
  &lt;p id=&quot;8IdU&quot;&gt;Широко используемые библиотеки шрифтов, такие как Google fonts, предлагают веб-файлы шрифтов, которые могут быть отлично отображены в браузере без каких-либо проблем.&lt;/p&gt;
  &lt;p id=&quot;QdVU&quot;&gt;&lt;strong&gt;Совет профессионала:&lt;/strong&gt; при загрузке веб-шрифтов никогда не загружайте больше наборов символов, чем вам нужно. Таким образом, вы избежите лишнего веса!&lt;/p&gt;
  &lt;h3 id=&quot;OvzY&quot;&gt;Черпайте вдохновение&lt;/h3&gt;
  &lt;p id=&quot;CEeq&quot;&gt;Если вы не уверены, с чего начать, найдите время, чтобы посмотреть, что делают другие люди.&lt;/p&gt;
  &lt;p id=&quot;astJ&quot;&gt;Откройте глаза на типографику, которую вы видите вокруг себя.&lt;/p&gt;

</content></entry><entry><id>designlingo:ECSI_ArY3WR</id><link rel="alternate" type="text/html" href="https://teletype.in/@designlingo/ECSI_ArY3WR?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=designlingo"></link><title>9 правил композиции для дизайнеров UX / UI</title><published>2023-08-05T20:34:18.793Z</published><updated>2023-08-05T21:21:51.903Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img3.teletype.in/files/af/3d/af3dd7c0-49af-431d-8bc2-b9c5d8387b86.png"></media:thumbnail><category term="osnovy-dizajna" label="Основы дизайна"></category><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/88/ce/88ce6781-e9e8-41c2-8278-054a38940a59.jpeg&quot;&gt;Если вам сложно создать композицию и вы не всегда понимаете, гармонична ли она, это правило поможет.</summary><content type="html">
  &lt;h2 id=&quot;cQhx&quot;&gt;1 – Правило третей&lt;/h2&gt;
  &lt;figure id=&quot;anb5&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/88/ce/88ce6781-e9e8-41c2-8278-054a38940a59.jpeg&quot; width=&quot;1000&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;sa9E&quot;&gt;Если вам сложно создать композицию и вы не всегда понимаете, гармонична ли она, это правило поможет.&lt;/p&gt;
  &lt;p id=&quot;5hLK&quot;&gt;Суть правила третей заключается в том, чтобы разделить картинку на девять равных частей – самая важная должна находиться на пересечении линий.&lt;/p&gt;
  &lt;p id=&quot;Vfvz&quot;&gt;Проще всего это сделать в Photoshop вы можете включить направляющие с помощью Ctrl+; – они не будут мешать работе, но при необходимости придут на помощь.&lt;/p&gt;
  &lt;h2 id=&quot;Fr10&quot;&gt;&lt;strong&gt;2 – Связь между объектами&lt;/strong&gt;&lt;/h2&gt;
  &lt;figure id=&quot;dqTA&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://inkbotdesign.com/wp-content/uploads/2020/04/illustration-web-design-trend-1024x550.jpg?ezimgfmt=rs:740x397/rscb15/ng:webp/ngcb15&quot; width=&quot;739&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;8fzK&quot;&gt;Построение композиции должно начинаться с распределения ролей задействованных объектов.&lt;/p&gt;
  &lt;p id=&quot;zarF&quot;&gt;Если они одинаково привлекают внимание, зритель будет сбит с толку и не поймет, чему посвящена картинка, и, скорее всего, сочтет ее неинтересной.&lt;/p&gt;
  &lt;p id=&quot;Qk0O&quot;&gt;Вот почему важно подчеркнуть главный объект визуализации и построить композицию, используя методы привлечения внимания, которые мы обсудим ниже.&lt;/p&gt;
  &lt;h2 id=&quot;VK5S&quot;&gt;3 – Золотое сечение&lt;/h2&gt;
  &lt;figure id=&quot;ZMoy&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://inkbotdesign.com/wp-content/uploads/2016/05/Logo-Design-Golden-Ratio-Mathematics.png?ezimgfmt=rs:740x296/rscb15/ng:webp/ngcb15&quot; width=&quot;739&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;0Imc&quot;&gt;Первое упоминание об этом принципе связано с Евклидом, математиком, который применил&lt;/p&gt;
  &lt;p id=&quot;b80j&quot;&gt;В искусстве этот принцип получил широкое распространение благодаря Леонардо да Винчи и его книге “Витрувианский человек”, которая демонстрирует применение этого принципа к пропорциям человеческого тела.&lt;/p&gt;
  &lt;h2 id=&quot;p5CM&quot;&gt;&lt;strong&gt;4 – Точка фокусировки&lt;/strong&gt;&lt;/h2&gt;
  &lt;figure id=&quot;f8CE&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/7b/4f/7b4f603b-93b7-4ed2-bce2-f5a1f1145c53.jpeg&quot; width=&quot;1024&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;5tPr&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;M8VS&quot;&gt;Правильно расположив композицию, вы можете заставить зрителя обратить внимание на желаемый объект.&lt;/p&gt;
  &lt;p id=&quot;yOCN&quot;&gt;Для этого продумайте внешний вид и дизайн дополнительных объектов на картинке, которые будут “указывать” на объект.&lt;/p&gt;
  &lt;p id=&quot;djzI&quot;&gt;Например, дорога, ведущая к хижине, ветка дерева, нависающая над путешественником, или рука, указывающая на объект.&lt;/p&gt;
  &lt;h2 id=&quot;EV0F&quot;&gt;&lt;strong&gt;5 – Ракурс&lt;/strong&gt;&lt;/h2&gt;
  &lt;figure id=&quot;fssC&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://sun9-43.userapi.com/impg/U7TfBDBhXeo9CPtmWQXMhasPmA8Nsw5h6yVWgA/x5w4GT4x8p8.jpg?size=807x538&amp;quality=96&amp;sign=da21ecb9131552e91afb3d7a5fb7e3d4&amp;type=album&quot; width=&quot;807&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;LGk3&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;CNjy&quot;&gt;Смелые и необычные ракурсы привлекают внимание и, независимо от того, что изображено на картинке, выглядят более эффектно.&lt;/p&gt;
  &lt;p id=&quot;ejUj&quot;&gt;Чтобы создать сцену с уникальной перспективой, необходимо подготовить и просмотреть достаточное количество ссылок: необычный внешний вид может привести к проблемам с видом и соотношением элементов визуализации.&lt;/p&gt;
  &lt;h2 id=&quot;hBgY&quot;&gt;6 – Гармония и баланс&lt;/h2&gt;
  &lt;figure id=&quot;xeaC&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://inkbotdesign.com/wp-content/uploads/2020/02/black-colour-psychology-web-design-1024x614.jpg?ezimgfmt=rs:740x444/rscb15/ng:webp/ngcb15&quot; width=&quot;740&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Z8Gp&quot;&gt;Пытаясь подчеркнуть главный объект, новички часто перегружают изображение откровенно лишними деталями, создающими визуальный шум.&lt;/p&gt;
  &lt;p id=&quot;lsJp&quot;&gt;Если сомневаетесь, стоит ли что-то добавлять к картинке, подумайте о назначении этого элемента.&lt;/p&gt;
  &lt;p id=&quot;zinn&quot;&gt;Помогает ли это создать атмосферу, раскрыть детали вашего плана или заполнить пространство? Если нет, то ход действий очевиден.&lt;/p&gt;
  &lt;h2 id=&quot;Q35n&quot;&gt;7 – Атмосфера и эмоции&lt;/h2&gt;
  &lt;figure id=&quot;36x5&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/05/c4/05c4ffa7-d678-4f63-bce1-ac5a60c9cb10.jpeg&quot; width=&quot;1000&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;EskM&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;4jJ6&quot;&gt;Композиция, пейзаж и цвета должны подчеркивать эмоции, которые вы вкладываете в визуализацию.&lt;/p&gt;
  &lt;p id=&quot;SqmJ&quot;&gt;Красные цвета, например, ассоциируются с романтикой, любовью, кровью и фильмами ужасов.&lt;/p&gt;
  &lt;p id=&quot;pdVT&quot;&gt;Холмы заставляют нас думать о мире, а море связано со свободой и приключениями.&lt;/p&gt;
  &lt;p id=&quot;n0Y7&quot;&gt;Поэкспериментируйте с ассоциациями ваших изображений и заставьте их работать на вас.&lt;/p&gt;
  &lt;h2 id=&quot;Vpas&quot;&gt;8 – Визуальная целостность&lt;/h2&gt;
  &lt;figure id=&quot;O9lJ&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://inkbotdesign.com/wp-content/uploads/2020/12/nostalgic-retro-web-design-trends-1024x640.jpg?ezimgfmt=rs:740x463/rscb15/ng:webp/ngcb15&quot; width=&quot;740&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;b058&quot;&gt;Важно сосредоточиться на правилах композиции, но не упускайте из виду другие элементы визуализации.&lt;/p&gt;
  &lt;p id=&quot;6Sbq&quot;&gt;Чтобы картинка выглядела привлекательно, нужно уделить достаточно времени проработке середины и фона.&lt;/p&gt;
  &lt;p id=&quot;GS3J&quot;&gt;С их помощью вы сможете создать более продуманное и детализированное изображение, которое захотите рассмотреть более внимательно.&lt;/p&gt;
  &lt;h2 id=&quot;tXWC&quot;&gt;9 – Нарушение правил&lt;/h2&gt;
  &lt;figure id=&quot;9cNY&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img.freepik.com/premium-vector/break-rules-typography-tshirt-and-apparel-design_169090-798.jpg&quot; width=&quot;626&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;xtt9&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;HrY7&quot;&gt;Часто самые захватывающие визуализации получаются, когда дизайнер намеренно нарушает правила дизайна, и законы композиции не являются исключением.&lt;/p&gt;
  &lt;p id=&quot;2Jxr&quot;&gt;Но прежде чем вы намереваетесь нарушить хотя бы одно из них, вы должны понимать, что вы делаете и какого эффекта стремитесь достичь.&lt;/p&gt;

</content></entry><entry><id>designlingo:7vIr-dj-vcn</id><link rel="alternate" type="text/html" href="https://teletype.in/@designlingo/7vIr-dj-vcn?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=designlingo"></link><title>Введение в теорию цвета и цветовые палитр</title><published>2023-08-05T00:44:56.150Z</published><updated>2023-08-05T20:12:00.172Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img4.teletype.in/files/f6/f2/f6f2167e-9d56-4822-b66b-7f2153b4cad9.png"></media:thumbnail><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/08/5f/085f0ddf-8bbc-4cad-b543-00873c0abb8e.png&quot;&gt;Теория цвета - это магическая палитра, ведущая художников и дизайнеров к созданию потрясающих произведений. Она не только взаимодействует с нашими чувствами, но и влияет на эстетику и настроение.</summary><content type="html">
  &lt;figure id=&quot;S7Z0&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/08/5f/085f0ddf-8bbc-4cad-b543-00873c0abb8e.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h2 id=&quot;Lctk&quot; data-align=&quot;center&quot;&gt;Что такое теория цвета?&lt;/h2&gt;
  &lt;p id=&quot;Axo2&quot;&gt;Теория цвета - это магическая палитра, ведущая художников и дизайнеров к созданию потрясающих произведений. Она не только взаимодействует с нашими чувствами, но и влияет на эстетику и настроение.&lt;/p&gt;
  &lt;p id=&quot;Y1MH&quot;&gt;Базовые основы теории цвета были заложены Исааком Ньютоном в 1666 году, и они по-прежнему остаются актуальными. В основном цветовом круге есть три группы цветов: первичные, вторичные и третичные.&lt;/p&gt;
  &lt;p id=&quot;7t9M&quot;&gt;Первичные цвета - это красный, синий и желтый. Их нельзя создать из других цветов - они являются основой всего многообразия.&lt;/p&gt;
  &lt;p id=&quot;blZg&quot;&gt;Вторичные цвета - оранжевый, фиолетовый и зеленый. Они возникают, когда смешивают два из первичных цветов.&lt;/p&gt;
  &lt;p id=&quot;b2eu&quot;&gt;Третичные цвета - это результат смешивания первичного и вторичного цветов. Пурпурный, вермиллионный, фиолетовый, бирюзовый, янтарный и шартрез - вот их прекрасное многообразие.&lt;/p&gt;
  &lt;figure id=&quot;k3Gs&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/1e/8d/1e8da140-f351-4579-b55b-6ce44101a446.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h2 id=&quot;65Vy&quot;&gt;Аддитивные и субтрактивные цветовые модели&lt;/h2&gt;
  &lt;h3 id=&quot;gg5z&quot;&gt;Аддитивная цветовая модель (RGB)&lt;/h3&gt;
  &lt;p id=&quot;mPdW&quot;&gt;RGB расшифровывается как красный, зеленый и синий и основан на аддитивной цветовой модели световых волн, которая диктует, что чем больше цвета вы добавляете, тем ближе цвет становится к белому. Цветовая модель RGB лежит в основе всех электронных экранов, и, как следствие, является моделью, наиболее часто используемой дизайнерами пользовательского интерфейса.&lt;/p&gt;
  &lt;figure id=&quot;iQ8Z&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/08/5f/085f0ddf-8bbc-4cad-b543-00873c0abb8e.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;efSY&quot;&gt;Субтрактивная цветовая модель (CMYK)&lt;/h3&gt;
  &lt;p id=&quot;tSMP&quot;&gt;С другой стороны, CMYK известна как субтрактивная цветовая модель, которая получает цвета путем вычитания света. CMYK расшифровывается как голубой, пурпурный, желтый и черный и в основном используется в физической печати.&lt;/p&gt;
  &lt;figure id=&quot;RnoT&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/03/af/03af2ab0-4d78-43ac-91e4-daf05a731e27.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;PB24&quot;&gt;Цвета можно комбинировать, чтобы сформировать одну из пяти цветовых палитр, которые обычно используются дизайнерами пользовательского интерфейса. Давайте пройдемся по ним вместе.&lt;/p&gt;
  &lt;h3 id=&quot;EDLe&quot;&gt;Одноцветный&lt;/h3&gt;
  &lt;p id=&quot;9hmL&quot;&gt;Популярный выбор у дизайнеров, монохроматические цветовые схемы формируются с использованием различных тонов и оттенков одного единственного цвета.&lt;/p&gt;
  &lt;figure id=&quot;wUTS&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/8c/df/8cdf5087-3c7a-4378-b091-b81f3b60620d.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;2eqk&quot;&gt;Аналогичный&lt;/h3&gt;
  &lt;p id=&quot;0mHF&quot;&gt;Аналогичная цветовая схема формируется из трех цветов, которые расположены рядом друг с другом на цветовом круге. Аналогичные цветовые палитры обычно используются, когда контраст не нужен, например, на фоне веб-страниц или баннеров.&lt;/p&gt;
  &lt;figure id=&quot;NS0i&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/e1/8a/e18aa320-f5f1-4c45-84d9-ab67a4ba2075.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;zFPL&quot;&gt;Дополнительный&lt;/h3&gt;
  &lt;p id=&quot;SdBG&quot;&gt;Дополнительные цветовые палитры состоят из цветов, которые размещаются друг перед другом на цветовом круге. Хотя название может предполагать обратное, дополнительные цветовые палитры на самом деле противоположны аналогичным и монохроматическим цветовым палитрам, поскольку они направлены на создание контраста. Например, красная кнопка на синем фоне будет выделяться на любом интерфейсе.&lt;/p&gt;
  &lt;figure id=&quot;4LLX&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/89/c4/89c4ccff-5dba-45c2-b8d6-8cc6ddb16c76.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;lgnL&quot;&gt;Сплит-комплементарность&lt;/h3&gt;
  &lt;p id=&quot;XqQi&quot;&gt;Разделенно-комплементарная цветовая палитра отличается от дополнительной цветовой палитры только тем, что в ней используется большее количество цветов. Например, если вы выберете синий цвет, вам нужно будет взять два цвета, которые соседствуют с его противоположным цветом, которые в данном случае будут желтым и красным.&lt;/p&gt;
  &lt;figure id=&quot;sWVR&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/85/c6/85c618dc-3938-452f-b552-80cf1963a0a5.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;90MH&quot;&gt;Триадический&lt;/h3&gt;
  &lt;p id=&quot;zUgZ&quot;&gt;Триадическая цветовая схема основана на трех отдельных цветах, которые равноудалены на цветовом круге. Большинство дизайнеров используют триадическую цветовую схему, выбирая один доминирующий цвет и используя два других цвета в качестве акцентов.&lt;/p&gt;
  &lt;figure id=&quot;LUmB&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/b7/10/b71054b8-60f2-4ab0-8b4a-eeba7a832cae.png&quot; width=&quot;974&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;mLQD&quot;&gt;Тетрадный&lt;/h3&gt;
  &lt;p id=&quot;1Ufb&quot;&gt;Тетрадная цветовая схема, обычно используемая более опытными дизайнерами, использует два набора взаимодополняющих пар — всего четыре цвета из цветового круга, которые при соединении должны образовывать прямоугольник. Хотя его немного сложнее сбалансировать, он создает визуально ошеломляющий конечный эффект!&lt;/p&gt;
  &lt;h3 id=&quot;6rcv&quot;&gt;Психологию цвета&lt;/h3&gt;
  &lt;p id=&quot;X2ka&quot;&gt;Если вы хотите создать цветовую палитру, которая привлекает вашу целевую аудиторию и точно рассказывает историю вашего бренда, важно иметь базовое представление о психологии цвета. Чтобы вы были в курсе, давайте взглянем на некоторые из наиболее распространенных цветовых ассоциаций ниже:&lt;/p&gt;
  &lt;ul id=&quot;Zh72&quot;&gt;
    &lt;li id=&quot;x8Fw&quot;&gt;&lt;strong&gt;Оранжевый&lt;/strong&gt; энергичный и теплый. Некоторые общие ассоциации с оранжевым включают креативность, энтузиазм, беззаботность и доступность.&lt;/li&gt;
    &lt;li id=&quot;IoIl&quot;&gt;&lt;strong&gt;Красный&lt;/strong&gt; — это цвет крови, поэтому он часто ассоциируется с энергией, войной, опасностью и силой, а также со страстью, желанием и любовью. Некоторые общие ассоциации с красным цветом включают действие, приключения, агрессию и волнение.&lt;/li&gt;
    &lt;li id=&quot;Jrbc&quot;&gt;&lt;strong&gt;Желтый&lt;/strong&gt; вызывает позитив, молодость, радость, игривость, солнечный свет и тепло.&lt;/li&gt;
    &lt;li id=&quot;EHEQ&quot;&gt;&lt;strong&gt;Розовый&lt;/strong&gt; вызывает чувства невинности и деликатности, благодарности, романтики, мягкости и признательности.&lt;/li&gt;
    &lt;li id=&quot;pMKk&quot;&gt;&lt;strong&gt;Синий&lt;/strong&gt; воспринимается как авторитетный, надежный и заслуживающий доверия. Общие ассоциации с синим цветом включают спокойствие, безмятежность, уверенность, достоинство и безопасность.&lt;/li&gt;
    &lt;li id=&quot;6znW&quot;&gt;&lt;strong&gt;Зеленый&lt;/strong&gt; – это цвет природы. Он символизирует рост, свежесть, безмятежность, деньги, здоровье и исцеление.&lt;/li&gt;
    &lt;li id=&quot;J3sg&quot;&gt;&lt;strong&gt;Черный цвет&lt;/strong&gt; олицетворяет силу, элегантность и власть. Общие ассоциации с черным также включают класс, различие, формальность, тайну, секретность и серьезность.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;PnSq&quot;&gt;Выбирайте цвета с умом&lt;/h3&gt;
  &lt;p id=&quot;Yu7h&quot;&gt;Обычно цветовые палитры состоят из шести цветов. Эти цвета должны включать один доминирующий цвет, четыре акцентных цвета и один стандартный цвет для текста (обычно черный или серый). Ваш доминирующий цвет — это то, что ваши клиенты навсегда будут ассоциировать с брендом, поэтому будьте очень осторожны при размышлении о том, каким должен быть этот цвет. Не торопитесь, чтобы вдохновиться, помните о цветовых ассоциациях и при необходимости проведите пользовательское тестирование.&lt;/p&gt;
  &lt;p id=&quot;NKJs&quot;&gt;Примечание: вы можете добавлять больше или меньше цветов в зависимости от индивидуальности вашего бренда и эстетики, к которой вы стремитесь. Выбор монохроматических, аналогичных или дополнительных цветов поможет вам добиться обтекаемой цветовой палитры. Помните: цветовая гармония здесь является целью!&lt;/p&gt;
  &lt;h3 id=&quot;KknB&quot;&gt;Не экономьте на контрасте&lt;/h3&gt;
  &lt;p id=&quot;eoAU&quot;&gt;Цветовой контраст является основой любого интерфейса, поскольку он делает каждый элемент пользовательского интерфейса заметным и отчетливым. Пользовательские интерфейсы, содержащие только оттенки из одного цветового семейства, вряд ли привлекут внимание пользователей и, более того, рискуют стать полной головной болью для навигации. С другой стороны, если цвета текста и фона слишком контрастируют друг с другом, текст может стать неразборчивым.&lt;/p&gt;
  &lt;p id=&quot;uKWz&quot;&gt;Дизайнеры контролируют уровень контрастности в зависимости от того, на что нацелен интерфейс. Опытные дизайнеры стремятся создать мягкий уровень контрастности и применяют высококонтрастные цвета только для элементов, которые должны выделяться, например, призыв к действию. Это связано с моим следующим пунктом...&lt;/p&gt;
  &lt;h3 id=&quot;3dlR&quot;&gt;Придерживайтесь соглашений пользовательского интерфейса&lt;/h3&gt;
  &lt;p id=&quot;aNQg&quot;&gt;При работе с цветами легко увлечься эстетикой, а не практичностью. Конечно, ваш интерфейс должен быть визуально приятным, но он также должен быть доступным, простым в навигации и приятным в использовании. Конечно, экспериментировать — это здорово, но сложные соглашения о дизайне с «острыми» дизайнами могут запутать ваших пользователей и заставить их работать усерднее, чем нужно.&lt;/p&gt;
  &lt;p id=&quot;UNbw&quot;&gt;Некоторые распространенные цветовые соглашения о дизайне пользовательского интерфейса включают в себя:&lt;/p&gt;
  &lt;ul id=&quot;S7gj&quot;&gt;
    &lt;li id=&quot;bugK&quot;&gt;Использование темного цвета текста для обеспечения удобочитаемости&lt;/li&gt;
    &lt;li id=&quot;Vt2I&quot;&gt;Сохранение светлых тонов для фона&lt;/li&gt;
    &lt;li id=&quot;NdPx&quot;&gt;Использование контрастных цветов для акцентов (как было сказано выше)&lt;/li&gt;
    &lt;li id=&quot;9eBa&quot;&gt;Придерживайтесь классических цветов призыва к действию, таких как красный для предупреждающего знака&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;SAJJ&quot;&gt;Соблюдение этих соглашений снизит когнитивную нагрузку для ваших пользователей и позволит им интуитивно ориентироваться в интерфейсе.&lt;/p&gt;
  &lt;h2 id=&quot;YmUW&quot; data-align=&quot;center&quot;&gt;Лучшие инструменты для выбора цветовой палитры&lt;/h2&gt;
  &lt;h3 id=&quot;rH6R&quot;&gt;Adobe Color&lt;/h3&gt;
  &lt;p id=&quot;h0PO&quot;&gt;Будучи ресурсом «хлеба с маслом» для всех цифровых креативщиков, &lt;a href=&quot;https://color.adobe.com/create&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;Adobe Color&lt;/strong&gt;&lt;/a&gt; предлагает практически все цветовые палитры. По сравнению с другими генераторами цветовых схем, Adobe Color намного более всеобъемлющий, поэтому не делайте его своим выбором, если вам нужно что-то быстрое и простое. Одной из ключевых функций Adobe Colors является генератор цветовой палитры, который извлекает цвета из загружаемых вами изображений.&lt;/p&gt;
  &lt;h3 id=&quot;BHKY&quot;&gt;Coolors&lt;/h3&gt;
  &lt;p id=&quot;1uGJ&quot;&gt;&lt;a href=&quot;https://coolors.co/&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;Coolors&lt;/strong&gt;&lt;/a&gt; - это полезный и удобный для начинающих генератор цветовой палитры, идеально подходящий для работы с шестнадцатеричными кодами. Вы можете переходить по случайным готовым цветовым палитрам, экспериментировать с оттенками и оттенками и сохранять свои любимые цвета, чтобы создать свою собственную палитру. Но еще веселее играть с их генератором. Как только вы найдете цвет, который вам нравится, просто скопируйте и вставьте его в любое внешнее приложение и начните проектировать!&lt;/p&gt;

</content></entry></feed>