Foodnoms
Marché de fruits ensoleillé sur porcelaine blanche - oranges chaudes, légumes verts frais et formes arrondies et volumineuses
Foodnoms propose un marketing ludique pour le suivi nutritionnel: une interface épurée, des maquettes de téléphone grand format comme points d’ancrage visuels et une palette de couleurs originale où chaque couleur représente un nutriment et une progression. Un bandeau bicolore (une couleur pour le mot-clé, un gris anthracite pour le reste) permet d’appréhender rapidement la proposition de valeur. Le système repose sur un écran unique (Aquawax Pro) aux formes arrondies qui adoucissent l’aspect des écrans d’application riches en données. La plupart des surfaces sont planes et sans ombre; le rayon uniforme des angles confère aux boutons, cartes et étiquettes un aspect agréable et doux, rendant le suivi de santé plus accessible qu’un processus médical.
La page présente une mise en page à une seule colonne, centrée et occupant toute la largeur (environ 1200 px), avec un rythme vertical aéré. L'en-tête est une fine barre supérieure avec le logo à gauche, la navigation centrée et un bouton d'action orange plein à droite. La section principale est composée d'un bloc centré: un titre bicolore, un sous-titre sur une seule ligne, l'icône de l'App Store, puis une rangée de 3 à 5 maquettes de téléphone disposées en éventail sur toute la largeur. En dessous, un encart centré avec le logo « Recommandé» est intégré dans une grille 2x3. Les sections de contenu suivent un motif répétitif: texte sur deux colonnes + maquette de téléphone, alternant les côtés, avec des titres de section en orange/vert. Le dernier élément avant le pied de page est une carte d'appel à l'action téléchargeable occupant toute la largeur. Les marges entre les sections sont généreuses (96 px), créant une impression d'espace, comme dans une galerie. La navigation est une barre supérieure minimaliste; il n'y a ni barre latérale ni méga menu.
L'identité visuelle de l'application repose principalement sur des maquettes de haute qualité pour iPhone, présentant son interface fonctionnelle. Ces maquettes constituent les éléments principaux, et non des photos libres de droits. Affichées avec une transparence quasi totale, elles sont disposées en éventail avec un léger chevauchement et une rotation fluide, et positionnées directement sur un fond blanc. Au sein de ces maquettes, l'interface de l'application fournit les informations nutritionnelles, les photos des produits, les anneaux macro et les étiquettes de catégories colorées. Le seul contenu photographique est constitué d'images de plats soumises par les utilisateurs et visibles sur l'écran de l'appareil photo de l'application Scan Your Food. On n'y trouve ni photos lifestyle, ni illustrations abstraites, ni éléments graphiques décoratifs. L'identité de marque est entièrement définie par la police personnalisée, la palette de couleurs orange/vert/foncé et l'interface propre à l'application.
Palette
Marque
- Ember Orange
#ff5406— L'orange est utilisée comme couleur d'accent secondaire pour les détails décoratifs et pour souligner des informations ponctuelles. Elle ne doit pas être utilisée comme couleur principale pour les incitations à l'action.
Neutre
- Graphite
#2f2f2f— Texte principal, boutons foncés (icône de l'App Store) et contours des icônes. Une couleur non blanche prédominante dans les titres et le corps du texte. - Verdant Green
#00b33f— La couleur verte sert d'accentuation supplémentaire pour les détails décoratifs et pour mettre en valeur les basses fréquences. - Signal Red-Orange
#ff3400— Une nuance chaude secondaire, visible dans les éléments d'interface utilisateur et l'identité visuelle de l'application. D'une teinte plus chaude qu'Orange Ébène, elle met en valeur les états sélectionnés ou actifs de l'application. - Sky Blue
#00a9dd— Un contraste agréable pour les catégories de données internes de l'application (glucides/protéines/autres groupes de nutriments). Cela équilibre la palette de couleurs chaudes et dominantes des interfaces du téléphone. - Mist Blue
#72a2c5— Accentuation froide et discrète - Adoucit la couleur bleu ciel pour les étiquettes de données supplémentaires et les arrière-plans des graphiques dans l'application. - Sunset Orange
#ff6d00— Une touche chaleureuse pour les titres secondaires et le texte mis en évidence sur les pages marketing.
Typographie
de 12 à 60 px · 7 étapes
- Aquawax Pro Medium — remplacement: Inter · grandes lignes 500 · Aquawax Pro Medium - Présent dans les données extraites mais non décrit par l'IA.
- Aquawax Pro — remplacement: Nunito Sans · grandes lignes 700, 500, 600 · La police principale de la marque est utilisée dans tous les contextes, y compris les titres et le corps du texte. Cette police personnalisée se caractérise par des caractères de grande hauteur, des formes géométriques arrondies et des proportions harmonieuses. Le gras (700) est utilisé pour les titres et les sections, éléments typographiques essentiels du système. Le semi-gras (600) est utilisé pour les sous-titres et les libellés des boutons, avec une hauteur de 14 à 1,8 mm. Le texte courant est utilisé avec une hauteur de 17 à 1,8 mm et un interlignage suffisant (1,6 à 1,8 mm) pour un confort de lecture optimal.
- System sans-serif — remplacement: Inter · grandes lignes 400, 700 · Une police de remplacement est utilisée pour les textes et icônes de très petite taille dans l'interface utilisateur. Aquawax Pro n'est pas utilisée pour les très petites tailles; la police système s'en charge afin de réduire le poids du rendu.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | spacieux |
| Étape de base | 20px |
| Rayon du bouton | 26px |
| Rayon de la carte | 26px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 96px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Foodnoms et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Slite — Un carnet en parchemin chaud avec une poignée en terre cuite — chaque surface est en papier crème, chaque détail une subtile touche d'orange.
- Adora — Le musée de l'impressionnisme derrière une vitre dépolie
- Bento — Une boîte à bento posée sur du lino baigné de soleil. Une grille de cartes arrondies, semblables à des autocollants, dans les tons de citron vert, lavande, cobalt et bordeaux, chacune soulignée d'un épais trait d'encre noire, repose sur un lin chaud et crémeux sous un titre géométrique audacieux.
- Payments — Une teinte citronnée éclatante sur un fond pourpre royal. Le pourpre électrique profond évoque le ciel nocturne, tandis que des touches de jaune citron scintillent comme des zestes d'agrumes frais sur une surface blanche immaculée.
- Textla — Almanach botanique rétro ensoleillé - Page jaune crème imprimée en vert foncé avec des illustrations de cactus rendues par des ombres nettes et décalées
- AI for Business — Showroom éditorial brutaliste aux tons gris chauds
- Superhuman — Comité de rédaction de l'heure dorée
- Visitors — dessin technique blanc
- Vercel — Terminal imprimé sur papier blanc
- Jeton — Un éditorial sur la fintech sur du marbre chaud
- Say Briefly — Carnet de croquis d'agence créative sur papier crème
- ClickUp — Un tableau de bord imposant sur fond de marbre blanc. Cette page est une brochure produit pour un outil de productivité; son langage visuel est donc emprunté au produit lui-même: listes denses, indicateurs d’état, groupes d’avatars et formulations typographiques audacieuses qui évoquent une fiche technique.