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

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

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

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

1. Макет

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

Не забудьте

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

Маша

Была в сети 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 - Лобанов Андрей Евгеньевич

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

Пришли

Отлично

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

Разбивка на компоненты

Перед тем как начать верстать, я визуально сканирую все макеты на одинаковые элементы, например “Логотип”, “Заголовки”, “Текста” или какие то похожие блоки, после сканирования сделать выводы для каких элементов написать общие стили, чтобы повторно переиспользовать в верстке.

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

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

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

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

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

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

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

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

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

Проверка на валидность

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

<h1></h1>

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

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

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

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

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

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

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

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

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

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

Важно!

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

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

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

Pixel Perfect

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

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

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

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

Сжатие

Подгоняю заранее картинки под нужный размер и сжимаю без потери качества с помощью сервиса https://tinypng.com/. Также сжимаю .js и .css файлы.

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

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

Для меня это как шпаргалка на экзамене.

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

Маша

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

Добрый день

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

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

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

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

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

Если вы выявите какие то недоработки то я исправляю, если эти недоработки не были оговорены до начала работ, то работа выполняется за доп плату.

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

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

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

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

Маша

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

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

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

После оплаты

готово

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