No hay escasez de compañías que siguen las tendencias de diseño popular para atraer a un mercado masivo. Mucho más raro es la raza de empresa que realmente establece tendencias de diseño. Hoy examinaremos las técnicas de una empresa que ocupa la parte superior de la cadena alimentaria de diseño: Apple.
A continuación, encontrará 15 formas prácticas de seguir el ejemplo de Apple para crear interfaces hermosas.
# 1: mantenerlo simple
Eche un vistazo a la página de inicio de Apple y no piense en lo que ve, sino en lo que no ve. Le daré una pista, está en todo este sitio (no no en este mismo sitio, haga clic en el enlace tonto). La respuesta, por supuesto, es el desorden visual. Se supone que una página de inicio les dice a los usuarios todo lo relacionado con su compañía, que comunique todas las categorías de sus productos en detalle, que enumere las funciones infinitas y que muestre su logotipo lo más grande posible. ¿Derecha? Según Apple: mal.
La página de inicio de Apple simplemente muestra su trabajo más reciente y le brinda algunas categorías fáciles de entender para ayudarlo a obtener la información que desea ver. Por supuesto, lo más probable es que no esté diseñando para una compañía notablemente ubicua que no necesita presentación. Sin embargo, aún puede usar un diseño mínimo pero atractivo para aumentar la usabilidad.
Imagina que estás conduciendo hasta un aeropuerto. A medida que avanza, recibe simultáneamente cinco o seis señales que contienen mapas con las ubicaciones para todo, desde terminales hasta baños con acceso para discapacitados. El argumento que haría el diseñador de mapas es que te dio toda la información que necesitabas para llegar a cualquier lugar al que quisieras ir. Sin duda, contestarías de nuevo que su culpa fue que te las dio todas a la vez mientras conducías a 20 mph. Ahora imagina que estás en Sky Harbor, el aeropuerto de Phoenix Arizona, extraordinariamente fácil de navegar. Cuando entras, ves una señal que dice: Hola, bienvenido a Sky Harbor. ¿Hay tres terminales ?. Luego, a medida que avanza, llega a más señales, cada una con una breve descripción de qué aerolíneas vuelan en cada terminal y dónde ir para llegadas o salidas. La sensación que tienes cuando conduces a Sky Harbor es "¡Guau, esto es fácil!"
Apple tiene el mismo enfoque para el diseño de la interfaz. En lugar de golpearte con todo lo que tienen en nombre de la facilidad de uso, usan información más pequeña para llevarte al lugar donde se encuentra el contenido que realmente buscas. Mire el sitio en el que está trabajando y considere cómo puede dividir la información compleja en partes más pequeñas que el usuario no encontrará abrumadoras.
# 2: Usa disparos de productos increíbles
Una de las razones principales de Apple para reducir los gráficos superfluos en su sitio es mostrar realmente lo que es importante: sus productos. Solo mira los disparos que usan; Es casi imposible mirar una página en el sitio de Apple y no centrar la vista en los productos durante segundos.
Hay varias cosas que hacen que estos productos se vean tan increíbles. La primera es que obviamente son prístinas. Calcule esto hasta los expertos en imágenes digitales. No he visto exactamente cómo lo hacen, pero es probable que la combinación sea una mezcla de fotografía, modelado 3D (elija su opción: Modo, Lightwave, Maya, etc.) y, por supuesto, Photoshop.
Lo siguiente que hacen es hacer que ocupen una gran parte de la página. Si pasas horas haciendo una hermosa foto de paquete y luego la ajustas a una miniatura, simplemente no es tan impresionante. Tenga en cuenta que Apple también incluye con frecuencia múltiples productos organizados de una manera atractiva como en la imagen de arriba.
La lección aquí es no solo tomar una foto de su producto y llamarlo un día. Pasa el tiempo para que se vea fantástico. Ya sea una lata de frijoles refritos o un Lexus, haz tu mejor esfuerzo para hacer una gran foto de héroe.
¿No cree que puede hacer que su producto no tecnológico se vea tan bien como Apple? Echa un vistazo a We Shoot Cans como prueba de que un artista talentoso puede hacer que cualquier producto se vea bien.
# 3: El contraste es clave
Otra cosa que hace que esas tomas de productos de Apple se vean tan geniales es el ambiente simple en el que las colocan. El cerebro humano ama el contraste. Es la razón por la que observamos las cadenas montañosas y el horizonte sobre el océano. También es la razón por la que decimos? Oooooohhhh? Cuando vemos un iPhone negro brillante sobre un fondo blanco plano. Debe tratar de aplicar un contraste selectivo en cada diseño que cree. Busque oportunidades para usar el contraste con el color, el tamaño, el grosor de la fuente y cualquier otra cosa con la que tenga que trabajar.
Apple no solo aplica contraste a sus tomas de productos. Echa un vistazo a la foto de arriba y piensa en lo que te salta. Es probablemente el gran botón de descarga azul. Navega por el sitio de Apple y verás que casi cada vez que quieren que hagas algo (comprar, descargar, etc.), usan un botón azul brillante para llamar tu atención.
# 4: Sweat the Small Stuff
Apple tiene que ver con la atención al detalle. Cada pequeña pieza de su sitio está finamente perfeccionada. Nunca caigas en la trampa de decir? Nadie se dará cuenta? o "suficientemente bueno". A menudo es el margen de tiempo dedicado a los detalles más pequeños lo que separa a los buenos diseñadores de los grandes.
No compre en el argumento de cosas pequeñas? Echa un vistazo a los logotipos de redes sociales en la página de inicio de Microsoft Office y dime que no te hacen temblar.
Personalmente poseo archivos vectoriales de cada uno de estos logos. Ahora si puedo hacerlo, ¿no crees que los diseñadores de Microsoft podrían haberse tomado el tiempo de rastrear las mejores versiones de estos logotipos para evitar la descuidada selección de la varita mágica de Photoshop que tienen? Te desafío a que encuentres algo tan mal hecho en cualquier lugar del sitio de Apple, y mucho menos en la página de inicio de una de sus piezas de software más populares.
# 5: evitar el flash
Nunca he sido uno para unirme a la multitud que odia a Flash, pero el hecho es que esa multitud está creciendo. Liderar las masas no es otro que el CEO de Apple y el clarividente tecnológico Steve Jobs. Echa un vistazo a este extracto de un artículo reciente de Wired:
Acerca de Adobe: Son perezosos, dice Jobs. Tienen todo este potencial para hacer cosas interesantes, pero se niegan a hacerlo. No hacen nada con los enfoques que Apple está tomando, como Carbon. Apple no es compatible con Flash porque tiene muchos errores, dice. Cada vez que una Mac se bloquea con más frecuencia, se debe a Flash. Nadie va a usar Flash, dice. El mundo se está moviendo a HTML5. (Fuente)
Esas son palabras fuertes de un hombre venerado por el liderazgo en el mundo tecnológico. Para ser honesto, mucho de lo que dice suena verdadero. El contenido de Flash en línea ciertamente no es la tecnología más confiable que existe y depende en gran medida del software adicional y de los complementos actualizados que el usuario pueda tener o no. Además, HTML5 y CSS3 se vislumbran en un futuro donde puede lograr una experiencia multimedia muy interactiva con un código simple y compatible con los estándares.
Como desarrollador, si te unes a Apple en su boicot virtual de Flash, probablemente no te arrepentirás. Ni siquiera tiene que tomar una postura activa contra Flash, simplemente evite usar siempre que sea posible. Es casi seguro que los usuarios que no pueden ver su contenido tendrán menos dolores de cabeza.
# 6: Hazlo Amistoso
Durante años, Apple fue catalogada como un culto que no era nada amigable. Realmente han tratado de eliminar esta idea en los últimos años mediante la reestructuración de su imagen para que sea más accesible. El lugar más notable en el que se ve esto es en "Get a Mac". anuncios La Mac se presenta como un tipo de persona de todos los días, mientras que la PC es la que está ahí fuera. Hombre de negocios que no siempre está haciendo nada bueno. Sublimalmente, estos anuncios están diciendo que Apple es realmente una comunidad abierta y que cualquier persona, desde adolescentes hasta abuelas, encajará perfectamente.
Otra cosa que han hecho es mejorar su historial de soporte técnico anteriormente abismal. Ahora cualquier persona en una ciudad importante puede hacer una cita en la tienda de Apple para una consulta personal gratuita para resolver cualquier problema o pregunta que puedan tener los clientes.
Todas estas técnicas están reforzadas por gráficos de caras amables y sonrientes. Actualmente, la tienda de Apple cerca de mí tiene alrededor de una docena de recortes de cartón de empleados de Apple en la ventana, como para decir "venga, estamos felices de ayudar". También puede detectar a estos empleados sonrientes en algunos lugares del sitio web de Apple, como se muestra en la imagen de arriba.
Lo que Apple está haciendo es crear un equilibrio entre un diseño sorprendente pero no personal basado en tecnología y caras sonrientes accesibles. No importa lo que estés vendiendo, considera si es apropiado hacer que se vea más amigable y piensa en lo que puedes hacer para lograrlo. Incluso un simple? Hola? en un titular puede recorrer un largo camino.
# 7: Usa una cuadrícula fuerte
La imagen de arriba habla por sí misma. Cada página en el sitio de Apple se adhiere a una estructura de cuadrícula estricta; Ya sea simple o complicado, está ahí. ¿El propósito? Echa un vistazo a cuánta información te están lanzando en la página de arriba. Simplemente está pasando una tonelada, pero de alguna manera parece atractivo en lugar de abrumador.
Romper la información esporádica en células manejables reduce drásticamente el desorden visual y la confusión. Observe que cada celda también contiene una referencia visual que acompaña a la descripción del texto. Todas estas referencias visuales parecen muy similares y se ajustan al tema general de Apple. Incluso si está utilizando imágenes de archivo, intente mantener un tema similar para que no haya disparidad visual en las imágenes dispersas por toda la página.
# 8: Crear ayudas de instrucción
Para reforzar el mensaje de que la parte superior del mouse es en realidad una superficie multitáctil, Apple creó la ilustración anterior. Incluso sin el titular, casi cualquier persona podría comprender lo que está sucediendo en la imagen y, en consecuencia, entender cómo utilizar una nueva tecnología con la que no están familiarizados.
Apple va incluso más lejos que las ilustraciones. Casi cada pieza de hardware y software en su sitio tiene un video que lo acompaña y le muestra cómo funciona. Esto va un largo camino para reducir las preguntas de soporte técnico. Con frecuencia remito a mis amigos (que se han convertido a Mac por mi culpa y, por lo tanto, me ven como soporte técnico gratuito) a estos videos porque ofrecen una experiencia mucho más rica y fácil de entender que una conversación telefónica. Echa un vistazo a la biblioteca de videos instructivos de Apple para ver qué tan buenos son para ti.
# 9: ser consistente
La foto de arriba es una captura de pantalla de la tienda de iTunes. ¿Parecer familiar? Si estás pensando que se parece mucho a Apple.com, tienes razón. Ahora eche un vistazo a Mac OS X, específicamente en el Finder. Nuevamente, vemos un fuerte diseño basado en cuadrícula, mucho blanco, texturas metálicas y azul como un captador de atención (en las selecciones). Y, por último, eche un vistazo a la línea completa de hardware de Apple para ver estas texturas y elementos de diseño traídos al mundo real.
Aspecto general de Apple o? Esencia de la marca? Se aplica en cada cosa que diseñan. Es bastante sorprendente cuando te das cuenta de lo mucho que su software se parece a su hardware. ¿Cuánto más integrado puedes conseguir? Si alguna vez le encargan el trabajo de desarrollar una marca, observe todos los aspectos de la empresa, desde anuncios televisados y sitios web hasta los productos en sí. Considere cómo puede integrar todos estos elementos dispares para verse como piezas individuales de un todo cohesivo.
# 10: No es solo una gran tienda
Apple es un gran caso de estudio en un sitio de comercio electrónico exitoso. Tenga en cuenta que todo el sitio está decidido a influir en usted para que compre y educarle sobre sus productos.Sin embargo, el sitio no se siente como una gran tienda.
Lo que quiero decir con esto se ilustra en las capturas de pantalla anteriores. El plano superior es la página dedicada de Time Capsule. A Apple le encanta hacer hermosas páginas de productos con titulares inteligentes que te informen de lo buenos que son sus productos. Tenga en cuenta que técnicamente no es la "tienda". Si hace clic en el botón comprar, se lo lleva a la página en la segunda pantalla: la tienda en línea real. Aquí Apple ha eliminado completamente el atractivo visual y se ha centrado en la usabilidad. Le brindan la información que necesita sin distracciones y facilitan la compra de un artículo en unos pocos clics.
Si está haciendo una tienda en línea, su primera idea probablemente será hacer precisamente eso: construir una tienda. Si tiene el tiempo, presupuesto, libertad, etc., considere la posibilidad de crear un sitio web para mostrar los artículos en la tienda de una manera que simplemente no sería eficiente en la misma tienda. Cree hermosas páginas dedicadas que realmente aumenten su producto e incluyan "comprar ahora". Enlace que lleva a los clientes a la sección visualmente aburrida pero altamente práctica del sitio.
# 11: estar seguro
Seamos realistas, los productos de Apple son bastante sorprendentes. Haga clic en el sitio de Apple por unos minutos y verá que no son exactamente humildes al respecto. Sus titulares están llenos de adjetivos como hermoso, poderoso, divertido, revolucionario, fácil de usar y avanzado. Sus descripciones de productos le informan que el artículo es lo mejor disponible en su categoría. Si lo analizas demasiado, esto puede sonar un poco altivo. Sin embargo, como visitante ocasional, probablemente solo quedaría impresionado.
Ya sea que su sitio web anuncie un producto, un servicio o simplemente una idea, no se quede corto. Nunca uses la palabra? Bueno? cuando se puede decir? genial? nunca digas? atractivo? cuando se puede decir "hermoso". Si tiene confianza en su producto, realmente esfuércese por comunicarlo a sus visitantes. Descubrirá que se les pegará y que, por lo general, tendrán una primera impresión mucho más positiva si todo lo que se encuentra en su sitio se centra en convencerlos de lo bueno que es usted.
Como todo, hay, por supuesto, un punto de ruptura. Pídale a alguien que no esté involucrado en el sitio que lea su copia para asegurarse de que no se está volcando en el elogio tan grueso que se convierta en una molestia.
# 12: Poner copia legal en el lugar
Este es pequeño pero importante. Si trabaja para una empresa lo suficientemente grande como para tener un departamento legal, sabe que las personas en los departamentos legales trabajan muy duro para demostrar que no valen la pena. Por lo general, lo que esto significa es que usted, como diseñador, crea algo, lo envía al departamento legal y recupera un documento de 500 palabras lleno de contenido adicional que la ley exige que incluya. Inevitablemente, la maldición se produce.
Lo que hagas con este contenido es importante. Considere si es o no información que el usuario realmente quiere saber o si es una mera necesidad que nadie leerá. Si es lo último, tome una página del libro de Apple (un bocado de Apple, por así decirlo) y colóquela en la parte inferior de la página con una fuente pequeña pero legible que no contraste demasiado con el fondo. Su objetivo principal como empleado debe ser hacer que este contenido sea accesible, localizable y legible. Sin embargo, su objetivo como diseñador es asegurarse de que no arruine su diseño rellenándolo con un desorden sin importancia.
# 13: Navegación completa del sitio del pie de página
Echa un vistazo al pie de página en la captura de pantalla de arriba. Apple ha transformado la parte inferior de cada página en una herramienta de navegación extremadamente útil. Esta es una excelente manera de reducir la dificultad de navegar por un sitio grande. En lugar de completar su navegación principal con un enlace a cada sección del sitio, lo han reservado para categorías generales. Dentro de una categoría, si se desplaza hacia la parte inferior de la página, encontrará un mapa del sitio mucho más completo en el pie de página.
Tenga en cuenta que no han hecho todo lo posible para que sobresalga. Es suficiente que lo puedas detectar si estás buscando algo, pero lo suficientemente sutil como para no echarle un segundo vistazo si no necesitas ayuda con la navegación.
# 14: Crea hermosos iconos personalizados
Con la introducción de OS X, Apple introdujo los íconos en un reino completamente nuevo. Desde entonces, el impresionante diseño de iconos ha inundado los sistemas operativos y se ha extendido a la web. Sin embargo, hay algunos conjuntos de iconos gratuitos en línea que han alcanzado tal fama que se han convertido en un cliché.
Así que antes de descargar un conjunto de iconos que se parecen a todo lo demás en la web, pruébelo usted mismo. Inicie Photoshop y / o Illustrator, elimine esas habilidades de dibujo y hágase grandes iconos personalizados. Al final, realmente pulirán los diseños de tu sitio. A medida que domine el arte del diseño de un buen icono, notará que depende mucho menos del arte de terceros para crear sitios increíbles (lo cual es algo realmente bueno). En todo caso, ¿evitará que esos locos en el departamento legal intenten descifrar las restricciones legales de todos esos? ¿Gratis? iconos
# 15: Contenido interactivo y dinámico
Casi todas las páginas del sitio de Apple contienen una presentación de diapositivas automática, un menú de acordeón animado, un video o una galería de fotos interactiva. El objetivo aquí es mantener la atención del usuario. El contenido estático puede ser un poco aburrido y puede hacer que un usuario abandone el sitio en busca de algo más interesante. Apple mantiene su atención al brindarle muchas páginas con contenido que cambia constantemente o partes de funciones interactivas.
Este tipo de contenido debe abordarse con extrema precaución por varias razones. En primer lugar, es fácil dejar atrás a más de la mitad de sus visitantes si está programando funciones que requieren un complemento especial.Intente apegarse a las tecnologías ampliamente compatibles que funcionan en varios navegadores. Además, es muy fácil dejarse llevar por el contenido dinámico. Hay una línea extremadamente fina entre llamativa y molesta, y absolutamente debes aprender dónde cae esa línea. De lo contrario, le da a los visitantes un dolor de cabeza en lugar de la buena impresión que estaba buscando.
¿Una cosa más?
En resumen, Apple Inc. es prácticamente sinónimo de diseño elegante. Hay mucho que podemos aprender al observar a estos grandes diseñadores en el trabajo que va mucho más allá de simplemente arrancar las reflexiones geniales que ponen en todo. Los consejos anteriores están destinados a aplicarse generalmente a su propio trabajo de una manera única. Úsalos como inspiración para abrir tu propio camino en el gran diseño del sitio.
Cada vez que alguien menciona que Apple está obligado a ser evangelistas y enemigos, ansiosos por compartir su amor eterno o su odio profundo hacia los métodos de diseño de Apple. Usa los comentarios a continuación para decirnos cuál eres. ¿Estás a favor del minimalismo mezclado con íconos brillantes o estás harto de que la web parezca un montón de aspirantes a Apple? Queremos escuchar tus pensamientos.