Дизайн, код и AI в одних руках - проект под ключ
- Город
- Москва
- Опыт работы
- 6 лет
- На сайте с
- 2026 года
- Юридический статус
- Самозанятый
«ТМ» — вымышленная марка карандашей. Тема взята из моего списка направлений (канцелярия), и сделана она как настоящий проект: концепция, нейминг, тексты, дизайн, вёрстка и подготовка всех кадров.
Задача была не «сверстать каталог канцтоваров». Сайт товара, у которого нет причины быть выбранным осознанно, читается как прайс — а карандаш стоит тридцать рублей, и выбирать его вроде бы не из чего.
Значит, причину нужно было найти. Она нашлась в физике: графит не впитывается в бумагу, он лежит на волокне, и ластик снимает его вместе с верхним слоем. Из этого следует единственное обещание марки — написанное обратимо. Можно начинать, не зная ответа, потому что первая версия отменяема.
Отсюда и название с двойным дном: ТМ — средняя градация твёрдости грифеля, между твёрдым и мягким, и одновременно «торговая марка». Слоган — «Право на ошибку».
Отдельное условие техническое: файл открывают вложением в мессенджере, где встроенный просмотрщик не выполняет скриптов. Сайт должен работать вообще без JavaScript и одинаково выглядеть везде.
Журнальный разворот вместо карточек товара. Плотные колонки мелким кеглем, буквицы, гигантские цифры, звёзды, выносные плашки, рубрикация «01 — Манифест». Набор идёт до края листа. Пять разделов: манифест, твёрдость, наборы, липа, ластик.
Сигнатурный элемент — ось Т — М. Русская маркировка читается буквально: Т — твёрдый, М — мягкий, ТМ — посередине. На сайте она работает вторым слоем: это ещё и шкала обратимости. От 41% у 6Т до 99% у 6М — чем мягче грифель, тем полнее он уходит под ластиком. Единственное место, где обещание марки становится измеримым.
Тексты объясняют физику, а не характер. Твёрдый грифель содержит больше глины, пишет за счёт давления и продавливает волокно — ластик снимает графит, но канавка остаётся видна на просвет. Мягкий кладёт слой поверх и уходит целиком. Вопросы внизу отвечают честно: на «стирается совсем без следа?» ответ — нет.
Граница между правдой и вымыслом проведена сознательно. Правда: маркировка Т/М = H/B, состав грифеля, липовый корпус, карандашная дощечка с пропилами. Придумано: марка, цены, наборы и проценты стираемости. Карандашного производства в Липецке нет — я проверял, реальные фабрики Воскресенская, имени Красина и Сибирская. Поэтому в текстах нигде нет ни завода, ни адреса, ни года основания: только материал и происхождение названия города от липы.
Смена акцентного цвета по расчёту, а не по вкусу. Первая версия была красной: белый на ней давал 3,56:1, чего для текста мало, а выносные плашки с вывороткой на нём и держатся. Ультрамарин даёт около 10:1. Корпуса перекрашены на шести кадрах сдвигом оттенка в HSV — с приведением яркости и насыщенности к абсолютным значениям, иначе тёмный лак давал грязь.
Одиннадцать кадров сгенерированы и доведены руками. Из шести предметных четыре пришли с неверным количеством предметов: в пенале 11 карандашей вместо 12, в «Начерно» пять вместо шести, на «Шкале» четырнадцать вместо двенадцати. Достраивалось по промеренным периодам ряда, а не на глаз. Один раз правился текст, а не кадр: в карточке было написано про треугольное сечение, которого на снимке нет.
Ноль скриптов. Аккордеон на нативном details, меню — якорные ссылки, шкала — разметка. Тегов script в файле нет.
Типографика вынесена в сборку: неразрывные пробелы после предлогов, между числом и единицей и перед тире. Переносы проверяются автоматически — скрипт меряет последнюю строку каждого абзаца и печатает всё короче 22% ширины блока.
Одностраничный сайт на пять разделов, собранный в один автономный HTML на 1,43 МБ: одиннадцать кадров и пять начертаний вшиты внутрь, ноль обращений к внешним сервисам.
Живая версия: dariaseehof.ru/tm
Проверено на семи ширинах — 320, 390, 640, 768, 980, 1080, 1440: боковой прокрутки нет, вылетов за правый край ноль, висячих строк ноль. Прокрутка проверялась честно, через scrollTo(9999,0) и замер scrollX, а не сравнением scrollWidth — при overflow-x:hidden второе врёт.
Честно о статусе: марка вымышлена, это демо-макет для портфолио. Внедрения нет — значит, не будет цифр по продажам и конверсии. Проценты стираемости на сайте подписаны как «замеры лаборатории ТМ», но измерений не было: направление кривой опирается на состав грифеля, сами числа придуманы. Реальному заказчику их пришлось бы подтвердить тестом или заменить словесной градацией.
Что кейс показывает: умение найти для товара содержательную причину быть выбранным и удержать её на каждом экране, работу с материалом (что проверено, а что нет — обозначено прямо), решения по цвету через расчёт контраста и полный цикл одним человеком — от идеи и текстов до вёрстки и подготовки изображений.
