0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>21 фев 2023</li>
2
<ul><li>21 фев 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Что такое иерархия? Объясняем простыми словами</h2>
4
</ul><h2>Что такое иерархия? Объясняем простыми словами</h2>
5
<p>Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"</p>
5
<p>Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
7
<p>Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.</p>
7
<p>Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.</p>
8
<p>Иерархия - это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?</p>
8
<p>Иерархия - это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?</p>
9
<p>Простыми словами объясняют, что значит "иерархия",<a>эксперт в графическом дизайне</a>Михаил Воронин и <a>эксперт в разработке</a>Ануар Мендубаев.</p>
9
<p>Простыми словами объясняют, что значит "иерархия",<a>эксперт в графическом дизайне</a>Михаил Воронин и <a>эксперт в разработке</a>Ануар Мендубаев.</p>
10
<p>Шрифтовой дизайнер в студии NT Type, опытный графический дизайнер. Технический специалист цифровой печати. Спикер на профильных мероприятиях. Участник крупных шрифтовых сообществ и участник выставки "Ё-фест - 2022".</p>
10
<p>Шрифтовой дизайнер в студии NT Type, опытный графический дизайнер. Технический специалист цифровой печати. Спикер на профильных мероприятиях. Участник крупных шрифтовых сообществ и участник выставки "Ё-фест - 2022".</p>
11
<p>Иерархия строится на наборе рекомендаций, которые помогают организовать свою работу. Графики, типографы и дизайнеры работали по ним на протяжении многих веков. Но эти главные принципы стали особенно важны, когда появились Photoshop и Figma.</p>
11
<p>Иерархия строится на наборе рекомендаций, которые помогают организовать свою работу. Графики, типографы и дизайнеры работали по ним на протяжении многих веков. Но эти главные принципы стали особенно важны, когда появились Photoshop и Figma.</p>
12
<p>С приходом и распространением цифровых интерфейсов появилась нужда в цифровой вёрстке, которая оказалась чуть ли не сложнее книжной. Тут вам и адаптивность, и разница в отображении на разных устройствах, и разница рендеринга, браузеров, операционок и так далее. Соответственно, мало понимать, как расположить объекты на экране так, чтобы они создавали нужный эффект и впечатления, - нужно также учитывать все эти технические и UX/UI-особенности.</p>
12
<p>С приходом и распространением цифровых интерфейсов появилась нужда в цифровой вёрстке, которая оказалась чуть ли не сложнее книжной. Тут вам и адаптивность, и разница в отображении на разных устройствах, и разница рендеринга, браузеров, операционок и так далее. Соответственно, мало понимать, как расположить объекты на экране так, чтобы они создавали нужный эффект и впечатления, - нужно также учитывать все эти технические и UX/UI-особенности.</p>
13
<p>Иерархия - это визуальная организация информации. Она даёт много полезного:</p>
13
<p>Иерархия - это визуальная организация информации. Она даёт много полезного:</p>
14
<ul><li>Помогает создать визуальную структуру, которая направляет взгляд зрителя по дизайну.</li>
14
<ul><li>Помогает создать визуальную структуру, которая направляет взгляд зрителя по дизайну.</li>
15
<li>Организует информацию в группы на основе их важности или значимости друг для друга.</li>
15
<li>Организует информацию в группы на основе их важности или значимости друг для друга.</li>
16
</ul><p>Например, если бы вы разрабатывали информационную брошюру о новой линейке продуктов, то первым шагом было бы решение о том, какая информация должна быть где расположена, чтобы всё это имело смысл для человека, не знакомого с продукцией компании (или даже тому, кто работает в ней уже много лет). Это означает, что некоторые части важнее других - поэтому они должны быть на первом месте!</p>
16
</ul><p>Например, если бы вы разрабатывали информационную брошюру о новой линейке продуктов, то первым шагом было бы решение о том, какая информация должна быть где расположена, чтобы всё это имело смысл для человека, не знакомого с продукцией компании (или даже тому, кто работает в ней уже много лет). Это означает, что некоторые части важнее других - поэтому они должны быть на первом месте!</p>
17
<p>Основная идея иерархической системы - разделение информации на уровни.</p>
17
<p>Основная идея иерархической системы - разделение информации на уровни.</p>
18
<p>Каждый уровень содержит элементы, которые более важны, чем элементы предыдущего уровня, и менее важны, чем элементы следующего уровня.</p>
18
<p>Каждый уровень содержит элементы, которые более важны, чем элементы предыдущего уровня, и менее важны, чем элементы следующего уровня.</p>
19
<p>Иерархия помогает зрителям понять, что самое главное, чтобы они могли сначала сосредоточиться на этом, а затем - при желании - перейти к менее важным деталям.</p>
19
<p>Иерархия помогает зрителям понять, что самое главное, чтобы они могли сначала сосредоточиться на этом, а затем - при желании - перейти к менее важным деталям.</p>
20
<p>В основе иерархических структур в графическом дизайне три основных аспекта, или правила:<strong>баланс, контраст и близость</strong>.</p>
20
<p>В основе иерархических структур в графическом дизайне три основных аспекта, или правила:<strong>баланс, контраст и близость</strong>.</p>
21
<p>Этот принцип означает, как близко друг к другу расположены элементы в общей схеме компоновки. Сближение или удаление помогает направлять пользователей к необходимой им информации на каждой странице, потому что создаёт визуальные подсказки, которые организовывают быстрый (или лёгкий) поиск того, что им нужно. Без верного соблюдения правила близости всё будет выглядеть хаотично - а этого никто не хочет!</p>
21
<p>Этот принцип означает, как близко друг к другу расположены элементы в общей схеме компоновки. Сближение или удаление помогает направлять пользователей к необходимой им информации на каждой странице, потому что создаёт визуальные подсказки, которые организовывают быстрый (или лёгкий) поиск того, что им нужно. Без верного соблюдения правила близости всё будет выглядеть хаотично - а этого никто не хочет!</p>
22
<p>Самое важное: объекты, расположенные рядом друг с другом, кажутся связанными. Это можно использовать как способ организовать информацию или элементы дизайна в группы.</p>
22
<p>Самое важное: объекты, расположенные рядом друг с другом, кажутся связанными. Это можно использовать как способ организовать информацию или элементы дизайна в группы.</p>
23
Например, у вас есть несколько изображений в одной композиции, и вы хотите, чтобы все они воспринимались как одинаково важные, хотя они и необязательно связаны по смыслу (как серия фотографий блюд). Близость может помочь вам достичь этого эффекта: визуальная группировка позволит им выглядеть как единое целое, а не как отдельные объекты<em>Изображение: Roman Lel /<a>Behance</a></em><p>По принципу контраста создают визуальные различия между элементами, чтобы сделать одни более заметными, другие - менее. Для этого работают с цветами, формами, размерами и текстурами.</p>
23
Например, у вас есть несколько изображений в одной композиции, и вы хотите, чтобы все они воспринимались как одинаково важные, хотя они и необязательно связаны по смыслу (как серия фотографий блюд). Близость может помочь вам достичь этого эффекта: визуальная группировка позволит им выглядеть как единое целое, а не как отдельные объекты<em>Изображение: Roman Lel /<a>Behance</a></em><p>По принципу контраста создают визуальные различия между элементами, чтобы сделать одни более заметными, другие - менее. Для этого работают с цветами, формами, размерами и текстурами.</p>
24
<ul><li><strong>Цветовой контраст.</strong></li>
24
<ul><li><strong>Цветовой контраст.</strong></li>
25
</ul><p>Использовать этот приём довольно легко, потому что многие контрастные цвета видно невооруженным глазом: достаточно взять один светлый, один тёмный (например, на фон) и гармонирующие оттенки. Но и ошибиться просто, особенно если яркость выбранных цветов одинаковая, а отличается только оттенок.</p>
25
</ul><p>Использовать этот приём довольно легко, потому что многие контрастные цвета видно невооруженным глазом: достаточно взять один светлый, один тёмный (например, на фон) и гармонирующие оттенки. Но и ошибиться просто, особенно если яркость выбранных цветов одинаковая, а отличается только оттенок.</p>
26
Для максимального эффекта можно брать цвета различных цветовых схем - например, ярко-красный текст на чёрно-белом фоне<em>Изображение: Agustin R. Michel /<a>Behance</a></em><ul><li><strong>Контраст формы.</strong></li>
26
Для максимального эффекта можно брать цвета различных цветовых схем - например, ярко-красный текст на чёрно-белом фоне<em>Изображение: Agustin R. Michel /<a>Behance</a></em><ul><li><strong>Контраст формы.</strong></li>
27
</ul><p>Два объекта или две области в одном дизайне могут иметь разные формы - так создаётся контраст.</p>
27
</ul><p>Два объекта или две области в одном дизайне могут иметь разные формы - так создаётся контраст.</p>
28
<p>Например, иконки разделов и категорий товаров в онлайн-магазине могут быть одного размера, но круглыми и квадратными - и эта непохожесть поможет им выделяться.</p>
28
<p>Например, иконки разделов и категорий товаров в онлайн-магазине могут быть одного размера, но круглыми и квадратными - и эта непохожесть поможет им выделяться.</p>
29
Аналогично, если использовать треугольники vs прямоугольники vs круги в дизайне лендинга, это создаст интерес и в то же время сохранит организованность<em>Изображение: Mostafijur Rahman / Masum Billah /<a>Behance</a></em><ul><li><strong>Контраст размеров.</strong></li>
29
Аналогично, если использовать треугольники vs прямоугольники vs круги в дизайне лендинга, это создаст интерес и в то же время сохранит организованность<em>Изображение: Mostafijur Rahman / Masum Billah /<a>Behance</a></em><ul><li><strong>Контраст размеров.</strong></li>
30
</ul><p>Крупные элементы, как правило, привлекают внимание легче, чем мелкие, поскольку их быстрее обрабатывают наши глаза и мозг. Конечно, это не означает, что всегда надо делать весь текст огромным.</p>
30
</ul><p>Крупные элементы, как правило, привлекают внимание легче, чем мелкие, поскольку их быстрее обрабатывают наши глаза и мозг. Конечно, это не означает, что всегда надо делать весь текст огромным.</p>
31
Помните: большому тексту нужен большой объём воздуха вокруг<em>Изображение: Roman Yarmishko / Mary Iarmishko /<a>Behance</a></em><p>Правильный баланс элементов создаёт визуальную последовательность и ощущения порядка и аккуратности (или их отсутствия, если дизайн это подразумевает).</p>
31
Помните: большому тексту нужен большой объём воздуха вокруг<em>Изображение: Roman Yarmishko / Mary Iarmishko /<a>Behance</a></em><p>Правильный баланс элементов создаёт визуальную последовательность и ощущения порядка и аккуратности (или их отсутствия, если дизайн это подразумевает).</p>
32
<p>Баланс позволяет зрителю увидеть общую гармонию композиции, не отвлекаясь на отдельные элементы. Его достигают с помощью симметрии и асимметрии, а также масштаба, пропорций и соотношения между элементами.</p>
32
<p>Баланс позволяет зрителю увидеть общую гармонию композиции, не отвлекаясь на отдельные элементы. Его достигают с помощью симметрии и асимметрии, а также масштаба, пропорций и соотношения между элементами.</p>
33
<ul><li><strong>Симметрия.</strong></li>
33
<ul><li><strong>Симметрия.</strong></li>
34
</ul><p>Симметрия подчёркивает общность элементов, а симметричные макеты обычно считаются более формальными, чем асимметричные.</p>
34
</ul><p>Симметрия подчёркивает общность элементов, а симметричные макеты обычно считаются более формальными, чем асимметричные.</p>
35
<em>Изображение: Patrick Seymour /<a>Behance</a></em><ul><li><strong>Асимметрия</strong>.</li>
35
<em>Изображение: Patrick Seymour /<a>Behance</a></em><ul><li><strong>Асимметрия</strong>.</li>
36
</ul><p>Асимметрия может отталкивать и этим самым привлекать больше внимания. Причём иногда будет достаточно просто не выровнять в макете два одинаковых серых прямоугольника.</p>
36
</ul><p>Асимметрия может отталкивать и этим самым привлекать больше внимания. Причём иногда будет достаточно просто не выровнять в макете два одинаковых серых прямоугольника.</p>
37
В асимметричных композициях нет зеркальных форм. Если вы хотите создать дизайн с энергией или движением, то асимметрия может быть подходящим инструментом<em>Изображение: Olivia King / Jason Little / For The People / Johanna Roca / James Gilmore / Ben Walker /<a>Behance</a></em><p>Здесь на самом деле всё то же самое.</p>
37
В асимметричных композициях нет зеркальных форм. Если вы хотите создать дизайн с энергией или движением, то асимметрия может быть подходящим инструментом<em>Изображение: Olivia King / Jason Little / For The People / Johanna Roca / James Gilmore / Ben Walker /<a>Behance</a></em><p>Здесь на самом деле всё то же самое.</p>
38
<p>В книгопечатании, а позже и в вебе сформировались<strong>законы иерархии текста</strong>:</p>
38
<p>В книгопечатании, а позже и в вебе сформировались<strong>законы иерархии текста</strong>:</p>
39
<ul><li>крупный кегль шрифта важнее мелкого,</li>
39
<ul><li>крупный кегль шрифта важнее мелкого,</li>
40
<li>более жирное начертание важнее тонкого или регулярного.</li>
40
<li>более жирное начертание важнее тонкого или регулярного.</li>
41
</ul><p>Курсив стоит немного в стороне, так как исторически это был отдельный шрифт, позже превратившийся в вид начертания и, следовательно, в вид выделения информации в тексте.</p>
41
</ul><p>Курсив стоит немного в стороне, так как исторически это был отдельный шрифт, позже превратившийся в вид начертания и, следовательно, в вид выделения информации в тексте.</p>
42
<p>Точно так же особняком стоят акцидентные шрифты. Ими набирают не большие блоки текста, а только заголовки, крупные выносы и всякого рода украшательства вроде буквиц.</p>
42
<p>Точно так же особняком стоят акцидентные шрифты. Ими набирают не большие блоки текста, а только заголовки, крупные выносы и всякого рода украшательства вроде буквиц.</p>
43
<p>Условно говоря, чем больше краски тратит (или чем больше пикселей занимает) символ текста, а также чем шрифт заковыристей, тем текст важнее и выше в иерархии дизайна.</p>
43
<p>Условно говоря, чем больше краски тратит (или чем больше пикселей занимает) символ текста, а также чем шрифт заковыристей, тем текст важнее и выше в иерархии дизайна.</p>
44
<p>Однако иерархию можно соблюсти и тремя начертаниями одного шрифта.</p>
44
<p>Однако иерархию можно соблюсти и тремя начертаниями одного шрифта.</p>
45
<p>Мы в NT Type как раз запустили бета-версию нашего нового геометрического гротеска NT Somic - можете<a>скачать и опробовать</a> в своём продукте. Одна просьба: пока шрифт в бете, не спешите раскидывать его по пабликам типа "Все бесплатные шрифты с кириллицей здесь", а лучше попробуйте его в работе и напишите нам отзыв. Мы будем очень признательны.</p>
45
<p>Мы в NT Type как раз запустили бета-версию нашего нового геометрического гротеска NT Somic - можете<a>скачать и опробовать</a> в своём продукте. Одна просьба: пока шрифт в бете, не спешите раскидывать его по пабликам типа "Все бесплатные шрифты с кириллицей здесь", а лучше попробуйте его в работе и напишите нам отзыв. Мы будем очень признательны.</p>
46
<p>Team Lead Developer в Antro.cx.</p>
46
<p>Team Lead Developer в Antro.cx.</p>
47
<p>Слышу "иерархия" - вспоминаю принципы программирования. А именно - их систематизацию.</p>
47
<p>Слышу "иерархия" - вспоминаю принципы программирования. А именно - их систематизацию.</p>
48
<p>Эти принципы делают работу программиста эффективнее, и важно всегда помнить о них. Разберём несколько - KISS, DRY, YAGNI, SOLID.</p>
48
<p>Эти принципы делают работу программиста эффективнее, и важно всегда помнить о них. Разберём несколько - KISS, DRY, YAGNI, SOLID.</p>
49
<p><strong>KISS (keep it simple, stupid)</strong> - делайте код проще. Большинство систем работают лучше всего, когда они остаются простыми, а не усложняются.</p>
49
<p><strong>KISS (keep it simple, stupid)</strong> - делайте код проще. Большинство систем работают лучше всего, когда они остаются простыми, а не усложняются.</p>
50
<p><strong>DRY (don’t repeat yourself)</strong>- не повторяйте себя. Не дублируйте свой код, и тогда, например, вам понадобится внести изменения только в одном месте. Поверьте: будущий вы об этом не пожалеете.</p>
50
<p><strong>DRY (don’t repeat yourself)</strong>- не повторяйте себя. Не дублируйте свой код, и тогда, например, вам понадобится внести изменения только в одном месте. Поверьте: будущий вы об этом не пожалеете.</p>
51
<p><strong>YAGNI</strong>(<strong>you aren’t gonna need it)</strong>- вам это не понадобится. Не усложняйте свой код лишней функциональностью, которая не используется в данный момент.</p>
51
<p><strong>YAGNI</strong>(<strong>you aren’t gonna need it)</strong>- вам это не понадобится. Не усложняйте свой код лишней функциональностью, которая не используется в данный момент.</p>
52
<p>Если вы знакомы с ООП, то, скорее всего, слышали и о принципах SOLID.</p>
52
<p>Если вы знакомы с ООП, то, скорее всего, слышали и о принципах SOLID.</p>
53
<p>Это пять основных правил ООП и проектирования, которые нужно соблюдать, чтобы твой код было проще масштабировать и поддерживать.</p>
53
<p>Это пять основных правил ООП и проектирования, которые нужно соблюдать, чтобы твой код было проще масштабировать и поддерживать.</p>
54
<ul><li><strong>Принцип единственной ответственности</strong>(Single Responsibility Principle, SRP): каждый объект должен иметь одну обязанность, и эта обязанность должна быть полностью инкапсулирована в класс, а все его сервисы должны быть направлены исключительно на обеспечение этой обязанности.</li>
54
<ul><li><strong>Принцип единственной ответственности</strong>(Single Responsibility Principle, SRP): каждый объект должен иметь одну обязанность, и эта обязанность должна быть полностью инкапсулирована в класс, а все его сервисы должны быть направлены исключительно на обеспечение этой обязанности.</li>
55
<li><strong>Принцип открытости/закрытости</strong>(Open/Closed Principle, OCP): твой код должен быть открытым для расширения, но закрытым для изменения.</li>
55
<li><strong>Принцип открытости/закрытости</strong>(Open/Closed Principle, OCP): твой код должен быть открытым для расширения, но закрытым для изменения.</li>
56
<li><strong>Принцип подстановки Барбары Лисков</strong>(Liskov Substitution Principle, LSP): поведение наследуемых классов не должно противоречить поведению, заданному базовым классом. То есть поведение наследуемых классов должно быть ожидаемым для кода, который использует базовый класс.</li>
56
<li><strong>Принцип подстановки Барбары Лисков</strong>(Liskov Substitution Principle, LSP): поведение наследуемых классов не должно противоречить поведению, заданному базовым классом. То есть поведение наследуемых классов должно быть ожидаемым для кода, который использует базовый класс.</li>
57
<li><strong>Принцип разделения интерфейса</strong>(Interface Segregation Principle, ISP): слишком "толстые" интерфейсы надо разделять на более маленькие и специфические, чтобы программные сущности маленьких интерфейсов знали только о методах, которые необходимы им в работе.</li>
57
<li><strong>Принцип разделения интерфейса</strong>(Interface Segregation Principle, ISP): слишком "толстые" интерфейсы надо разделять на более маленькие и специфические, чтобы программные сущности маленьких интерфейсов знали только о методах, которые необходимы им в работе.</li>
58
<li><strong>Принцип инверсии зависимостей</strong>(Dependency Inversion Principle, DIP): модули верхних уровней не должны зависеть от модулей нижних уровней.</li>
58
<li><strong>Принцип инверсии зависимостей</strong>(Dependency Inversion Principle, DIP): модули верхних уровней не должны зависеть от модулей нижних уровней.</li>
59
</ul><p>Кроме SOLID есть множество других принципов и методик, которые помогают создавать качественный код.</p>
59
</ul><p>Кроме SOLID есть множество других принципов и методик, которые помогают создавать качественный код.</p>
60
<p>А ещё в разработке важна иерархия профессиональных статусов.</p>
60
<p>А ещё в разработке важна иерархия профессиональных статусов.</p>
61
<p>В IT-мире принято делить профессионализм разработчиков на три основных уровня или грейда - джуны (junior), мидлы (middle) и сеньоры (senior). Грейд разработчика растёт по мере его развития, но в зависимости от места работы он может сильно отличаться. То есть в одной компании разработчик может быть сеньором, а в другой этот же разработчик может быть мидлом.</p>
61
<p>В IT-мире принято делить профессионализм разработчиков на три основных уровня или грейда - джуны (junior), мидлы (middle) и сеньоры (senior). Грейд разработчика растёт по мере его развития, но в зависимости от места работы он может сильно отличаться. То есть в одной компании разработчик может быть сеньором, а в другой этот же разработчик может быть мидлом.</p>
62
<p>Новички, только начинающие свой путь в IT. Им нужна поддержка более опытных разработчиков и обучение (менторство).</p>
62
<p>Новички, только начинающие свой путь в IT. Им нужна поддержка более опытных разработчиков и обучение (менторство).</p>
63
<p>Разработчики среднего уровня. У них уже есть опыт работы, и они умеют самостоятельно решать задачи.</p>
63
<p>Разработчики среднего уровня. У них уже есть опыт работы, и они умеют самостоятельно решать задачи.</p>
64
<p>Опытные разработчики, которые уже много лет работают в IT и обладают глубоким знанием своей области.</p>
64
<p>Опытные разработчики, которые уже много лет работают в IT и обладают глубоким знанием своей области.</p>
65
<p>Это разработчики, которые могут управлять проектами, оценивать задачи и способны принимать важные и большие решения.</p>
65
<p>Это разработчики, которые могут управлять проектами, оценивать задачи и способны принимать важные и большие решения.</p>
66
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
66
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>