Salon .EXE

WordPress, PHP, ACF, JavaScript, HTML5, CSS3, Noona

Одностраничный сайт для мужского салона .EXE в Праге 7. Макет пришёл готовым от клиента и привычные правила соблюдает мало: заголовки уходят за край, между секциями остаются большие пустые поля, а подарочные сертификаты загружаются как DOS. Мы собрали его таким, каким он был нарисован, и добавили админку, в которой парикмахеры правят прайс между двумя клиентами.

Задача

Макет пришёл к нам готовым, от клиента, Филипа Словачека, и не похож ни на что, что мы нарисовали бы сами. Ни сетки, ни карточек. Заголовок «Услуги» стоит один в левом верхнем углу пустого экрана, четыре прайса отодвинуты к правому краю, а между ними ничего нет. Секция с сертификатами чёрная, со снятым на фото записанным диском и загрузочной строкой ядовито-жёлтым. Удобнее всего было бы свести всё к обычному шаблону для барбершопов, но тогда получился бы ещё один сайт барбершопа. Вторая часть задания была приземлённее: страницу ведут четыре парикмахера между клиентами. У каждого свой прайс, состав команды меняется, и никто из них не станет писать в агентство из-за цены.

Наше решение

Собрали свою тему для WordPress с нуля. Вёрстку, которая не держится сетки, конструктор не соберёт.
Макет взяли как есть. Вместе с логотипом, который намеренно обрезан углом, и пустыми местами, из-за которых на секунду кажется, что страница не догрузилась.
Загрузочную последовательность у сертификатов написали вручную, без библиотеки. Она печатается посимвольно, как на старом терминале, и доходит до System ready.
Для телефона вёрстку пересадили, а не уменьшили. Логотип помещается целиком, прайсы встают друг под друга, и крупные жесты с десктопа держатся на 390 пикселях.
Каждая секция в админке это отдельный блок со своими полями. Тот, кто правит сайт, не видит ни кода, ни настроек темы, только поля, которые его касаются.
У каждого парикмахера свой прайс. Поменять цену или длительность, добавить услугу это одна строка в админке.
Бронирование не трогали. Салон уже работал на Noona, поэтому кнопка ведёт туда и записи остались там, где ребята к ним привыкли.
Весь сайт работает на одном файле JavaScript, без jQuery и без фреймворка. Шрифт лежит на своём сервере и грузится заранее, чтобы заголовки не прыгали при открытии.
Использовали фотографии со съёмки, которую салон сделал сам. Четыре из них перетекают друг в друга на весь первый экран.