Cambios en el diseño de Apple.Com
Apple.com ha sufrido algunos ajustes en su diseño en la última semana, cambios que, si no prestaba suficiente atención, es posible que ni siquiera lo haya notado.
Aunque muchos informes se refieren a esto como un "rediseño", creo que es difícil clasificarlo como tal. Ciertamente hay algunos cambios significativos, pero los cambios no son exactamente una revisión completa como fue el caso de CNN.com a fines de 2009.
No obstante, los cambios son importantes para los diseñadores web, por lo que los examinaré brevemente aquí. Si hay algo acerca de los cambios que he olvidado mencionar, no dude en comentar.
Una barra de navegación rediseñada
El cambio más significativo (aunque todavía un poco sutil) es el aspecto de la barra de navegación. Apple tiene una de esas barras de navegación que, en cuanto al diseño, todos aman y envidian. Parece imposible que pueda mejorarse. Bueno, de alguna manera fueron capaces de encontrar formas de hacerlo aún más atractivo e intuitivo.
Aquí está la vieja barra de navegación:
Aquí está lo nuevo:
Los cambios incluyen:
- Es más oscuro
- El degradado ha sido reemplazado por un aspecto más brillante y audaz
- La apariencia del logotipo se simplifica
- El cuadro de búsqueda es más pequeño (más sobre eso a continuación)
Creo que realmente se necesita un gran equipo de diseñadores para hacer cambios realmente significativos en el aspecto de un elemento de IU muy importante, sin dejar de dar la impresión de que nada ha cambiado. Simplemente demuestra que los detalles visuales a menudo no son tan importantes como la sensación general del diseño.
El cuadro de búsqueda flexible (solo WebKit)
Al estar obviamente sesgado por WebKit, el equipo de diseño de Apple ha incluido algunas mejoras solo de WebKit, una de las cuales está asociada con el cuadro de búsqueda.
En la mayoría de los navegadores, al hacer clic en el cuadro de búsqueda se iluminará su fondo a un blanco más legible. En Chrome o Safari, el cuadro de búsqueda se anima utilizando CSS3 Transitions para hacerse más amplio y posiblemente un poco más utilizable. La captura de pantalla a continuación muestra el cuadro de búsqueda en Chrome después de que se haya animado para ampliarse:
Para acomodar el tamaño del cuadro de búsqueda, los otros elementos de navegación y el logotipo se redimensionan.
Me gusta esta característica; agrega una sensación de intuición. Pero tiene, en mi opinión, un pequeño defecto: no vuelve a su estado inicial después de quitar el foco. Por supuesto, si algo se tipeó en el cuadro de búsqueda, entonces no querría que el tamaño cambie, pero creo que debería volver a su estado normal si pierde el foco y permanece vacío.
Por supuesto, dado que es extremadamente improbable que alguien haga clic en el cuadro de búsqueda y no escriba nada, supongo que se trata de una omisión insignificante.
Entrada animada de la barra de navegación (solo WebKit)
Otra característica pequeña de WebKit es la entrada animada de la barra de navegación. No recuerdo haber visto este efecto en su sitio antes, así que supongo que esta es otra característica nueva. La entrada animada solo ocurre en la página de inicio, y solo una vez por sesión de navegador. Esta es una buena práctica y una buena lección para los desarrolladores que agregan efectos animados a sus interfaces.
Tal como se visualiza en la captura de pantalla anterior, la barra de navegación ingresa fuera de la pantalla, probablemente usando animación de fotograma clave CSS3, junto con JavaScript para controlar cuándo debe o no ocurrir la animación.
Los navegadores de productos animados (solo WebKit)
Otra adición reciente es el uso de animación en algunas de las páginas de productos. Las animaciones basadas en CSS3 se usan en Mac y iPod navegadores de productos, uno de los cuales se muestra a continuación:
Los productos se animan cuando llega por primera vez a la página, y si cambia de subcategorías, los productos visibles se escabullen y los nuevos saltan a su lugar. Esto se hace a través del código basado en fotogramas clave CSS3, algunos de los cuales se muestra a continuación:
En los navegadores que no son WebKit, la animación del navegador del producto cambia a un simple desvanecimiento basado en JavaScript. Aunque este tipo de cosas no es ideal en todas las circunstancias (ya que básicamente equivale a "codificación de códigos"), es una opción realista para los desarrolladores y diseñadores de hoy en día que desean codificar los mejores navegadores posibles y proporcionar una funcionalidad menos mejorada para el resto .
Search Box Auto-Sugerir
[ACTUALIZACIÓN] Como señalaron varias personas en los comentarios, la sugerencia automática no es una función nueva. Nuestra inclusión de esto como una "nueva característica" se basó en otro artículo que informó que la auto-sugerencia era nueva. No obstante, conservaremos esta sección porque es una buena característica que tiene el potencial de hacer que un sitio web sea un poco más útil, y proporciona un buen ejemplo para que otros desarrolladores y diseñadores sigan, si se ajusta a su proyecto.
El menú desplegable sugerido por Ajax aparece al escribir una consulta de búsqueda:
Como se muestra en la captura de pantalla anterior, el menú desplegable no solo muestra resultados de búsqueda que coinciden con los caracteres escritos, sino que los resultados van acompañados de fotos y descripciones del producto. Creo que las fotos son más valiosas en este lugar que las descripciones, pero en general tiene el potencial de agilizar la búsqueda de productos y las conversiones.
¿Algo más?
Eso parece cubrir los principales cambios en la nueva herramienta del diseño de Apple.com. ¿Hay algún otro cambio significativo en el diseño o código que no he mencionado aquí?
Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Webs impresionantes donde publica artículos y tutoriales sobre diseño web. Usted puede sigue a Louis en Twitter o póngase en contacto con él a través de su sitio web.
¿Qué piensas de los cambios en el diseño de Apple.com? ¿Hay algún cambio que no hayamos mencionado aquí?