Aprender a diseñar mirando: La web de apple

Hoy voy a empezar una serie, aprender a diseñar mirando, en la que voy a realizar un análisis bajo mi perspectiva de algunas webs y hablaré de lo que me gusta y lo que no, e intentaré explicar por qué lo han hecho de esta manera, o que técnicas creo que han usado a la hora de decidirse por ese diseño y los significados que percibo acerca de lo que veo.

Con esta serie no solo intento analizar, más bien mejorar mis habilidades de diseño aprendiendo de otros, es decir aprender a diseñar mirando y por el camino mostraros lo que veo por si os ayuda para vuestros proyectos.

Apple computers inc

Hoy voy a empezar con una de las empresas más grandes del mercado y que creo que es un punto de referencia para mucha gente a nivel mundial en cuanto a todo lo que toca ya sea en cuanto a dispositivos o diseño a todos los niveles.

Hoy en aprender a diseñar mirando hablaremos de: la web de Apple computers INC

Una de las cosas que distingue a Apple de otras muchas compañías es que dan mucho valor a la simbiosis que debe haber entre estética y funcionalidad.

Los productos o las web pueden ser preciosas pero si no son fáciles de usar o entender, no sirven.

Para que algo cumpla con su cometido quiere decir que ha de servir para el propósito para el que ha sido diseñado, es decir en este caso el propósito final de cualquier web es convertir, ya sea:

• Venta de servicios
• Venta de productos
• Obtención de leads ( firmas, Emails, Teléfonos, etc)
• Informar

Estas son los principales tipos de conversión que buscados en la mayoría de los casos.

En la web de Apple creo que se cumple una doble función, por un lado informar de las novedades y productos existentes, así como la venta online de productos y servicios.

Para Apple una conversión bien podría ser informar a un usuario que llega su web buscando saber más sobre un producto concreto, ya que tienen tiendas esparcidas por todo el mundo y comercios asociados, probablemente si el usuario está convencido saldrá en busca de la tienda más cercana a comprar el producto, siempre será mejor que esperar varios días a que te llegue el envío.

Así que el fin de su web no es únicamente vender, como puede ser el de otras muchas tiendas online existentes que son el único punto de venta existente de estos negocios.

Por lo que multitud de usuarios acuden para ver productos que después compran en otros comercios asociados a Apple

Centrémonos en el diseño para poder aprender a diseñar mirando

No sé la multitud de veces que  alguien me ha referido la web de Apple para explicarme como quiere el diseño de su web.

Por eso hoy vamos a intentar entender los elementos que creo que Apple usa en el diseño de su web y de paso, aprender a diseñar mirando.

1.- Contraste:

Uno de los principios de diseño que a mi entender usan muy bien la gente de Apple, es el de contraste, el contraste se basa en capturar la atención del usuario y guiarlo hacia donde queramos, consiguiendo esto mediante la generación del interés visual

Como se consigue contraste:

• Color
• Tamaño
• Textos
• Formas
• Espacios en blanco.

Lógicamente mediante el contraste conseguimos añadir énfasis a las diferentes partes que queramos resaltar

Y esto es algo que Apple hace de una forma magistral.

2.-Las Imágenes

Otra cosa que usa Apple muy bien: son las imágenes y esto a mi manera de ver es una cosa imprescindible, ya que a los humanos nos guste o no, somos seres completamente visuales, pensamos en imágenes, cuando alguien nos cuenta algo, tendemos a imaginarnos la escena conformando la imagen en nuestra mente.

Quizás por eso, en muchas ocasiones decimos frases como: “es totalmente diferente a como me imaginaba” o lo contrario “eres exactamente como me había imaginado”.

Este es un gran problema de mucha gente, usan imágenes mediocres sacadas por ellos mismos, sin las perspectivas correctas, sin tener las herramientas adecuadas.

Cada maestrillo con su librillo, es decir contrata a un fotógrafo profesional si quieres fotos profesionales de tus productos (la inversión va a merecer la pena).

Este es uno de los principales motivos del cutrismo en numerosos sitios web ya que los resultados finales distancian mucho de ser sitios punteros, por la calidad visual de sus imágenes.

3.-Humanizar la web

Sé que soy archi-pesao con este tema, pero a los seres humanos nos encanta ver a otros seres humanos, disfrutando y riendo, a esto Apple también le saca partido, su web está llena personas usando sus productos en el día a día, personas con las que nos podemos identificar.

Eso nos transmite emociones y pone a trabajar nuestro subconsciente, para que nos veamos en su lugar, “así de feliz estaría yo con un Ipad HD”, es evidente que estas fotos apelan a las emociones humanas.

Lo curioso es que si os fijáis las fotos de los productos están recortadas sobre un fondo blanco, y las fotos en las que salen personas salen con el típico corte de foto, a mí me parece que las muestran como si de recuerdos se tratasen, como si fueran un álbum de recuerdos, un álbum de fotos, para que nuestro subconsciente trabaje.

4.-Aire, espacio en blanco o espacio para respirar (White space en inglés)

Esta es otra técnica de diseño que consiste en dejar amplios espacios en blanco ente los elementos del diseño dotando de pausa y ritmo a la comunicación visual.

Los grandes espacios en blanco dan tiempo a asimilar los detalles y a entender o asimilar los elementos y el significado de esta comunicación visual.

Al meollo de la cuestión, juntando los ingredientes

La tónica general de Apple en su web sería la siguiente:

• Usan el blanco como color de fondo para fomentar el contraste
• Imágenes gigantes recortadas de los productos con colores muy vivos para dar la sensación de realidad y hacerlo mucho más apetecible, fomentando el contraste de nuevo.
• Imágenes de personas usando sus productos con una clara carga emocional
• Los colores también juegan un papel importante ya que solo usan el blaco y el negro que son colores opuestos entre sí , si profundizamos veremos que todos los textos son negros a excepción de en la barra de navegación que son blancos y evidentemente el color de fondo de la barra de navegación para crear el contraste es completamente negra
• Los espacios en blanco permiten que te empapes de los detalles y asimiles la belleza de las fotos antes de seguir con la conversación visual que tienen contigo.

Analizando la home

Bueno la Home es claramente visual en ella aparece un slider web con cuatro diapositivas.

Yo no estoy muy a favor de los sliders web, ya que creo que apenas convierten y que merece la pena erradicarlos de la web, de hecho no usan ningún tipo de slider en las páginas de producto.

He escrito este post al respecto de lo que pienso sobre los sliders web por si te interesa: 10 razones de peso para quitar el slider web de todas tus páginas

A mi forma de ver la página de inicio de Apple es una página de transición, en la que los usuarios que llegan no llegan a ver qué bonito es el slide o cuantos productos tienen de hecho si haces scroll no es que abunde la información hay algunos banners más hacia productos concretos, y un footer con un montón de enlaces hacía todo el resto de secciones de la web.

Creo que la gran mayoría de usuarios que llegan a esta web saben en mayor o menos medida que buscan, por lo que está pensada para derivarlos a donde corresponda, hoy en día ¿quién no ha oído hablar de Apple?

Analizando una página de producto.

Sinceramente me parece una forma magistral como muestra esta gente los productos, en este caso pongo como ejemplo la sección genérica de mac y de uno de los macs.

Como veis ya no hay slider web, ves el producto haciendo scroll, lo que hace que me parezca súper usable, sí, un diez en usabilidad.

Los diferentes macs te los muestran con fotos enormes que te llenan los ojos, nombre del producto, una pequeña descripción de lo que hace especial a cada producto y los enlaces en azul para que tengas claro donde pinchar, dos opciones: ampliar la info o comprar.

Podéis comprobar la maestría con la que esta gente usa el contraste en el diseño para resaltar el producto.

Los grandes espacios entre los productos hacen que te de tiempo a observar estos detenidamente mientras vas haciendo scroll a lo largo de toda la página.

Lo mismo pasa con las páginas en detalle de un producto, no usan slider web y te muestran grandes fotos que ilustran las explicaciones, es evidente que saben que una imagen vale más que mil palabras.

Bueno espero que este post os haya servido para aprender a diseñar mirando, así como algo nuevo acerca del valor que tiene el diseño, y como el diseño puede ayudar a mejorar tus ventas

Me encantaría saber si creéis que me he dejado algo en el tintero, si os gusta el diseño de la web de Apple y si es así ¿por qué?, o sí  quizá queréis que analice algún sitio que os guste para a través de el poder aprender a diseñar mirando, dejadme vuestra opinión en los comentarios, estaré encantado de leerla.

Un fuerte abrazo!!!