Pages Layouts

Jerarquías:
1-Esquina Superior Izquierda:
Es la parte principal, ya que es lo primero que se carga y se ve.

-Twitter: Lo primero que se ve es el logo de la página, lo cual es bueno ya que te permite rápidamente identificar la página en la que te encuentras.




2-Espacios en Blanco:
Se usa como mensaje y da una sensación de orden

-Google: Da una perfecta sensación de orden ya que está muy sencilla su interfaz.


3-Fuentes Congruentes:
Te pone una serie de características en un orden de acuerdo a su importencia y jerarquía y esta tiene que ver con el mensaje.

-DaFont: Te ordena una lista de fuentes clasificadas por categorías.





4-Colores y Contrastes:
Le dá un color o caracteriztica diferente a cada sección de la página

-UCO: Dependiendo la carrera te ponen un color diferente para que ubiques y reconozcas rápido cada una.





5-Subordinación:
Tienen un orden, una jerarquía que te lo ordena por temas relacionados.

-UCO: Te pone un orden y una clasificación de cada zona con temas relacionados de cada uno.




6-Formas y Grupo:
Formas de agrupar los objetos.

-UCO: Te ordena los temas principales en un cuadro.





Flujo:
Es el orden que debe ser seguido al realizar una acción.

Agrupación:
7-Proximidad:
Todo lo que está junto tiene relación de estar junto.

-iTunes: Te ordena en la biblioteca en una misma sección todo lo que se transfiere al iPod, música, videos, aplicaciónes, etc.





8-Similaridad:
Lo que se parece está relacionado, formas iguales o funciones iguales.

-iPod: Las aplicaciónes, sus funciones suelen ser muy parecidas y las formas son muy parecidas también, están basadas todas en la misma forma.




9-Cierre:
Se agrupan cosas que estén relacionadas en una misma sección.

-Youtube: Te agrupa cosas de una misma sección en un cuadro para que busques toda la información de ese estilo que necesites.




Jerarquía
10-Visual Framework:
Varias vistas de una página, así el usuario decide con cual se queda, cual quiere usar.

-Faustinus: Decides en que versión quieres ver la página, si la versión antigua, o la acutal, dependiendo a cual te acomodes más




11-Center Stage:
Lo más importante es colocado en el centro.

-Faustinus: El menú principal te lo ponen el centro para que así decidas a donde ir. Y es lo más importante ya que es lo que va decidir como quieres tu navegación.



12-Title Sections:
Títulos en grande que nos indican dónde estamos.

-Youtube: Nos ponen en letras más grande el nombre del video que estámos viendo para así ubicarnos y saber donde estamos.




13-Card Stack:
Los datos se colocan en forma de tarjeta.

-Blogger: Nos muestra en forma de tarjetas el menú principal





14-Closable Panels:
Cuando los secciones o cuadros de información son movibles.

-Photoshop: Te permite cerrar cualquier cuadro que no quieras o no necesites





15-Movable Panels:
Cuando puedes mover y poner y quitar cuadros o secciones a tu antojo.

-Photoshop: o cualquier programa de adobe, te permite mover los módulos a tu conveniencia y como te acomodes.




16-Left/Right alignment:
La página está justificada, el texto y tiene que ver con el contenido.

-Hotmail: Se encuentra justificado, cada opción que te dan concuerda perfectamente con la otra que se abre.



17-Diagonal balance:
Los colores hacen ver balanceada la página.
-Twitpic: Los colores todos contrastan, combinan y da un equilibrio a la página





18-Responsive disclosure:
Abre contenido, dependiendo lo que necesites te va abriendo opciones diferentes.

-Youtube: Te muestra opciones cerradas, y ya dependiendo de lo que quieras se te abren otras opciones.




19-Responsive enabling:
Se activa el contenido, seleccionando una opción te abre otras opciones relacionadas con lo que elgiste anteriormente

-Adium: En el panel de preferencias te abre más opciones dependiendo de lo que selecciones.




20-Liquid Layout:
Cuando haces más chica o grande una página y esta se ajusta sola.

-Wikipedia: página que se ajusta dependiendo el tamaño que tengas abierto el browser.