Коротко.
Кейс о создании веб-сайтов под ключ на платформе WordPress на базе готового индивидуального дизайна. Наши заказчики – маркетинговые, рекламные, дизайн и SEO-агентства – предлагают своим клиентам маркетинговое сопровождение, рекламные услуги и SEO продвижение. Их специалисты создают индивидуальный дизайн сайта, а мы отвечаем на его программную часть.
В создании сайтов важно придерживаться точного соответствия с макетом дизайнера. Для этого мы используем подход Pixel Perfect.
Запрос.
Агентства, предлагающие комплекс услуг по продвижению компании в интернете, нередко обращаются к сторонним разработчикам для создания сайта. Для своих клиентов они создают дизайн-макеты, которым в дальнейшем нужно разработать программную часть для размещения на платформе WordPress.
Нам для работы предоставляют файлы изображений, подготовленные в программах Figma / Photoshop / Adobe Illustrator / Adobe XD и другие. В результате мы создаем шаблон по стандартам WordPress (WordPress coding standards), а также готовый WordPress сайт с этим шаблоном. Этот шаблон является “демо-версией” сайта, ставится для демонстрации на WordPress и доступен под ключ.
Решение.
Платформа WordPress предлагает большое количество платных и бесплатных шаблонов дизайна сайтов, но они не подходят для кастомных разработок, где необходимо создать оригинальный, персонализированный под заказчика сайт по индивидуальному дизайну.
Важную роль здесь играет концепция Pixel Perfect. Согласно этому подходу, все элементы в готовом сайте, включая отступы, размеры шрифтов, высота строк, размеры изображений и размещение объектов должны соответствовать макету с точностью до нескольких пикселей.
Таким образом, мы предложили заказчикам:
- Сверстать визуальную часть сайта с подходом Pixel Perfect
- Разработать программную часть по стандартам WordPress (WordPress coding standards) и, тем самым, получить инсталлируемый шаблон под WordPress
Отметим, что создать сайт с совпадением пиксель в пиксель нельзя технически, поскольку даже шрифты и межстрочные расстояния в разных браузерах могут отображаться по-разному. Бывает, что и дизайнер может ошибиться в отступе или выравнивании. Поэтому мы всегда стараемся сохранить баланс между точностью верстки и объемом кода.
Результат.
Приведем несколько примеров, как создавалась верстка сайта и проверялось соответствие и совпадение html-шаблона и макета.
Сначала мы разработали основную структуру страниц. Продумали и создали главную страницу, страницы сайта (Pages), публикации (Posts). Далее, установили необходимые шрифты, изображения, подготовили все тексты и сделали верстку.
И, в соответствии с Pixel Perfect, мы действовали по следующему принципу:
- Оригинальный макет сохранили в формате
.png - Созданный сайт открыли в браузере
- С помощью специального плагина наложили копию макета на страницу
- Откорректировали расположение элементов для точного совпадения
Проверка заголовков и отступов:
Проверка текстовых страницы:
Проверка полей для ввода:
Важно! Совпадение элементов, блоков, шрифтов и отступов проверяется относительно тех размеров, в котором дизайнер создал макет. Если его ширина 1920 пикселей, экран настраивается на такой же размер.
Зачастую дизайнеры предоставляют нам макет для ПК мониторов (около 1280 пикселей) и для мобильной версии. Нам этого достаточно для работы, и версии для экранов с другими разрешениями мы уже адаптируем при разработке.
Создание сайта на WordPress часто также включает создание дополнительного функционала: онлайн-калькуляторов, специальных анимаций, набора дополнительных полей для формы и т.д. Все это мы делаем под ключ.
Мы подготовили варианты такого функционала на примере двух сайтов, которые создали по индивидуальному дизайну.
Финский сайт
Главная страница
В ходе работы дизайнер заказчика вносил правки в макет, поэтому готовый результат отличается от прототипа.
Прототип:
Результат:
Кейсы
В этом и других разделах мы следовали концепции Pixel Perfect и в точности повторили дизайн-макеты.
Прототип:
Результат:
Контакты
Прототип:
Результат:
Технологии
На этой странице все блоки, шрифты и отступы соответствуют прототипу дизайнера, отличается лишь наполнение – изображения и текст.
Прототип:
Результат:
Решение и платформа
Прототип:
Результат:
Сайт финансовых услуг
Главная страница
Прототип:
Результат:
Калькулятор
Прототип:
Результат:
Блог (общая страница)
Прототип:
Результат:
Текстовая страница блога
Прототип:
Результат:
Резюме.
В данных проектах было важно полное соответствие макету в реализованных сайтах. Это позволило не только получить ожидаемый результат, но и упростить работу между дизайнером и разработчиками.
Подход Pixel Perfect применяется для того, чтобы готовое решение полностью соответствовало макетам, созданным дизайнером.
Вместе с этим была реализована программная часть под тот функционал, который требовали заказчики. Сайты корректно работают на платформе WordPress и могут модифицироваться при необходимости.
Каждый из проектов занял около 2 недель, оба были приняты и дизайнерами, и основными заказчиками.
