. PAGE LAYOUT .
(patrones)
PATRÓN DE JERARQUÍA
Visual Framework
Ej. en la página Hellcats Records se muestra el mismo diseño en cada una de las páginas a las que entramos, como: noticias reciente, fotos, videos, artistas, etc.
Center Stage
PATRONES DE FLUJO
Left/Right Alignment
Es la forma en que el texto va a ir justificado en la página (izquierda o derecha) y si eso tiene que ver con el contenido.
Ej. La página typoberlin (asi como la mayoría en la Web) utiliza la alineación hacia la izquierda, pero lo que no todas manejan es el alineamiento de los elementos o de las noticias más importantes, por ejemplo en esta página, utilizan bien los puntos áureos además de que es más cómoda para el usuario, ya que no contiene scroll down, es una página que está bien hecha y tiene buen balance en color e imágenes.
Diagonal Balance
Se refiere al balance de color de una página, que debe ser en forma diagonal (si estamos viendo el espectro de colores) para que esté equilibrada.
Ej. En la opción "curvas" del menú "imágen>ajustes" de photoshop podemos observar la línea diagonal de cada color la cual aparece diagonalmente, como la imágen de abajo.
Si esta línea diagonal se modifica, dependiendo la dirección todos los colores cambiarán, como en la imagen.
PATRONES DE AGRUPACIÓN
Titled Sections
Cuando nos exponen los temas que contiene la página y cuando seleccionamos alguno se abre una lista con los subtemas.
Ej. En la página de KERRANG! se muestra el menú y al seleccionar un tema principal enseguida se extiende un panel con los temas relacionados.
Closable Panels
Cuando la página nos muestra varios paneles con información diferente y el usuario puede abrirlos y cerrarlos por separado.
Ej. En cualquier blog de Blogspot aparece en cualquiera de los lados un panel con la fecha en que han sido las publicaciones, por ejemplo:
Movable Panels
Cuando la aplicación te permite mover los panels y acomodarlos donde te guste más o te sea más fácil localizarlos.
Ej. Facebook, no necesitas entrar al modo "editar" o algo así, basta con colocar el mouse encima del panel a modificar para que aparezca una mano, que indica que puedes moverlo, y sólo dando click y arrastrando puedes modificar la ubicación del panel, como se muestra en la imagen a la derecha.
Card Stack
Reúne información diferente en cada ventana o pestaña y únicamente se puede abrir y ver el contenido de uno a la vez.
Ej. En la página de Apple se muestran estas pestañas, el usuario puede seleccionar sólo una de ellas, se pueden agupar como "Titled sections" mas no tienen esta capacidad de abrir varias al mismo tiempo.
El contenido se encuentra agrupado en el centro de la página.
Ej. La página Lush Designs maneja center stage toda centro por medio de un rectángulo el encuentran temas lado izquierdo y la detallada del es muy obvia esta en este ejemplo porque se pueden apreciar a simple vista que los lados están vacíos.
PATRONES DINÁMICOS
Liquid Layout
Se refier e a las páginas que al momento de reducir su tamaño todo el contenido y los elementos se van adaptando al tamaño, de manera que, de alguna forma (nada práctica) se pueda seguir navegando en ella.
Ej.La página de Wikipedia mientras vamos cerrando la ventana poco a poco se puede apreciar cómo los elementos se van acomodando y adaptando a la forma de la ventana, ya sea cuadrada o rectangular.
Responsive Disclosure
La aplicación responde de acuerdo a lo que el usuario selecciona.
Ej. Al abrir la página de Emily Haines nos aparece, antes que nada, la opción de suscribirte y la opción de entrar a la página oficial.
Si seleccionas la opción de suscribirte se abre una nueva ventana en la que se ingresan los datos, aquí es cuando la página responde a nuestra petición. Del mismo modo si queremos ir directamente a la página sólo damos click en la otra opción y ya está.
Responsive 
Enabling
Ej. Al abrir la página de Emily Haines nos aparece, antes que nada, la opción de suscribirte y la opción de entrar a la página oficial.
Si seleccionas la opción de suscribirte se abre una nueva ventana en la que se ingresan los datos, aquí es cuando la página responde a nuestra petición. Del mismo modo si queremos ir directamente a la página sólo damos click en la otra opción y ya está.
EnablingCuando, generalmente en los programas te dan a elegir entre varias opciones y al deseleccionar alguna, por consiguiente se desactivan las que estan relacionadas.
Ej. En las aplicaciones como Word al abrir el menú de preferencias, como se muestra en las imagenes de a bajo, deseleccioné la opción de “usar copiar y pegar” y como consecuencia se desactivó la opción de configuración, ya que etá relacionada con la opción que desactivé.
Ej. En las aplicaciones como Word al abrir el menú de preferencias, como se muestra en las imagenes de a bajo, deseleccioné la opción de “usar copiar y pegar” y como consecuencia se desactivó la opción de configuración, ya que etá relacionada con la opción que desactivé.
PATRONES DE FLUJO
Es la forma en que el texto va a ir justificado en la página (izquierda o derecha) y si eso tiene que ver con el contenido.
Ej. La página typoberlin (asi como la mayoría en la Web) utiliza la alineación hacia la izquierda, pero lo que no todas manejan es el alineamiento de los elementos o de las noticias más importantes, por ejemplo en esta página, utilizan bien los puntos áureos además de que es más cómoda para el usuario, ya que no contiene scroll down, es una página que está bien hecha y tiene buen balance en color e imágenes.
Se refiere al balance de color de una página, que debe ser en forma diagonal (si estamos viendo el espectro de colores) para que esté equilibrada.
Ej. En la opción "curvas" del menú "imágen>ajustes" de photoshop podemos observar la línea diagonal de cada color la cual aparece diagonalmente, como la imágen de abajo.
------------------->
PATRONES DE AGRUPACIÓN
Cuando nos exponen los temas que contiene la página y cuando seleccionamos alguno se abre una lista con los subtemas.
Ej. En la página de KERRANG! se muestra el menú y al seleccionar un tema principal enseguida se extiende un panel con los temas relacionados.
Cuando la página nos muestra varios paneles con información diferente y el usuario puede abrirlos y cerrarlos por separado.
Ej. En cualquier blog de Blogspot aparece en cualquiera de los lados un panel con la fecha en que han sido las publicaciones, por ejemplo:
Cuando la aplicación te permite mover los panels y acomodarlos donde te guste más o te sea más fácil localizarlos.
Ej. Facebook, no necesitas entrar al modo "editar" o algo así, basta con colocar el mouse encima del panel a modificar para que aparezca una mano, que indica que puedes moverlo, y sólo dando click y arrastrando puedes modificar la ubicación del panel, como se muestra en la imagen a la derecha.
Reúne información diferente en cada ventana o pestaña y únicamente se puede abrir y ver el contenido de uno a la vez.
Ej. En la página de Apple se muestran estas pestañas, el usuario puede seleccionar sólo una de ellas, se pueden agupar como "Titled sections" mas no tienen esta capacidad de abrir varias al mismo tiempo.
No hay comentarios:
Publicar un comentario