Share
Apple es una de las marcas más grandes del mundo y con esa popularidad viene una gran influencia. Tal vez más que cualquier otra compañía en el mundo, Apple ha desempeñado un papel enormemente influyente en la forma en que se diseñan los productos, las aplicaciones y los sitios web. En este artículo, discutiremos el estilo de diseño general de Apple y cómo ha influido en muchos otros..
Una gran parte de la campaña de marketing general de Apple proviene de su popular sitio web en Apple.com. Alexa clasifica a este sitio como # 32 en popularidad, lo que lo coloca por delante de sitios como la BBC, Craigslist y PayPal, lo que no está mal para un sitio que es básicamente una tienda en línea para una sola marca.
El sitio de Apple se ha ganado una reputación por su atractiva identidad de marca y diseños limpios. Gracias a esta reputación, ha influido en una ola de otros sitios para seguir su ejemplo. El estilo de diseño de Apple se extiende desde el diseño y empaque del producto hasta la forma en que los widgets de la barra lateral en su sitio son diseños.?
¿Este artículo se centrará principalmente en las iteraciones más recientes del sitio web de Apple? pero antes de profundizar demasiado, visitemos Apple.com a través de los años (cortesía de WaybackMachine). Lo importante a recordar aquí es que Apple.com, al igual que el resto de Internet, comenzó bastante feo para los estándares de hoy. Haga clic en cada imagen para ver la captura real de wayback?
Bien, ahora que lo hemos guiado a través del sitio de Apple en los últimos 15 años, profundicemos en lo que lo ha hecho increíblemente influyente en las iteraciones más recientes de su sitio..
La característica más importante del diseño web influyente de Apple es su minimalismo. Apple lo mantiene simple al usar grandes áreas de espacio en blanco y grandes márgenes para enfocarse en áreas de contenido individuales.
La página de inicio de Apple normalmente presenta una gran foto de producto con un solo lema y algunas otras páginas vinculadas debajo del pliegue. Por ejemplo, en el momento de escribir esto, Apple presenta una imagen grande del iPad de segunda generación de Apple con un título grande y un título secundario.
El pensamiento asumido detrás de esta elección de diseño es que Apple no quiere poner todo sobre ti a la vez. En su lugar, quieren que haga clic en la página del producto individual donde pueden mostrar más información. Tome este enfoque en contraste con la página de inicio de Microsoft. Microsoft también tiene una gran imagen destacada, pero la página está repleta de varios anuncios y los puntos destacados en la parte inferior son aún más difíciles de leer..
Hay algunas áreas del sitio de Apple que necesitan transmitir mucha información a la vez. Sería despectivo a la usabilidad si se dividiera. Sin embargo, estas áreas todavía parecen estar muy limpias y organizadas gracias a que todo está confinado a una cuadrícula.
El sitio actual del iPod de Apple presenta una imagen de héroe deslizante con tres más pequeños colocados cuidadosamente debajo. Este trío luego se divide en otros seis elementos que crean un sentido jerárquico. Apple presenta el producto más importante (y, por casualidad, caro) en la parte superior y muestra los productos menores a continuación (como actualizaciones de software y accesorios).
Este efecto piramidal es evidente en todo el sitio de Apple..
Para la mayoría de las marcas, la importancia comercial es un medio de publicidad vital. Las personas pueden recoger su producto en una estantería de la tienda y escanearán el paquete para obtener información. La experiencia minorista de Apple es muy diferente y, como no ve el producto antes de comprarlo (en casi cualquier ubicación), no es necesario rellenar el paquete con texto y gráficos publicitarios..
Sin embargo, lo interesante es que el sitio web de Apple está diseñado de la misma manera minimalista. El estilo de Apple se ve en todas sus propiedades físicas y virtuales para que pueda identificar una caja de Apple (o incluso un producto) como una de Apple, tal como podría hacer con un sitio web..
Como mencionamos anteriormente, Apple utiliza principalmente fotos grandes y singulares de sus productos en lugar de múltiples fotos más pequeñas. Cuando visita una de sus pocas páginas de productos, la imagen ocupa un lugar central antes de que se mencione cualquier precio, características o disponibilidad. Esta técnica en particular funciona muy bien en la teoría general de la jerarquía visual al presentar el producto ante todo.
Esta teoría es muy simple pero muy efectiva para formar una buena imagen de un producto como primera impresión..
Como sabrá, Apple es un cruzado para los nuevos estándares web, como HTML5. Su propio sitio refleja esto al ofrecer una selección de interactividad algo novedosa mediante el uso de tecnologías web que no son Flash..
También sabemos de primera mano que Flash es la razón principal por la que las Mac se bloquean..
Estas pequeñas áreas de animación también parecen extremadamente funcionales en comparación con sus contrapartes de Flash. La pandilla que odia a los flashes crece día a día y mi uso de Chrome demuestra con frecuencia el bloqueo del popular complemento de Adobe. El hecho es que las alturas que ofrece Flash antes de HTML5 se están replicando con mejor compatibilidad en la quinta revisión de HTML..
El boicot virtual de Flash es algo que Apple no está influenciando desde su sitio web. En cambio, es una demostración de lo que se puede lograr solo con las tecnologías compatibles con los dispositivos móviles de Apple..
El sitio de iPad 2 de Apple muestra una demostración interactiva de su accesorio Smart Cover donde los usuarios pueden cambiar el color del iPad y la funda, y deslizar o arrastrar (según el dispositivo) para doblar la tapa. Y sin flash! A medida que navega por el sitio de Apple, notará que la mayoría de los puntos de mercadeo tienen imágenes asociadas que le dan una pequeña visión del dribble de mercadeo que de otra manera sería aburrido. Por ejemplo, el sitio Mac OS X de Apple (que se muestra a continuación) utiliza un icono grande al lado de su sección de SO de 64 bits. El resto de los puntos de Apple tienen su propio icono también..
A medida que profundizas en el sitio de Apple, los íconos comienzan a ser más evidentes. Cuando Apple intenta demostrar que esta interacción de su software es un 40% más rápida, usan una imagen para resaltar esto. Esto rompe el contenido y agrega un poco de color adicional al diseño sencillo de Apple..
Hay un icono para eso. El sitio web de Apple es una cosa que forma una gran influencia de diseño, pero su software tiene un efecto similar. iOS utiliza una gama de elementos de interfaz únicos que se han hecho evidentes en aplicaciones web y sitios web por igual. Por ejemplo, el interruptor deslizante de alternar de iOS se puede ver en una selección de aplicaciones web que usan el estilo para activar o desactivar una acción.
Apple ha sido pionera en una nueva era en el diseño de interfaces de usuario, una que es limpia y fácil de usar. La influencia de la interfaz de usuario de Apple se traduce en una gran experiencia en aplicaciones web que han tomado la idea de una interfaz minimalista y simplista con funciones clave que son fácilmente identificables a través del tipo de elemento que se utiliza. Si ve un interruptor de palanca, sabe que tiene dos funciones clave, muy probablemente encendidas y apagadas.
Si bien los elementos reales de la interfaz de usuario generan su propia influencia en las aplicaciones web, el estilo limpio y minimalista de la UX también se puede considerar como un impacto en el diseño. Todo, desde los íconos hasta el gradiente sobre los menús en Mac OS X, se ve muy bien. Los gradientes sutiles que se muestran en la imagen de abajo hacen que el diseño se vea menos que plano y me recuerdan mucho el degradado limpio de Chrome para Mac en la parte superior.
Los siguientes ejemplos son una muestra muy pequeña de la amplia variedad de sitios que han sido influenciados directamente o indirectamente por el enfoque de Apple para el diseño web..
La página de productos de MacRabbit tiene influencia del diseño web limpio y monocromático y los estilos de interfaz de Apple. También tenga en cuenta que aquí se utilizan las mismas aplicaciones y logos de soporte que en Mac OS X.
Tenga en cuenta que Thace Tapbots utiliza la misma imagen de héroe grande que domina la página, seguida de tres aplicaciones menores que se muestran a continuación.
Los iconos son otra gran característica en el diseño web de Apple. Hay un montón de hermosos iconos bien diseñados que se pueden encontrar en Apple.com y el sitio de Pixelmator muestra algunos más. Hay algunos íconos hechos por Apple ahí, pero la mayoría son originales y juegan bien con el texto sombreado.
Symphony muestra el mismo diseño Z que se usa en las páginas de productos individuales de Apple con un logotipo a la izquierda, seguido de navegación, seguido de una gran imagen de héroe.
Como un blog de Apple, Cult of Mac toma muchas claves de diseño de la gran A en sí. Los mismos gradientes sutiles se utilizan en el conjunto de publicaciones destacadas y los más oscuros en la barra de menús..
Solo mirar a Gibson indica algún tipo de influencia de Apple. Todo, desde el trío Apple-ish de imágenes destacadas en la parte inferior hasta su inclusión en cada resumen de "diseños web influenciados por Apple" en la red grita Apple.
El sitio de promoción de la aplicación de Checkout tiene en juego muchos de los principios de diseño de Apple, como gradints grises, tomas de productos grandes e incluso el ticker al estilo Hot News de Apple.
Versiones es un diseño web oscuro pero que utiliza bien la teoría del espacio en blanco. Si bien el espacio en sí no es blanco, utiliza grandes cantidades de espacio vacío para realizar el efecto. Los iconos personalizados también se utilizan para demostrar el contenido..
Accentsconagua