Дизайн лендинга для дальнейшей самостоятельной верстки на конструкторе Gridbox (Joomla)

1. Мета проєкту

Розробити цілісну візуальну концепцію сайту та детальну дизайн-документацію (Style Guide), яка дозволить точно відтворити дизайн у конструкторі, зберігаючи системність відступів, типографіки та кольорів.

2. Технічні вимоги

• Інструмент: Figma.

• Сітка: Стандартна 12-колонкова сітка (Desktop 1920px або 1440px).

• Адаптивність: Окремі макети для Desktop, Tablet та Mobile.

• Системність: Всі елементи мають бути створені через Components та Styles у Figma.

3. Стилістика та Колірна палітра

Необхідно створити гармонійне поєднання на основі наступних кольорів:

• Основний: Графітовий (глибокий, преміальний).

• Додатковий: Крафтовий беж (природний, теплий).

• Акцентний: Теракотовий (для кнопок, важливих акцентів).

• Фон: Молочний білий (м’який для очей, не чисто білий).

4. Типографіка

Використовуємо поєднання Serif (заголовки) та Sans-serif (текст). Очікую від дизайнера фінальну настройку пар:

• Заголовки (H1-H6): Lora (Serif), Playfair Display або Cormorant Garamond.

• Підзаголовки/Акценти: Lora або подібні.

• Основний текст: Open Sans, DM Sans або інший читабельний гротеск.

5. Обсяг робіт (UI Kit & Documentation)

Мені потрібна детальна специфікація кожного елемента для перенесення в Gridbox:

1. Typography Scale: Точні параметри для H1, H2, H3, H4, P (Desktop/Mobile):

   • Розмір шрифту (px).

   • Міжбуквенний інтервал (Letter spacing).

   • Висота рядка (Line height).

   • Насиченість (Weight).

2. Color System: Коди кольорів (HEX/RGB) для фонів, текстів, кнопок (у станах Normal, Hover, Active).

3. Spacing & Grid: Система відступів (Padding/Margin) між секціями та елементами (бажано кратна 4 або 8).

4. Buttons & Elements: Дизайн кнопок, форм зворотного зв’язку, іконок та карток товарів.

6. Структура сторінок

• Згідно з наданим прототипом (https://fotory.com.ua/s/landing2).

• Акцент на якісну подачу фотоконтенту (використати надані фото).

7. Очікуваний результат

1. Макети сторінок у Figma.

2. Окрема сторінка у Figma — Design System / Style Guide з усіма технічними параметрами, описаними в п. 5.

3. Експортовані графічні елементи (SVG іконки, оптимізовані зображення).

Доповнення до ТЗ: Стилістика іконок та графіки

1. Стиль іконографіки:

• Тип: Тільки контурні іконки (Outline icons). Уникати залитих (Solid) або занадто деталізованих реалістичних іконок.

• Товщина ліній: Має бути узгоджена з товщиною штрихів обраного основного шрифту (Open Sans/DM Sans), щоб іконки та текст виглядали як єдина система.

• Геометрія: Усі елементи іконок повинні мати заокруглені кути (Rounded corners). Жодних гострих кутів — це має підтримувати загальну «м’яку» та природну стилістику бренду.

• Мінімалізм: Максимально прості форми, що легко зчитуються.

2. Вимоги до виконання (для Figma):

• Усі іконки мають бути виконані в одному стилі (єдина товщина ліній, однаковий радіус заокруглення).

• Іконки повинні бути переведені в криві (Outlined strokes) перед фінальною здачею.

• Кожна іконка має бути поміщена у квадратний фрейм (контейнер) однакового розміру (наприклад, 24x24 або 32x32 px) для зручного експорту та верстки в Gridbox.

3. Графічні елементи (кнопки, форми, картки):

• Для кнопок та полів вводу також використовувати заокруглення кутів (Border radius), що корелює зі стилем іконок. Радіус має бути помірним, щоб зберігати професійний вигляд.