Детальна верстка проекту!
Figma проект https://www.figma.com/design/O1ZFkM0Ugian1oUkMcq8qX/Untitled?node-id=1733-5461&t=uwr78V10NVNWzq6F-1
🔒 ТЕХНІЧНЕ ЗАВДАННЯ
ФРОНТЕНД-ВЕРСТКА ЗА МАКЕТОМ FIGMA
(БЕЗ БЕКЕНДА / БЕЗ ЛОГІКИ / БЕЗ ЗБЕРІГАННЯ)
1. Мета робіт
Сверстати користувацький інтерфейс сайту строго за макетами Figma (pixel-perfect)
❗ Виключно фронтенд-верстка, без реалізації серверної логіки, зберігання даних та бізнес-процесів.
Результат робіт має бути повністю готовим до подальшого підключення бекенда, але не містити його реалізації.
2. Джерело дизайну
Єдине джерело істини — макети Figma
Верстка виконується 1 в 1:
розміри
відступи
шрифти
кольори
стани елементів
Будь-які відхилення від Figma заборонені без погодження
3. Межі відповідальності фронтенда (КРИТИЧНО)
🚫 Фронтенд НЕ МАЄ ПРАВА:
проектувати API
реалізовувати бізнес-логіку
зберігати дані
робити авторизацію
робити розрахунки
підключати БД
емулювати «розумну» поведінку
Фронтенд ТОЛЬКИ відображає інтерфейс.
4. Форми (ОБОВ'ЯЗКОВО)
4.1 Поведінка форм
Усі форми:
верстаються строго за Figma
містять візуальну валідацію (required, error-state)
НЕ ЗБЕРІГАЮТЬ дані
НЕ ВІДПРАВЛЯЮТЬ дані на сервер
4.2 Відправка форми
При submit:
console.log('Form submit mock', formData);
❗ Використовується JS-заглушка, без fetch / axios / API.
5. Списки, картки, таблиці
5.1 Джерело даних
Усі списки верстаються статично
Дані захардкожені (mock-data)
Структура HTML має бути готова під API
Приклад:
<div class="items-list">
<!-- items from API later -->
</div>
❗ Жодної логіки завантаження даних.
6. Авторизація / реєстрація
6.1 Строго тільки UI
Верстка екранів входу / реєстрації
Поля, кнопки, стани помилок — тільки візуально
Жодної перевірки логіна/пароля
6.2 Поведінка
Кнопка «Увійти»:
console.log('Auth UI only');
❗ НІ:
JWT
cookies
localStorage
ролей
доступу
7. Кнопки та дії
7.1 Усі кнопки
Зобов'язані мати hover / active / disabled (якщо є в Figma)
Не виконують реальних дій
7.2 Поведінка кнопок
console.log('Button clicked');
8. Модальні вікна / попапи
Відкриваються/закриваються локальним JS
Без завантаження даних
Без прив'язки до API
Стані строго за макетом
9. Адаптивність
Обов'язкові брейкпоінти:
Desktop
Tablet
Mobile
Верстка строго за адаптивними макетами Figma
Самовільні рішення заборонені.
10. Технічні вимоги
HTML5
CSS / SCSS
Методологія класів: BEM (або погоджена)
Чиста, читабельна структура
Компонентний підхід
11. Підготовка під бекенд (АЛЕ БЕЗ ЙОГО РЕАЛІЗАЦІЇ)
Фронтенд зобов'язаний:
залишити коментарі:
<!-- backend: data will be injected here -->
використовувати нейтральні data-атрибути
не робити припущень про логіку API
12. Критерії приймання
Робота приймається якщо:
Верстка візуально збігається з Figma
Немає мережевих запитів
Немає зберігання даних
Немає бізнес-логіки
Весь інтерактив — заглушки
Код готовий для підключення бекенда
13. Заборонено без погодження
❌ Самостійно:
придумувати логіку
оптимізувати UX «по своєму»
додавати поведінку не з Figma
писати API-клієнти
ВСЕ МАЄ ПРАЦЮВАТИ І ВИГЛЯДАТИ ЯК У FIGMA!
-
📌Привіт.👋
⭐️Мене звати Андрій.
⭐️Мій досвід роботи: 12 років+
• ➡️Можу показати роботи саме по верстці проектів
• 🎨Портфоліо:Freelancehunt
• ✅Рейтинг робіт на Behance (більше 500.000 переглядів)
• 💼Більше робіт тут:Dribbble
-
Валерію, ваш проект – виклик, з яким я готова впоратися з ентузіазмом. Мій досвід у створенні адаптивних інтерфейсів точно за макетами Figma гарантує бездоганну відповідність вашому баченню. Я впевнена, що наші технічні навички дозволять створити ідеально інтерактивний фронтенд, готовий до бекенд-інтеграції без жодних відхилень. Моє розуміння адаптивності та компонентного підходу дозволить вашому проекту виглядати і функціонувати бездоганно на всіх платформах. З нетерпінням чекаю на можливість обговорити ваші очікування надалі.
-
Реалізую pixel-perfect верстку на HTML/SCSS за БЕМ з повною адаптивністю та JS-заглушками строго за ТЗ. Гарантую чисту структуру під подальшу інтеграцію бекенду. Вартість за весь обсяг — $450, термін — 10 робочих днів.
Коли плануєте відкривати проект, щоб я забронював час під ваш обсяг?
-
375 1 0 Добрий день!
Готовий виконати ваш проєкт. Працюю з веб-розробкою та дизайном, маю практичний досвід і портфоліо.
Працював з клієнтами з України та Європи, дотримуюсь термінів і завжди на зв’язку.
Готовий обговорити деталі та запропонувати оптимальне рішення. Можу почати найближчим часом.
-
309 1 0 Привіт, розумію на скільки важливо відтворити дизайн без змін на сайті, тому відповідаю за якість своїх послуг.
Пишіть, обговоримо деталі та прайс.
Відповідаю швидко!
-
10857 17 2 ✌️Привіт, також з Хмельницького))
Пропоную свою кандидатуру. Завдання ясне і не нове
10 днів, 20,000грн і у вас реалізований піксель перфект фронтенд 1 в 1 як на макеті
✔️ Ви не відрізните реальний сайт від дизайну
✔️ Логіка відображення буде реалізована чітко за ТЗ
… Працюємо швидко, чітко і без витрат ваших нервових клітин
🤝 Не бачу жодної причини, чому наша співпраця не відбулася б))
-
11706 68 0 Доброго дня
готовий обговорити деталі в лс
...........................................
-
7672 16 0 1 Вітаю.
Ознайомився із завданням
Створю якісну верстку.
Напишіть, обговоримо деталі проекту!
----------------------------------
Приватний розробник веб-сайтів. Досвід – 10 років.
Дизайн, верстка, розробка сайтів Wordpress.
-
10515 179 3 3 Добрий день. Є великий досвід розробки сайтів. Зроблю якісно та швидко. Пишіть, обговоримо деталі
Моє портфоліо
Freelancehunt
-
807 6 1 Доброго дня!
Готовий зробити сайт за вашим дизайном з Figma. Виконаю чисту HTML-верстку з адаптивними версіями під мобільні пристрої та планшети, строго за макетом.
Що реалізую:
• Верстка сайту на HTML/CSS за дизайном з Figma
• Повна адаптивність: desktop / tablet / mobile
• Контактна форма з валідацією порожніх та некоректно заповнених полів
• Все строго за ТЗ
… • Чистий, структурований код
Мої роботи:
https://yesoriginal.com.ua/ https://beauty-prof.com/ https://biotop-professional.com.ua/
https://heko.lt/
http://jobsfor-you.com/
https://brightsmile.masterdev36.com/
https://velustro.masterdev36.com/novabuild/
https://wall-master.artbud.pro/
https://www.cardanmash.com.ua/
http://floridagardendesigns.com/
https://sugacards.com/
https://advilion.com
http://axiomaplus.com.ua/
https://maxinstal.ch/
http://otpad.com.ua/
http://spectrum.net.ua/
Готовий приступити одразу
Актуальні фриланс-проєкти в категорії Дизайн інтерфейсів (UI/UX)
UX/CRO спеціалістЩо потрібно: Провести аудит інтернет-магазину та виявити причини низької конверсії. Проаналізувати структуру каталогу, картки товарів, кошик, оформлення замовлення, комерційні фактори та UX. Дати конкретний список доопрацювань із пріоритетами та очікуваним ефектом. За наявності… Дизайн інтерфейсів (UI/UX) ∙ 2 години 25 хвилин тому ∙ 9 ставок |
Потрібно перенести і адаптувати дизайн зі старого сайту на новийПривіт. Потрібно перенести і адаптувати дизайн старого сайту msonya.com на новий шаблон test.msonya.com і зробити дизайн кожної сторінки сайту у фігмі для подальшого «натягування» дизайну на сайт. Два формати: десктоп і мобайл Дизайн інтерфейсів (UI/UX), Дизайн сайтів ∙ 1 день 17 годин тому ∙ 42 ставки |
UI/UX Аудит та приведення сайту до єдиного стилю
8000 UAH
Важливо: розглядаємо тільки спеціалістів з підтвердженим досвідом, з портфоліо. Розробляється сайт агентства нерухомості. Всі основні сторінки вже зібрані та верстані в Lovable. На поточному етапі потрібно провести професійний аудит інтерфейсів, виявити візуальні та… Дизайн інтерфейсів (UI/UX) ∙ 1 день 21 година тому ∙ 32 ставки |
Шукаємо дизайнера для створення серії тригерних email-листів для бренду чоловічих аксесуарівМи шукаємо досвідченого email-дизайнера для розробки дизайну серії тригерних листів для бренду чоловічих аксесуарів. Тексти листів уже готові. Завдання полягає саме у створенні якісного, сучасного та адаптивного дизайну, який буде відповідати стилю бренду, нашій візуальній мові… Дизайн інтерфейсів (UI/UX), Дизайн сайтів ∙ 1 день 23 години тому ∙ 14 ставок |
Потрібен UI/UX-дизайнер: редизайн каталогу + картки товару (Figma)Діючий інтернет-магазин дисків і шинOBERT(https://obertshop.com.ua). Потрібенредизайн двох існуючих сторінок: Каталог (перелік товарів)—https://obertshop.com.ua/shop/Картка товару— приклад:https://obertshop.com.ua/shop/dysky/audi/r21-audi/disk-r21-na-avto-audi-obr9006/ Обидві… Дизайн інтерфейсів (UI/UX), Дизайн сайтів ∙ 2 дні 18 годин тому ∙ 66 ставок |