5 plantillas de diseño web receptivas realmente útiles – Usabilidad web y seo

5 plantillas de diseño web receptivas realmente útiles

Vistas: 48
0 0
Tiempo de lectura:6 Minutos, 14 Segundos


El diseño web receptivo requiere una visión completamente diferente del diseño que sea desafiante y divertido. El arte del diseño ha sido lo suficientemente difícil durante siglos como para definirse con elementos fijos, y ahora las cosas se vuelven exponencialmente más difíciles a medida que los diseños se vuelven más receptivos.

Para ayudarlo a reprogramar su cerebro para considerar los diseños de nuevas formas, vamos a echar un vistazo a algunos patrones de diseño receptivo interesantes que están implementando diseñadores talentosos en la web.

Empezando pequeño

Una de las formas más populares de implementar el diseño receptivo es simplemente dar anchos flexibles a las columnas de contenido en la página que se vuelven cada vez más estrechas a medida que el ancho de la página se hace más pequeño, hasta que ocurre un cambio importante hacia el diseño móvil de una sola columna. … Podemos ver esta técnica en acción en la web del hotel de lujo 137 Pillars House.

Como puede ver, el diseño en realidad está experimentando solo una transformación importante. El resto de la adaptación es muy gradual y es solo una reducción del diseño original.

Parece que esta es la razón por la que tantos diseñadores se esfuerzan por probar el diseño receptivo. Este es un gran lugar para comenzar porque puede llevar mucho menos tiempo y esfuerzo que unas pocas conversiones grandes, pero aún ofrece la ventaja de ofrecer una página web que se ve muy bien sin importar el tamaño de la ventana gráfica.

En lugar de simplemente coquetear con la capacidad de respuesta, quiero alentarlo a dar el paso y explorar las vastas posibilidades ahora disponibles para usted en términos de diseño de diseño. No me malinterpretes, no hay nada de malo en el enfoque anterior, pero siempre es útil desarrollar tus habilidades y expandir lo que crees que eres capaz de lograr.

Mondrian

Captura de pantalla

A Pete Mondrian le hubiera encantado nuestra primera plantilla de diseño web adaptable. Utiliza tres áreas de contenido simples y grandes, separadas por líneas gruesas. El estado inicial en sí es bastante versátil y puede resistir bien con una disminución de ancho bastante intensa.

Tan pronto como se vuelve demasiado estrecho para su estado original, el diseño de la pantalla ancha se adapta y se vuelve vertical. Para hacer esto, tome los dos rectángulos más pequeños de la derecha y muévalos debajo del rectángulo de selección grande. Este diseño luego se convierte en nuestra vista estándar de una columna para dispositivos móviles, donde cada contenido se pliega debajo del anterior.

Captura de pantalla

Las galerías de miniaturas son una plantilla de diseño popular que existe desde hace casi tanto tiempo como Internet. Los diseñadores de estos días tienden a ceñirse a lo mínimo: rectángulos simples espaciados uniformemente sobre un fondo sólido. Es muy fácil reformatear este formato al cambiar la ventana gráfica. Solo necesita reducir el número de columnas varias veces.

Hemos cubierto este proceso en detalle en nuestro artículo sobre la creación de una galería de miniaturas receptiva, así que asegúrese de revisarlo si está buscando una guía paso a paso del proceso.

En la naturaleza salvaje

Para ver este patrón en un sitio real, consulte el portafolio de Brad Sawicki. Justo en su página de inicio, comienza con una galería simple de tres columnas que se colapsa en una columna doble y finalmente en una sola. La ventaja aquí es que las dimensiones de la imagen de vista previa de trabajo aprovechan al máximo la ventana gráfica disponible para que el espectador siempre pueda verlas en un bonito formato grande.

Captura de pantalla

Este es muy similar al diseño de la galería, excepto que se centra más en seleccionar varios elementos en lugar de varios. El ejemplo aquí usa cuatro elementos destacados, pero es tan popular o incluso más popular ver tres elementos en su lugar.

Como puede ver, el diseño comienza con cuatro elementos presentados junto con parte del contenido introductorio anterior. Luego sigue el camino de la galería, descendiendo a dos columnas y finalmente a una. Observe cómo se adapta el contenido introductorio: la navegación va desde el lado derecho para alinear el lado izquierdo debajo del encabezado o logotipo principal.

Voltear una columna

Captura de pantalla

Este es uno de los patrones más complejos. Hay algunos elementos realmente grandes en la parte superior del diseño que llaman su atención y presentan el sitio. La siguiente sección se divide en tres columnas, pero a medida que el navegador se encoge, la primera columna se voltea hacia un lado y se convierte en una fila por encima de las otras dos columnas.

Esta es una conversión bastante compleja, pero bastante efectiva. Puede implementar esto fácilmente simplemente agregando una consulta de medios que mueva los elementos en esa columna hacia la izquierda y luego borre el flotador para mantener las otras dos columnas intactas.

El último paso es, por supuesto, la reorganización en una sola columna ancha. Puede desplazarse mucho, pero siempre que no inundes la página con contenido, no es tan malo.

En la naturaleza salvaje

La inspiración para este diseño proviene de otra empresa de desarrollo, Palantir. Tenga en cuenta que los desarrolladores web experimentan primero con el diseño receptivo en sus sitios, lo que puede servir como una gran experiencia de aprendizaje y un ejemplo para los clientes.

Palantir es un excelente ejemplo de cuán radicales pueden ser sus transformaciones en el diseño web receptivo. Esto es más que simplemente disminuir el ancho de la columna o eliminarlo por completo, es un rediseño importante del contenido de la página para aumentar continuamente el ancho disponible.

Funciones de reproducción aleatoria

Captura de pantalla

Esta última plantilla presenta un enfoque diferente a la idea de elementos seleccionados. Me gusta mucho porque se dobla ligeramente en el primer reflujo. En lugar de simplemente navegar a dos columnas y navegar hacia la izquierda, crea un diseño de tablero de ajedrez de dos columnas donde las secciones se mueven hacia ambos lados.

Para un diseño de una sola columna, las miniaturas se eliminan por completo para enfatizar más contenido textual. Por supuesto, esto es opcional, con la misma facilidad que puede implementar uno de los formatos de columna única anteriores.

En la naturaleza salvaje

Orestis utiliza esta plantilla en su sitio web. Los tres elementos presentados son los servicios que ofrecen, cada uno representado por una colorida ilustración.

Cuando cambia el tamaño del navegador, los servicios se acumulan y las imágenes se mueven hacia la izquierda o hacia la derecha. Este es un sitio divertido y peculiar que debe probar usted mismo para comprender realmente cómo funciona todo.

Más modelos

En mi investigación para este artículo, encontré un artículo existente de Luke Wroblewski sobre el mismo tema. En lugar de mirar plantillas muy específicas como lo hice aquí, Luke hace un trabajo increíble al desglosar los diseños generales en sus ideas más básicas y mostrarle cómo funcionan. Este es un gran trabajo y me encanta cómo muestra cómo funciona el diseño tanto dentro como fuera del lienzo.

Conclusión

Espero que estés pensando en diseños adaptables ahora. La comunidad de diseño web ha pasado mucho tiempo discutiendo los aspectos técnicos de cómo se logra CSS receptivo con consultas de medios, y definitivamente es hora de que comencemos a pensar profundamente sobre los aspectos reales del diseño de esta nueva y emocionante frontera.

Deje un comentario a continuación y háganos saber lo que piensa de estas plantillas de diseño receptivo. ¿Usarías alguno de ellos en tu trabajo? ¿Por qué o por qué no?

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post ¡Creemos un chatbot !. Desarrollando una herramienta que ayudará a los niños
Next post 10 frases y términos de UX que necesita saber ahora mismo

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta