PAGE LAY OUT.

Principios: Jerarquía, flujo, agrupación.

Jerarquía

Esquina superior izquierda: En la pagina de Ducati lo primero que ves es el logo de ducati para que el usuario se quede con la imagen de ducati ya que va a ser lo primero que va a visualizar

Espacio en blanco: En la pagina de turnerduckworth es una compañia de diseño se tiene mucho espacio en blanco el cual usan como tipo de diseño pero tambien permite una pagina mas limpia y clara no tan saturada.

Fuentes congruentes: En la pagina de mcdonalds se muestra su productos de en cuestión de tamaña es decir los mas importantes son de mayor tamaño que los que no son tanto.

Colores y contrastes: En la pagina de lenovo los titulos van en otro color para que el usuario pueda distinguir entre temas y subtemas.

Subordinación: en la pagina de univision se muestran los titulos de los temas en un recuadro y otro color mientras que los subtemas van debajo de los temas y en otro color.

Formas y grupos : En la pagina de adidas todo se muestra en forma de imagenes cuadradas o rectangulares en las cuales el usuario tiene que dar click para acceder a el tema que desee.

Flujo

En la pagina de Johnnie Walker tienes que ir paso a paso para poder ingresar lo primero que tienes hacer es poner tu fecha de nacimiento par ver si puedes tener acceso a algun tipo de contenido.

Agrupación

Proximidad: En la pagina de Calvin Klein toda la colección de ropa se muestra en fotos que se encuentran juntas y el usuario puede dar click en la imagen para ver esa colección.
Similaridad: En la pagina de oxxo todo el sitio mantiene el mismo estilo es decir el mismo menú solo cambia la imagen de acuerdo al contenido que desea ver el usuario lo cual al ser muy similar todo permite al usuario no distraerse con nada mas y centrarse en el contenido que desea ver.
Cierre: En la pagina de ESPN la información que tiene relación se ageupa en diferentes temas para que el usuario tenga claro donde buscar y que va encontrar ahí.

Patrones de Jerarquía.

Central stage: Aquí el contenido mas importante se muestra al centro de la pantalla.
Visual framework: En la pagina de nivea se mantiene la misma estructura dentro de la pagina siempre.

PATRONES DE AGRUPACIÓN.

Card stack: Muestra el contenido en forma de tarjetas como en la pagina de bimbo.

Tiled sections: Cada tema en la lista muestra su subtema al centro de la pantalla como en la pagina de bimbo que muestra una lista con productos y a un lado muestra el producto.

Sesión 17 reflexión

En esta sesión vimos varios temas los cuales se me hicieron muy útiles a la hora de analizar una pagina ya que son mas fáciles de identificar y me parecieron que estos podrán ayudarnos a ampliar nuestro criterio en cuanto al análisis de una pagina.

PAGE LAY OUT

Principios que se divide en agrupación, flujo y jerarquía.

Flujo: La información fluye de acuerdo a lo que se quiere mostrar al usuario.

Agrupación: Esta se divide en 3 ramas:

Proximidad: Lo que se encuentra junto dentro de la pagina tiene una relación.

Similaridad: Lo que se parece tiene relación

Cierre: La vista tiene a cerrar espacios para agrupar lo relacionado

Patrones de jerarquía:

Visual Framework: que todas las páginas de un sitio tengan la misma estructura o estado cero y cambian según usuario.

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

PATRONES DE AGRUPACIÓN:

Titled Sections: Cada sección lleva su título y sus respectivos subtemas.

Card Stack: Cada agrupación es como una tarjeta.

Sesión 15 extracase

Color coded selection

Es cuando dentro de la pagina se resalta alguna sección o link con colores o texturas

Sequence maps

Es cuando nos va diciendo en que paso de la tarea vamos paso1, paso2 etc.

Bread Crumbs

Es cuando dentro de la pagina nos da las opciones de regresar al principio o navegar dentro de la pagina con los botones que se encuentran dentro de la pagina.
Anoted scroll bar

Es cuando nos muestra en pagina estamos como word, pdf, o powerpoint.

Sesión 14 extraclase

Modal panel

En blogger cuando intentas subir una imagen y le das click en subir imagen sin haber seleccionado la imagen antes te aparece una ventana de advertencia.

Pyramid

En la pagina de armani se muestran los links que te llevan a otras paginas y de esta manera se van entrelazando las diferentes paginas de armani

Hub and spoke

En la pagina de ESPN en un juego de futbol te nuestra el numero de relaciones que tienes con el resto de los competidores.

Global navigation

En la pagina de pronosticos se tien un espacio donde se encuentran los logos de los diferentes sorteos que tienen y si das click a los logos te lleva al espacio del sorteo

Clear entry points

En la pagina de la NFL se tiene una barra del lado izquierdo que tiene una serie de acciones para que realice el usuario y se muestren en el lado derecho

Sesión 13 extraclase

Wizard

Es una aplicación que te va guiando paso a paso para realizar la instalación de algun software o cualquier otra tarea.

Extras on demand

Te muestra nada mas lo importante con es esta pagina que solo muestro imágenes con diferente contenido para seleccionar a donde acceder como puede ser identidad corporativa, blog, o ilustraciones así el usuario elige hacia donde quiere ir.

Sesión Extraclase

Patrones físicos de organización de contenido.

One-window drill down.- Es un menú que permite navegar por una pequeña pantalla mostrando solo lo necesario

Alternative views.- Te permite tener diferentes vistas de un mismo objeto o interfaz.
Canvas plus pallete.- Tiene una barra de herramientas que te permite modificar o editar.
Two panel selector.- Tiene dos paneles donde te permite interactuar con el interfaz

Sesión 16

En esta sesión vimos lo que fue la exposición de aplicaciones de colaboración de equipo o groupware que nos permite trabajar en equipo sin estar físicamente ya que lo puedes hacer estando en cualquier parte del mundo donde te puedas conectar a internet estas aplicaciones permiten trabajar de manera mas eficaz y rápida evitando traslados que te quitan tiempo y dinero, de esta manera puedes realizar tu trabajo mas rápido, también puedes tener un orden mas estricto sobre tu manera de trabajo al igual que una agenda o video conferencias.

En esta sesión el profesor invito a un diseñador el cual nos explico como es el verdadero campo laboral como es la relación cliente - diseñador también nos mostró una pagina que hizo algunos años atrás la cual vamos a analizar.

Sesión 15

En esta sesión vimos la exposición de aplicaciones para compartir contenido

donde vimos como las aplicaciones para compartir contenido estan presentes en todo el web 2.0 ya que estas son las que nos permiten interactuar con lo que hoy es el internet las aplicaciones para compartir contenido ya casi se encuentran en todo el internet.

Sesión 14

En esta sesión vimos la exposición de microblogging y los patrones de navegación:

Microblogging:

Es una aplicación que permite realizar publicaciones breves o dejar comentarios breves en otros usuarios por lo regular es solo texto aunque permite subir también imagenes o ligas de paginas o artículos. Es una aplicación que permite estar en contacto en todo momento ya que puedes realizar publicaciones desde tu teléfono móvil para estar en contacto en todo momento.

Patrones de navegación:

Global Navigation: Utiliza una parte pequeña de la pagina o aplicación a usar para mostrar botones o enlaces que permiten al usuario navegar por otra parte de la pagina o aplicación.

Clear entry points: Con pocos botones para ayudar a una navegación fácil y clara

Hub and spoke: Es decir que tienes que regresar a la pagina principal para poder ir a otro lugar.

Pyramid: Dentro de una pagina existen enlaces que permiten navegar hacia otras y la otras paginas tienen dentro de ellas otros enlaces que permiten navegar entre diferentes paginas o la principal generandose así una relación como de piramide.

Modal Panel: Es una ventana de emergencia que no permite avanzar hasta que el usuario tome una decisión sobre lo que se va a hacer.

Sesión 13

Durante esta sesión vimos 2 exposiciones:

La primera hablo fue redes sociales que son plataformas que sirven para la interacción entre las personas, también sirven para poder tener contactos de trabajo o mostrar tu trabajo, también existen diferentes tipos de redes sociales algunas especializadas en negocios, de corporativos o de cualquier otra categoría.

La segunda exposición fue Folksonomy:
Es una aplicación que nos permite organizar contenido es decir categorizarlo para de esta manera tener acceso a paginas de internet de un modo mas organizado y fácil.

Patrones:
1.- Wizard: Te lleva paso a paso para realizar un procedimiento o instalación de algún programa.
2.- Extras on Demand: Muestra el contenido mas importante y oculta el resto lo muestra solo si el usuario lo solicita.