Quinto Cuatri Interfaz: 17a y 18a Sesión

PAGE LAYOUT
Como distribuir el contenido en la pantalla.

1. PRINCIPIOS

1. JERÁRQUICO
Organizar el contenido por tamaño, información, etc.
ESQUINA SUPERIOR IZQUIERDA. Se le llama también la esquina privilegiada, es lo primero que vez en un página de internet, algo muy raro porque en la fotografía la esquina superior derecha es la más importante.Podemos ver como en la siguiente página el logo esta en esta esquina, entonces si cumple con este principio.
ESPACIO EN BLANCO. Tienen muchos espacios en blanco y eso nos da una sensación de orden.
FUENTES CONGRUENTES. No se ve mucho la jerarquía de las tipografías, si se nota cuales son los títulos pero en algún momento se pueden confundir por el tamaño tan similar entre ellas.
COLORES Y CONTRASTE. Se utiliza el color azul para saber cual es el titulo y los temas importantes, aunque es muy monótono.
SUBORDINACIÓN.
FORMAS Y GRUPOS.

2. FLUJO. Se refiere a que la información este ordenada para que no te confundas y sepas que es lo que sigue. Podemos ver que la información esta bien ordenada y el usuario no se pierde entre tantos textos o imágenes.

3. AGRUPACIÓN
PROXIMIDAD. Todo lo que está cerca es congruente con lo que se muestra.
SIMILITUD. Hay formas iguales para las funciones iguales, por ejemplo el botón de buscar en donde te metas será igual del color rojo.
CONTINUIDAD. La relación de formas continuas tienen relación y es natural.
CIERRE. La vista tiende a cerrar espacios para agrupar lo relacionado. No tienen muchas imágenes que el ojo humano tienda a cerrar las imagines.

1. PATRONES DE JERARQUÍA
VISUAL FRAMEWORK. El fondo se mantiene igual, es blanco.
CENTRAL STAGE. Lo más importante está en medio de la página por ejemplo donde pones lo que quieres buscar.

2. PATRONES DE AGRUPACIÓN
TITLE SECTIONS. Las secciones tienen un título de donde se van desplegando otros títulos.
CARD STAGE. Cada vez que le das click a alguno de los títulos se abre la información en forma de tarjetas sin perder el mismo fondo.
CLOSE STAGE
CLOSABLE PANELS.
MOVABLE PANELS. No se pueden mover los paneles a tu antojo.

3. PATRONES DE FLUJO.
LEFT/ RIGTH ALIGNMENT. Se refiere a que se puede justificar la información a la derecha o izquierda según sea su caso, en este ejemplo podemos ver que la información de la página más importante está de lado derecho.
DIAGONAL BALANCE. Parece que esta muy lleno de información, pero esta bastaste equilibrado.

4. PATRONES DINÁMICOS.

RESPONSIVE DISCLOSURE. Siento que casi odas las páginas tienen este tipo de patrón ya que al dar click a una opción se abre el contenido que deseas ver. como el de la página de http://www.cinepolis.com.mx/indexmx.asp

RESPONSIVE ENABLING.Con este ejemplo es mucha más sencillo de entender en que se basa este patrón, cuando le das click a una opción se activa un contenido que no se podía seleccionar.