preload

Patrones UI (User Interface)

Publicado el Martes 01 de Noviembre del 2016

Los Patrones UI (user interface) son un factor importante en el plano actual del diseño web. Ellos ayudan a mejorar la experiencia del usuario y la usabilidad de los websites. Los patrones de interfaz de usuario son modelos preestablecidos de diseño que garantizan que la página web sea intuitiva y fácil de usar.

Es por esto que muchas veces nos manejamos con muchísima facilidad dentro de un portal web sin haberlo visitado antes. Al desarrollar una página web, puedes combinar patrones que funcionen como punto de partida hacia un responsive website.

Estos son algunos de los patrones más utilizados y con mayor receptividad para el usuario:

Menú hamburguesa

Puede parecer que sea un elemento trillado, pero recuerda que en diseño web menos es más. Gracias a su simplicidad ha logrado posicionarse como un elemento clave y de fácil recordación, por lo que es un elemento reconocible en la actualidad que tiene su funcionalidad garantizada.

Off canvas

Este es un menú que se coloca fuera de la pantalla y solamente aparece cuando lo activamos. Funciona perfectamente en pantallas pequeñas y en las tienen mayor resolución, el menú aparecerá de manera normal sin activarlo.

Mostly fluid

Este diseño funciona a partir de una cuadrícula fluida y es una de las favoritas en diseño responsive. Estas cuadrículas se estrechan o se ensanchan dependiendo de la resolución de la pantalla desde la que se esté accediendo.

En las pantallas grandes y medianas, se suele mantener el mismo tamaño y en las más pequeñas el contenido se redistribuye.

Infinite scrolling

Seguro ya te has topado con este patrón y lo conoces muy bien. Básicamente consiste en mostrarte la información de manera continua sin rupturas (o sin límites) mientras navegas hacia abajo utilizando la rueda de tu mouse.

Grid layout

El ejemplo perfecto para este patrón es Pinterest. El contenido se divide en filas y columnas manteniendo el mismo espacio entre todos los elementos de la página para tener un resultado perfectamente balanceado.

Tiny tweaks

Este patrón te permite realizar pequeños cambios de diseño como cambiar el tamaño de las imágenes y ajustar el tamaño de la fuente. Es ideal para portales lineales de una sola página con mucho texto.

Fotones

Y es que estamos en una era donde la imagen comunica más que cualquier texto. Los fotones nos ayudan a captar la atención de nuestro usuario mostrando imágenes y videos en pantalla completo. Este ejemplo lo puedes ver en nuestro home.

This post is also available in: Inglés

Sé el primero en comentar “Patrones UI (User Interface)”

Transformamos ideas

Posted on Dec 06 2017 at 9:58 pm

Somos un estudio creativo dedicado a generar propuestas innovadoras y de altísima calidad en comunicaciones, [...]

Read More

SEM (Search Engine Marketing) para tu marca

Posted on Oct 20 2017 at 10:59 pm

Ya que conoces el SEO, es momento de entender a un gran aliado que da [...]

Read More

SEO (Search Engine Optimization) ¿Lo conoces?

Posted on Oct 13 2017 at 9:52 pm

Si estás en el mundo del marketing digital, seguramente has escuchado hablar del SEO ¿pero [...]

Read More