Sesión, 18

PAGE LAYOUT:

PRINCIPIOS Jerarquía:

1.-Esquina superior izquierda: Le da el enfoque de la página en algún lugar, es decir, así cómo el logotipo para que tenga más apoyo visual de la empresa en alguna parte de la página.



-Espacio en blanco: En este ejemplo podemos ver como se dejan algúnos espacios vacíos y la información y puntos claves son fáciles de localizar.



-Fuentes Congruentes: En este tipo de páginas las tipografía se utiliza para darle un toque más original y que por medio de esta puedas transmitir tu información, puedes ponerle colores y texturas para hacer más rico el contenido.



-Colores y Contrastes: Los colores nos ayudan a localizar y darle una taxonomía a los elementos de la página.



-Subordinación: El principal objetivo de este punto, es que algún tema que quieren que resalte en la página se le pone algún otro color a la tipografía para que se vea, y ya los demás subtemas se ponen de un color más claro o plano.



-Formas y grupos: Aquí la información está acomodada de cierta manera en que se vea que tiene un orden, puede estar agrupada por formas o color.


FLUJO

Es un programa que nos permite avanzar fácilmente. Te da las preferencias de tu documento.





AGRUPACIÓN:

Proximidad: Tenemos a nuestro contenido uno cerca del otro, para así ser más sencilla la forma de buscar algo.


Similaridad: El guardar siempre nuestro menú en el mismo lugar hace que nuestro usuario tenga una navegación más sencilla, en este caso de la página de Oscar de la Renta el menú nunca cambia de lugar, color y tipografía.



Continuidad: Aquí todos estos cuadros nos hablan de un mismo tema y guarda un margen para todos.



PATRONES DE JERARQUÍA
Visual Framework: Se mantiene el mismo fondo así naveges de atrás hacia adelante todo el tiempo en la página.





Central Stage: Lo más relevante se encuentra al centro de la página.



PATRONES DE AGRUPACIÓN:
1.- Titled Sections: Tenemos un menú del cuál se van a desplegar otros menus.


Card Stack: En este ejemplo de la página de Taylor Swift sus fotografías están de esta forma ya que si le das click a una se te abrirán en la patnalla completa.




Movable Panels:
En esta aplicación nosotros ponemos lo que deseamos quitar y poner como usuario.



PATRONES DE FLUJO:
Left/Right Alignment:
Los usuarios en esta categoría se encuentral del lado izquierdo de la pantalla y en el derecho el asunto de nuestro correo electrónico. Así se separa la información.


Diagonal Balance:
Es un patron que contiene un balance diagonal es decir si lo cortamos, se ve parecido de ambos lados y con equilibrio.

PATRONES FLUJO:
Responsible Disclosure:
Si damos click en esta aplicacion nos abre el campo que deseamos. Es decir responde a nuestras necesidades.

Responsible Enabling:
Se activan opciones de las que ya teníamos

Liquid Layout:
Tiene el efecto red, es decir si hacemos más grande nuestra página se expande nuestra información se adapta al tamaño de nuestra página web sin cortarse