zettahome.ru
Вёрстка по макетуZetta Home · ремонт и мебель
5,4 pxсредняя погрешность к макету на десктопе
Страница высотой почти 17 000 px свёрстана на чистых HTML, CSS и JS. Размеры, шрифты и картинки взяты из Figma через API, а не на глаз.
Как сделано
Заказчик просил только HTML, CSS и JS, картинки из самой Figma и точное попадание в макет на компьютере и телефоне.
- Два макета — 1920 и 360 px; у мобильной версии своя компоновка и порядок блоков
- Оригиналы картинок и параметры текста выгружены из Figma через API
- Скрипт сверяет живую страницу с макетом по координатам
- Планшетных макетов не было — промежуточные ширины собраны самостоятельно
- Без фреймворков и сборщиков, как просил заказчик
HTMLCSSJavaScriptFigma APIPython
zettahome.ru
ixterra.ru
Вёрстка по макетуIXTERRA · земля для проектов
PDFединственный исходник: Figma у заказчика не было
Заказчик прислал только PDF. Размеры, цвета, начертания шрифта, иконки и логотип извлечены из файла программно — вёрстка совпадает с макетом.
Как сделано
Сверстать лендинг по PDF-экспорту макета, когда доступа к исходнику в Figma нет.
- Размеры блоков, кегли и цвета сняты из PDF, а не подобраны на глаз
- Иконки и логотип — векторные: вынуты из PDF и собраны в SVG-спрайт
- Настоящие начертания шрифта определены сравнением метрик
- Десктоп масштабируется целиком, для планшета и телефона — свои раскладки
- Чистые HTML, CSS и JS, без сборки
HTMLCSSJavaScriptPythonPyMuPDF
ixterra.ru
Вёрстка по макетуПриложение о здоровье
14статей переведены из PDF и презентаций в адаптивный формат
Материалы из презентаций и PDF стали статьями для мобильного приложения. Схемы и таблицы перерисованы в SVG и сами подстраиваются под тему приложения.
Как сделано
Перенести обучающие материалы в приложение так, чтобы схемы читались на телефоне и выглядели родными в светлой и тёмной теме.
- Схемы и таблицы перерисованы в SVG: чёткие на любом экране, цвет берут из темы
- Повторяющийся декор убран, настоящие фото оставлены с подписями
- Две версии каждой статьи: чистый источник и готовая к загрузке
- Оформление накатывается скриптом — палитра меняется в одном месте
- Учтён фильтр безопасности приложения, который вырезает блоки стилей
HTMLSVGPython