Desarrollo de Aplicaciones Web Patrones de Diseño Web Desarrollo de Aplicaciones Web I.S.C. Luis Alberto Ruiz Aguilar PTC UTSH

Introducción 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 página

Diagrama de Gutenberg Lo que nos define este diagrama, en principio, es una estructura basada en el movimiento que sigue el ojo humano por inercia, este movimiento hace que se termine presentando más atención a ciertas partes del objeto desplegado, por lo que dichas partes toman más relevancia en el diseño.

Diagrama de Gutenberg … http://introduccioncodigophp.blogspot.mx/2012/10/patrones-de-diseno-web.html

Diagrama de Gutenberg … Para utilizar este diagrama como patrón de diseño se debe de tener muy en cuenta las siguientes indicaciones para distribuir ordenadamente todos los elementos: Nuestra área de exposición estará dividida en cuatro partes. Cada cuadrante representa una zona óptica. La más importante de ellas es la ubicada en la parte superior izquierda y recibe el nombre de zona primaria.

Diagrama de Gutenberg … La siguiente en la estructura es la zona de barbecho fuerte, que se encuentra ubicada en el extremo superior derecho. En la parte inferior izquierda encontramos la zona que presenta menos atención, la zona de barbecho débil. Finalmente en la parte inferior derecha se encuentra la zona terminal.

Diagrama de Gutenberg … Un uso a este patrón que generalmente se da en los sitios web, es cuando se coloca el logo en la zona principal, el contenido importante se despliega en la zona de en medio y alguna información de contacto o de registro se coloca en la zona terminal. Es recomendado utilizar este patrón cuando presentamos grandes cantidades de texto, si este no es tu caso y tienes bien definida una jerarquía visual, quizás sea recomendable utilizar otro tipo de patrón.

Patrón Z en diseño web Este patrón se encarga de definir el diseño de un sitio en base a la forma de la letra Z. http://introduccioncodigophp.blogspot.mx/2012/10/patrones-de-diseno-web.html

Patrón Z en diseño web … Los usuarios empezarán a percibir la información de la esquina superior izquierda, moviéndose horizontalmente hacia la esquina superior derecha, después de manera diagonal irán hasta la parte inferior izquierda para finalmente terminar con la parte inferior derecha. El patrón Z es recomendable para páginas con un diseño web simple, con pocos elementos que necesiten de completa atención Este puede ser aplicado a casi cualquier proyecto de diseño web, ya que cumple con las necesidades básicas de cualquier sitio, presentar una marca, tener jerarquía, establecer una estructura y llamar a la interacción

Patrón F en diseño web Los usuarios que se enfrentan al contenido de una página web, utilizan un movimiento en forma de F para buscar la información que requieren. Ese es el resultado del estudio realizado por Jacob Nielsen, publicado en su sitio useit.com. El estudio se basó en el análisis del movimiento ojos de 232 usuarios enfrentados a 3 tipos de páginas comunes en un sitio web corporativo: un artículo, la descripción de un producto y un resultado de búsqueda.

Patrón F en diseño web … La imagen muestra en colores cuales son las áreas más vistas por los usuarios. El grado de atención es mayor en las áreas rojas, decreciendo en las amarillas (atención media) y azules (atención baja). http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Patrón F en diseño web … El patrón F es una técnica que en lugar de tratar de forzar el flujo visual del espectador, cede a los comportamientos naturales de la mayoría de los usuarios Este es un patrón diseñado especialmente para sitios que muestran mucho texto, pero que a la vez tienen imágenes de acompañamiento, por lo que es ideal para blogs y sitios de noticias.

Patrón F en diseño web … El comportamiento definido por este patrón es el siguiente: El usuario ingresa al sitio y centra su vista en la esquina superior izquierda de la página. Después escanea la parte superior del sitio, donde generalmente se encuentra la barra de navegación, la búsqueda, entre otros elementos. Prosigue con una lectura hacia abajo, donde percibe el contenido en filas y en caso de existir una barra lateral se analiza su contenido. Al final los usuarios repiten el patrón con el resto del contenido del sitio.

Patrón F en diseño web … La razón por la que el patrón F funciona muy bien en los diseños de los sitios, es porque está fundamentado en un escaneo natural del usuario a la página. Basa su éxito en lo que se muestra en la parte superior del sitio, es esta parte donde generalmente el usuario centra la atención cuando ingresas a una página por primera vez. Nota: Este patrón debe ser aplicado únicamente para mostrar el contenido principal de los sitios web y no debe tratarse de extenderlo para todo el resto del diseño.

Referencias http://introduccioncodigophp.blogspot.mx/2012/10/patrones-de-diseno-web.html , 04 de octubre de 2012. Fecha de consulta: 27-05-2013 Jakob Nielsen’s Alertbox. F-Shaped Pattern For Reading Web Content. http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/, abril de 2006. Fecha de consulta: 27-05-2013