¿Qué se puede aprender al estudiar la página de inicio de una marca icónica?
Quizás no haya ninguna marca que haya influido tanto en el diseño moderno en su conjunto como Apple. Ya sea a través del uso de su hardware (como MacBooks, iPhones, iPads), su software (iMovie, Keynote) o su marketing (I’m a Mac, I’m a PC), Apple ha dejado huella en todo, desde el diseño gráfico hasta el hardware y la web. Al observar las iteraciones de su página de inicio a lo largo de algunos de los momentos más decisivos de la historia de la empresa, veremos cómo Apple ha expresado su marca y ha llevado el diseño y el desarrollo web a nuevas cotas.
Antes de empezar, debemos hacer una mención especial a The Internet Archive —la auténtica máquina del tiempo de la web—, porque sin su Wayback Machine no habríamos podido encontrar ninguna de estas imágenes.
Apple.com en la década de 1990
No nos malinterpretes, nos encanta el diseño web de los 90. Pero no nos centraremos demasiado en esta etapa de los diseños de Apple, ya que es anterior a la aparición de la mayoría de sus productos emblemáticos. Esta página de inicio es de principios de 1997, cuando Steve Jobs regresó a la empresa como asesor tras la adquisición de NeXT Computer.
Si recuerdas cómo era internet a mediados o finales de los 90, esto te resultará bastante familiar. La navegación apilada verticalmente era muy común en los sitios de aquella época. La página de inicio de 1997 incluía tres GIF independientes en la cabecera y un diseño de dos columnas que se extendía por toda la página. Este diseño y estética no duraron mucho más: la sencillez y el enfoque estaban en camino.
Demos un salto hasta 1999.
Power Mac y una página de inicio más sencilla centrada en la cabecera
Esta página de inicio (octubre de 1999) llega dos años después del regreso de Steve Jobs al puesto de CEO. Aquí se puede apreciar un mayor enfoque en lo que el sitio destaca. La navegación de la izquierda ha desaparecido y el contenido está centrado y es conciso. La imagen de cabecera tiene un objetivo claro: el Power Mac. Los cuadros secundarios más pequeños llaman la atención sobre otros productos o funciones diseñados para ayudar a vender la potencia de los Mac y lo que podías hacer con ellos (¿recuerdas los días de descargar tráileres?). La sección de noticias destacadas era el único elemento con movimiento en la página, y los titulares aparecían palabra por palabra.
Apple.com en la década de 2000
iMac y navegación por pestañas
La página de inicio de arriba es de mayo de 2000 y presenta los coloridos y translúcidos ordenadores iMac. Como puedes ver, se mantienen muchos de los sellos distintivos del diseño anterior: el contenido está centrado y las noticias destacadas siguen rotando.
Pero hay una nueva barra de navegación en la parte superior de la página. La llegada de la navegación por pestañas —una barra que imita las pestañas de las carpetas físicas— fue un gran avance, ya que influyó en muchísimos otros sitios web a principios de la década de 2000. Y aunque las pestañas no sobrevivieron más allá de 2010, la posición de navegación superior sigue siendo extremadamente común en el diseño web y continúa siendo la ubicación que Apple utiliza hasta el día de hoy.
Cabe señalar que, durante la década de 2010, las imágenes de cabecera de la página de inicio de Apple solían estar rasterizadas (texto integrado en la imagen) y no eran compatibles con la accesibilidad web. Sin embargo, el uso de texto alternativo para las imágenes (que Apple sí hacía) era una forma de hacer que este contenido fuera más accesible.
iPod y coherencia del sistema de diseño
Cuando el iPod se lanzó en noviembre de 2001, la influencia de Apple en el diseño moderno empezó a ganar fuerza. Los coloridos anuncios con siluetas bailando y un estilo publicitario ingenioso hicieron que Apple destacara en el mundo de la publicidad. Otro aspecto notable de esta época de la página de inicio de Apple es que la presencia de su sistema de diseño era palpable. El botón de búsqueda y la barra de noticias coincidían con el estilo del menú de navegación.
El final de 2005 marca el principio del fin de la presencia constante de las noticias destacadas en la página de inicio; se eliminan a partir de 2006 (aunque vuelven a aparecer brevemente hacia el final de la década). A estas alturas, la gente ya no necesitaba titulares de prensa para convencerse de lo increíbles que eran los productos de Apple. La marca ya había consolidado su presencia en el mundo del diseño y la tecnología.
iPhone, OS X Leopard y un nuevo estilo de navegación
Cuando el iPhone se presentó en la Conferencia Mundial de Desarrolladores (WWDC) a principios de 2007 (la página de inicio de la izquierda), Apple.com utilizó un fondo oscuro para el anuncio. El drástico cambio de color obligaba a centrar la atención en el iPhone en medio de la pantalla.
Fíjate en cómo la navegación blanca destaca al contrastar con el resto de la página. Para cuando salió Mac OS X Leopard en junio de 2007 (la página de inicio a la derecha), la navegación se había vuelto gris y los iconos eran más esceomorfistas, un estilo donde las interfaces buscan imitar objetos de la vida real. Esto marcó el inicio de una gran era en la historia del diseño de Apple, con iconos como el de Safari, que se convirtió en una brújula de aspecto realista, o el de iMovie, que parecía una claqueta de cine.
¿Buscas una dosis semanal de inspiración creativa?
Únete a más de 800.000 personas que reciben cada semana lo mejor, lo más novedoso y lo último en diseño y no-code.
El MacBook Air y las llamadas a la acción en la cabecera
A principios de 2008, Apple presentó el MacBook Air y, con él, uno de nuestros anuncios favoritos de todos los tiempos. Observa cómo esta página de inicio utiliza una técnica que Apple llevaba tiempo aplicando en sus cabeceras: la doble llamada a la acción (CTA). Estos enlaces te invitan a ver el anuncio o a seguir la visita guiada, y a veces, al hacer clic en la propia imagen principal, te redirigía a otra página, como la de descripción del producto. Es una estrategia diseñada para aprovechar al máximo el limitado espacio en pantalla, algo que Apple sigue haciendo de maravilla. La página no se siente saturada, pero ofrece al visitante muchas opciones para explorar.
Apple.com en la década de 2010
La espectacular llegada del iPad
El anuncio del iPad en abril de 2010 fue un momento clave para la compañía, ya que consolidó su nueva categoría de productos: las tabletas. Abrir la página de inicio con esta toma en perspectiva no hizo más que aumentar la intriga. La cabecera de Apple no estaba limitada a un tamaño específico, lo que les permitía mostrar el iPad en ángulo y dejar claro a los visitantes que era notablemente más grande que un iPhone.
El fallecimiento de Steve Jobs
Cuando Steve Jobs murió en octubre de 2011, muchas organizaciones y personas rindieron homenaje, pero ninguno fue tan sencillo y contundente como el de Apple. Esta icónica fotografía fue la única imagen en la página y enlazaba a este sitio conmemorativo, que incluía mensajes de personas inspiradas por él y su trabajo.
El diseño plano entra en escena con iOS 7
Con la llegada de iOS 7 en septiembre de 2013, Apple tomó varios rumbos nuevos en su página de inicio. Primero: un diseño más plano, minimalista y con una interpretación ligeramente abstracta del esceomorfismo. El diseño plano es claramente bidimensional y suele utilizar colores brillantes que captan la atención. Este cambio de diseño fue el precursor de la efímera tendencia del neumorfismo, que es, en esencia, un híbrido entre el esceomorfismo y el diseño plano.
En segundo lugar, hubo un cambio en la tipografía a Helvetica, que sería reemplazada por la fuente propia de Apple, San Francisco, solo tres años después, tras las quejas de los usuarios sobre la delgadez de la fuente Helvetica.
Por último, toda la página era un carrusel que avanzaba automáticamente a través de varias experiencias a pantalla completa. Aunque quizás no fuera la práctica más accesible, permitía que cada anuncio tuviera el protagonismo absoluto. No era un diseño que Apple utilizara a menudo en su página de inicio, así que, aunque lo abandonaron poco después, siguen usando carruseles como componentes más pequeños en ocasiones.
Navegación plana y márgenes estrechos
Para 2014, la navegación en Apple.com se había vuelto totalmente plana. Aquí también podemos ver una época en la que experimentaron con la transparencia en la navegación para que se pudiera seguir viendo la imagen de fondo. Las subsecciones se ampliaron y los márgenes entre ellas se redujeron a un ancho mínimo. Con fotografías tan cargadas, esto podría haber resultado caótico, pero gracias al enfoque comedido de Apple, el efecto es de elegancia y orden.
El iPhone X cambia las reglas del juego
Cuando el iPhone X entró en escena en noviembre de 2017, Apple probó algo muy distinto. ¿Ese patrón de una cabecera seguida de tres o cuatro recuadros? Desapareció. Toda la página se dedicó al iPhone X y a la fotografía del producto. La cabecera tenía una sola toma, un título, un subtítulo y dos enlaces.
La página era alargada y contenía cajas que destacaban funciones específicas del iPhone. Al pasar el cursor sobre ellas, aparecían los nombres de las funciones y las cajas funcionaban como enlaces directos a secciones concretas de la página de descripción del producto. La toma del borde biselado en la parte inferior de la página era, en realidad, un vídeo que se reproducía al pasar el cursor o que permitía hacer clic para ver la guía completa.
Apple.com en la década de 2020
La guerra en Ucrania
Hoy en día, la página de inicio de Apple.com cuenta con una navegación repleta de los productos más populares de la marca, desde teléfonos y ordenadores hasta el Apple Watch y los AirPods. Las cabeceras suelen reflejar las campañas que se emiten en televisión y en las tiendas Apple, como esta que presenta una campaña de vuelta al cole.
En marzo de 2022, empezaron a mostrar un banner justo debajo de los menús de navegación que invitaba a donar a Unicef para apoyar a las familias afectadas por la guerra en Ucrania. Esto ocurrió justo cuando el CEO, Tim Cook, también animó a los empleados de la empresa a realizar donaciones que él igualaría después.
Debajo de la sección principal, la página continúa con los ya conocidos recuadros. Al final, un carrusel muestra las producciones originales de Apple TV+ (nosotros, personalmente, no podemos esperar a la próxima temporada de Severance).
iPhone 14
Cuando el iPhone 14 salió al mercado en septiembre de 2022, un dispositivo de color morado oscuro con bordes brillantes se apoderó de la parte superior de la página de inicio de Apple.
La página de información del iPhone 14 mantiene el estilo de la página principal con imágenes detalladas del elegante dispositivo, animaciones fluidas que destacan sus funciones y efectos de degradado al hacer scroll que cambian el color del texto o del fondo.
La última vez que el iPhone más reciente ocupó tanto espacio en la página principal fue en 2017 con el lanzamiento del iPhone X. Durante tres generaciones, el enfoque estuvo en el refinamiento y la mejora en lugar de cambios drásticos. Pero el iPhone 14 marca el inicio de una nueva era con grandes actualizaciones, como mejoras en la cámara, funciones de seguridad avanzadas y la Dynamic Island.
Apple describe la Dynamic Island como “una innovación genuinamente Apple, que combina hardware y software en un punto intermedio”. Esta mejora permite a los usuarios ver aplicaciones, notificaciones, música y más en un pequeño widget fijo en la parte superior de la pantalla, razón por la cual Apple presentó la Dynamic Island como “la nueva cara del iPhone”.
Apple es experta en marcar tendencia
Tanto si eres fan de Apple como si no, es innegable la influencia de esta marca en el mundo del diseño. Desde sus tiendas físicas hasta su página web, Apple cuida al máximo su atractivo visual. Y cualquiera que haya visto cómo las burbujas de texto de un chat grupal se vuelven verdes al añadir a un nuevo miembro sabe que la estética importa.
