ТЕФРА
Кафе и ферма · Камчатка
Кафе, пекарня и ферма альпак на Авачинском перевале. Нужен был сайт, который передаёт место, а не перечисляет услуги.
Задача
Концепт-работа. Заведение вымышленное, но задача поставлена так, как её ставит настоящий владелец.
Гость ТЕФРЫ едет на перевал два часа и хочет заранее понять, куда он попадёт: что с погодой, дадут ли плед, пустят ли к альпакам с ребёнком. Обычный лендинг с меню и кнопкой такой вопрос не закрывает.
Место сильное само по себе: чёрный вулканический песок, ели, туман. Сайт должен работать так же, как вид с террасы, и при этом оставаться лёгким, потому что связь на перевале слабая.
Решение
Графика вместо фотостока
Пейзаж, ели и альпаки нарисованы прямо в браузере, точками на канвасе. Это даёт почерк, которого нет у стоковых фотографий, не зависит от съёмки и весит меньше одного большого кадра.
Один файл вместо сборки
Вся страница это один HTML со стилями и скриптом внутри. Нечего собирать и нечему сломаться при переносе: сайт открывается даже с флешки.
Плавность как у приложения
Прокрутка идёт с инерцией, слои двигаются с разной скоростью, фото уезжает медленнее страницы. На слабом устройстве и при системной настройке «меньше движения» всё это выключается само.
Два языка и доступность
Русский и английский, полная работа с клавиатуры, ловушка фокуса в окнах, контраст текста выше нормы и зоны нажатия от 44 пикселей.
Что внутри
- Вес страницы
- 204 КБ разметки со стилями и скриптом, первый экран около 476 КБ вместе со шрифтами
- Библиотеки
- ни одной, вся графика и анимация написаны руками
- Шрифты
- Unbounded и Forum, лежат на своём сервере, лицензия SIL OFL
- Языки
- русский и английский, переключатель запоминает выбор
- Доступность
- контраст от 4.9, зоны нажатия 44 пикселя, работа с клавиатуры, режим без анимаций
- Телефон
- отдельная раскладка, полотна перерисовываются вдвое реже ради батареи
Шесть дней от брифа до живой ссылки. Отдаётся страница, изображения, шрифты и права на всё это. Подход повторяется для любого загородного места, где важнее показать, куда человек едет, чем перечислить позиции меню.
Демо вашего заведения бесплатно. Пишите в телеграм.
Написать@S3nd1ttt
Политика обработки персональных данных