Apple
Una habitación blanca con un único interruptor azul.
El diseño de Apple es un modelo de sobriedad: un lienzo casi blanco, amplios espacios en blanco y un único y vibrante acento azul que hace que cada acción parezca deliberada. El foco principal está en la tipografía: SF Pro, con un espaciado negativo entre letras que disminuye con el aumento del tamaño, lo que otorga a los titulares una claridad arquitectónica sin resultar excesivamente pesados. El producto ES el diseño: grandes fotografías de productos e imágenes de estilo de vida predominan, mientras que los elementos cromados se integran en marcos delgados, navegación translúcida y líneas sutiles. Las secciones se alternan sobre un fondo gris claro con bloques a todo color para los materiales promocionales, creando ritmo mediante cambios de escala en lugar de elementos decorativos.
El diseño de la página es de ancho completo sin ancho máximo de contenedor fijo: las secciones se extienden de borde a borde, con bloques de texto centrados en aproximadamente 980px. La navegación es una única barra global fija con una subcarpeta adicional para cada producto que aparece al desplazarse. El diseño principal siempre está centrado: un nombre de producto grande, un eslogan de una sola línea, dos botones de píldora y luego una imagen del producto que llena el área restante de la pantalla. Las secciones están apiladas verticalmente con un ritmo vertical generoso (64px+ entre secciones), alternando fondos #f5f5f7 y de colores. La página inferior es una única fila horizontal de tarjetas de servicio de ancho completo (Apple TV+, Fitness+, Música, Arcade), cada una un bloque de foto con texto superpuesto y un botón de píldora. Sin barras laterales, sin diseños de contenido de varias columnas, sin composiciones asimétricas: todo está centrado, apilado y simétrico.
La fotografía es el lenguaje visual dominante. Las fotos de productos se toman sobre un fondo blanco puro o gris suave, sin ningún contexto; el dispositivo es el protagonista, aislado e iluminado. Las fotos de estilo de vida se muestran en banners de ancho completo, a menudo con objetos recortados de forma precisa. Los degradados de color (azul pastel, rosa, verde) sirven de fondo para las secciones de productos, no como decoración. La iconografía es minimalista y lineal, de 1-2 píxeles de grosor, en la misma escala de grises que el texto. No hay ilustraciones, ni gráficos abstractos, ni renderizaciones 3D, excepto las propias fotos de los productos.
Paleta
Marca
- Apple Blue
#0071e3— Botones de acción rellenos, estados seleccionados: el único color cromático interactivo se usa con moderación para que cada aparición tenga sentido. - Link Blue
#0066cc— Bordes de acción resaltados, enlaces incrustados: se utiliza un color más saturado que el azul de Apple donde una tableta llena resultaría demasiado llamativa. - Signal Blue
#2997ff— Marcos decorativos, contornos de imágenes, bordes de iconos: el color azul más claro del sistema, utilizado para crear ambiente más que para la interacción del usuario.
Neutral
- Carbon
#1d1d1f— El texto principal, los bordes de los encabezados, las líneas de navegación y los bordes de las tarjetas tienen como color de tinta predominante un tono casi negro con un ligero matiz cálido. - Frost
#f5f5f7— El lienzo de la página, el fondo del texto principal y la superficie del pie de página son del característico gris claro de Apple, un tono ligeramente más frío que el blanco puro. - Ice
#f4f8fb— Rellenos de superficie expresivos, tonalidades sutiles, texto de botón sobre un fondo oscuro: un sutil tono azul que anima la sección sin hacerla destacar. - Smoke
#333333— Texto secundario, relleno de navegación, bordes de botones: un color neutro y versátil para bordes e iconos que necesitan un toque más llamativo que un gris medio. - Graphite
#474747— Texto de navegación, bordes de navegación, bordes de enlaces: ocupa una posición intermedia entre Carbono y Humo en la jerarquía de elementos. - Ash
#707070— Texto del pie de página, bordes de las listas, bordes de la navegación, texto del cuerpo atenuado: un gris medio para el contenido que debe estar presente pero no ser prominente.
Tipografía
De 12 a 56 píxeles · 8 pasos
- SF Pro Display — reemplazo: Inter · esquemas 400, 600, 700 · Los titulares y los textos grandes (tamaños de 40 px o más) utilizan un formato de visualización con una apertura más estrecha y un espaciado negativo más pronunciado; el formato de 700 está reservado para diseños publicitarios y el de 400 para nombres de productos en contenido editorial.
- SF Pro Text — reemplazo: Inter · esquemas 300, 400, 600 · Texto principal, navegación, botones, subtítulos: fuente de trabajo; 400 para el texto principal, 300 para los subtítulos y las etiquetas cualificadas, 600 para los elementos de navegación y el texto de los botones; el espaciado entre letras negativas disminuye proporcionalmente al tamaño (de -0,022em a 12px a -0,01em a 44px).
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 12px |
| Radio del botón | 980px |
| Radio de la tarjeta | 8px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64px |
| Ancho de página | 1440px |
La IA construirá tu sitio web al estilo de Apple 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
- Ui — Plan clínico en papel mate
- ElevenLabs — Un reportaje fotográfico en tonos crema cálidos con titulares sutiles. Un cuaderno de estilo Bauhaus: papel color blanco hueso, tinta negra y un único detalle en morado y naranja para la presentación del producto.
- monopo saigon — Un brillo líquido e iridiscente tras el silencio editorial: una galería editorial monocromática flotando sobre luz fundida.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Una mesa analítica tranquila sobre papel tibio
- Ventriloc — Un observatorio editorial de datos sobre papel tibio: una sola brasa naranja que resalta la precisión monocromática.
- Duolingo — Mascota divertida de la clase en papel blanco
- Stripe — Un libro de contabilidad escrito con tinta índigo sobre vidrio esmerilado.
- Notion — Un cuaderno de papel caliente bajo el sol del mediodía.
- Hyer Aviation — El crepúsculo en la cabina sobre un pergamino. El pálido cielo del amanecer se encuentra con el logotipo con serifa del tamaño del fuselaje, y un único toque de color arcilla cálida rompe la sobriedad monocromática.