Стиль и философия TPMET Edu Platform

Две фундаментальные цели

Всё, что мы делаем, строится на двух простых целях. Они звучат просто, но именно на них держится весь стиль платформы.

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

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

Эти две цели — удобство и сдержанность — стали основой. Теперь — как они воплощаются в цветах, шрифтах и компонентах.

Цветовая палитра: не просто красиво, а удобно

Цвета на сайте — не просто декор. Каждый оттенок выбран с учётом длительного чтения, читаемости и академического контекста. Никаких случайных решений.

Всё это — не дизайн «для красоты». Это дизайн «для чтения».

Типографика: как в хорошем учебнике

Шрифты — это костяная структура дизайна. Именно они определяют, как текст воспринимается на экране. Мы выбрали Arial и Georgia, потому что каждый из них решает конкретную задачу.

Arial — основной шрифт. Классический sans-serif, который используется на экранах десятилетиями. Он открытый, чистый, идеально читается даже при небольших размерах. Arial — это надёжность, которая не требует загрузки дополнительных файлов и работает на любом устройстве. Его простота — сила: он не отвлекает от содержания, а просто делает текст читаемым.

Georgia — для заголовков и акцентов. Шрифт с засечками, который придаёт тексту академическую строгость. Он напоминает классические учебники и научные публикации, но при этом оптимизирован для экранов — засечки крупные и чёткие, что делает его удобным для чтения даже при небольших размерах.

А почему не Inter или Helvetica? Потому что мы выбрали классику. Arial и Georgia есть на всех устройствах по умолчанию. Нам не нужно загружать их с сервера, они не зависят от интернета и работают мгновенно. Это инженерный подход: использовать то, что уже есть, и делать это лучше всего.

Для кода — Consolas или его аналоги. Шрифт, разработанный специально для кода, с различимыми символами (0 и O, 1 и l, { и [). Но если Consolas не загрузится, система упадёт на стандартный Courier New — тоже хороший и надёжный.

Размер шрифта — 17px с межстрочным интервалом 1.625 (примерно 27.6px). Это не случайные цифры: исследования показывают, что оптимальная ширина строки для чтения — 60-80 символов, а межстрочный интервал — 1.5-1.75. Мы взяли середину этого диапазона и получили баланс между плотностью и читаемостью.

Типографика — это не выбор шрифтов. Это наука о том, как текст воспринимается глазом. Мы следуем не трендам, а проверенным принципам.

Сетка и компоненты: инженерный подход

Сетка — это не просто рамка, а структура, которая определяет, как информация организована и воспринимается. Максимальная ширина 720px выбрана не случайно: это комфортная ширина строки для чтения — 60-80 символов при размере шрифта 17px.

Длинные строки утомляют глаза: когда строка слишком широка, глазу сложно найти начало следующей строки. Поэтому контент не растягивается на всю ширину экрана на больших мониторах — добавляются отступы слева и справа. На мобильных устройствах сетка сжимается, и контент занимает всю ширину — на телефонах каждый пиксель ценен, но ширина строк остаётся комфортной.

Компоненты — карточки, блоки, таблицы — тоже продуманы. Каждый имеет своё назначение: карточки для выделения тем, блоки определений для акцентирования важных формулировок, таблицы для структурированного представления данных. Но мы не используем их «для красивого вида» — каждый появляется только тогда, когда это необходимо.

Стиль не должен доминировать над содержанием. Если текст можно читать без карточек — они не нужны. Если блок определения добавляет ценности — значит, он уместен. Дизайн — это не декор, а инструмент для передачи знаний.

Формулы и код: инструменты, а не украшения

В технических дисциплинах формулы и код — это не просто элементы оформления. Это язык, на котором выражаются идеи. Поэтому их отображение должно быть безупречным.

\( \KaTeX \) — быстрая библиотека для формул. Она рендерит формулы в миллисекундах, а не в секундах, что критично для онлайн-обучения с ограниченным интернетом. Она также лучше интегрируется в текст — сохраняет межстрочный интервал и размер шрифта, что важно для строчных формул.

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

Highlight.js — подсветка кода. Простая, надёжная и быстрая. Тема «stackoverflow-light» — светлый фон с деликатной подсветкой, который не отвлекает внимание. Код должен быть легко читаемым, но не «выпрыгивающим» из текста.

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

Простота и консистентность

Простота — один из важнейших принципов. Не как упрощение, а как осознанное устранение лишнего. Каждый элемент на странице должен выполнять функцию. Если элемент не делает ничего полезного — он должен быть удалён.

Это проявляется во всём. Отступы между элементами — не случайные цифры, а логически обоснованные значения: 16px, 24px, 32px и 48px. Это степени двойки и кратные значения, которые создают ритм и иерархию без излишеств.

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

Это особенно важно для образовательных платформ. Когда студент заходит на новый раздел, он не должен заново учиться, как пользоваться интерфейсом. Он должен чувствовать, что всё устроено одинаково: кнопки ведут себя одинаково, навигация понятна, структура логична. Консистентность — это уважение к времени и умственным ресурсам пользователя.

Мы используем CSS-переменные для всех ключевых значений: цветов, отступов, размеров. Это позволяет легко менять стиль целиком, просто изменив несколько значений. Но мы не меняем их часто — потому что консистентность важнее «модных» изменений.

Вдохновение и принципы

Этот стиль не родился в воздухе. Он — результат анализа лучших примеров технической литературы, университетских сайтов, инженерной документации и научных публикаций.

Нас вдохновляют классические учебники по физике и математике, где дизайн — не «добавление к содержанию», а его неотъемлемая часть. Они не пытаются быть «модными», они не гонятся за эффектами. Они просто хорошо структурированы и читаются легко. Это и есть наш идеал.

Дизайн сайта опирается на пять принципов:

• Читаемость прежде всего. Никаких мелких шрифтов, тонких линий или сложных градиентов. Текст должен читаться легко, даже если вы читаете его часами.
• Структурированность. Каждый блок имеет чёткое назначение и визуальное отличие (карточки, полосы, фоны). Это не декор, а инструмент для навигации.
• Адаптивность. Сайт одинаково хорошо работает на ноутбуке, планшете и смартфоне. Мы делаем единый адаптивный интерфейс, который меняется в зависимости от контекста.
• Экономия трафика. Минимум тяжёлых эффектов, локальные шрифты, кэшируемые CSS-файлы. Сайт должен работать даже при плохом интернете.
• Доступность. Контраст между текстом и фоном соответствует стандартам WCAG 2.1, навигация доступна с клавиатуры. Это базовое требование, а не «дополнительная опция».

Эти принципы — результат анализа того, что делает контент эффективным. Мы проектируем не для себя, а для студентов, которые будут использовать этот сайт для учёбы.

Стиль — это не самоцель. Это инструмент для передачи знаний. Если дизайн удачный, о нём никто не думает — он становится частью фона, через который проходит знание. А когда дизайн плохой — он становится преградой, которую нужно преодолеть, прежде чем можно будет добраться до сути.

Заключение

TPMET Edu Platform — это не просто набор страниц и компонентов. Это продуманная система, где каждый элемент имеет логическое обоснование и функциональное назначение. Стиль, который мы создали, — баланс между академической строгостью, инженерной точностью и современной читаемостью.

Мы не гонимся за трендами, не делаем «модный дизайн любой ценой». Вместо этого следуем проверенным принципам: читаемость, структура, простота и уважение к времени и вниманию пользователя.

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

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