Верстка сайту з Figma

Верстку можна замовити окремо, без розробки сайту під ключ.

Ви надсилаєте макет, а я віддаю готовий код.

Що ви отримуєте

• Точність до макета: Відступи, шрифти, кольори і стани елементів: наведення, натискання, помилки у формах.
• Адаптив: Сайт добре виглядає на телефоні, планшеті й комп'ютері. Якщо в макеті є лише десктоп і телефон, проміжні екрани допрацьовую сам, щоб нічого не з'їжджало.
• Чистий код: Компонентний підхід і методологія BEM: код легко підтримувати і передати іншому розробнику.
• Швидкість: Оптимізовані зображення і шрифти, мінімум зайвого JavaScript.
• Доступність: Семантична розмітка, робота з клавіатури, контраст тексту.

У якому вигляді віддаю

• статичний HTML і SCSS: для лендінгів і простих сайтів;
• компоненти Vue 3 або сторінки Nuxt, якщо проєкт на цьому стеку;
• компоненти React, якщо у вас React;
• верстку, вбудовану у ваш поточний проєкт чи тему WordPress.

Як підготувати макет

Що варто зробити у Figma до початку, щоб верстка пройшла швидше і без питань, — у статті верстка сайту з Figma: що підготувати.

Коротко: стилі тексту і кольорів, компоненти зі станами, Auto Layout, хоча б два розміри екрана.

Від чого залежить вартість

Рахую від макета: подивлюся його і назву ціну та терміни. Впливають:

• кількість унікальних сторінок і блоків;
• чи є мобільна версія макета;
• анімації й нестандартні взаємодії;
• стек: статична верстка, Vue/Nuxt, React чи WordPress;
• терміни.

Як проходить робота

1. Ви надсилаєте посилання на макет.
2. Я переглядаю його й ставлю питання щодо неочевидних місць.
3. Верстаю, показую проміжний результат на тестовому посиланні.
4. Правки, перевірка на реальних пристроях, передача коду або публікація.

Потрібна не лише верстка, а й сайт цілком? Дивіться лендінг, корпоративний сайт чи full-stack розробку.