Дарья Зеехоф › seehof Сбер ID
Дизайн, код и AI в одних руках - проект под ключ
Рейтинг
428
№ 2 595 в каталоге
Отзывы
0
Профессионализм
-/10
Коммуникация
- /10
Город
Москва
Опыт работы
6 лет
На сайте с
2026 года
Юридический статус
Самозанятый

Демо-сайт ресторана ВОВОЛГА на волжской косе: расписание как фирменный графический блок, ноль скриптов в файле

Используемые навыки Adobe Illustrator Figma UI/Пользовательский интерфейс Веб-дизайн Графический дизайн

Описание

«Воволга» — ресторан в селе Свердлово Конаковского округа Тверской области, на стрелке волжской косы. Французская кухня на русской основе, камерный зал на четырнадцать столов, летняя терраса, собственный причал, набережная и храм за окном.

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

Планка была поставлена так: сайт, какого нет ни у одного ресторана в округе. Это исключало типовой шаблон «о нас — меню — контакты».

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

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

Решение

Расписание превращено в главный графический блок. Обычно часы работы — самая скучная строка на сайте ресторана. Здесь из них сделан фирменный элемент: две дорожки дня в одном масштабе, будни и выходные, с общим окном завтрака. Обе размечены по одной шкале в пятнадцать часов, час равен 6,67% ширины. Разница видна глазом за секунду, читать ничего не нужно.

Четыре цифры вместо абзаца о преимуществах. Четырнадцать столов, девять утра по выходным, сорок метров понтона, ноль ограничений для гостей с животными. Все четыре взяты из карточки заведения, ни одна не придумана.

Композиция от вертикалей. Раз горизонтальных кадров нет — макет строится сплитами, портретными карточками и высокими колонками. Тёмный фон отпал сразу: кремово-золотой интерьер на тёмном теряет и цвет, и объём. Сайт светлый, а фирменный синий работает как цвет текста вместо чёрного.

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

Знак не перерисован. Монограмма «В» с двумя волнами трассирована в вектор с фотографии заведения и стоит в шапке инлайновым SVG.

Ноль скриптов. Вопросы раскрываются нативным details, меню — якорные ссылки, дорожки дня — проценты в CSS. Тегов script в файле нет вообще.

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

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

Результат

Одностраничный сайт на двенадцать секций, собранный в один автономный HTML на 1,55 МБ: десять фотографий и пять начертаний вшиты внутрь, ноль обращений к внешним сервисам. Адаптив доведён до 412 px.

Живая версия: dariaseehof.ru/vovolga

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

Что проверяемо: 12 секций, 10 фотографий и 5 начертаний в одном файле, 0 тегов script, 0 внешних запросов, нижняя граница адаптива 412 px, фирменный блок расписания на чистом CSS.

Что кейс показывает: я собираю сайт от фактуры и от материала, а не от шаблона — если фотографии вертикальные, макет строится под вертикали; если данные не подтверждаются, они не попадают на страницу. Дизайн и продакшн-код сделаны одним человеком.

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Демо-сайт мастерской корпусной мебели «По размеру»
Демо-сайт мастерской корпусной мебели «По размеру»
47
Веб-разработка и IT Демо-сайт авторских экспедиций «Холодный свет»
Демо-сайт авторских экспедиций «Холодный свет»
50
Веб-разработка и IT Демо-сайт марки карандашей «ТМ»: шкала твёрдости превращена в шкалу обратимости, журнальная вёрстка, ноль скриптов
Демо-сайт марки карандашей «ТМ»: шкала твёрдости превращена в шкалу обратимости, журнальная вёрстка, ноль скриптов
43
Веб-разработка и IT VOC Gems -премиум e-commerce платформа для редких драгоценных камней, разработанная с нуля (full-stack) за 3 месяца
VOC Gems -премиум e-commerce платформа для редких драгоценных камней, разработанная с нуля (full-stack) за 3 месяца
96