El equipo de diseño de Apple es ampliamente considerado como uno de los grupos de diseñadores más talentosos de la industria actual. Las tendencias que establecen son seguidas no solo por todas las otras grandes empresas de tecnología, sino también por diseñadores web en cada nicho de producto y servicio concebible.
Continúe mientras nos embarcamos en un emocionante viaje a través del tiempo y presenciamos la evolución del estilo de diseño de Apple. Obtendrá varios vislumbres increíbles en Apple.com que se remontan a 1997, ya que somos testigos del auge y caída de varias tendencias de diseño importantes.
Manzana y diseño
La imagen de arriba es una instantánea del sitio web de Apple tal como está actualmente. Es una imagen perfecta de todo lo que amamos sobre el sentido del diseño de Apple. Es limpio y minimalista, con un fuerte énfasis en la belleza del producto.
No hay un millón de banners diferentes o mega menús desplegables para clasificar, solo un simple esquema de navegación, un producto destacado y cuatro cuadros de contenido distintos en la parte inferior que sirven como una forma universal de resaltar otros productos e información importantes.
Observe la copia también: breve y al punto con un toque de hipérbole (¿dónde estaría Apple sin ella?). A pesar del hecho de que el iPhone 4S tiene cientos de características para presumir, lo han reducido a cuatro puntos básicos, lo suficiente como para atrapar su interés y animarlo a seguir buscando.
¿Fue siempre de esta manera?
Apple ha sido durante mucho tiempo conocida por su sentido del estilo y diseño superior. La innovación imbatible está a la vanguardia de su éxito, pero impulsar ese éxito ha sido una imagen de marca estrechamente integrada que está irremediablemente arraigada en sus productos, anuncios, páginas web e incluso en sus tiendas.
Al considerar a Apple.com como quizás el pulso más importante y actualizado de la marca visual de Apple, no puedo dejar de preguntarme sobre el viaje. ¿Cómo evolucionó esta marca? ¿Qué aspecto tenían las primeras versiones de Apple.com? ¿Eran similares? ¿Compartían la misma estética simple o eran más propensos a reflejar los ocupados estilos de diseño web de hace una década?
Apple en la impresión
Para tener una idea de la evolución de la marca de Apple, debemos considerar brevemente el tiempo antes de que Apple.com existiera. Desde la génesis de la empresa, Jobs siempre puso un fuerte énfasis en la simplicidad. Sin embargo, ese término tenía una traducción visual muy diferente en aquel entonces. Mac Mothership tiene una colección encantadora de anuncios antiguos de Apple que nos permiten vislumbrar la imagen de la marca de Apple a finales de los 70, como se puede ver, hoy está muy lejos de Apple.com.
Estos anuncios están llenos de argumentos de venta y copia informativa. Esto puede ser un mal necesario para las nuevas categorías de productos, pero va más allá de esto. Incluso los logotipos muestran una evolución de la definición de Apple de sí mismo. El original de la izquierda es una ilustración muy compleja de Newton debajo de un árbol, la versión actualizada de la derecha es un arco iris de colores que se filtra a través de la página. Ambos son mucho más complejos que el símbolo simple y ubicuo que vemos hoy.
Durante los siguientes veinte años, Apple coquetearía con generosas cantidades de espacio en blanco, pero solo brevemente entre los anuncios que seguían los mismos métodos básicos de copiado que vemos arriba.
Podría decirse que el salto más importante hacia la simplicidad de la marca Apple que conocemos hoy en día provino de TBWA \ Chiat \ Day, la agencia detrás del comercial original de Macintosh de 1984 y, posteriormente, una de las campañas publicitarias más famosas de todos los tiempos: Think Diferente.
En 1997 Apple había encontrado su identidad. En más de una década, la campaña Think Different no ha envejecido ni un día. No se siente anticuado como los anuncios originales de Apple, sino que es lo suficientemente atemporal y lo suficientemente poderoso como para impactar a muchas generaciones posteriores.
Volver a la web
Think Different cambió todo para Apple (este cargo, por supuesto, fue liderado por el regreso de Jobs en 1996-97). Proporcionó una identidad sorprendente no solo a Apple, sino también a sus clientes. Visualmente, hizo vibrar el estilo de marca de Apple en lo que hoy conocemos.
En ninguna parte es esto más claro que en Apple.com. Usando la maravillosa máquina del tiempo de The Internet Archive, podemos regresar a los primeros días del sitio web de Apple. Think Different golpeó en 1997, así que si nuestra premisa es cierta, deberíamos ver esto como un año de cambios para el sitio. Aquí hay un vistazo a Apple.com a mediados de 1997:
No es exactamente lo que esperarías de Apple, ¿verdad? Al igual que en los primeros anuncios impresos, aquí vemos tipos y muchos de ellos. Para ser justos, en comparación con el estado general del diseño web en ese momento, este era, de hecho, un diseño bastante mínimo. De hecho, todo está muy bien, pero hay un montón de contenido. De hecho, lo que no ve en la captura de pantalla es que esos párrafos de noticias se prolongan por millas (haga clic aquí para ver la versión en vivo).
Tenga en cuenta que este diseño es pre-Think-Different. Los anteriores diseños de Apple.com compartieron esta estética. Ahora saltemos a mayo de 1998, el primer sitio de Apple post-Think-Different intacto que pude encontrar.
La diferencia entre las dos estéticas es increíble, ni siquiera parecen ser de la misma compañía (seamos realistas, realmente no lo son). Donde solíamos encontrar el desorden y el exceso de información, ahora encontramos espacios en blanco; Toneladas y toneladas de espacio en blanco. Donde solíamos encontrar una página que se desplazaba por millas, ahora encontramos brevedad.
El simple titular simplemente dice 'Apple'? La imagen del producto se ha convertido en el héroe, e incluso hay una impresionante animación del iMac girando en su lugar a través de la maravilla del GIF animado.
Piensa lo mismo
¡La parte más sorprendente del diseño de 1998 para mí es cuán similar es a lo que Apple está usando actualmente en 2012! La tipografía, el logotipo y las salpicaduras de color sirven como una importante lección de diseño sobre qué tipo de elementos puede esperar que envejezcan con el tiempo en su diseño, pero el diseño fundamental aquí es sorprendentemente cercano a lo que vemos en Apple.com hoy.
La parte superior del sitio está reservada para la característica principal del producto (en este caso, el iMac original), y la parte inferior se divide en algunos rectángulos horizontales que presentan otros productos importantes.
Diferencias clave
Como mencioné, la tipografía es un elemento principal que se destaca en esta evolución. Hay una razón por la que nos referimos a los tipos de letra sans-serif como "modernos". se puede ver claramente cómo la fuente actual de Apple hace avanzar sus diseños en el tiempo en comparación con el clásico estilo antiguo serif de 1998.
Uno de los cambios más importantes que veo aquí es la navegación, observe qué tan abajo está la página. En estos días estamos tan acostumbrados a la navegación en la parte superior que este diseño sin duda arrojaría muchos usuarios para un bucle (tal vez incluso uno infinito). Apple obviamente ha aprendido que ayudarlo a llegar a donde quiere ir en el sitio es, literalmente, una prioridad absoluta.
Un componente muy importante del diseño que no se obtiene de la captura de pantalla recortada de arriba es que el contenido de ancho fijo se encuentra en el lado izquierdo de la pantalla. En estos días, los sitios modernos generalmente centran sus diseños de modo que el origen sea el centro de la ventana del navegador.
También vale la pena mencionar el servicio de noticias de Apple, que siguió siendo un elemento básico en el sitio durante años y solo se eliminó a principios de este año.
Avanzando: 1999
En octubre de 1999, Apple todavía estaba usando el mismo diseño. Los productos están evolucionando, pero el diseño de la página es casi exactamente igual que el año anterior. Fíjese en el grito de Toy Story 2 de Pixar en Apple.com, ¿puede decir que Steve está al mando de ambas compañías?
También notamos un gran cambio en el logotipo, ya que Apple ha matado al arco iris en favor de una Apple blanca sólida. Apple demostraría ser un líder sólido en un movimiento de simplificación de logotipos que aún continúa en la actualidad. Puedes leer más sobre esto en nuestro artículo, Pepsi vs Coke: El poder de una marca.
2000
Cuando llegamos a mayo de 2000, vemos que se producen algunos grandes cambios. Para empezar, todo el diseño ahora está centrado en el navegador. Además, la navegación finalmente se ha trasladado a la parte superior y se parece mucho a la interfaz de estilo aqua que Apple hizo famosa con OS X. Observe lo complicado que es la navegación con las dos capas de enlaces.
Los botones y pestañas brillantes fueron un gran movimiento en el diseño web y fueron los estándares "cool" por muchos años. La obsesión actual del diseñador web con botones simples y mínimos con colores planos o degradados sutiles es una respuesta directa a este estilo más ornamentado.
2001
Avanzamos a noviembre de 2001 y vemos algunos saltos más importantes. El estilo aqua ha llegado a las noticias, el tipo sans-serif está empezando a afianzarse (observe el subtítulo) y los cuadros de contenido han evolucionado dramáticamente. Hemos hecho el salto a cuatro en lugar de a tres y las cajas ahora son formas completamente distintas con esquinas redondeadas como las que vemos en las pestañas de la parte superior. Todavía están redondeados hoy, pero Apple se ha retirado dramáticamente en el radio de la frontera.
Aunque Adobe ocupa el lugar central en esta captura de pantalla, 2001 fue un año monumental para Apple debido al lanzamiento de iTunes y el iPod. Esto marca su primera incursión en una generación de dispositivos no tradicionales que redefinirían completamente a la compañía. Este fue también el año en que dieron el salto a OS X, un cambio decisivo hacia un sistema mucho más amigable e intuitivo que resultaría útil para ganarse a los usuarios de Windows atraídos por la Mac por su amor por el iPod.
2004
A finales de 2004, Apple comenzó a experimentar con resaltar su área de contenido principal con una caja de esquina redondeada de color sólido. Más típicamente, verías esta caja en negro, que creaba un hermoso contraste con el fondo blanco, pero la colorida publicidad del iPod marcó una ocasión para darle vida a la página.
Otro aspecto realmente importante del diseño de 2004: han dado el salto a todos los tipos sans-serif. Este es un hito importante en el avance de las tendencias de diseño.
2005
El coqueteo con el negro en 2004 condujo a un importante experimento para el lanzamiento de Tiger en 2005. Aquí vemos que la mayor parte de la página de inicio de Apple.com está inundada de negro. Una tendencia que lleva a muchas de las páginas de productos.
También un gran acuerdo para 2005 fueron las reflexiones del producto, visibles en la parte inferior de esta página con los iPods. Recuerdo haberlos visto por completo y de inmediato los timé para los proyectos en los que estaba trabajando en ese momento.
2007
Las tendencias de Apple se mantuvieron bastante estáticas durante los próximos años, no fue hasta finales de 2007 que finalmente dieron un gran salto hacia el sitio que hoy conocemos.
La página de inicio del sitio ha sido completamente revisada. Han ampliado considerablemente el contenido y han eliminado la antigua navegación acuática, reemplazándola por una versión muy simplificada que utiliza los gradientes suaves que ya mencioné que seguirían la tendencia aqua para la mayoría de los diseñadores. El ancho del contenido ampliado puede atribuirse definitivamente a las pantallas panorámicas que ahora estaban presentes en la mayoría de los equipos de escritorio y portátiles. Es muy importante estar al tanto de las evoluciones de hardware que pueden y deben afectar las tendencias de diseño de la interfaz de usuario.
También tenga en cuenta que la barra de búsqueda está finalmente en la parte superior de la página. Esta fue una idea de último momento lanzada al fondo durante demasiado tiempo y fue genial verla finalmente obtener la atención y la prominencia que merecía.
2011
Apple encontró su ritmo con el diseño anterior y se mantuvo prácticamente sin cambios hasta enero de 2011, ¡una ejecución impresionante según cualquier estándar!
A principios de este año, vimos a Apple dar un paso atrás y devolver la navegación a un aspecto brillante, aunque con un acabado oscuro actualizado. También comenzaron a experimentar con una sutil textura de ruido de fondo, un movimiento doloroso en mi opinión que hizo que su equipo de diseño típicamente líder pareciera estar saltando a las tendencias populares establecidas por muchos otros antes que ellos. Haga clic en la imagen de abajo para ver la textura de cerca.
¿Que sigue?
Es difícil predecir a dónde irá la página de inicio de Apple, pero vemos algunos experimentos interesantes que tienen lugar en el sitio. A pesar del hecho de que la página de inicio ha eliminado la textura del ruido, la página actual del iPhone ha introducido una implementación mucho más pesada de un fondo texturizado, con un área de producto insertada.
También hay algunas animaciones realmente impresionantes del iPhone volando dentro y fuera de la vista.Estos reemplazan los GIF animados de 1998 con tecnologías web modernas, pero el corazón de la idea es definitivamente el mismo.
En el futuro, ¿veremos a Apple volver a los trucos antiguos como los productos animados y los botones brillantes? ¿Y seguirán avanzando en su implementación de fondos texturizados, tal vez introduciendo más de las texturas que vemos en iOS? ¡Tu invitado es tan bueno como el mío!
Conclusión
Este estudio de la evolución de Apple.com es mucho más que una mirada a los caprichos de una sola empresa, sirve como una lección importante sobre varias tendencias de diseño web importantes para todas las empresas en la última década. Fuimos testigos de la simplificación de los diseños y la reducción del texto, el surgimiento del tipo sans-serif y el romance de varios años con la glosa que aún seguimos jugando a pesar del renacimiento resultante del minimalismo.
Podemos detectar fácilmente otras tendencias, como el aumento de la importancia de las barras de búsqueda, la comprensión de que la navegación debe ser prominente y fácil de encontrar, y la riqueza que las nuevas tecnologías web aportan al diseño web en una era posterior a Flash. Apple ha sido responsable de impulsar HTMl5 y CSS3, tal vez más abiertamente que cualquier empresa de tecnología importante en un ataque directo contra el reinado de Adobe.
Se debe un enorme agradecimiento a la gente de Internet Archive por preservar estas y otras innumerables piezas importantes de la historia del diseño. Estoy ansioso por ver si Apple servirá como líder o seguidor de las tendencias de diseño web en los próximos años.