Welcome!!!

Blog dedicated to posting some pictures of design, 3D modeling and thinking about graphic design // Blog dedicado a publicar diseños, modelado 3D y pensares del diseño gráfico.

lunes, 22 de marzo de 2010

SESIÓN 19 REFLEXIÓN

En esta sesión, se tuvo la 2da evaluación, en la cual como la vez anterior, se hizo el examen en lo MAC, mucho mas cómodo, aunque no estvo presente el profesor, el examen fue impartido por el prof. Anibal, en el examen tratamos temas de patrones, los cuales manejamos a lo largo del mes y los cuales había que definir y dar algún ejemplo de cada uno de ellos, lo cual vino a reforzar los post de todo el mes, los cuales eran muchos, pero que son de mucha ayuda a la hora de hacer una pagina de internet profesional y no una cosa improvisada y barata, como pasa mucho en México

miércoles, 17 de marzo de 2010

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.


Patrones De Navegación









Trama:
1-Clear Entry Points:
Pocos botones y puntos de entrada.

-Google: Cuenta con dos botones principales y pocos más.




2-Global Navigation:
Botones globales para navegar.

-SeriesYonkis: Te ofrece botones en todos lados para navegar ya sea como lista de acciones o de objetos.




3-Hub and Spoke:
Navegación donde hay que regresar el centro para ir a otro sitio.

-Faustinus: No tiene un menú general que nos mande a donde queramos, siemrpe tenemos que regresar a la página de inicio.




4-Pyramid:
Relaciones comunicadas en forma de pirámide, con una página principal.

-Faustinus: Nos muestra los botones de la galería en forma de pirámide, y estas están relacionadas, son del mismo tema fotográfico.






5-Modal Panel:
Pantalla de advertencia que no permite avanzar

-Youserials: Al querer salir te ponen una advertencia para que no abandones el sitio.




Señales:
6-Sequence Map:
Muestra la secuencia de pasos que llevas.

-Marcadores de Firefox: Al organizarlos te muestra en que sección está cada uno, en que carpeta, que clasificación etc.





7-Color Coded Sections:
Clasificación de las zonas por colores o texturas.
-Suite de Adobe: Te ordena cada aplicación de un color diferente para que te sea más fácil encontrar el que deseas.





8-Anotated Scroll Bar:
La barra del scroll nos indica dónde vamos.

-Blogger: Al realizar un post este nos indica con un scroll en que sección nos encontramos



9-Bread Crumps:
Pestañas que indican la navegación.

-Firefox: Nos muestra pestañas haciéndonos saber que ventanas tenemos abiertas.



Otros:
10-Animated Transitions:
Ventanas y transiciones animadas.

-6teen.ca: Toda la página está animada, a donde vayas y navegues verás una animación, es una página muy interactiva.





11-Escape Hatch:
Opción de cancelar cuando sales ventanas que no nos dejan avanzar.

-Youserials: Nos muestra una ventana de advertencia por si queremos cerrar la ventana pero nos permite quitarla rápidamente.

Patrones Físicos De Organización

1-One Window Drill Down:
Muestra toda la información en forma de lista en una sola pantalla.

-Torrentz: Te muestra todo el contenido que estás buscando en forma de lista.





2-Two Panel Selector:
Del lado derecho hay una lista de opciones o categorías, y al seleccionarlas, del lado derecho aparecen los objetos o el contenido relacionado.

-Bolsa de empleo de la UCO: Te muestra la información del trabajo que solicitan y a la derecha información sobre la empresa o negocio.






3-Alternative Views:
Donde podemos ver algo de diferentes manera o diferentes perspectivas, como diferentes versiones de una misma página.

-MySpace: Nos permite cambiar el skin de nuestra página de inicio o en todo caso volver a la vista clásica, como lo prefiera el usuario.



4-Canvas Plus Palette:
Aparecen diferentes íconos de herramientas que podemos utilizar.

-Youtube: Nos ofrece una lista de herramientas abajo para realizar acciones, como marcar como favoritos, compartir etc.

Patrones de organización de contenido

Categorías

1-Listas De Objetos:
“Sobre qué quieres trabajar”
Organiza el contenido en objetos. Lo presenta en listas, tablas 2D, jerarquías etc.

-UCO: Nos muestra una sección con diferentes opciones a las que podemos ingresar representadas en símbolos




2-Listas de acciones
“Qué quieres hacer”
Muestra listas de acciones a realizar, diferentes actividades.

-UCO: También te muestra una lista de acciones hasta arriba para que te decias a donde quieres ir.




3-Listas de acciones y objetos
“Qué quiero hacer y sobré qué quiero trabajar”
Muestra un combinado entre acciones y objetos. Puede haber una sección de objetos y una lista de acciones en el mismo lugar

-Twitter: Te muestra una lista de acciónes y una de objetos justo abajo.




4-Listas de temas
“Con qué tema quieres trabajar”
Clasifica y ordena la información en diferentes temas. Así puedes encontrar imformación similar dentro de un mismo tema y encontrarla más fácil agrupada de esa manera.

-Biancasays.wordpress.com: El blog de Bianca o muchos blogs existentes, te muestra una lista de temas a la derecha, que tienen relación para así encontrar lo que desees rápido y temas de interés juntos.




5-Liistas de herramientas
“Con qué quieres trabajar”
Grupo de acciones sobre un set de datos.

-FotoFixer: Nos da una lista de herramientas sobre las cuales podemos trabajar y editar nuestras fotos.




Estructura

6-Multiple Windows
Donde a partir de una ventana se navega a otra.

-Torrentz: En casi todas las secciones de la página al dar click en otro enlace te abre una página nueva.




7-One Window Paging
Se navega dentro de ventanas en la misma parte

-Google: La navegación es siempre dentro de la misma ventana.





8-Tiling
Agrupación de ventanas en una misma sección.

-Facebook: Te ordena cosas similares o de uso común en una misma sección y se divide en varias secciones.





9-Pop-Up Windows
Hay diferentes niveles que aparecen como ventanas nuevas a partir de la primera ventana. Esta nueva ventana es independiente de la primera.

-El spam que puede llegar a abrise cuando estás navegando en una página.




Patrones de uso

1. Safe exploration

Te permite navegar en la página sin que hayan consecuencias, es decir, puedes regresar, cambiar de decision en el momento que quieras sin consecuencias.

-Facebook: Nos permite navegar por la página y hacer los cambios que queramos sin el riesgo que se guarde o modifique algo sin que queremos ya que siempre nos dá la opción de continuar, guardar o cancelar.

-Hotmail: Puedes estar redactando un mail y por algo cambiaste de aplicación, te fuiste a msn o donde sea, regresas y el puntero del mouse no está seleccionado en la redacción del mensaje, por algo apretas la tecla de borrar y te manda para atrás y pierdes todo lo que llevabas redactado.



2. Instant gratification

La interfaz reacciona rápidamente a lo que el usuario le pide, de esta forma el usuario no pierde el interés y es más difícil que abandone el sitio.

-LosSimpsonOnline.com.ar: Puedes navegar y ver todos los capítulos de los Simpson, todo está muy fácil de encontrar ya que los menús están bien hechos y además no te cobran por este servicio.

-Unlimited-downloads.biz: Una página donde te exigen que estés inscrito y pagues para descargar el contenido que deseas, eso te hace abandonar rápidamente el sitio y buscar uno donde puedas encontrarlo grátis ya que en estas épocas puedes conseguir todo de esa manera.



3. Satisfacing

Debe tener lo suficiente para tener satisfecho al usuario. Si lo mejor cuesta tiempo de aprender hay que preferir lo bueno.

-MySpace: Nos señala todas las secciones de la página en una forma fácil de entender, y eso nos da satisfacción ya que no nos estamos perdiendo buscando cosas que podríamos tardar horas en encontrar



-FriendFeed.com: Es una página donde nunca sabes bien donde estás o a donde debes ir, está muy confusa, además de que alguien postea algo y te pone un link y te vuelve a redirigir siempre al mismo link, cosa que te confunde mucho.





4. Changes in midstream

Te da la opción de cambiar de decisión o de opciones con el menor esfuerzo posible cuando tú quieras.

-Twitter: Te permite cambiar tus datos en el momento que quieras si es que cambias de opinión tanto que hasta te deja cambiar tu URL, cosa que pocas páginas permiten.
-MySpace: Te permite editar varias secciónes pero el URL no, pero en MySpace eso interfiere mucho con las páginas, ya que es una página que se usa para socializar y es lo que refleja "quien eres", si pusiste un URL que no te gustó debes crear una cuenta nueva para tener el que deseas y empezar desde cero.


5. Deferred choices

Te permite completar opciones en el momento que desees hacerlo, no te fuerza a hacer algo que no quieras.

-MySpace: Creas tu cuenta, pones sólo tus datos básicos, nombre, apeido e email. Todos los demás campos te permite completarlos en el momento que quieras o en su caso no hacerlo.
-Youserials.com: En esta página para poder obtener el contenido deseado necesitas contestar una serie de quizes que son publicidad.





6. Incremental construction

Permitir fluir al usuario de acuerdo a sus preferencias de manejo, no obligarlo a una secuencia rígida de pasos.

-Blogger: Te permite realizar acciones y suspenderlas en el momento que quieras para ir a otro lado sin el riesgo de perder tu información o lo que estás haciendo, además de que todo está fácil de encontrar, para añadir una entrada no te manda a muchas páginas antes para llegar a esas.



-UCO: Es una página donde no puedes modificarle nada, además de que para llegar a la sección que quieres debes seguir una larga secuencia de pasos.




7. Habituation

Considera que el usuario está acostumbrado a una serie de acciones.

-Wordpress: nos permite comentar fácilmente sin interrumpirnos con poner un código captcha además de que podemos comentar sin llenar tanta información.




-Blogger: nos exige poner un código captcha para poder comentar, lo cual nos hace perder tiempo e interés, además de que te pide estar suscrito a algo para poder hacerlo, a otro tipo de blog, a google, pero a algo.



8. Spatial memory

Considera que el usuario recuerda más el lugar donde están los objetos o botones que el nombre o el símbolo.

-Google: Todos sabemos donde están las opciones que más usamos, jamás nos cambian la interfaz y todo es muy sencillo ahí.



-Facebook: a cada rato nos cambian la interfaz y olvidamos en donde se encuentra todo y nos perdemos para encontrar lo que queremos.




9. Prospective memory

Ayuda al usuario a recordar tareas pendientes, o saber en que paso se encuentra.

-Twitter: En twitter no te especifica en que página estás, ya conociendo la página y sabiendo como se maneja todo ya sabes, pero siendo nuevo no te ubicas fácilmente, no por nada la gente cuando abre twitter dice: es que no le entiendo!


-Facebook: Te indica en que parte te encuentras todo el tiempo, ya sea el muro, fotos, información etc, siempre te indica en que sección te encuentras.




10. Streamlined repetition

Recuerda cuando ya le han proporcionado datos para no obligar al usuario volver a realizar una operación.

-Facebook: Siempre que deseas entras no tienes que poner tu contraseña y datos ya que se ponen solos o en todo caso ni te manda a esa página y abres la página y te manda directamente al feed.




-UCO: Cada que entras a la página nunca recuerda nada y tienes que ingresar todos tus datos para poder accesar.





11. Keyboard only

Debe permitir el uso eficiente del teclado y dar siempre alternativas de "shortcuts"

-Blogger: Nos permite usar shorcuts al redactar posts y esto nos facilita el postear, además de que abajo te muestran unas opciones para que sepas los shortcuts y así ahorrarte tiempo.




-Acrobat Reader: En varias versiones te permite ver el contenido pero no poder copiarlo, es de pura lectura, no te permite usar Cntrl C ni V, es de pura lectura.




12. Other people advice

Permite al usuario conocer la opinión de otros.

-AppleStore: Te permite ver las opiniones de los productos o servicios que te ofrecen y así ya te formas una idea de si te conviene comprar la aplicación o no.


-LosSimpsonOnline.com.ar: Te permite ver los videos pero no los comentarios de las personas, así si entras y el link está roto o el video tiene errores, tienes que darte cuenta por ti mismo ya que no puedes saber lo que las demás personas opinan.