Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>6 окт 2022</li>

3 <li>0</li>

4 </ul><h2>Простыми словами: что такое модуль?</h2>

5 Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"

6 Иллюстрация: Оля Ежак для Skillbox Media

7 Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.

8 Модуль - это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?

9 Простыми словами объясняют, что такое модуль, эксперт в графическом дизайне Таня Ермолаева и эксперт в разработке Александр Кучук.

10 Арт-директор, междисциплинарный дизайнер, в прошлом преподавательница "Британки". Работала в Институте "Стрелка", Tsentsiper, Wednesday Studio. Со-основательница проекта "<a>Орнамика</a>".

11 У слова "модуль" в дизайне есть как минимум два значения. Причём часто они пересекаются, и я бы не искала тут строгости употребления. Главное - понять принцип.

12 В целом:

13 Модуль - это наименьший повторяемый элемент, который при этом служит главным организующим принципом композиции или визуальной системы.

14 Чаще всего, когда в дизайне говорят "модуль", имеют в виду единый неделимый элемент в его основе - как атом. И благодаря выделению такого элемента можно облегчить принцип построения визуальной системы или конкретной композиции.

15 Как именно это работает?

16 Модуль появляется там, где нужно повторение.

17 Например, есть задача сделать десять одинаковых элементов с небольшими изменениями - десять карточек товара в онлайн-магазине или десять названий спектаклей на плакате. Можем ли мы на основе этих элементов построить модульную сетку и создать такую композицию, которая подчеркнёт содержание и выведет его на первый план, а не смажет? Вполне.

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

19 Модульная сетка на базе карточек товаров в e-commerce-проектеИзображение: предоставлено Таней ЕрмолаевойМодульная сетка в плакате с насыщенным контентом усложнена смещением и наложением. Модуль не обязан быть предсказуемым!Изображение: предоставлено Таней ЕрмолаевойМодуль может быть какой угодно величины. Есть забавная цитата Массимо Виньелли, что можно воспринимать пустой лист бумаги как поделённый на бесконечное количество модулей. В веб-дизайне и в продуктовом дизайне для создания последовательной дизайн-системы используют так называемый микромодуль - квадрат какого-то совсем маленького размера типа 4×4 px. Он одновременно служит визуальной направляющей на странице (часто совпадает с baseline-гридом и соотносится с колончатой сеткой и полями на сайте) и помогает сделать абсолютно все размеры на странице последовательными.

20 Гайдлайны material.io - один из самых знаменитых примеров построения дизайн-системы. Микромодуль играет тут одну из главных ролейСкриншот: сайт<a>material</a>.io / Таня ЕрмолаеваТаким образом, модуль - это просто условность, которая облегчает принятие решений по ходу дизайна.

21 Должен ли отступ быть 10 px или 12 px? С модулем 4 px этот вопрос отпадает - все значения должны быть кратны 4.

22 Часто никакой фундаментальной идеи, кроме удобства и консистентности визуальной системы, за этим не стоит, но кто-то видит и отдельную специальную гармонию в цифрах и пропорциях: "Модуль 4 px круче 5 px!"

23 Можно думать о модуле как о кубиках лего - наборе элементов, из которых можно создать всё что угодно, но с ограничениями, которые есть у этих элементов.

24 Поэтому модуль - это некое правило игры лейаута. Как единый и неделимый первоэлемент, модуль может поворачиваться, увеличиваться кратно себе, уменьшаться кратно себе и вообще как-то странно себя вести.

25 Особенно хорошо такое поведение видно в модульных шрифтах. Пример - один из первых сконструированных шрифтов или, во всяком случае, один из первых шрифтов, не боящихся своей сконструированности - шрифт Вима Кроуэлла.

26 Шрифт-конструктор Вима Кроуэлла, 1968Изображение:<a>The Museum of Modern Art</a>По модулю можно построить любой лейаут, где нужно максимальное повторение при минимальном разнообразии. В том числе, например, и паттерны.

27 Java-разработчик, преподаватель.

28 Итак, вы учитесь, вы стажёр, и вы аккуратно спрашиваете у старшего коллеги, что такое модуль.

29 Модуль - это законченный блок кода (либо отдельный программный компонент), отвечающий за конкретный функционал.

30 И тут вы чувствуете, как между вами проскакивает искра, буря, безумие непонимания и вопросы застревают в горле.

31 Спокойствие! Айти или не айти - всё это пришло из обычной жизни. По ней и объясню.

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

33 Почему? Для каких целей?

34 Никто не хочет, чтобы в спальне у вас пахло борщом, футбольными бутсами, и ваш сожитель орал на совещании о дедлайне.

35 Вы отделяете и изолируете области, которые должны выполнять конкретные задачи.

36 Кухня - всё, что связано с едой и её приготовлением, хранением. Спальня - сон и отдых. Кто-то готовит? Это не мешает вам спать. Кто-то пришёл с футбола и ароматом подтверждает успех игры? Это не мешает вам спать. В то же время и вы, ложась спать, не мешаете другим.

37 На кухне у вас кухонная утварь; всё, что касается кухни, - туда. Всё, что касается работы, - в рабочую зону. Таким образом, вам не надо искать микроволновку по тысячеметровой квартире - она точно на кухне.

38 Специфические вещи, у которых есть конкретные задачи, сгруппированы логически в специальных областях.

39 Вы не планируете работать дома? Значит, не создаёте рабочую зону. Не собираетесь ничего хранить? Не делаете у себя кладовку.

40 Вы используете только те области, что вам нужны.

41 Логично? Да. Удобно? Вполне.

42 А теперь назовите эти области модулями. Кухонный модуль, рабочий модуль и так далее.

43 Идём дальше. Представьте себе громадный фреймворк (привет, Spring). Это огромное количество кода и решений под конкретные задачи: работа с базами данных, работа с Web, Security и прочим. И тут, ровно как в космическом корабле или вашей сказочной квартире, есть разделение на модули. И каждый модуль решает свою задачу или помогает другим модулям с этим.

44 Вам нужна работа с БД? Подключаете модуль Spring Data. Нужно работать с безопасностью - подключаете Spring Security. Ровно как с проектированием квартиры: нужна кладовка (работа с БД) - включаете её в план квартиры, используете и радуетесь.

45 Не нужно? Не включаете и не тащите лишнее себе в пространство.

46 Как и в быту, если вы добавляете в модуль что-то лишнее, то это плохо. Например, если у вас на кухне оказываются спальные принадлежности, а на кровати комбайн - это будет мешать и раздражать.

47 Так же и в программировании: если вы (или разработчик) затянули в модуль что-то, чего там быть не должно, это будет бесить.

48 Поэтому делить на модули надо аккуратно, вдумчиво: что относится к задаче, то и должно быть в нём.

49 Вот вам и модуль.

50 А теперь посмотрите на JDK и вы обнаружите даже там модули! Как видите, у меня Java головного мозга.

51 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>