Заказать верстку

Заказать верстку сайта

Заказать верстку

Привет, меня зовут Андрей Лобанов, я верстальщик. Первый свой макет я сверстал в августе 2017 года. За это время успел сверстать больше 500 оригинальных страниц. Для меня важен результат моей работы.

Ниже 👇 описал, что нужно подготовить для начала и процесс работы. Если вам не терпится уже сверстать макет и запуститься, то вам сюда. Чтобы познакомиться со мной поближе прочитайте историю знакомства с вёрсткой, посмотрите реальные отзывы клиентов, здесь моё портфолио

1. Макет

Для подсчета цены и сроков нужны макеты сайта в Figma, можно просто картинкой, желательно с мобильной версией

Не забудьте

Не забудьте про скрытые элементы дизайна, например всплывающие окна, состояние успешно отправленной формы и т.п. Нарисуйте скрытые элементы в макете или прикрепите отдельными картинками

Маша

Была в сети 9 минут назад

Привет

По стоимости данный объем сколько выйдет?

https://yadi.sk/d/LK-eyVp4hw

Оценку скину в течении часа, ок?

Ок

2. Анимацию

Маша

Была в сети 9 минут назад

Привет

Меню на мобилке появляется резко или плавно, сверху вниз с прозрачностью?

Сделайте плавно

Ок

Если планируете делать анимацию на сайте, прикрепите ссылку на пример сайта с анимацией, описание или видео с анимацией

3. Шрифты

Если у вас нестандартные шрифты, то прикрепите пожалуйста все семейства шрифтов и начертаний из макета. Иногда пиратские шрифты не совпадают с шрифтом из макета

Маша

Была в сети 9 минут назад

Скиньте пожалуйста шрифты, какие есть в макете

Lato.zip5.4 МБSansation.zip1.2 МБ

Спасибо

4. Превью и заголовки для соц‑сетей

Маша

Была в сети 9 минут назад

https://lobanof.ru/

Здесь будет картинка первого экрана вашего сайта или можете нарисовать вашу оригинальную картинку для соц‑сетейЗаголовок сайтаОписание сайта

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

Предоплата 25%

В случае с лендингами предоплата 50%, если проект большой, то предоплата разбивается на условные этапы по 25% или 10% по желанию заказчика

Посмотреть реальные отзывы

Маша

Была в сети 9 минут назад

Предоплата 25%
Карта: xxxx xxxx xxxx 0342 - Лобанов Андрей Евгеньевич

Через пару минут скину

Пришли

Отлично

Вечером скину результаты

Разделение страницы на отдельные блоки по БЕМ-у

Это нужно для переиспользования блоков на разных страницах и экономии времени

Адаптация под планшет и телефон

После успешной верстки десктопа складываю верстку под планшет и телефон.

Просьба к дизайнерам

Сделайте мобильную версию, плииииз 🙏🏻
Это не сложно, текста уже написаны, фото обработаны и цвета подобраны, стоит потратить час - два максимум и вы с легкостью сложите макет.

Если ваши работы будут с адаптивным дизайном под телефон, это будет вашим конкурентным преимуществом, а конверсия сайта на телефонах будет выше

Проверка в разных браузерах и тестирование

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

Как проверяю?

Скачиваю все популярные браузеры на компьютер и открываю верстку во всех скачанных браузерах, просматриваю не поплыла ли верстка и проверяю все кнопки на работоспособность.

Проверка на валидность в validator.w3.org

Верстка состоит из тегов и каждый тег что‑то обозначает.
К примеру этот тег обозначает заголовок:

<h1></h1>

Обычно в этот тег нужно поместить, что ищет человек

<h1>Купить подушку</h1>

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

В чем же проверка на валидность? Бывают случаи когда заголовок помещают не в тот тег. Например заголовок могут поместить в обычный тег <div>:

<div>Купить подушку</div>

Этот тег ничего не значит, в этом случае когда кто‑нибудь забьет в поисковой строке “Купить подушку”, то на вашем сайте поиск не найдет заголовка с тегом <h1></h1> и решит, что ваш сайт не релевантен и отправит сайт на 2 или 10 страницу поисковой выдачи. Это не единственная ошибка, которую можно допустить при верстке, их множество.

Для кого это важно?

Этот пункт важен для тех кто планирует продвижение в поисковой выдаче, то есть в SEO.

Проверка на скорость загрузки страницы в Google Page Speed

Проверяю верстку на скорость загрузки через сервис google‑pagespeed. Сервис сканирует страницу и показывает по пунктам, что можно сделать, чтобы загрузка страницы была молниеносной

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

Стоит заметить

Не стоит перегружать сайт большим количеством картинок, из‑за этого страдает скорость загрузки страницы. Если в макете будет много картинок, я не могу давать гарантию на зеленую зону в Google Page Speed! Также с счетчиками аналитики.

Сапожник без сапог

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

Проверка в Pixel Perfect

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

100% соответствия не бывает!

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

В случае кривого макета выравниваю элементы на своё усмотрению.

Сжатие всего

Cжимаю .js и .css файлы через Webpack, чтобы страница грузилась быстрей. Подгоняю заранее картинки под нужный размер и сжимаю без потери качества с помощью сервиса Tinypng.

Проверка по чек‑листу верстки

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

Проверка заказчиком

Маша

Была в сети 9 минут назад

Добрый день

https://w.lobanof.ru/site/

Здесь будет картинка первого экрана вашего сайта или можете нарисовать вашу оригинальную картинку для соц‑сетейЗаголовок сайтаОписание сайта

Если у вас есть замечания, напишите, исправлю

Заказчик проверяет верстку.

Доработки и правки!

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

Посмотреть гарантии

Оплата и передача исходников или установка на домен

После последней оплаты передаю исходники ссылкой на Яндекс.Диск или устанавливаю верстку на домен. Ссылка на верстку доступна в течении месяца Если у вас появятся дополнительные доработки по макету, то никуда не исчезаю, всегда на связи.

Посмотреть портфолио

Маша

Была в сети 9 минут назад

Андрей, все круто!

Вы можете скинуть исходники?

После оплаты

готово

https://yadi.sk/d/2_sUZnBA