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

Заказать версткуПривет, меня зовут Андрей, я верстальщик. Считаю, что любой сайт должен дать нечто новое и полезное посетителю, для этого 👇 ниже я описал этапы верстки сайта от А до Я понятным языком, чтобы дать вам понимание из чего состоит верстка. Если вы впервые слышите о верстке сайта, то прочитайте вот эту статью что такое верстка .

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

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

Расчет цены и сроков

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

Не забудьте

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

Также если на будущем сайте есть какая нибудь анимация, то нужно описать в отдельном текстовом файле или в сообщении как анимация должна себя вести, желательно скинуть примеры с других сайтов или видео с примером анимации

Посмотреть цены

Маша

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

Привет

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

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

Могу через час посчитать, ок?

Ок

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

Маша

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

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

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

Пришли

Отлично

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

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

Не кидаю на деньги

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

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

Подключение шрифтов

Если шрифты есть в fonts.google.com, то все в порядке, в противном случае вам нужно скинуть редкие шрифты со своего компьютера вместе с исходниками макетов

Почему ты сам не найдешь, сайтов полно!

Дело в том, что шрифты эти на сайтах есть. Но когда подключаешь эти шрифты они не сходятся с теми, какие есть в макете.

Маша

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

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

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

Спасибо

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

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

Зачем это нужно?

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

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

Также если вам нужно будет создать новые страницы, то можно использовать уже готовые компоненты

Pixel Perfect

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

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

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

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

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

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

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

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

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

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

В 90-х когда появилась верстка не было теней, градиентов и закруглений в самой верстке, всю эту красоту можно было вставить только фоновой картинкой на сайт, а поверх верстать текст и ссылки. Со временем в новых версиях браузеров* появились возможности нативных теней, градиентов и всех остальных фишек, но браузеры старых версий как не поддерживали фишки так и не поддерживают. Конечно сейчас все используемые браузеры поддерживают тени и градиенты, это было приведено к примеру, но все же остались версии браузеров с своими особенностями. И таких особенностей множество. Поэтому верстать нужно с учетом браузеров которые все еще популярны, это называется кроссбраузерная верстка.

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

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

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

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

<h1></h1>

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

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

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

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

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

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

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

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

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

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

Важно!

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

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

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

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

Заказчик проверяет визуально верстку и код если он технически подкован.

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

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

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

Маша

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

Добрый день

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

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

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

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

Маша

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

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

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

После оплаты

готово

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

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

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