Направления вида
A, B и C — первый круг: только первый экран главной. D, E и F — второй круг: каждый собран на всю главную, листайте до конца. G — третий круг, решение основателей 28.09: цех из D плюс «было → стало» из E, перерисованное всерьёз; у G уже есть страница услуги «Order entry». Тексты везде одни и те же, отличается только вид. Смотрите сначала телефон: большинство откроет сайт с него.
Переключатель «Вид» внизу любой страницы стенда открывает главную в любом варианте. Нужно выбрать одно направление или сказать, что взять из других. После выбора весь сайт собирается в этом виде, остальные варианты удаляются.
A Маршрутный лист Traveler
Первый круг · первый экран
Сайт читается как маршрутный лист, который ходит с каждым заказом по цеху: операции по порядку, поля и цифры моноширинным, справа колонка подписи. Владелец завода узнаёт свой документ и видит главное обещание — каждый шаг подписывает его человек.
- Ощущение за 5 секунд
- Это сделали люди, которые держали в руках маршрутку, а не стартап с презентацией.
- Откуда взято
- Маршрутный лист (job traveler / router) в металлообработке: номер заказа, деталь и количество, операции «010 лазер, 020 гибка, 030 сварка», рабочий центр, колонки «инициалы, дата, годных».
- Фирменный элемент
- Колонка подписи справа: пустой прямоугольник для инициалов и «__/__» для даты у каждой услуги, а в первом экране — строка «Утвердил» рядом с кнопкой звонка.
- Настроение
- чёткийделовойцеховойспокойный
- Шрифты
- Manrope 720 / 450 — Заголовки и текст
- JetBrains Mono 400–500 — Поля, номера операций, цены и сроки
- #F7F6F2Бумага
- #16191DГрафит
- #4B5058Вторичный текст
- #D6D4CCЛинии формы
- #E8551FСигнальный оранжевый
Референсы
- Hadrian ↗Производственная компания без хайпа: моно в разлинованных ячейках, строгие кнопки в рамке.
- Oxide Computer ↗Моно только для меток, кодов и данных; тонкие линейки и подписи в рамке, как на чертеже.
- GOV.UK Design System — Summary list ↗Строки «поле — значение» с колонкой действия справа — из неё выросла колонка подписи; простая форма, которой доверяют.
B Андон Andon
Первый круг · первый экран
Сайт читается с одного взгляда, как андон-табло над линией: крупная надпись, лампы статуса, станции в строку. Это то же, что мы продаём, — видно, почему стоят станки и где теряются деньги, и владелец завода узнаёт этот язык без перевода.
- Ощущение за 5 секунд
- Это сделали люди, которые стояли в цеху: крупно, по делу, без украшений — читается издалека, даже с телефона на ходу.
- Откуда взято
- Сигнальная колонна на станке (зелёный — работает, жёлтый — внимание, красный — стоит) и андон-табло над линией, где статус каждой станции виден через весь цех.
- Фирменный элемент
- Сигнальная колонна из трёх ламп рядом с заголовком — горит оранжевая «внимание» — и табло услуг как станций: номер, название, срок и цена в одну строку, лампа «сами» (зелёная) или «с партнёром» (оранжевая).
- Настроение
- цехтаблокрупнопрямобез украшений
- Шрифты
- Barlow Condensed 600 / 700 — Заголовки, номера станций, сроки и цены, кнопка
- Manrope (variable) — Текст
- #16191DГрафит — фон
- #F7F6F2Бумага — текст
- #E8551FСигнальный оранжевый — кнопка и лампа «внимание / с партнёром»
- #34C35FЗелёная лампа — только точки «проверено / сами»
- #9A9C95Серый текст — пояснения, номера станций
- #2C3137Линии табло
Референсы
- Hadrian — автоматизированные заводы ↗Завод, а не SaaS: плоский тёмный фон, в шапке строка ячеек как на табло (часовые пояса цехов), тонкие рамки без свечения.
- Oxide Computer ↗Железо на тёмном фоне без неона: единственный цвет — зелёные лампочки самой стойки, подписи техническим шрифтом капсом, как на шильдике.
- Mijksenaar — навигация аэропортов (Схипхол, JFK) ↗Школа указателей: одно крупное сообщение, которое читается на бегу и издалека; отсюда размер заголовка и строгий порядок «надпись → действие».
C Чертёж Shop drawing
Первый круг · первый экран
Сайт начерчен, как хороший рабочий чертёж: тонкие точные линии, размерная линия над заголовком, штамп с фактами в углу листа. Владелец цеха читает этот язык каждый день — с чертежа начинается каждый заказ и каждая смета, — и сразу видит: здесь сначала меряют, потом обещают.
- Ощущение за 5 секунд
- Спокойная точность: всё измерено, подписано и проверено человеком — не рекламное обещание про ИИ.
- Откуда взято
- Рабочий чертёж детали из листового металла: рамка листа с зонами, размерные линии со стрелками, штамп в правом нижнем углу (деталь, масштаб, начертил, проверил, ревизия), облако ревизии и спецификация с номерами позиций.
- Фирменный элемент
- Штамп чертежа в правом нижнем углу первого экрана: деталь, срок, где работаем, кто начертил и кто проверил («a person on your team»); плюс размерная линия «1–2 weeks» ровно на ширину заголовка.
- Настроение
- точныйсдержанныйбумажныйинженерныйспокойный
- Шрифты
- Manrope 300 / 400 / 500 — Заголовки, текст, значения в штампе
- B612 Mono 400 — Размеры, штамп, выноски, спецификация
- #F7F6F2Бумага
- #16191DГрафит — линии и текст
- #4E535AГрафит светлее — второй текст
- #BDB9B0Тонкие линии: штамп и спецификация
- #E8551FСигнальный оранжевый — только облако ревизии
Референсы
- Zoo ↗Размерная линия прямо поверх заголовка первого экрана — тот же приём, у нас на светлой бумаге и со значением-сроком.
- Oxide Computer ↗Подписи «FIG. 1» с выносной линией и моноширинные метки в тонких рамках: инженерная сдержанность без украшений.
- teenage engineering ↗Светлый фон, тонкие линейные рисунки и один яркий акцент (красная кнопка записи) — как у нас оранжевый только на облаке ревизии.
D Цех крупно Shop Floor
Второй круг · вся главная
Фото цеха во всю ширину — пресс, резка, сварка, линия фасовки, погрузчик на складе — и поверх крупный текст на графитовой плашке. Фото даёт чувство «это про мой завод», текст говорит, что мы делаем; фото и плотные текстовые блоки чередуются, поэтому у страницы есть ритм и на каждом экране есть за что зацепиться глазом.
- Ощущение за 5 секунд
- Это про мой цех, и эти люди в нём стояли: крупно, по делу, без украшений.
- Откуда взято
- Сам цех клиента. Владелец завода на 20–200 человек не верит картинкам с роботами и «Индустрией 4.0» — он узнаёт свой мир: гибочный пресс, листы заданий на доске, перчатки, искры, погрузчик между стеллажами. Настоящее фото говорит «эти люди были в таком цеху» раньше любого текста. Сейчас все фото — временные заглушки с Unsplash (бесплатная лицензия); на запуск заменяем их своими снимками с завода Able, если Able разрешит съёмку.
- Фирменный элемент
- Фото-полосы во всю ширину, на край которых наезжает графитовая плашка с заголовком: слой поверх слоя. Цены, сроки и цифры из кейсов набраны крупно сигнальным оранжевым.
- Настроение
- живой цехкрупноконтрастпо делубез украшений
- Шрифты
- Barlow Condensed 600 / 700 — Заголовки, названия услуг, цены и сроки, кнопка
- Manrope (variable) — Текст
- #16191DГрафит — фон первого экрана, тёмные разделы
- #F7F6F2Бумага — светлые разделы и текст на тёмном
- #E8551FСигнальный оранжевый — кнопка, цены, цифры
- #1F2328Сталь — плашки поверх фото
- #9A9C95Серый текст — пояснения
Референсы
- Lincoln Electric ↗Первый экран — сварщик во весь экран, крупный белый заголовок капсом и красная кнопка на затемнении. Ближе всего к нашему первому экрану; берём только приём «фото + крупный текст», не бренд.
- Milwaukee Tool ↗Один сигнальный цвет на тёмном и узкий жирный шрифт капсом поверх рабочего фото — язык, который мастер цеха видит каждый день на инструменте.
- Carhartt ↗Настоящие люди в рабочей одежде, а не модели; крупные узкие заголовки рядом с фото и плашки поверх снимков. Отсюда чередование «фото — плотный текст».
E Было → стало Before / After
Второй круг · вся главная
Каждый экран показывает то, что владелец завода видит каждый день, — бумажный сменный отчёт на планшете-клипборде, журнал простоев, бирку пересчёта — и рядом то же самое после нас: чистую таблицу, график, сверенное число. Не надо объяснять, что мы делаем: разница между бумагой и экраном видна за секунду.
- Ощущение за 5 секунд
- Это же наш отчёт — и вот как он мог бы выглядеть: узнаю бумагу, вижу результат, понимаю, что за этим стоит человек, который её держал в руках.
- Откуда взято
- Сменный отчёт Able, написанный от руки на планшете (дата, часы, имя, изделие, размер, калибр, количество), и экран, где менеджер сверяет фото отчёта с таблицей; плюс «жирный клипборд» из исследования голоса клиента (research/07).
- Фирменный элемент
- Пара «бумага → экран» у каждой услуги: слева живой лист синей ручкой (зачёркнутые цифры, кольцо от кофе, «press 2 down again?» на полях), справа тот же смысл в чистом интерфейсе; оранжевый маркер — пометки человека, который проверяет. На первом экране пара оживает один раз: видоискатель камеры → строки заполняют таблицу → «Approved».
- Настроение
- бумага и экранузнаваемоглубинарабочий столчеловек проверяет
- Шрифты
- Manrope (variable) — Заголовки (800), текст, интерфейс «после» с табличными цифрами
- Covered By Your Grace — Только почерк внутри бумажных иллюстраций «до»
- #0E3540Петроль — стол, фон страницы
- #F6F1E4Бумага — листы «до»
- #1F3B8CСиняя шариковая ручка — почерк на листах
- #FFFFFFЭкран — карточки «после», лист цен
- #E8551FСигнальный оранжевый — кнопка, пометки маркером, флажки
- #0F6E5CЗелёный «проверено» — только статус Approved
Референсы
- Mindee — распознавание документов ↗Первый экран — стопка бумажных документов, из которой выходят структурные данные. Берём композицию «бумага → данные» рядом, без их неонового свечения.
- Rough Notation ↗Пометки «от руки» поверх текста: обвести, подчеркнуть, зачеркнуть. Отсюда оранжевый маркер на словах покупателя и на флажках в таблицах.
- MaintainX — ТОиР для заводов ↗Карточка с данными лежит поверх реального цеха, с настоящей тенью. Берём наложение «экран поверх физического предмета» и глубину слоёв, но без стоковых фото.
F Андон, в полную силу Andon, full
Второй круг · вся главная
Тот же андон, что в B, но с ритмом и глубиной: фон меняется на каждом экране (графит → бумага → графит → сплошная оранжевая полоса), услуги и кейсы — объёмные таблички, как на пульте станка, а крупные цифры — только настоящие: цены, сроки, факты кейсов. У каждого экрана есть на чём остановить взгляд: сигнальная колонна, «в системе 40 — на полке 12», пресс и погрузчик, конвейер из четырёх шагов.
- Ощущение за 5 секунд
- Живое табло: колонна на первом экране мигает тестом ламп и остаётся на оранжевой «внимание», а дальше каждый экран другого цвета — страница не сливается в один лист.
- Откуда взято
- Сигнальная колонна на станке и её тест ламп при включении, шильдики и панели на станине, конвейер, пресс и погрузчик — то, что владелец видит в своём цеху каждый день.
- Фирменный элемент
- Большая сигнальная колонна на первом экране: при загрузке один раз проходит тест ламп (красная → оранжевая → зелёная) и остаётся гореть оранжевой. Она стоит на табличке с тремя фактами, которая заходит на следующий, светлый экран. В финале та же колонна горит зелёной.
- Настроение
- цехтаблоритмобъёмпо делу
- Шрифты
- Barlow Condensed 600 / 700 — Заголовки, цены, номера станций и шагов, кнопка
- Manrope (variable) — Текст
- #16191DГрафит — первый экран, услуги, обещания, «кто мы», финал
- #F7F6F2Бумага — «где теряется неделя», кейсы, партнёры, цены, вопросы
- #E8551FСигнальный оранжевый — кнопка, лампа «внимание / с партнёром», сплошная полоса «как мы работаем»
- #34C35FЗелёная лампа — «проверено / сами», обещания
- #22272DТабличка — объёмные карточки на обоих фонах
- #9A9C95Серый текст — пояснения, номера станций
Референсы
- PATLITE — сигнальные колонны ↗Настоящая колонна: пропорции ламп, кольца между ними, рёбра на линзе и тонкая стойка — с неё нарисована колонна на первом экране и её тест ламп.
- Milwaukee Tool ↗Инструмент, который знает каждый цех: фон главной меняется полосами — красный, чёрный, белый, серый — и крупные заголовки капсом. Отсюда ритм «каждый экран своего цвета».
- Teenage Engineering ↗Чёрные линейные рисунки вещей с одним оранжевым акцентом и крупный сжатый шрифт: отсюда рисунки оборудования одной линией и оранжевый только там, где «внимание».
G Цех + было → стало Shop floor + before → after
Второй круг · вся главная
Цех из D — фото во всю ширину, графит и оранжевый — а в блоке услуг у каждого направления своя сцена «было → стало»: бумага, как она лежит на заводе сегодня, и то же самое в системе клиента после нашей работы. Не мультяшно: факс с исправленным ручкой количеством, журнал простоев на планшете, распечатка склада с карандашом, блокнот обхода.
- Ощущение за 5 секунд
- Это про мой завод: вот мой факс, вот мой журнал — и вот как это выглядит, когда за нас это разобрали, а решение осталось за моим человеком.
- Откуда взято
- Бумаги, которые владелец видит каждый день: заказ по факсу, журнал простоев формы Q-07, складская распечатка на перфорированной бумаге, бирка пересчёта, блокнот. И окна его же ERP — серые, плотные, с кнопкой Approve.
- Фирменный элемент
- Пара «было → стало» у каждого направления: бумага слегка повёрнута и лежит внахлёст с окном системы, под ними три строки — «было», «что делаем мы», «стало». Все цифры в сценах выдуманы, но считаются из одних данных и сходятся между собой: итоги, число правок, позиции на пересчёт.
- Настроение
- цехбумагапо-настоящемуспокойнопо делу
- Шрифты
- Barlow Condensed 600 / 700 — Заголовки, цены, кнопка
- Manrope (variable) — Текст
- Nanum Pen Script — Пометки ручкой в сценах
- Segoe UI / системный — Окна системы в сценах
- #16191DГрафит — первый экран, услуги, «как мы работаем», финал
- #F7F6F2Бумага — «где теряется неделя», кейсы, цены, вопросы
- #E8551FСигнальный оранжевый — кнопка, цены, то, что проверить
- #2A2F35Стол под сценой — сталь с зерном
- #1D3A8FСиняя ручка — пометки на бумаге
- #9A9C95Серый текст — пояснения
Референсы
- Rossum — чтение документов ↗Документ рядом с полями, которые из него прочитали, и подсветка того, что проверить человеку — отсюда сцена «прочитали факс» на странице ввода заказов.
- Paperless Parts — расчёт для механических цехов ↗Продают цехам и показывают настоящие рабочие экраны, а не абстрактные картинки. Отсюда правило: в сценах — окна, похожие на систему клиента.
- Tulip — приложения для цеха ↗Живые фото людей у станков рядом с экранами программы: цех и система на одной странице. Так же у нас: фото цеха несут чувство, сцены — суть.
Что ещё рассматривали
В запасе — хорошо, но не сейчас
- Журнал смены. Лист учёта смены с рукописными строками — прямо из кейса Able Metal LOG. Отложен: слишком близко к «Маршрутному листу»; вернуть, если выберете A и захочется больше живого почерка.
- Шильдик станка. Металлическая табличка с гравировкой капсом и заклёпками. Отложен: рискует уйти в бутафорию; как деталь (подписи, номера) подходит к B.
- Спокойный консалтинг. Белый фон, крупный текст, ничего лишнего. Отложен: безопасно, но так выглядят почти все конкуренты из research/06 — не запомнят.
Отброшено
- Тёмный «AI» с неоном и градиентами. Главный штамп AI-сайтов; владельцы заводов не доверяют хайпу (research/07).
- 3D-рендеры роботов и «Индустрия 4.0». Стоковая картинка, которую используют все интеграторы; не про маленький цех.
- Синька (белые линии на синем). Заезженный «инженерный» приём; чертёж лучше работает на бумаге — это взято в C.
- Кремовый фон, антиква и терракота. Типовой вид сайтов, собранных нейросетью, и далеко от цеха.