Foodnoms
Сонячний фруктовий ринок на білій порцеляні — теплі помаранчеві, свіжі зелені та об'ємні округлі форми.
Foodnoms є світла маркетингова мова для відстеження харчування: чисте біле полотно, збільшені макети телефонів як візуальний якорь і грайливий колірний словник, де кольори кодують поживні речовини та прогрес. Двоколірна схема заголовків (один колір для ключового слова, темно-графітовий для решти) дозволяє швидко оцінити ціннісну пропозицію. Система спирається на єдиний дисплей (Aquawax Pro) з чітко закругленими геометричними рисами, які пом'якшують насичені даними екрани додатків. Більшість поверхонь плоскі та без тіней; рівномірний радіус заокруглення кутів надає кнопкам, карткам та міткам доброзичливе, м'яке відчуття, завдяки чому відстеження здоров'я сприймається скоріше як доступне, ніж як клінічне заняття.
Сторінка має одноколоночний, центрований макет максимальної ширини (~1200px) із щедрим вертикальним ритмом. Заголовок являє собою тонку верхню панель з логотипом зліва, навігацією по центру та заповненою помаранчевою кнопкою дії праворуч. Геройська частина являє собою центрований стек: двоколірний заголовок, однорядковий підзаголовок, значок App Store, а потім ряд із 3-5 макетів телефонів, розташованих віялом по всій ширині. Під героєм знаходиться центрована секція з логотипом для преси "Як рекомендовано" у сітці 2×3. Розділи з функціями слідують за повторюваним шаблоном: двоколоночний текст + макет телефону, сторони, що чергуються, з акцентними заголовками розділів помаранчевого/зеленого кольору. Останній елемент перед нижнім колонтитулом – це картка CTA для завантаження на всю ширину. Проміжки між розділами великі (96px), створюючи відчуття простору, як у галереї. Навігація є мінімалістичною верхньою панеллю — без бічної панелі і мега-меню.
Візуальна мова додатка домінують високоякісні макети рамок iPhone, що демонструють працюючий інтерфейс програми - це головні елементи, а не стокові фотографії. Макети відображаються з майже повною прозорістю, віялом з невеликим накладенням та плавним поворотом, розташовуючись безпосередньо на білому тлі. Всередині макетів візуальну складову забезпечує власний інтерфейс програми: дані про харчову цінність, фотографії продуктів, макрокільця та барвисті теги категорій. Єдиний фотографічний контент – це надані користувачами зображення продуктів харчування, що відображаються на екрані камери програми «Скануйте свою їжу». Жодних фотографій у стилі лайфстайл, ніяких абстрактних ілюстрацій, жодної декоративної графіки. Фірмовий стиль повністю визначається розробленим шрифтом, колірною системою помаранчевий/зелений/темний та власним інтерфейсом програми.
Палітра
Бренд
- Ember Orange
#ff5406— Помаранчевий колір використовується як допоміжний акцент для декоративних деталей та акцентування уваги на нечастих сигналах. Не слід виділяти його як основний колір заклику до дії.
Нейтральні
- Graphite
#2f2f2f— Основний текст, темні кнопки (значок App Store) та обведення іконок. Переважаючий не білий колір у заголовках та основному тексті. - Verdant Green
#00b33f— Зелений колір є додатковим акцентом для декоративних деталей та підкреслення низьких частот. - Signal Red-Orange
#ff3400— Вторинний теплий акцент, помітний в елементах інтерфейсу користувача екрана програми і в супутніх моментах, пов'язаних з брендом. На один тон тепліше, ніж Ember Orange, для акцентування уваги на вибраних чи активних станах програми. - Sky Blue
#00a9dd— Приємний контраст для внутрішніх категорій даних програми (вуглеводи/білки/інші групи поживних речовин). Врівноважує теплу, домінуючу палітру кольорів у макетах телефонів. - Mist Blue
#72a2c5— Приглушений холодний акцент — пом'якшує синій колір Sky для додаткових позначок даних та фону діаграм всередині програми. - Sunset Orange
#ff6d00— Теплий акцент для другорядних заголовків та виділеного тексту на сторінках маркетингових матеріалів.
Друкарня
від 12 до 60px · 7 ступенів
- Aquawax Pro Medium — заміна: Inter · зображення 500 · Aquawax Pro Medium - виявлений у вилучених даних, але не описаний ІІ.
- Aquawax Pro — заміна: Nunito Sans · зображення 700, 500, 600 · Основний фірмовий шрифт, що використовується у всіх контекстах: заголовках та основному тексті. Цей спеціально розроблений шрифт відрізняється широкою висотою малих літер, округлими геометричними формами та зручними пропорціями. Жирний (700) використовується для заголовків та розділів – це типографічні орієнтири системи. Напівжирний (600) використовується для підзаголовків та написів кнопок розміром 14–1,8 мм. Середній (500) використовується для основного тексту розміром 17–1,8 мм із достатньою міжрядковою розміткою 1,6–1,8 мм для комфортного читання.
- System sans-serif — заміна: Inter · зображення 400, 700 · Для дуже дрібних текстових та іконкових написів у інтерфейсі користувача використовується резервний варіант. Aquawax Pro не використовується у мікророзмірах; системний шрифт обробляє їх, щоб знизити вагу малювання.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | простора |
| Базовий крок | 20px |
| Радіус кнопок | 26px |
| Радіус карток | 26px |
| Тіні | ні — межі замість тіней |
| Між секціями | 96px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Foodnoms і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Slite — Блокнот із теплого пергаменту з теракотовою ручкою – кожна поверхня виконана з кремового паперу, кожен акцент – це ледь помітний штрих оранжевого кольору.
- Adora — Музей імпресіонізму за матовим склом
- Bento — Ланчбокс бенто на залитому сонцем лінолеум. Сітка з округлих, схожих на наклейки карток салатового, лавандового, кобальтового та бордового кольорів, кожна з яких обведена густим чорним чорнилом, лежить на теплому кремовому лляному полотні під впевненим геометричним заголовком
- Payments — Яскравий цитрусовий відтінок на тлі королівського фіолетового. Глибокий електричний фіолетовий колір нагадує нічне небо, а лимонно-жовті акценти виблискують, як свіжа цитрусова цедра, на чистій білій поверхні
- Textla — Сонячний ретро-ботанічний альманах – сторінка кремово-жовтого кольору, надрукована темно-зеленим кольором, з ілюстраціями кактусів, виконаними з використанням різких зміщених тіней
- AI for Business — Бруталістський редакційний виставковий зал у теплих сірих тонах
- Superhuman — редакційна панель золотої години
- Visitors — білий інженерний креслення
- Vercel — Надрукований на білому папері термінал
- Jeton — Редакційна стаття про фінтех на теплому мармурі
- Say Briefly — Скетчбук креативного агентства на кремовому папері
- ClickUp — Ефективна панель управління на білий мармур. Сторінка являє собою брошуру продукту — інструмента підвищення продуктивності, тому візуальна мова запозичена із самого продукту: щільні списки, індикатори статусу, групи аватарів та сміливі типографічні заяви, які виглядають як технічна специфікація продукту у виставковому масштабі