Krypton Solid

11 sitios web que perfeccionan la experiencia de usuario centrándose en los detalles

11 sitios web que perfeccionan la experiencia de usuario centrándose en los detalles

Charles Eames dijo: “Los detalles no son los detalles. Ellos hacen el diseño «. Un sitio web es una combinación de detalles y su contenido se comunica a través de ellos. Ya sea que esté diseñado para proporcionar información o para servir como una aplicación, un sitio bien ejecutado es aquel que ha prestado una atención crítica a todo, desde la copia hasta las imágenes y el diseño.

Los detalles son importantes en el diseño web porque las impresiones positivas, provocadas por la presentación general y la utilidad de un sitio web, son importantes. Para hacerse eco de Eames, ellos hacen el diseño, y la falta de atención a los detalles puede tener precisamente el efecto contrario.

Aquí hay una variedad de detalles, algunos relacionados con la interfaz, otros con la interacción, para considerar durante su próximo proyecto basado en la web.

La velocidad de la verificación de la contraseña de Basecamp

Campamento base es una herramienta basada en web para la gestión de proyectos. Desde su introducción, la velocidad y la eficiencia fueron primordiales.

Para su interfaz de verificación, lo que se ahorra inteligentemente es la necesidad de presionar un botón «Aceptar» después de ingresar el código. Si el código se ingresa correctamente, la pantalla predeterminada se muestra automáticamente. Pequeñas medidas como estas respaldan el rendimiento ya rápido de Basecamp.

Colofón practicado por Neoteric Design

Aunque los colofones se han utilizado en libros desde el siglo XV, su propósito es aplicable a la web. Diseño neotérico comparte las notas de producción de su sitio web: lo que se utilizó, desde las fuentes hasta el software, los lenguajes de programación y el sistema de gestión de contenido. Si un visitante se pregunta cómo se crea un sitio, un colofón es una forma ordenada de ayudar a satisfacer esta curiosidad sobre ciertos detalles de la construcción de un sitio web. También da testimonio de la exploración de qué aspectos de la comunicación impresa pueden volverse relevantes para la comunicación basada en la web.

02_Neoteric-Design_Screen-snap_782x540

Cuadrícula tipográfica versátil de Berger & Föhr

El diseñador pionero Massimo Vignelli, que falleció en mayo de 2014, defendió la cuadrícula tipográfica, que definió como «la ropa interior del libro» (del artículo de Brain Pickings «Massimo Vignelli sobre el secreto del gran diseño de libros»). Cuidar la cuadrícula subyacente es un medio experimentado para mantener el sitio ordenado de manera ordenada.

Una estructura basada en cuadrículas es evidente en el rediseño del sitio de Berger & Föhr para el Museo de Arte Contemporáneo de Boulder. La distinción aparente es la medida en que la cuadrícula tipográfica se aplica completamente al contenido del sitio: es claramente coherente desde el formulario de búsqueda, los menús desplegables de navegación, las vistas del calendario, el texto del pie de página y los enlaces. Más aún, la utilidad de la red permanece constante en los estados de respuesta del sitio.

Cuando se utiliza rigurosamente para organizar el contenido, sea cual sea el tipo y la escala, la cuadrícula tipográfica finalmente imbuye un sentido general de coherencia.

03_Boulder-Museum-of-Contemporary-Art_Screen-snap_782x540

Orgullo en el lugar celebrado por Maker’s Row

Existe una práctica emergente en el diseño web de mostrar con orgullo el lugar donde se originó un sitio web. Esto se encuentra comúnmente en el pie de página marcado con «Orgullosamente hecho en …» Fila del fabricante enfatiza las raíces de su equipo al revelar su respectiva ciudad natal como parte de su página de Equipo. Más que actuar como mera información “basada en la ubicación”, compartir el lugar de donde proviene cada miembro del equipo expresa un apreciado sentido de lugar.

04_Makers-Row_Screen-snap_782x540

Acceso directo de TWLOHA a las redes sociales

Si bien es típico mostrar una serie de íconos vinculados a destinos de redes sociales, TWLOHA utiliza el nombre completo del sitio en su lugar. La comprensión es inmediata. Un beneficio obvio: no confundir los íconos entre la «t» de Twitter y la «t» de Tumblr.

05_TWLOHA_Screen-snap_782x540

Deseo por MINIMAL de conectar

A menudo, los sitios web incluyen una página marcada Contacto. Estudio de diseño MÍNIMO quiere Conectar. Una palabra diferente evoca un tono diferente (que podría ayudar a marcar la diferencia para invitar una oportunidad).

«Conectar» suena más atractivo que «Contacto». Más humano, menos superficial.

06_Minimal_Screen-snap_782x540

Empujes para acceder al borrador

Debido a que es un formulario muy sobrio, un inicio de sesión / registro utiliza márgenes generosos. Nathan Kontny, quien hizo la aplicación de escritura Sequía, insertó los endosos de los usuarios junto al formulario. Pueden inducir a un posible usuario a probar, incluso adoptar, la herramienta.

Desde una perspectiva empresarial, la lección es: no sea tímido al mostrar impresiones positivas de los usuarios reales de su aplicación o servicio basado en la web.

07_Draft_Screen-snap_782x540

Colores de CreativeMornings

Junto a su ubicación, cada capítulo de Mañanas creativas se identifica por un color distinto. Este elemento persiste cuidadosamente en todo el sitio de CreativeMornings. Aparece en el menú desplegable del capítulo. Acentúa bordes, formas y otras formas divertidas. Se repite como una tira animada cuando se carga el contenido.

De manera sustancial y sutil, el sitio web de CreativeMornings está elegantemente coordinado por colores.

08_CreativeMornings_Screen-snap_782x540

Inicio de sesión ultradelgado de Polea

Creado por el mismo grupo que crea un mercado creativo, Big Cartel, para que los profesionales creativos exhiban y vendan su arte y productos. Polea, es una aplicación de comercio electrónico para vender descargas digitales.

Su inicio de sesión requiere solo la contraseña. Este es un caso recortado a propósito de entrada basada en web con una fricción muy reducida.

09_Pulley_Screen-snap_782x540

Historias de proyectos de Crush Lovely

Para darle un giro a las etiquetas convencionales como Estudios de caso y Portafolio, estudio creativo Crush Lovely presenta lo que hacen como Historias de proyectos. Este enfoque habla de la narrativa del trabajo. Porque un proyecto es esencialmente una historia, entre corchetes con un comienzo (inicio del proyecto) y un final (entrega del proyecto), y unida a un hilo narrativo (el proceso).

Este esquema se desarrolla después de seleccionar un ejemplo de cliente, del Historias de proyectos serie, para poder verla. Se notan otros cambios en el etiquetado: como parte de la introducción en la parte superior, en lugar del «objetivo», se vuelve a llamar «ambición»; como parte de la conclusión en la parte inferior, en lugar de «ver el video», se invita a los usuarios a «conocer el producto terminado».

En total, estas etiquetas ajustadas no dirigen al visitante del sitio web a una descripción seca del trabajo de la empresa. Ayudan a despertar la curiosidad y a señalar una historia encantadora.

10_Crush-Lovely_Screen-snap_782x540

Proyectos paralelos de Knoed Creative

Un Sobre nosotros La categoría relaciona la descripción básica de quién y qué de la empresa, que puede incluir su misión / visión / propósito. Knoed Creative insertó un Más allá de nueve a cinco sección que comparte el trabajo que hacen en el lateral. Aprovecha el fenómeno (y la necesidad) de los proyectos paralelos. También diversifica lo que se espera que muestre un “Acerca de nosotros”.

Ambos aspectos hablan de un carácter proactivo de la creatividad, que se extiende más allá de la jornada y el espacio de trabajo habituales.

11_Knoed-Creative_Screen-snap_782x540

Deja un comentario