ixterra.ru
Вёрстка по макетуIXTERRA · земля для проектов
PDFединственный исходник: Figma у заказчика не было
Заказчик прислал только PDF. Размеры, цвета, начертания шрифта, иконки и логотип извлечены из файла программно — вёрстка совпадает с макетом.
Как сделано
Сверстать лендинг по PDF-экспорту макета, когда доступа к исходнику в Figma нет.
- Размеры блоков, кегли и цвета сняты из PDF, а не подобраны на глаз
- Иконки и логотип — векторные: вынуты из PDF и собраны в SVG-спрайт
- Настоящие начертания шрифта определены сравнением метрик
- Десктоп масштабируется целиком, для планшета и телефона — свои раскладки
- Чистые HTML, CSS и JS, без сборки
HTMLCSSJavaScriptPythonPyMuPDF
ixterra.ru
Вёрстка по макетуПриложение о здоровье
14статей переведены из PDF и презентаций в адаптивный формат
Материалы из презентаций и PDF стали статьями для мобильного приложения. Схемы и таблицы перерисованы в SVG и сами подстраиваются под тему приложения.
Как сделано
Перенести обучающие материалы в приложение так, чтобы схемы читались на телефоне и выглядели родными в светлой и тёмной теме.
- Схемы и таблицы перерисованы в SVG: чёткие на любом экране, цвет берут из темы
- Повторяющийся декор убран, настоящие фото оставлены с подписями
- Две версии каждой статьи: чистый источник и готовая к загрузке
- Оформление накатывается скриптом — палитра меняется в одном месте
- Учтён фильтр безопасности приложения, который вырезает блоки стилей
HTMLSVGPython
Вёрстка по макетуТехнологическая конференция
1 файлбез внешних стилей и картинок-подложек
Письмо-приглашение с кнопкой регистрации: табличная вёрстка, которая одинаково открывается в почтовых программах, включая Outlook.
Как сделано
Сверстать письмо, которое не разваливается в почтовых клиентах и читается с телефона.
- Табличная вёрстка — единственный способ, который понимают все почтовые программы
- Отдельные запасные варианты для Outlook
- Адаптация под узкий экран телефона
HTMLCSSVML
