{"id":13518,"url":"\/distributions\/13518\/click?bit=1&hash=01aeb7be7a3d2bac99d8a637a910bcc514e181032df828de07dec1faaac7c769","title":"\u0414\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0433\u043e\u0440\u043e\u0434 \u043f\u0440\u043e\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u00ab\u0410\u0432\u0438\u0442\u043e\u00bb \u0434\u0438\u0432\u0430\u043d","buttonText":"\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e","imageUuid":"697d4fdc-671f-5806-881d-4d6f0b0621e0","isPaidAndBannersEnabled":false}
Максим Куфаков

Дизайн и верстка полноэкранного сайта на относительных значениях

Как мы верстали сайт практически полностью на относительных величинах.

Несколько лет назад, в моду стали входить полноэкранные (fullscreen) сайты. Они отображались крупно, широко и примерно одинаково на всех разрешениях и мониторах.

Мы, как и все студии, которые делали упор на дизайн тоже хотели запилить что-то похожее. Материалов в сети, на тот момент, было не много, да и верстку мы тогда не особо хорошо понимали. Точнее не понимали принципы отображение контента.

Идея этой статьи довольно проста, мы до сих пор не можем найти точных определений или “гайдов” чтобы понять: “а как же правильно?” и хотим поделится своим опытом в решении задачи. Возможно кому то это будет полезно. А если будут комментарии с каким-то заметками, правками, или рекомендациями, то это будет полезно всем.

Дано:

Заказ на сайт, который должен рассказать о компании, которая занимается компьютерным зрением и прочими классными и высокотехнологичными штуками из области Machine Learning и BigData.

Но ЦА для посетителей данного сайта очень узкая и специфичная, поэтому креативы и прочий “декор” нам отметали. Но речь не про дизайн.

Мы, как ребята творческие, сразу решили запилить крутой fullscreen дизайн, на котором мы сможем крупно отражать месседж и основной визуал, ну и чтобы проверить свои способности в креативном фронтенде, но с классическим подходом.

Дизайнеры, набирались вдохновения у “воротничков” а разработчики думали как сделать так, чтобы все это взлетело. Сразу оговоримся, понятно что можно было решить эту задачу на канвасах, со всеми классными эффектами и тд, но мы в канвас не умели.

На выходе мы получили следующий дизайн.

Главный экран страницы Retail
Главный экран страницы CPG

На этом сайте 2 основных страницы и каждая является “Главной”

За основу взяли разрешение 1440x900 и отняли высоту верхней панели браузера.

Мы понимали (или тогда еще нет) что большинство разрешений варьируется в диапазоне от 1366х768 до 1920х1080. Чуть меньше 1280х(800 или 720). Ретина к этим типам разрешений дает выше разрешение, но физически остается с теми же значениями. И еще чуть меньше, в количестве устройств, всякие 5К.

В общем мы стали работать с разрешением 1440x830. Не знаем почему, так вышло.

Ны выходе мы получили вот такой дизайн страниц, и чтобы заказчику была понятна наша мысль, драфтово накидали анимацию. Специально обойдя “сложные” участки.

Пример анимации сделанный в Adobe

Задача 1.

После нескольких попыток реализовать интересные переходы между сообщениями мы решили прийти к полноэкранному листанию страниц, но сложность была в объединении “листалки”, пинов и обычного скролла. Потому что последние несколько экранов нужно было просто классически скроллить. Нам нужно было определять где мы сейчас находимся что определять положение скролла, экрана и примагничиваться (или нет) к нужному блоку.

Задача 2.

Дизайнеры придумали, а как реализовывать никто понятия не имеет.

Карта с множеством деталей - svg. Но весит много, оптимизировали удалением элементов вне фрейма. Также необходимо продумать ее размещение так, чтобы на любом устройстве она отображалась одинаково. При том, что она не должна листаться а оставаться на фоне почти всегда.

Мы взяли наше разрешение, карту разместили сразу с нужным смещением и кинули на фон. Вышло хорошо. Но фон задавали именно отталкиваясь от ширины и высоты в 100%.

Это уже сверстанный экран

Задача 3.

Сетка. Маргины, гаттеры и отступы.

Для того чтобы получить одинаковое отображение на разных устройствах мы решили все значения перевести в относительные. За основу взяли все то же наше разрешение в 1440 и посчитали, сколько в % от ширины экрана занимают маргины, от края до начала сетки физически это были 135px. Формула была 135/1440*100 = 9,375%. По этому же принципу посчитали и гаттеры (отступы между колонками) изначально в расчет брали 30px. Ширина колонки считалась автоматически. Количество колонок – 12. То есть если бы ставили сетку в пикселях для 1440 то она бы была следующего вида:

12 Колонок. Ширина колонки 70, отступы между колонками 30, ширина контента 1170 px.

Задача 4.

Шрифты.

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

То есть если на разрешении в 1440 мы имели шрифт 24, то его размер для 1920 будет будет 31,2. Устанавливаем целое значение 31. Почему так?

1920px в 1,3 больше чем 1440, соответственно все элементы должны быть в 1,3 раза больше. И если меньше, то меньше, но мы устанавливаем минимальное значение, чтобы на десктопах меньше чем 1366 шрифт не стал очень маленьким.

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Задача 5.

Элементы.

Размеры всех визуальных элементы также задаются относительно высоты и ширины экрана, чтобы сохранить расположение на карте. Чаще всего или в процентах или в значениях “vh” и “vw”. Так что расчет должен быть максимально точным.

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

Общий вид

Анимация

Здесь нас тоже поджидал сюрприз.

Так как контент приходил к нам с бэкенда, а также все тексты переводились на другие языки при помощи i18n, мы не могли просто вручную назначить анимацию каждому слову. Это нам было необходимо, чтобы задать delay появления словам в заголовке, не разбивая его на отдельные элементы. Мы написали скрипт, который разделяет их по пробелам и вешает анимацию на каждое слова разбивая его на . Дальше дело за проработкой анимации через cubic-bezier, время появления, исчезания, длина и период анимации. А также комбинация этих свойств. Чтобы достичь максимальной плавности и мягкости появления.

Изначально заголовки появлялись “из под себя”, то есть из внешнего контура (overflow-hidden)и выезжали на свою высоту.

Большая часть остальных блоков и элементов приезжает с обычным fade-in + slide-in и вручную настроенным Безье.

Пример появления сверстанный

Значения для анимации cubic-bezier(.17,.24,.19,.99) Период анимации, в зависимости от элементов от 0,3 до 1 сек, с delay для последующих элементов в 0,1-0,2 сек.

Самое главное в текущей анимации, это настроить именно переходы между экранами, чтобы избежать “пустоты” между страницами и выстроить органичные исчезания и появления элементов. Не слишком долгое и не слишком быстрое.

Мы сразу решили отказаться от готовых решений, поискали несколько open source решений, подглядели механику для слайдов, пинов и переходов и запили свое решение, чтобы можно было беспроблемно и гибко кастомизировать любую часть.

Полноэкранное переключение блоков.

По концепции слайды должны листаться поэкранно, чтобы проигрывать анимацию в соответствии с задумкой и избежать лишнего скролла элементов. А в нижней части сайта мы добавили параллакс, который выезжает из под хоста сайта.

Таким образом мы решили навешивать анимацию именно на событие скролла.

В процессе мы переписали скрипт, чтобы еще и при скролле обратно, анимация инвертировалась. Осталось только отловить событие, позицию скролла и рассчитать в какой момент переключаться.

Когда все элементы, скрипты, параллаксы, анимации, тех-решения и прочие фишки были собраны и реализованы на первой странице, мы стали подкидывать верстку остальных страниц.

На второй странице нас ждал еще один сюрприз. Анимация блока с перемещением элементов “треугольник” и “кружок” и крыш магазинов. Не будем вдаваться в подробности задумки, главное решить задачу.

Запись анимации в реальном сверстанном проекте.

Футер

Мы много смотрели референсов, но не учли один момент, когда делают параллакс на футер–форму, он всегда в 100vh. Дизайнеры жи упустили этот момент, по этому отработка параллакса на футер была довольно сложная, но мы ее решили. Но впредь так делать не будем. Если делаем такой параллакс на последний блок — строго в 100vh.

Конечно же мы столкнулись с рядом трудностей из-за выбора работы с полностью относительными величинами и этого можно было избежать, сократив срок разработки, однако в процессе работы мы научились очень крутым штукам, которые теперь мы свободно используем на новых проектах.

Итог

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

Однако все же решили оставить также поэкранное листание, чтобы не переверстывать отдельную статику. При том, что как раз в работе с относительными величинами, в мобильной версии нам удалось добиться одинакового расположения объектов на абсолютно разных устройствах.

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

Десктопная и адаптивная версии сайта www.q-lab.group

Результат работы можно посмотреть по ссылке www.bestplace.ai

Посмотреть другие кейсы можно на нашем сайте www.q-lab.group

Спасибо!

0
Комментарии
Читать все 0 комментариев
null