Está en la página 1de 5

Datos del Alumno Fecha

Nombre completo Matrícula


Miguel Angel Perez Canuto 17307055 25/06/2020

Patrones de diseño
Uno de los principales objetivos que se buscan al llevar a cabo la estructuración de una página web, es que
el contenido sea mostrado de manera adecuada para que el mensaje que se busca transmitir al usuario
sea recibido de forma efectiva.

Para lograr esto se recurre al uso de patrones de diseño web, los cuales ofrecen soluciones a problemas
de percepción que se pueden presentar dentro de nuestro layout.

Sin embargo no debemos pensar en ellos como reglas o imposiciones sobre la creatividad y variabilidad
que se puede presentar en una web, simplemente son sugerencias para el desarrollo las cuales nos indican
qué partes son de mayor interés para la vista de los usuarios.

Patrón de Lectura Gutenberg

Este patrón es generalmente asociado con avisos impresos y grandes bloques de texto (de ahí su nombre).
Dado que las páginas web tienen un tipo de lectura muy diferente al del diseño impreso, este tipo de
patrón no es tan común en formatos digitales. Sin embargo, con el surgimiento de la tendencia de grandes
imágenes de cabecera (también conocidas como hero images), o páginas diseñadas para tabletas, este
patrón se vuelve a ver.

El patrón Gutenberg básicamente se explica por los ejes de orientación y la gravedad. Dado que en
Occidente leemos de izquierda a derecha y de arriba a abajo, nuestra mirada se focaliza en puntos de
atención que siguen esta dirección.

El patrón Gutenberg divide el área visual en 4 partes divididas por ejes de coordenadas. Estas partes tienen
distintos grados de interés, que se relacionan con el eje de dirección de lectura izquierda-derecha y con
el eje de gravedad (arriba a abajo). Sin embargo, este eje de gravedad no cae verticalmente como lo haría
una piedra, sino que es influenciado por el eje de dirección. Imaginen una hoja que cae de un árbol y es a
la vez soplada por el viento, cayendo así en forma oblicua.

Patrón Z

El patrón-Z es un patrón de lectura que forma una Z. Este patrón fue uno de los más comunes por largo
tiempo, y aún se sigue viendo constantemente. Como podrán apreciar, es casi igual al Gutenberg, pero en
este patrón los usuarios pasan por las áreas de seguimiento débiles y fuertes.

Este patrón luce de la siguiente manera:

Asignatura Carrera
Ingeniería en Tecnologías de la Información
Desarrollo de Aplicaciones Web Actividades de Investigacion y Tareas Digitales
Datos del Alumno Fecha
Nombre completo Matrícula
Miguel Angel Perez Canuto 17307055 25/06/2020

Aplicada a una página web se ve así:

Patrón F

Finalmente el patrón-f es hoy por hoy el más común, y es aquel en que los usuarios pueden percibir un
patrón con forma de letra F o E. Este patrón fue descubierto por Norman Nielsen Group luego de estudiar
miles de casos por medio de la técnica de registro visual o eye tracking. Al analizar los resultados,
descubrieron que la gran mayoría de los usuarios escanean un sitio formando este patrón de F.

Asignatura Carrera
Ingeniería en Tecnologías de la Información
Desarrollo de Aplicaciones Web Actividades de Investigacion y Tareas Digitales
Datos del Alumno Fecha
Nombre completo Matrícula
Miguel Angel Perez Canuto 17307055 25/06/2020

Técnicas responsivas
Mostly Fluid.

Este patrón consiste en tener una grilla o Grid de tamaño flexible.

Cuando estamos en un smartphone todo forma una única columna, y en varias filas quedan colocados los
distintos bloques.

Según vaya creciendo la pantalla, los distintos bloques se agrupan ocupando toda la pantalla disponible.

En pantallas más grandes, el diseño es el mismo pero queda agrupado dentro de un contenedor que queda
centrado en la página con un tamaño fijo de ancho.

Column Drop.

Este patrón consiste en que cada bloque de contenido, que en un smartphone vemos en filas, vaya
formando columnas según vaya siendo más grande la pantalla del dispositivo.

Asignatura Carrera
Ingeniería en Tecnologías de la Información
Desarrollo de Aplicaciones Web Actividades de Investigacion y Tareas Digitales
Datos del Alumno Fecha
Nombre completo Matrícula
Miguel Angel Perez Canuto 17307055 25/06/2020

Tendremos un primer breakpoint donde la segunda fila pasa a ser columna, pero ocupando la primera
posición, habitualmente para un menú de navegación.

El contenido que aparecía en primer lugar en la versión móvil, pasa a ocupar la segunda columna en el
primer corte.

Tendremos un segundo punto de corte donde la última fila se convierte en columna también.

Layout Shifter.

Este es uno de los patrones más complejos. Consiste en mover los bloques de contenido cambiando
totalmente el Layout, de ahí el nombre del patrón.

Gracias a Flexbox, estos cambios podemos realizarlos con mayor facilidad.

Las columnas 2 y 3 estarán englobadas dentro de un bloque que llamaremos container-inner que nos
permitirá hacer el cambio de layout.

Tiny Tweaks.

Es el patrón más simple y sencillo de implementar de todos. Se basa en una sóla columna para el contenido.

Sus cambios son básicamente que, dependiendo del tamaño de pantalla, se amplían los espaciados y el
tamaño de fuente.

Es muy utilizado en sitios con mucho contenido escrito, así mejoran la experiencia de lectura.

Asignatura Carrera
Ingeniería en Tecnologías de la Información
Desarrollo de Aplicaciones Web Actividades de Investigacion y Tareas Digitales
Datos del Alumno Fecha
Nombre completo Matrícula
Miguel Angel Perez Canuto 17307055 25/06/2020

Off Canvas.

Para el final he dejado el patrón más complejo de implementar pero uno de los más utilizados, sobre todo
en aplicaciones móvile.

Este patrón esconde contenido en la pantalla y únicamente es visible si realizamos un determinado gesto.
Este contenido oculto normalmente es un menú de navegación. Cuando la pantalla es más ancha, este
contenido se hace visible.

Bibliografía

Fabio Devin. (2017). Patrones de seguimiento visual y cómo usarlos en experiencia de usuario. 25 de Junio
de 2020, de Uxpanol Sitio web: http://uxpanol.com/experiencia-de-usuario/patrones-de-seguimiento-
visual-y-como-usarlos-en-experiencia-de-
usuario/#:~:text=Patr%C3%B3n%20de%20lectura%20Gutenberg&text=El%20patr%C3%B3n%20Gutenbe
rg%20b%C3%A1sicamente%20se,atenci%C3%B3n%20que%20siguen%20esta%20direcci%C3%B3n

Carlos Azaustre. (2015). Los 5 patrones del responsive Desing con Flexbox. 25 de Junio de 2020, de
CarlosAzaustre Sitio web: https://carlosazaustre.es/los-5-patrones-del-responsive-design/

Asignatura Carrera
Ingeniería en Tecnologías de la Información
Desarrollo de Aplicaciones Web Actividades de Investigacion y Tareas Digitales