За плечами Татьяны Шефер шестнадцать лет в оптике: академия Fielmann AG, управление салонами в Гамбурге, обучение сотен коллег по Северной Германии, затем Москва и научный проект «Здоровое зрение». Сегодня она консультирует салоны оптики, специалистов и производства. Для этой практики я собрал сайт персонального бренда: лендинг и биографию-лонгрид.
Дизайн собран вокруг идеи немецкой точности. Тёмная зелень, шампань-золото, тонкие линии-разделители как в бухгалтерской книге, острые углы, едва заметное плёночное зерно. Внутри это небольшая дизайн-система: около полусотни CSS-токенов, весь внешний вид меняется в одном месте.
Лендинг сразу спрашивает посетителя, кто он. Владелец салона, оптометрист и производитель уходят в отдельные треки: узнаваемые боли, форматы сотрудничества, кейс с цифрами «было → стало». FAQ отвечает на 18 неудобных вопросов, от «звёздной болезни» сотрудников до конкуренции с сетевиками, и продублирован разметкой FAQPage для поисковиков.
Биография — вторая страница, девять глав: от академии Fielmann в старом замке города Плён до золотой медали РАН за программу защиты зрения. Рядом с текстом едет оглавление, внутри глав 11 фотографий и врезки с фактами.
Работали короткими итерациями: Татьяна присылала скриншоты с пометками, я выпускал новую версию. За две недели лендинг прошёл 50 итераций, биография ещё 14; каждая заморожена в архиве репозитория, а решения записаны в журнале версий.
Под капотом чистые HTML, CSS и JavaScript: ни фреймворков, ни сборки. Заявки принимает PHP-обработчик с ловушкой для ботов, лимитом запросов на SQLite и письмом по SMTP, в которое попадают UTM-метки источника. Под 152-ФЗ сделаны страница политики, cookie-плашка и обязательный чекбокс согласия. Деплой — один git push: GitHub Actions собирает рабочий набор и заливает его на хостинг.
Технологии: HTML5, CSS (дизайн-токены), Vanilla JS, Motion, GLightbox, PHP / PHPMailer, SQLite, Typograf, GitHub Actions, Beget
glazami-schaefer.ru