7 decisiones de diseño únicas
Siempre estoy buscando inspiración, un gran diseño que desafíe las convenciones. Esta publicación trata sobre soluciones de diseño únicas; eso significa que hablaré de ocho sitios web diferentes que presentan algo típico, de una manera única. Examinaremos soluciones de diseño únicas desde mostrar productos hasta incorporar elementos personales y humanos en un sitio web.
1. Harvard reinventa el infame carrusel
Escuela de Diseño de Harvard el sitio web tiene una forma única de acercarse a la navegación. Cuando aterriza por primera vez en la página de inicio, hay una visualización de la navegación. Por supuesto, cada enlace no está representado aquí, solo unos pocos. Muchos sitios web han adoptado enlaces a las páginas más importantes en el encabezado de la página de inicio; eso es lo que nos trajo carruseles, por ejemplo. Pero aún no he visto otro sitio web que lo presente de esta manera. La navegación puede ser pequeña pero está al frente y al centro. Más importante aún, parece que pertenece allí. Se ejecuta excepcionalmente.
Las imágenes de la izquierda se superponen pero todavía se puede ver cuántas hay. Existe una relación clara entre la imagen y los títulos en el lado izquierdo. Las imágenes giran en relación con los elementos de la izquierda. Sin embargo, en cualquier momento dado, usted sabe qué información está disponible para usted. Es como si la Escuela de Diseño de Harvard hubiera creado una versión mejorada de lo que el carrusel debería haber sido en primer lugar. No solo se toma en serio la usabilidad en esta solución de diseño, el diseño también es único. Ambos factores combinados crean un diseño visual fantástico.
2. Tra se apaga
Es bastante obvio que Tra El sitio web utiliza un diseño no tradicional. El sitio web es, en general, mínimo. También usan un esquema de color inverso donde el fondo es negro y el texto es blanco. El esquema de color sin duda le da un factor sorpresa. Sin embargo, esto es sobre el diseño del sitio web de Tra. Comencemos con la página de inicio: hay algunas piezas de texto en la página de inicio, la mayoría superpone la imagen de fondo al menos un poco, a excepción de la copia del párrafo en la sección "Conocemos a la gente". La copia está alineada específicamente para estar fuera de la imagen. Es diferente, es único, es notable.
En la página de alrededor, hay un poco más de orden y uso de una grilla. Pero, la cuadrícula sigue siendo irregular. Parece que cada sección de la página sobre tiene su propia grilla. Lo que más me cautivó de esta página es la imagen recortada de la esquina superior izquierda de la página web. Simplemente no encaja en nada. Naturalmente, eso me da curiosidad. Resulta que la imagen es una galería: debe hacer clic para que las imágenes se abran. Esa es una forma bastante inteligente de aprovechar un diseño; las personas que se preocupan por investigar son recompensadas con un montón de imágenes. Las personas que no les importa, no pierden tanto. Es un divertido huevo de Pascua.
3. Fotos de zapatos desplazables dentro de una página fija
Este ejemplo de una solución de diseño única gira en torno a un minorista de calzado en línea. Feit La página del producto de s es simplemente brillante. En primer lugar, el diseño utiliza todo el ancho y alto de la pantalla. Eso significa que cada área de la pantalla ha sido designada con un propósito específico. En segundo lugar, el sitio web es simple, minimalista y limpio. Eso significa que, aunque el diseño sí utiliza la pantalla completa, no es desordenado. Eso es algo muy bueno, ya que un montón de diseño se basa en el espacio en blanco para crear un sitio web limpio y liviano.
Lo que más me impresionó de esta página de producto específica es la forma en que se divide el diseño. La página está específicamente dividida en tres secciones diferentes. Primero, está la navegación en el lado izquierdo. Es bastante estándar y nada demasiado especial. Luego está el lado derecho con los detalles del producto. Ambos, la navegación del lado izquierdo y la sección de detalles están fijos a la pantalla. Pero, la última sección, la sección de fotos del medio, está llena de fotos desplazables. Creo que es una solución brillante porque no es la solución más común.
A menudo, si hay una gran lista de fotografías de productos, la información se queda atrás. Aquí, mientras me desplazo hacia abajo, aún veo la descripción y el nombre del producto, aún veo los diferentes colores en los que aparece y puedo acceder a más información, como detalles sobre el material, sin tener que desplazarme hacia arriba o hacia abajo. En general, esta es una experiencia perfecta para un cliente potencial.
4. Mostrando múltiples lados de un producto de un solo vistazo
Aquí tenemos otra página de producto y otra forma de mostrar un producto. De acuerdo, bien, ¡también tenemos otro ejemplo de zapato también! Afura El sitio web también tiene un método de visualización único. Esta vez los zapatos se muestran en múltiples disparos diferentes encima de la página. En realidad, es parte de un elemento de interfaz de usuario del carrusel. Sin embargo, la usabilidad aquí no es un gran problema. Para empezar, hay tres imágenes que se muestran por defecto en los tamaños de pantalla de un portátil o computadora de escritorio. Todas las imágenes predeterminadas tienen el mismo fondo, lo que hace que la visualización sea agradable y fluida. Si un usuario no se da cuenta de que las imágenes forman parte de un carrusel, al menos verá tres imágenes diferentes del producto en sus computadoras. Para tamaños de pantalla más pequeños como tabletas, el valor predeterminado es mostrar dos imágenes a la vez; eso sigue siendo bastante bueno Con todo, la pantalla de los productos de calzado aquí es una solución de diseño única.
5. Opendoor muestra sus humanos
Yo, por mi parte, creo que la web es un lugar impersonal donde normalmente no vemos al ser humano; las personas reales detrás de aplicaciones, productos, empresas, etc. Siempre me he esforzado por incluir un elemento humano dentro de mis diseños. Puedo ver eso Puerta abierta quiere hacer exactamente lo mismo. En su página de inicio, aproximadamente a la mitad, hay una sección llamada "Le tenemos la espalda". Se supone que debe explicar que hay verdaderos seres humanos detrás de la compañía Opendoor que están allí para ayudar a sus clientes en cada paso del camino. Ahora, Opendoor podría haberlo dejado allí, pero en su lugar, colocaron una gran foto de uno de sus empleados.
Esta sección tiene muy poco texto. En cambio, la foto y la cara son la parte más grande de la sección. Incluso diría que la foto domina la sección de manera 100% positiva. Si la foto hubiera sido una miniatura o un avatar, el efecto ni siquiera existiría. Si la foto hubiera sido un cuadrado de tamaño mediano (digamos al menos 300px por 300px) justo al lado de la copia, el efecto no sería el mismo. La elección de usar una imagen tan grande de la cara amiga de Mark fue una buena decisión; Esta decisión de diseño no solo proporciona un elemento de diseño humano y personalizado, también es creativo. Sin esta foto, no habría impacto personal en el usuario. Sin este diseño específico, esta sección tendría un efecto emocional completamente diferente.
6. UX Flow muestra que una pequeña animación puede recorrer un largo camino
El siguiente ejemplo de una solución de diseño única tiene que ver con la animación. Si echas un vistazo a la página de inicio de UX Flow y deslícese hacia abajo un poco, puede notar que uno de los fondos de la sección se anima. Es sinceramente nada sofisticado, pero es único. Los fondos no se relajan a medida que se desplaza en una página web. En todo caso, durante los últimos años hemos visto diferentes elementos dentro de una sección dentro o fuera a medida que se desplaza. Pero, no me han parecido tantas animaciones de fondo además de paralaje. La razón por la cual esto es importante es porque un fondo define una sección. Y, aunque, esto no es una animación loca, sigue siendo impresionante.
No todo debe ser audaz, ruidoso e insoportable para ser impresionante. A veces, las cosas sutiles como una pequeña y rápida animación fácil son suficientes para producir una experiencia única para el usuario. Este es definitivamente uno de esos momentos. Otra cosa que es importante notar es que las secciones entre las cuales ocurre la animación no tienen diseños únicos. Esta bien; la transición se nota a medida que pasa de una sección a la siguiente, sigue siendo parte del diseño, incluso si no se trata del diseño final realizado por la animación.
7. Mapa integrado de Ted Todd
El diseño visual y la experiencia general del usuario de Ted Todd El sitio web está bien diseñado. Por el bien de este artículo, me gustaría hablar sobre la forma en que Ted Todd utiliza la ubicación y la sección del mapa en su sitio web. Hacia el final de su página de inicio, hay una sección designada para las diferentes ubicaciones de oficinas que la compañía tiene en toda Florida. Hay muchas razones por las cuales esta sección es increíble. En primer lugar, la sección utiliza el diseño de una manera única para proporcionar una solución de diseño estelar. Lo más notable de esta sección es la forma de luz de Florida a la derecha. La imagen de Florida con sus muchos puntos es una manera fantástica de mostrar el alcance de la compañía. No solo dicen que están en Florida, el diseño te muestra exactamente dónde. Es fácil de digerir y se ejecuta de forma fantástica también.
La siguiente cosa importante acerca de esta sección son los puntos. En realidad son interactivos. Cuando pasas el cursor sobre ellos, obtienes el nombre de la ciudad donde está ubicada la oficina de Ted Todd Insurance. Sin embargo, si haces clic en ella, toda la sección se desplaza hacia la izquierda para dejar espacio a los detalles de la oficina específica. Obtiene el número de teléfono de la oficina, la dirección y el horario de atención, además de una lista de empleados. Me gusta esta solución de diseño porque permite al usuario navegar rápidamente a una ubicación cercana a ellos. Es visualmente una representación mucho más interesante y única que si la información se apilara una encima de la otra en el título de una página "Nuestras oficinas de Florida", ¿no crees?
