Foodnoms
Mercado de frutas soleado sobre porcelana blanca: naranjas cálidas, verdes frescas y formas redondeadas y voluminosas.
Foodnoms presenta un lenguaje de marketing desenfadado para el seguimiento nutricional: un lienzo blanco limpio, maquetas de teléfonos de gran tamaño como puntos de referencia visuales y una paleta de colores dinámica donde los colores representan nutrientes y progreso. Un esquema de encabezado de dos colores (un color para la palabra clave y grafito oscuro para el resto) permite una rápida evaluación de la propuesta de valor. El sistema se basa en una única pantalla de usuario (Aquawax Pro) con formas geométricas claramente redondeadas que suavizan las pantallas de la aplicación, cargadas de datos. La mayoría de las superficies son planas y sin sombras; el radio uniforme de las esquinas proporciona a los botones, tarjetas y etiquetas una sensación agradable y suave, haciendo que el seguimiento de la salud resulte más accesible que clínico.
La página presenta un diseño de una sola columna, centrado y de ancho completo (~1200px) con un ritmo vertical generoso. El encabezado es una delgada barra superior con el logotipo a la izquierda, la navegación centrada y un botón de acción naranja relleno a la derecha. La sección principal es una pila centrada: un título de dos colores, un subtítulo de una sola línea, un ícono de la App Store y luego una fila de 3 a 5 maquetas de teléfonos desplegadas a lo ancho. Debajo de la sección principal hay una sección centrada del logotipo de prensa "Como recomendado" en una cuadrícula de 2x3. Las secciones de características siguen un patrón repetitivo: texto de dos columnas + maqueta de teléfono, lados alternos, con encabezados de sección de acento en naranja/verde. El último elemento antes del pie de página es una tarjeta CTA descargable de ancho completo. Los márgenes entre secciones son generosos (96px), creando una sensación espaciosa, similar a una galería. La navegación es una barra superior minimalista, sin barra lateral ni mega menú.
El lenguaje visual de la aplicación está dominado por maquetas de alta calidad de marcos de iPhone que muestran la interfaz de la aplicación en funcionamiento; estos son los elementos principales, no fotos de archivo. Las maquetas se muestran con una transparencia casi total, desplegadas con una ligera superposición y una rotación suave, y colocadas directamente sobre un fondo blanco. Dentro de las maquetas, el componente visual lo proporciona la propia interfaz de la aplicación: información nutricional, fotos de productos, anillos macro y etiquetas de categorías coloridas. El único contenido fotográfico son imágenes de alimentos enviadas por los usuarios, visibles en la pantalla de la cámara de la aplicación Scan Your Food. No hay fotos de estilo de vida, ni ilustraciones abstractas, ni gráficos decorativos. La identidad de marca está definida completamente por la tipografía personalizada, la combinación de colores naranja, verde y oscuro, y la propia interfaz de la aplicación.
Paleta
Marca
- Ember Orange
#ff5406— El naranja se utiliza como color de acento secundario para detalles decorativos y para resaltar señales poco frecuentes. No debe utilizarse como color principal para llamadas a la acción.
Neutral
- Graphite
#2f2f2f— Texto principal, botones oscuros (icono de la App Store) y contornos de iconos. Un color predominante distinto del blanco en los títulos y el texto principal. - Verdant Green
#00b33f— El color verde sirve como acento adicional para los detalles decorativos y para enfatizar las bajas frecuencias. - Signal Red-Orange
#ff3400— Un acento cálido secundario, visible en los elementos de la interfaz de usuario de la pantalla de la aplicación y en la marca relacionada. Un tono más cálido que el Naranja Ember, enfatiza los estados seleccionados o activos de la aplicación. - Sky Blue
#00a9dd— Un agradable contraste para las categorías de datos internas de la aplicación (carbohidratos, proteínas y otros grupos de nutrientes). Equilibra la paleta de colores cálidos y predominantes en los diseños del teléfono. - Mist Blue
#72a2c5— Tono frío tenue: suaviza el color azul cielo para etiquetas de datos adicionales y fondos de gráficos dentro de la aplicación. - Sunset Orange
#ff6d00— Un toque cálido para los títulos secundarios y el texto resaltado en las páginas de marketing.
Tipografía
De 12 a 60 píxeles · 7 pasos
- Aquawax Pro Medium — reemplazo: Inter · esquemas 500 · Aquawax Pro Medium - Se encuentra en los datos extraídos, pero no está descrito por la IA.
- Aquawax Pro — reemplazo: Nunito Sans · esquemas 700, 500, 600 · La tipografía principal de la marca se utiliza en todos los contextos, incluyendo títulos y texto principal. Esta tipografía de diseño personalizado presenta letras anchas, formas geométricas redondeadas y proporciones armoniosas. La negrita (700) se utiliza para títulos y secciones, los elementos tipográficos clave del sistema. La seminegrita (600) se utiliza para subtítulos y etiquetas de botones con un tamaño de 14 a 1,8 mm. La mediana (500) se utiliza para el texto principal con un tamaño de 17 a 1,8 mm, con un interlineado suficiente de 1,6 a 1,8 mm para una lectura cómoda.
- System sans-serif — reemplazo: Inter · esquemas 400, 700 · Se utiliza una opción alternativa para textos e iconos muy pequeños en la interfaz de usuario. Aquawax Pro no se utiliza en tamaños micro; la fuente del sistema se encarga de estos para reducir el peso de la representación.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | espacioso |
| Paso básico | 20px |
| Radio del botón | 26px |
| Radio de la tarjeta | 26px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 96px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Foodnoms y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Slite — Un cuaderno de pergamino cálido con asa de terracota: cada superficie es de papel color crema, cada detalle tiene un sutil toque de naranja.
- Adora — El Museo del Impresionismo tras un cristal esmerilado
- Bento — Una fiambrera bento sobre linóleo bañado por el sol. Una cuadrícula de tarjetas redondeadas, parecidas a pegatinas, en tonos lima, lavanda, cobalto y burdeos, cada una delineada con tinta negra gruesa, reposa sobre un lino cálido y cremoso bajo un título geométrico llamativo.
- Payments — Un vibrante tono cítrico sobre un fondo púrpura intenso. El púrpura eléctrico profundo evoca el cielo nocturno, mientras que los toques de amarillo limón brillan como la ralladura de cítricos frescos sobre una superficie blanca impoluta.
- Textla — Almanaque Botánico Retro Soleado - Página de color amarillo cremoso impresa en verde oscuro con ilustraciones de cactus realizadas con sombras nítidas y contrastadas.
- AI for Business — Sala de exposiciones editoriales de estilo brutalista en tonos grises cálidos.
- Superhuman — Panel editorial de la hora dorada
- Visitors — dibujo de ingeniería blanco
- Vercel — Terminal impreso en papel blanco
- Jeton — Un editorial sobre tecnología financiera en mármol cálido
- Say Briefly — Cuaderno de bocetos de agencia creativa en papel color crema.
- ClickUp — Un potente panel de control sobre mármol blanco. La página es un folleto de producto para una herramienta de productividad, por lo que el lenguaje visual se toma prestado del propio producto: listas densas, indicadores de estado, grupos de avatares y declaraciones tipográficas en negrita que parecen las especificaciones del producto en pantalla.