Визуальная система УралТЕСТ
Точность.
С уральским
характером.
Инженерная ясность, промышленная культура и география Урала. Одна система для сайта, документов и общения с клиентом.
Екатеринбург · 202601 /Фирменный знак
Уверенная геометрия.
Узнаваемый силуэт.
Буква «У» держит внутри горную вершину. Открытая верхняя часть, чёткие диагонали и одинаковая толщина штрихов связывают знак с инженерным чертежом.
Оставляйте вокруг логотипа свободное пространство не меньше четверти высоты знака. На фотографии используйте однотонную подложку.
Знак — от 24 px, полная версия — от 180 px по ширине. Ниже 240 px подпись «Центр сертификации» лучше убрать.
Сохраняйте пропорции, цвета и взаимное положение частей. Для печати используйте вектор; для иконок — компактный знак.
02 /Цветовая палитра
Камень. Хвоя.
Солнечный акцент.
Тёплая светлая основа даёт воздуху работать. Зелёный выделяет бренд и крупные смысловые блоки. Жёлтый собирает внимание на следующем действии.
#F4F3ED#174C3C#202825#EBC547Ориентир для страницы: 60 / 25 / 10 / 5. На жёлтом — графитовый текст. Основной текст на светлом — графит или зелёный; в зелёных блоках — тёплый белый. Жёлтый текст на светлом фоне не использовать.
03 /Типографика
Крупно о главном.
Подробно о деле.
Аа Бб Вв Гг Дд Ее Жж Зз
0123456789 ↗ →
Аа Бб Вв Гг Дд Ее Жж Зз
0123456789 ↗ →
Оба шрифта подключаются локально в WOFF2 с кириллицей. Читаемость важнее плотности: длина строки основного текста — 55–75 знаков, межстрочный интервал — 1,6–1,7.
к следующему шагу.
в вашей задаче
Расскажите, какую продукцию производите или ввозите. Поможем определить требования к документам и составить понятный порядок работы.
04 /Графический язык
Регион узнаётся
в деталях.
Открытые линии, контуры, координатные метки и прямые углы продолжают характер знака. Уральские мотивы помогают ориентироваться в географии работы.
Иконки: сетка 48 × 48, толщина линии 1,5–2 px, геометрические углы. Одна иконка — одно назначение. SVG остаётся чётким при масштабировании и не требует загрузки библиотеки.
Урал / линия горизонта
Город, горы, карта.
Каждому мотиву — своя роль.
Городской силуэт и контур хребта подходят для первого экрана, подложек и разделителей. Координатные метки — для схем процесса. Карта связывает город с конкретным контактом.
Гербы используют только рядом с соответствующим городом или регионом, в исходных пропорциях. Официальный герб Екатеринбурга берётся из городского дизайн-кода ↗.
Герб обозначает территорию. Не включать его в корпоративный логотип и не создавать впечатление государственной принадлежности. Нейросеть не рисует официальную символику.
05 /Компоненты интерфейса
Сначала задача.
Потом действие.
Одна заметная основная кнопка на блок. Услуга объясняет результат и ведёт дальше. Поля сохраняют видимые подписи и помогают исправить ошибку.
Кнопки / высота от 48 px
Жёлтая — основное действие. Контурная — альтернативный путь. Состояния hover и фокус заметны без изменения размеров.
Карточка / иконка + понятный результат
Сертификат соответствия
Определим требования к продукции и поможем пройти необходимые процедуры.
Подробнее об услуге ↗Поле / видимая подпись и подсказка
Образец компонента. Введённые данные не отправляются.
Текст / спокойный и предметный
Объясняем порядок,
а не обещаем чудо.
«Опишем необходимые документы после изучения продукции» — полезнее общего «Любые сертификаты быстро». Срок, стоимость и обязательность подтверждаем для конкретной задачи. Пишем коротко, обращаемся на «вы».
В демонстрации формы явно указано, что заявка не отправляется. После подключения сервера успех показывается только при подтверждённом приёме.
06 /Фотостиль и иллюстрации
Материал, фактура,
масштаб производства.
Единая серия: естественный свет, глубокий зелёный, тёплый металл и чистая композиция. Графика раскрывает отрасль и оставляет место для текста.
Изображения этой серии — тематические иллюстрации. Они не подтверждают наличие у компании собственного производства, оборудования, лаборатории или сотрудников. Не использовать их как фотографии объектов УралТЕСТ.
WebP/AVIF, адаптивные размеры, заданные ширина и высота. Главный визуал — приоритетный, остальные загружаются по мере приближения к экрану. Реальные отзывы, документы и фотографии сохраняют свой источник и содержание.
07 /Пространство и движение
Система держится
на точных интервалах.
Базовый модуль — 8 px. Между разделами — 80–112 px на большом экране и 48–64 px на телефоне. Минимальная зона нажатия — 44 × 44 px. Скругления сдержанные: 2–8 px.
Быстрый отклик.
Спокойное движение.
Небольшое смещение кнопки — до 2 px, переходы — 160–220 мс. Движение поддерживает действие, а контент доступен сразу. При включённом уменьшении движения анимации и плавная прокрутка отключаются.
Интерфейс работает с клавиатуры: видимый фокус, последовательный переход по элементам, понятные подписи. Текст и карта остаются читаемыми при увеличении масштаба.