Foodnoms
Mercat de fruites assolellat sobre porcellana blanca: taronges càlides, verdures fresques i formes arrodonides i voluminoses
Foodnoms presenta un llenguatge de màrqueting desenfadat per al seguiment nutricional: un llenç blanc net, maquetes de telèfons de grans dimensions com a àncores visuals i un vocabulari de colors divertit on els colors representen els nutrients i el progrés. Un esquema de capçalera de dos colors (un color per a la paraula clau, grafit fosc per a la resta) permet una avaluació ràpida de la proposta de valor. El sistema es basa en una pantalla d'usuari única (Aquawax Pro) amb característiques geomètriques clarament arrodonides que suavitzen les pantalles de les aplicacions amb moltes dades. La majoria de les superfícies són planes i sense ombres; el radi uniforme de les cantonades dóna als botons, les targetes i les etiquetes una sensació agradable i suau, fent que el seguiment de la salut sembli més accessible que clínic.
La pàgina presenta un disseny d'una sola columna, centrat i d'amplada completa (~1200 px) amb un ritme vertical generós. La capçalera és una barra superior fina amb el logotip a l'esquerra, la navegació centrada i un botó d'acció taronja omplert a la dreta. La secció principal és una pila centrada: un títol de dos colors, un subcapçalament d'una sola línia, una icona de l'App Store i, a continuació, una fila de 3-5 maquetes de telèfons repartides per l'amplada. A sota de la secció principal hi ha una secció centrada del logotip de premsa "Segons recomanat" en una quadrícula de 2x3. Les seccions destacades segueixen un patró repetitiu: text de dues columnes + maqueta de telèfon, costats alternats, amb encapçalaments de secció destacats en taronja/verd. L'últim element abans del peu de pàgina és una targeta de crida a l'acció descarregable d'amplada completa. Els marges entre seccions són generosos (96 px), creant una sensació espaiosa, semblant a una galeria. La navegació és una barra superior minimalista, sense barra lateral ni mega menú.
El llenguatge visual de l'aplicació està dominat per maquetes de marcs d'iPhone d'alta qualitat que mostren la interfície de treball de l'aplicació; aquests són els elements principals, no fotos de stock. Les maquetes es mostren amb una transparència gairebé total, desplegades amb una lleugera superposició i una rotació suau, i posicionades directament sobre un fons blanc. Dins de les maquetes, el component visual el proporciona la pròpia interfície de l'aplicació: informació nutricional, fotos de productes, anells macro i etiquetes de categoria de colors. L'únic contingut fotogràfic són imatges d'aliments enviades per l'usuari visibles a la pantalla de la càmera de l'aplicació Scan Your Food. No hi ha fotos d'estil de vida, ni il·lustracions abstractes, ni gràfics decoratius. La marca està completament definida per la font personalitzada, l'esquema de colors taronja/verd/fosc i la pròpia interfície de l'aplicació.
Paleta
Marca
- Ember Orange
#ff5406— El taronja s'utilitza com a accent secundari per a detalls decoratius i per ressaltar senyals poc freqüents. No s'hauria d'utilitzar com a color principal per a crides a l'acció.
Neutral
- Graphite
#2f2f2f— Text principal, botons foscos (icona de l'App Store) i contorns d'icones. Un color predominant no blanc en els encapçalaments i el text del cos. - Verdant Green
#00b33f— El color verd serveix com a accent addicional per a detalls decoratius i per emfatitzar les baixes freqüències. - Signal Red-Orange
#ff3400— Un accent càlid secundari, visible als elements de la interfície d'usuari de la pantalla de l'aplicació i a la marca relacionada. Un to més càlid que el taronja brasa, emfatitza els estats de les aplicacions seleccionades o actives. - Sky Blue
#00a9dd— Un contrast agradable per a les categories de dades internes de l'aplicació (hidrats de carboni/proteïnes/altres grups de nutrients). Equilibra la paleta de colors càlids i dominants en els dissenys del telèfon. - Mist Blue
#72a2c5— Accent fresc apagat: suavitza el color blau cel per a etiquetes de dades addicionals i fons de gràfics dins de l'aplicació. - Sunset Orange
#ff6d00— Un accent càlid per als encapçalaments secundaris i el text ressaltat a les pàgines de màrqueting.
Tipografia
de 12 a 60 px · 7 passos
- Aquawax Pro Medium — reemplaçament: Inter · esquemes 500 · Aquawax Pro Medium: es troba a les dades extretes però no és descrit per la IA.
- Aquawax Pro — reemplaçament: Nunito Sans · esquemes 700, 500, 600 · La font principal de la marca que s'utilitza en tots els contextos, inclosos els encapçalaments i el text del cos. Aquesta font de disseny personalitzat presenta lletres d'alçada ampla, formes geomètriques arrodonides i proporcions còmodes. Negreta (700) s'utilitza per als encapçalaments i les seccions, els punts de referència tipogràfics del sistema. Seminegreta (600) s'utilitza per als subencapçalaments i les etiquetes dels botons, amb una mida de 14–1,8 mm. Mitjana (500) s'utilitza per al text del cos, amb una mida de 17–1,8 mm, amb un espaiament entre línies suficient d'1,6–1,8 mm per a una lectura còmoda.
- System sans-serif — reemplaçament: Inter · esquemes 400, 700 · S'utilitza una opció alternativa per a text molt petit i text d'icones a la interfície d'usuari. Aquawax Pro no s'utilitza en mides micro; la font del sistema les gestiona per reduir el pes de renderització.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | espaiós |
| Pas bàsic | 20px |
| Radi del botó | 26px |
| Radi de la targeta | 26px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 96px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Foodnoms i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Slite — Un quadern de pergamí càlid amb una nansa de terracota: totes les superfícies són de paper crema, cada detall un toc subtil de taronja.
- Adora — El Museu de l'Impressionisme darrere del vidre glaçat
- Bento — Una carmanyola bento sobre linòleum il·luminat pel sol. Una quadrícula de targetes arrodonides, semblants a adhesius, de color llima, lavanda, cobalt i bordeus, cadascuna perfilada amb tinta negra gruixuda, es troba sobre un lli càlid i cremós sota un títol geomètric i atrevit.
- Payments — Un to cítric vibrant sobre un fons porpra reial. El porpra elèctric profund evoca el cel nocturn, mentre que els detalls de groc llimona brillen com una pell cítrica fresca sobre una superfície blanca neta.
- Textla — Almanac Botànic Retro Assolellat: pàgina groga cremosa impresa en verd fosc amb il·lustracions de cactus representades amb ombres nítides i desplaçades
- AI for Business — Sala d'exposició editorial brutalista en tons grisos càlids
- Superhuman — panell editorial de l'hora daurada
- Visitors — dibuix d'enginyeria blanc
- Vercel — Terminal imprès en paper blanc
- Jeton — Un editorial sobre fintech sobre marbre calent
- Say Briefly — Quadern de dibuix d'agència creativa sobre paper crema
- ClickUp — Un potent quadre de comandament sobre marbre blanc. La pàgina és un fullet de producte per a una eina de productivitat, de manera que el llenguatge visual està manllevat del producte en si: llistes denses, indicadors d'estat, grups d'avatars i declaracions tipogràfiques en negreta que semblen una especificació de producte en pantalla.