reflexión 26

en la clase dimos un repaso de los planos y de lo que debiamos hacer de extraclase también hicimos un recuento de todo lo que vivimos en el viaje a México.

sesion 26

Presentación- Blog del ‘’personaje’’ presentado al frente del salón
Envío digital- Documento de diseño de ‘’Blog de peronaje’’ los 2 primero planos.
Impreso y digital- Documento de del diseño del ProyectodelaNación con los 5 planos vistos (Strategy, Scope, Structure, Skeleton y Surface)
PLANO DE SUPERFICIE (SURFACE)

Surface brings everything together visually: What will the finished product look like?

Tipos de Layout

1.- Thumbnails
2.- Roughs
3.- Tight Layout
4.- Composition: el resultado final de la página con los componentes que se han escogido. Esto muestra todas las partes del sitio como un conjunto, si llega a verse separado, rompe la armonía de la composición.

Cómo cambia el sitio:

1.- Cut and Paste
2.- Automatizados
3.- CMS con Back end
4.- CMS Back end más poderoso

Grid Layout: La página mantiene una retícula básica para el acomodo de los elementos.

Comprehensive Layout

Template Layout

Al momento de hacer un Layout es importante tomar en cuenta:

1.- Congruencia: relación lógica.
2.- Coherencia: relación uniforme de las cosas
3.- Consistencia: el diseño se mantiene uniforme cada vez que el usuario accede a información o a distintos enlaces que son de la página.
4.- Confianza.

extraclase 25

sesion 25

visita a méxico...
siento que odio méxico, por el tráfico es una verdadera pesadilla! jaja pero me gustaron las visitas que organizó el profesor fueron empresas muy buenas...
la primera fué una casa editorial donde pudimos ver todo el proceso para la creación de una revista... desde el trato con los clientes hasta la impresión de varios ejemplares, incluso ahi mismo empacan la revista en bolsitas de plástico. el muchacho nos mostró como es el proceso de la impresión en offset esta empresa me pareció muy interesante...
la segunda empresa que visitamos también me agradó bastante porque pudimos ver más lo que está enfocado directamente con nuestra carrera que es multimedia, en lo personal me gusta el trabajo de modelado 3d y ahi nos mostraron ejemplos claros de la aplicación en un anuncio de coca-cola y una biblioteca virtual, eso estuvo super bien! en la tercera empresa a pesar de que ya estabamos muy cansados, lograron impresionarnos con la animación 3d de los personajes, el diseñador que nos guió en toda la visita de snake&eagle era una persona muy talentosa, sus bocetos y dibujos me parecieron de lo más creativo... los videos musicales que nos mostraron no me agradaron por que son así como del tipo de videos que salen en ritmoson latino y no son mi tipo, pero todo lo demás me gustó muchísimo jaja la parte de icaro el proyecto "secreto" está realmente impactante me gusta mucho la simulación 3d.

sesion 24 extraclase

proyecto de la nación

PATRONES DE CONTENIDO

Taxonomía

Utilizaremos el de lista de objetos y temas

Lista de objetos

Porque así será más fácil para el usuario identificar lo que quiere hacer dentro de la página y localizar el objeto que busca.

Lista de acciones

Este ayuda a identificar en lo que el usuario va a trabajar y lo que quiere hacer dentro de la página.

Estructura

Utilizaremos multiple-windows, one-window-paging y pop-up Windows.

Multiple Windows: Por si en la página existen enlaces a otras páginas, abrirá una página externa.

One-window-paging: Para que la ventana vaya cambiando y muestre la información que el usuario solicita en la misma ventana.

Pop-up Windows: Para que algún enlace de nuestra página abra esa información en una ventana pop-up mostrándola al usuario.

Físico

Two-pannel selector: Para facilitar la navegación del usuario.

Conceptuales

Extras on demmand: También utilizaremos extras on demmand en caso de que el usuario quiera obtener información adicional.

Wizard: En la parte donde los usuarios proponen y hacen comentarios, la página los guiará paso a paso para facilitar su navegación sin que se pierdan.

PATRONES DE NAVEGACIÓN:

Trama

Global navigation: La página mostrará enlaces o botones para llevar al usuario a la información que busca.

Pyramid: El usuario podrá regresar de ‘municipio’ a ‘país’ de una manera rápida con el uso de los botones.

Señales

Breadcrumbs: Este servirá para que el usuario se localice dentro de la página y sepa por dónde ha pasado y a dónde quiere ir.

Color coded section: Las secciones estarán divididas por colores para facilitar la navegación del usuario.

PAGE LAYOUT

Principios

Jerarquía: Utilizaremos este principio para que los espacios y temas se encuentren ordenados dependiendo de los aspectos más importantes a los de menor importancia, y conforme el usuario desee navegar:

Esquina superior izquierda: Se encuentra el logo para que tenga mayor peso visual y le de importancia a la empresa.

Espacios en blanco: Dan sensación de orden dentro de la página.

Fuentes congruentes: Utilizaremos una fuente semi-formal dirigida a un público de 20 a 25 años de edad.

Colores y contrastes: Dependiendo de cuál sea la sección, será indicada con un color diferente.

Subordinación: Las fuentes mostrarán cuáles son los títulos y subtítulos diferenciándolos con negritas y el tamaño de la letra.

Formas y grupo: Habrá formas geométricas (cuadrados, rectángulos) que ayuden a agrupar la información.

Flujo:

Nuestra página no contará con ‘scroll’, lo cual permitirá que ésta tenga un buen y adecuado flujo visual.

PATRONES DE AGRUPACIÓN:

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

Closable Panels : El menú se despliega conforme el usuario lo indique

Movable Panels: El usuario tiene la opción de acomodar los paneles como más se acomode.

Dinámicos:

Responsive enabling: La información aparece hasta que el usuario da click, esto lo utilizaremos en el menú principal.

-Un boceto de la página (diseño, que botones vamos a emplear, etc.)

Estamos trabajando en eso...

Diseño de la Información:

-Pantallas tipo layout:

1. País/Estado/Municipio-Obtener-Información

País/Estado/Municipio-Obtener-Información

País/Estado/Municipio-Obtener-Información

País/Estado/Municipio-Obtener-Información

País/Estado/Municipio-Obtener-Información

País/Estado/Municipio-Obtener-Información

País/Estado/Municipio-Obtener-Apoyo

3.-País/Estado/Municipio-Proponer-Servicios

País/Estado/Municipio-Proponer-Acciones

País/Estado/Municipio-Proponer-Acciones

4.-País/Estado/Municipio-Aportar-Comentarios

País/Estado/Municipio-Aportar-Información

País/Estado/Municipio-Aportar-Información

País/Estado/Municipio-Aportar-Información

País/Estado/Municipio-Aportar-Información

País/Estado/Municipio-Aportar-Información

País/Estado/Municipio-Aportar-Información

sesion 24

structure
diseño de interacción del usuario y arquitectura de la información
método Ω
anclaje conceptual, anclaje semántico y anclaje técnico el maestro explicó este método y sus semejanzas con el de garret,
con diseño de interacción se refiere a como el usuario se desenvuelve en la interfaz, se parece mucho a los patrones de navegación que ya habíamos visto.
los planos pueden ser popups, reducidos o como formas.
☺modelo conceptual: congruente, consistente y confiable.
☺manejo de errores es todo lo referente a la usabilidad, errores del usuario y del sistema.

arquitectura de la información
matriz
jerárquica
nodos

es más facil recordar las cosas cuando están en categorías y de forma jerarquica.

blog de personaje

RAFAEL IZQUIERDO BLOG

Plano de enfoque

Requerimientos

contenido	funcionalidad
-lenguaje claro -fuentes congruentes -hacer uso de acciones y objetos -pagina de entrada completa -usar one-window paging -en patrones de navergación usaré clear entry points. -secciones separadas por distintos colores. -en la esquina superior izquierda el nombre del personaje.	Interacción: que el usuario encuentre todo lo que busca y que nopierda tiempo. Tecnología: utilizare un CMS en wordpress. Acceso:abierto Identidad: no es necesaria solo para dejar comentarios. Experiencia:fluida y agradable,