Foodnoms
Sonniger Obstmarkt auf weißem Porzellan – warme Orangen, frisches Grün und voluminöse, runde Formen
Foodnoms setzt auf eine unbeschwerte Marketingsprache für die Ernährungstracking-App: ein klares, weißes Layout, großformatige Smartphone-Mockups als visuelle Ankerpunkte und eine spielerische Farbpalette, in der Farben Nährstoffe und Fortschritte symbolisieren. Ein zweifarbiges Header-Schema (eine Farbe für das Keyword, Dunkelgrau für den Rest) ermöglicht eine schnelle Erfassung des Nutzenversprechens. Das System basiert auf einem Einzelbenutzerdisplay (Aquawax Pro) mit markant abgerundeten geometrischen Formen, die die datenreichen App-Bildschirme auflockern. Die meisten Oberflächen sind flach und schattenfrei; der einheitliche Eckenradius verleiht Schaltflächen, Karten und Beschriftungen eine freundliche, angenehme Haptik und macht das Gesundheitstracking zugänglicher als klinisch.
Die Seite präsentiert sich in einem einspaltigen, zentrierten Layout in voller Breite (ca. 1200 px) mit großzügiger vertikaler Struktur. Der Header besteht aus einer schmalen Leiste mit dem Logo links, der zentrierten Navigation und einem orangefarbenen Aktionsbutton rechts. Der Hero-Bereich ist zentriert angeordnet: ein zweifarbiger Titel, eine einzeilige Unterüberschrift, ein App-Store-Symbol und anschließend eine Reihe von 3–5 Smartphone-Mockups, die sich über die gesamte Breite erstrecken. Unterhalb des Hero-Bereichs befindet sich ein zentrierter Bereich mit dem Presselogo „Empfohlen“ in einem 2x3-Raster. Die Feature-Bereiche folgen einem wiederkehrenden Muster: zweispaltiger Text + Smartphone-Mockup, abwechselnd links und rechts, mit akzentuierten Überschriften in Orange/Grün. Das letzte Element vor der Fußzeile ist eine herunterladbare CTA-Karte in voller Breite. Die Abstände zwischen den Abschnitten sind großzügig (96 px) und erzeugen so ein großzügiges, galerieartiges Erscheinungsbild. Die Navigation ist minimalistisch gestaltet – ohne Sidebar oder Mega-Menü.
Die visuelle Gestaltung der App wird von hochwertigen iPhone-Frame-Mockups dominiert, die die Benutzeroberfläche der App präsentieren – diese Mockups sind die Hauptelemente, keine Stockfotos. Sie werden mit nahezu vollständiger Transparenz, leicht überlappend und flüssig gedreht dargestellt und direkt auf einem weißen Hintergrund positioniert. Innerhalb der Mockups sorgt die Benutzeroberfläche der App für die visuelle Gestaltung: Nährwertangaben, Produktfotos, Makroringe und farbige Kategorien. Die einzigen fotografischen Inhalte sind von Nutzern hochgeladene Lebensmittelbilder, die auf dem Kamerabildschirm der „Scan Your Food“-App sichtbar sind. Es gibt keine Lifestyle-Fotos, keine abstrakten Illustrationen und keine dekorativen Grafiken. Das Branding wird vollständig durch die eigens entwickelte Schriftart, das orange-grün-dunkle Farbschema und die Benutzeroberfläche der App definiert.
Palette
Marke
- Ember Orange
#ff5406— Orange wird als sekundäre Akzentfarbe für dekorative Details und zur Hervorhebung seltener Hinweise verwendet. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen eingesetzt werden.
Neutral
- Graphite
#2f2f2f— Haupttext, dunkle Schaltflächen (App-Store-Symbol) und Symbolumrisse. Eine überwiegend nicht-weiße Farbe in Überschriften und Fließtext. - Verdant Green
#00b33f— Die grüne Farbe dient als zusätzlicher Akzent für dekorative Details und zur Hervorhebung tiefer Frequenzen. - Signal Red-Orange
#ff3400— Ein zweiter warmer Akzent, der in den UI-Elementen des App-Bildschirms und dem zugehörigen Branding sichtbar ist. Er ist einen Ton wärmer als Ember Orange und hebt ausgewählte oder aktive App-Zustände hervor. - Sky Blue
#00a9dd— Ein angenehmer Kontrast zu den internen Datenkategorien der App (Kohlenhydrate/Proteine/andere Nährstoffgruppen). Gleicht die warme, dominante Farbpalette der Smartphone-Oberfläche aus. - Mist Blue
#72a2c5— Gedämpfter kühler Akzent – Mildert die himmelblaue Farbe für zusätzliche Datenbeschriftungen und Diagrammhintergründe innerhalb der App. - Sunset Orange
#ff6d00— Ein warmer Akzent für Unterüberschriften und hervorgehobenen Text auf Marketingseiten.
Typografie
von 12 auf 60 Pixel · 7 Schritte
- Aquawax Pro Medium — Ersatz: Inter · Umrisse 500 · Aquawax Pro Medium - In den extrahierten Daten gefunden, aber von der KI nicht beschrieben.
- Aquawax Pro — Ersatz: Nunito Sans · Umrisse 700, 500, 600 · Die primäre Markenschrift wird in allen Kontexten, einschließlich Überschriften und Fließtext, verwendet. Diese speziell entwickelte Schriftart zeichnet sich durch große Buchstabenhöhen, abgerundete geometrische Formen und angenehme Proportionen aus. Fett (700) wird für Überschriften und Abschnitte – die typografischen Orientierungspunkte des Systems – verwendet. Halbfett (600) kommt für Unterüberschriften und Schaltflächenbeschriftungen in einer Schriftgröße von 14–1,8 mm zum Einsatz. Mittel (500) wird für den Fließtext in einer Schriftgröße von 17–1,8 mm verwendet, mit einem ausreichenden Zeilenabstand von 1,6–1,8 mm für komfortables Lesen.
- System sans-serif — Ersatz: Inter · Umrisse 400, 700 · Für sehr kleine Texte und Symbole in der Benutzeroberfläche wird eine Ausweichoption verwendet. Aquawax Pro kommt bei diesen Mikrogrößen nicht zum Einsatz; stattdessen wird die Systemschriftart verwendet, um die Darstellungsgröße zu reduzieren.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | geräumig |
| Grundlegender Schritt | 20px |
| Radius der Schaltfläche | 26px |
| Kartenradius | 26px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 96px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Foodnoms -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Slite — Ein warmes Pergament-Notizbuch mit einem Griff aus Terrakotta – jede Oberfläche ist aus cremefarbenem Papier, jeder Akzent ein dezenter Hauch von Orange.
- Adora — Das Museum des Impressionismus hinter Milchglas
- Bento — Eine Bento-Lunchbox auf sonnenbeschienenem Linoleum. Ein Raster aus abgerundeten, stickerartigen Kärtchen in Limette, Lavendel, Kobaltblau und Burgunderrot, jedes mit dicker schwarzer Tinte umrandet, liegt auf einem warmen, cremefarbenen Leinen unter einem markanten, geometrischen Titel.
- Payments — Ein leuchtendes Zitrusrot vor königlichem Purpurhintergrund. Das tiefe, elektrische Purpur erinnert an den Nachthimmel, während zitronengelbe Akzente wie frische Zitronenschale auf einer reinweißen Oberfläche funkeln.
- Textla — Sunny Retro Botanical Almanac - Cremefarbenes Blatt, dunkelgrün bedruckt, mit Illustrationen von Kakteen in scharfen, versetzten Schatten.
- AI for Business — Brutalistischer Editorial-Showroom in warmen Grautönen
- Superhuman — Redaktionelles Panel zur goldenen Stunde
- Visitors — weiße technische Zeichnung
- Vercel — Terminal auf weißem Papier gedruckt
- Jeton — Ein Leitartikel über Fintech auf warmem Marmor
- Say Briefly — Skizzenbuch einer Kreativagentur auf cremefarbenem Papier
- ClickUp — Ein aussagekräftiges Dashboard auf weißem Marmor. Die Seite ist eine Produktbroschüre für ein Produktivitätstool, daher ist die visuelle Sprache vom Produkt selbst übernommen: dichte Listen, Statusanzeigen, Gruppen von Avataren und markante typografische Aussagen, die wie eine ausgestellte Produktspezifikation wirken.