Suscríbete a Merca2.0. Haz clic aquí

Alvaro Rattinger

Los secretos del diseño de apple.com una infografía

Apple es sin duda una de las marcas más admiradas del planeta, de cada dólar que se gasta en un producto de la empresa retienen .47 centavos de utilidad, con sus reservas en efectivo podrían comprar fácilmente a sus principales competidores o sacar a países de Europa de sus problemas financieros.

Por Alvaro Rattinger
Twitter @varu28
email [email protected] 

Apple es sin duda una de las marcas más admiradas del planeta, de cada dólar que se gasta en un producto de la empresa retienen .47 centavos de utilidad, con sus reservas en efectivo podrían comprar fácilmente a sus principales competidores o sacar a países de Europa de sus problemas financieros. En gran medida han logrado esto por el uso inteligente del diseño, no sólo en sus productos, también en sus piezas de publicidad y comunicación. En esta columna he analizado que es lo que hace a sus páginas tan exitosas y en que medida se diferencian de la competencia.

A primera vista la página de Apple resulta familiar, según alexa.com, este sitio es el número 35 del mundo, y es visitado principalmente por hombres de 25 a 34 años. Sin embargo, no es la página más compleja que he visto, se caracteriza por su limpieza y claridad de comunicación. Lo primero que uno nota al tratar de analizar la página del producto iPad de la empresa es el tamaño masivo, con más de 11,000 pixels de alto lleva más un scroll para navegarla, su altura es superior a sitios como eluniversal.com.mx, wsj.com o latimes.com, aun así no se siente en tiempo de carga ni en dificultad de lectura.

En la infografía inferior se pueden ver todos los detalles de tecnología utilizada, así como datos de penetración y estrategia de diseño de navegación. Me gustaría listar 5 datos que parecen especialmente relevantes en términos de diseño y lineamientos gráficos:

  1. El color azul se utiliza para todos los elementos de conversión, ligas, videos y botones.
  2. Existe uniformidad en tamaño de íconos y thumbnails de videos.
  3. Se construye con dos plantillas de 2 y 3 columnas por sección.
  4. No hay versión adaptativa para móviles, la experiencia es la misma en todas las plataformas.
  5. Se privilegia una estructura predecible de títulos, subtítulos y textos informativos.
  6. Los elementos de acción usualmente incluyen tres etapas, hover, active e inactive
Algo que relata en el diseño de apple es el aprovechamiento de tecnologías como CSS3 y HTML5 lo que se manifiesta de manera especial en galerías y elementos de interactividad que rivalizan con empresas automotrices. La complejidad de las galerías permite que le usuario juegue con la tapa del iPad o que compare la resolución entre el iPad 2 y el iPad “3”.
Otro detalle importante es la uniformidad de imagen entre el mundo offline y online, los títulos respetan la tipografía de la empresa y reemplazan el texto tradicional por imágenes con textos alternos envueltos en tags < H1 >. Para mis amigos lectores menos geeks esto significa que existe una estrategia de SEO (Search Engine Optimization)  que no compromete diseño por resultados.
La infografía inferior muestra con mayor detalle el análisis y estoy seguro de que les gustará mucho, por lo pronto los veo en twitter @varu28 seguro nos vamos a divertir.

Suscríbete al contenido premium de Merca2.0

De Madrid a la Ciudad de México, la fuente más confiable de estrategias de mercadotecnia a nivel global. Una mirada a las estrategias de las grandes marcas y las tendencias del consumidor.

Más de 150,000 mercadólogos inscritos en nuestros boletín de noticias diarias.

Premium

Populares

Únete a más de 150,000 lectores

Regístrate a nuestro newsletter en la siguiente forma y recibe a primera hora las noticias más importantes de mercadotecnia, publicidad y medios en tu correo.

Más de Merca2.0

Artículos relacionados

You don't have credit card details available. You will be redirected to update payment method page. Click OK to continue.