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
- Studio — Una pared de galería en movimiento. Cada pantalla representa una superficie de exposición silenciosa y gris donde materiales tipográficos y obras creativas superpuestas compiten por captar la atención.
- Mollie — Un mostrador de cachemir, un libro de contabilidad oscuro. Deja amplio espacio en blanco para el diseño editorial alrededor del texto negro y refuerza los puntos relacionados con el producto con cremas cálidas, marrones espresso y fotos táctiles de métodos de pago reales.
- Basis Theory — Terminales de pago en el estudio de diseño. Papel técnico blanco, capas de transacción translúcidas superpuestas y un único elemento de control turquesa definen la dirección visual.
- CleanShot X — Un estudio con un escritorio iluminado en azul. Crea un espacio blanco y tranquilo alrededor de un texto negro compacto, y deja que los controles de un azul intenso y las imágenes de productos Mac superpuestas sean los protagonistas.
- Modern Treasury — Un libro mayor de tesorería en papel cuadriculado. Crea páginas que se asemejen a una hoja de operaciones blanca y ordenada, donde los flujos de efectivo se muestren con líneas finas, nodos etiquetados y controles precisos y ocultos.
- Basha-Franklin — Una cuadrícula de galería bajo un dintel blanco. Utilice un tono cálido #f4ede6, una sutil estructura negra y columnas asimétricas basadas en fotografías que simulan un portafolio arquitectónico impreso.
- Bajgart Office — Pared de galería editorial. Utilice un amplio espacio en blanco donde las fuentes con serifa sutiles y los fragmentos del portafolio tengan mayor peso visual que los elementos de interfaz cromados.
- Heptabase — Un escritorio bañado por el sol. Superficies cálidas, similares al papel, controles de color carbón y ventanas flotantes para investigar crean la sensación de un espacio de trabajo organizado, en lugar de un panel de control de software.
- Bejamas — Pijama: lima ácida a través de vidrio negro. Crea páginas editoriales tranquilas y de color gris claro, interrumpidas por cautivadores paneles negros donde vetas de luz verde difuminadas se entrecruzan con la superficie.
- Baba — Notas de cuidado bajo la luz roja del sol. Crea amplias franjas narrativas rojas alrededor de superficies informativas íntimas en blanco, rosa y crema, utilizando fotografías de personas como centro emocional.
- Grafana Labs — La sala de control de la estación de señales Sunrise. Un espacio de trabajo tranquilo en tonos grises y blancos se combina con un amplio degradado de horizonte de cuatro colores y señales de interfaz azules precisas.
- Kagi — Una sala de lectura independiente. Crea un espacio blanco abierto alrededor de un texto en grafito llamativo, utilizando sutiles toques de color púrpura y superficies en tonos pastel cálidos para romper la tranquilidad.