Naranja naranja!!! ja ja ja

En esa ocasion analizare lapagina de mi partido favorito (sarcasmo) osese: convergencia

http://www.convergencia.org.mx/



No se si es porque sea reciente o que, pero muhcas secciones estan vacias. Ningunda de galeria tiene fotos. Aparte, hay unas sobresaturadas con pura informacion, y llega a ser tedioso verla. a continuacion el analisis un poco mas a fondo. empecemos:

Para empezar, la pagina esta sobre un framework. Estuve apunto de ponerlo como CMS, pero la estructura fue la que difirio mucho. Tiene practicamente o animaciones, pero la "arqutectura" corresponde mas a framework q a CMS. Bueno, esta paginita es nadamas y nadamenos que de publicacion, ya que el objetivo es informar a al gente lo que sucede con este partido

Patrones de Organización de contenido

Taxonomia - Lista de temas. Los links estan acomodados por temas, segun su categoria.

Estructura: -One Window Paging. Todo ocurre en la misma unica ventana

Org. de contenido (Fisicos)One window drill down. No tiene mucho chiste, la informacion esta organizada de la manera mas simple.

Navegacion(trama). Global Navigation. No importa en qeu parte del sitio estes, siempre esta la barra de arriba con sus respectivos links a Temas y Sub-temas

Navegacion(señales)Bread crums. Nos dice en donde estamos, y por donde hemos pasado para llegar a ese punto, de esta manera podemos navegar ams facil sin perdernos

Page Layout

• Jerarquia

Lo primero que se carga en la pagina en la esquina superior izquierda es un espacio en blanco. No deberia, mas bien deberia estar el logo del partido, o algo asi. Espacios en blanco tiene, pero no estan bien manejados, en vez de dar sesasion de orden , da una de todo lo contrario.Fuentes congruentes no tiene, y las que hay en los links parecen todas de la misma importancia, pero si existe subordinacion, ya que en los links, aparece otra seccion con sub-links. Los botones todos tienen la misma forma, indicando que tienen la misma funcion, o una parecida.

• Flujo

Los links relacionados estan juntos, y los naranjas grandes tienen funciones similares, igual que los links azules de arriba. Continuidad no hay mucha, aparte de qeu la informacion se organiza de tal forma que no da la sensasion de que este ordenado.Respecto a cierre,os espacios que cerramos no estan bien planeados

Patrones de jerarquia. Central stage. Lo mas importante esta en el centro,lo demas son links a otras secciones y anuncios

Patrones de Flujo.Left-rigth alignment. Los botones anaranjados estan alineados de izquerda a derecha

Patrones de Dinamicos-no tiene ninguno, ni siquiera se le acerca al liquid layout, la informacion no se centra de acuerdo al tamaño de la ventana, ya no digamos todo lo demas. Del tamaño que sea la ventana, vemos lo mismo.

Mapa del sitio

La pagina ya contaba con su propio mapa del sitio, es un poco pobre, porque le falta jeraquizar mejor, y ponerlas cosas con fuentes congruentes y subordinacion, pero es mejor que nada.

Ropa hecha a la medida...y paginas tambien

para quien va una pagina de internet?? las personas qeu las diseñan pueden se unos fregones, muchas veces cometen el error de diseñarlas de acuerdo de lo que a ellso les dgusta pero NOOOU!!! deben ser para nuestro usuario. El usuario ¿Donde prefiere navegar? ¿EN sitios que tengan cosas que le gustan? ¿O sitios que tengan cosas que le gustan a otra gente? Si se fueron por la primera yay!! y si mas bien fueron opr la segunda...cuestionen q hacen aqui

Un contraejemplo esta en mi blog ( asi es señores, aqui meesmo) paseando me encontre un gadget tipo radiecillo, y decidi ponerlo, y a un lado se veia ridiculo (ni se veia) asi que lo puse arriba, a l menos no es tan molesto como un anuncio. Me importo un pepino y lo puse, aunq estorbe un poco, haga hacer mas scroll etc. En este caso, pense en algo que a mi me gustaba, y no en las personas que ven este blog.

bueno, este User Center Design (USD) tiene su filosofia y su metodo:

Filosofia: Return of investment (ROI) o en palabras entendibles, el tener de vuelta lo que invertimos. SI le invertiste mucho, recuperaras mucho. Casi siempre se miden con el el sistema metrico universal (o sea $$). ME refiero a que muchas veces la gratificacion que se nos regresa la mayoria de las veces, se mide en efectivo.

Metodologia: Vamonos a los extremos, puede ser :

a) Interfaz-cuesta mas trabajo, tiepo dinero y esfuerzo..pero espara siempre. Son unicas, y retribuyen mas $$

b)Skin- auno como muuuchos otros. Es rapido, pero a la vez efimero. NO requere mucho esfuerzo, pero no nos retribuye mucho


The elements of User Experience (libro de Jesse James Garrett)

(Un libro escrito por el equipo rocket Yay!!! XD!!! Ok ya) Una serie de elementos..desde los mas abstracto a lo mas concreto

Estrategy (Estrategia): La base de nuestro proyecto. La idea que hara fluir lo demas. EL usuario tiene una necesidad, y nosotros otra, que satisface la del usuario. Hay una conexion entre el y nosotros.

Scope (Enfoque): Caracteristicas de acuerdo a las necesidades de nuestro usuario

Structure (Estructura): Arqutectura de nuestra informacion, osea como esta estructurada donde empezamos, donde estamos, donde vamos donde acabamos etese

Skeleton (Esqueleto) Es como esta acomodado todo,: botones, tablas, imagenes y blabla. cosas tecnicas

Surface (Superficie) Lo "superficial" en todo el sentido de la palabra. El "look and feel" como se ve nuestro producto final

laying out (parte 2)

el "chow" continua...sigamos con los layouts X)...donde nos quedamos?? cierto cierto, en agrupacion....

Agrupacion- (2a parte)

tan logico que no lo voy a definir. XD

• closable panels -Puedes abrir y cerrar ventanas a tu libre albedrio, depende de como las vayas necesitando.
• Movable panels- vas moviendo los paneles o ventanas para re-acomodarlos segun tu gusto.

Flujo

• Left/right alignment- Contenido alineado ya sea a la derecha, o a la izquierda
• Diagonal balance- alineacion al estilo "diagonal"

Patrones dinamicos

• responsive disclousure-vas al siguiente paso, dependiendo de la respuesta que des.
• reponsive enabling- cuando habilitas algo, y eso en respuesta te muestra algo mas, como ventanas, barras de herramientas, info etc.
• Liquid layout- cuando aunqeu vayas haciendo mas grande o mas pequeña la pagina, te muestra la misma informacion.

bueno...este fue el "final de temporada" a la que en layouts se refiere....see ya!!!

lying o laying?? XD

para tener todo diske mas ordenado, agrupare las extraclases de las sesiones 17 y 18 en una solo, como el anuncio de "scotch brite" solo q aui solo es 2 en una

comenzamos!

espacio en blanco-altavista solo tiene su buscador en la pagina principal, no hay nada mas que nos estorbe visualmente.

http://www.altavista.com/

top left corner-la pagina de lso redhotshilipeppers se maneja de esta manera, y lo mejor es qeu nunca necesitas "scroll" ya que el contenido se ajusta siemrpe al tamaño de la ventana, pro lo qeu tambien es un liquify. aunque, si la ventana es de 5 cm, no lees nada de nada....

http://www.redhotchilipeppers.com/home.php

colores y contrastes- esta pagina tiene muchos elementos, y tiene colores brillantes en las pesañas para qeu en algun momento las puedas identificar mas facil.

http://www.pokemon.com/us/fun-zone/downloads/

Subordinacion- Mercadolibre tiene su contenido organizado de tal manera q al usuario le sea mas facil encontrar el producto qeu busca, y tiene letras grandes para categorias mas generales, y peqeuñas para subcategorias mas especificas

http://www.mercadolibre.com/

formas y grupos- en este foro hay imagenes iguales, para secciones con funciones similares, en este caso, te dirigen a canales de radio

http://www.grupoans.com/

proximidad- hay vairas maneras de hacer una busqueda, y te pone proximos las distintas formas que hay arriba, puedes hacer una busqeuda por nombre, en los cuadritos por tipo y asi sucesivamente

http://www.serebii.net/pokedex-dp/

similitud-aca todas las cosas similares estan agrupadas, calcetines con calcetines etcetera. en la pagian principal, podemos ver la proximidad, pero ya en cada sub-seccion, todo se agrupa por similitud

http://www.vans.com/girls/

continuidad- toda la pagina tiene una especie de "continuidad" es mas, las secciones se presentan a maner a de libro, va una cosa tras otra, auqn eso no te impide brincar a otra cosa diferente. imagenes links y videos son congruentes. curiosamente, las pestañas tienen colores y texturas tambien para distinguise mejor, por lo que tambien podria entrar en esa categoria.

http://www.thefabricofourlives.com/TheFabricOfMyLife/zooey_styleBook.html

visual framework- aunque a primera vista parece qeu lo unico que tiene es un banner, no es verdad. toda la informacion siempre esta organizada de las mis ma manera, siguiendo la misma estructura, solo tiene ligeras variaciones para no hacerla tan monotona ya qeu es una pagina de un estudio, pero sin crear un caos.

http://www.imaginismstudios.com/

central stage- esta página tipo blog, al igual que todas las que son semejantes, manejan toda la inromacion importante al centro, y los gadgets, links y otras cosas estan a lso lados, o hasta abajo.

http://www.nightsbrightcolors.com/

titled sections- la pagina de defenders of wildlife tiene detro de las pestañas los elementos relacionados con cada uno de los temas para qeu sea mas facil ubicarlos, en vez de tener todos los links juntos, y en cada sub pagina, los elemnos similares se agrupan

http://www.defenders.org/wildlife_and_habitat/index.php

card stacks- aqui todo esta agrupado a manera de "tarjetas" de hecho, deviatart tiene varias secciones organizadas por stacks, para qeu tengas todo mas ordenado. en este caso, todas tus colecciones/galeria, organizadas de esta forma

http://lucky-phantom.deviantart.com/favourites/



Closable panels- Ilustrator te da la opcion de persoanlizar tu area de trabajo. Puedeas qitar algunas barras de herrmaientas, y poner otras, dependiendo de lo que utlilices, y ademas, al ser retractiles, puedes solo "minimizar" para no quitar

movable panels- En deviantart, puedes modificar tu pagina como se te de la gana, ir moviendo cada uno de lso recuadros para personalizar, aunqeu sin salirte de su respectiva seccion. por ejemplo, no puedes poner algo qeu sea parte de la galeria, en donde son datos, y la seccion llamada "webcam" no puede ir en la galeria

http://lucky-phantom.deviantart.com/

left/right alignment- esta pagina no tiene el mejor diseño, pero la informacion es facil de localizar. los links de navegacion se encuentran a la izquierda, mientras que la info siempre esta a la derecha.

http://www.smogon.com/

diagonal balance- photoshop te da la opcion de hacer un balance de color, basado en una diagonal, a la que puedes curvear.

responsive disclosure- ares hace una busqueda de acuerdo a la que le pidas, puedes buscar varios tipos de archivos, usar filtors para limitar la busqueda, acomodar los resultados etc.

responsive enabling- el deviantart te da a escoger que quieres y que no. si quieres informacion sobre los journal qeu se te llegue, si quieres ver todos los trabajos, si no quieres ver bocetos etc.

liquify- aparte de la de los redhot, el deviant (oootra vez XD) si la haces pequña, se ajusta para que de todas formas sigas viendo los cotroles mas basicos.

http://www.deviantart.com/

Laying out

Bueno, durante la sesion 17 vimos lo que eran los los page layouts, y las ramas en las que se divide. y otros patroncillos por ahi

patrones de jerarquia:

Visual Framework- en si que toda la pagina este estructurada de la misma forma

Central Stage: Lo mas importante esta centrado en la pagina

patrones de agrupacion:

Titled Sections: cada quien con su cada cual. Cada sección tiene su título y sus respectivos subtemas.

Card Stack: Son agrupaciones al estilo cartas.

ora si, los layouts....

Jerarquia- Ahhh...puro orden. Que diferencia cuando entras a una pagina donde todo esta muy bien ordenadito, a cuando entras, y la informacion no tiene ni pies ni cabeza. La jerarquei trata precisamente de eso, ordena los espacios, temas, objetos o palabras.

• Esquina superior izq- es la parte con mas peso en una paagina (puesto que es casi siempre lo que carga primero, y lo primero que vemos, sin importar el tañaño de la ventana)
• Espacio en blanco- al usarlo como elelemnto, es un espacio que nos hace ver que las cosas estan ordenadas
• fuentes congruentes-La caracteristicas se dan de acuerdo a la importancia de la info
• Colores y contrastes- Nos ayuda a separar visualmente. tambien da cierto orden a la pagina
• subordicnacion- colocar las cosas de acuerdo a la jerarquia
• formas y grupos- cuando hay formas que nos ayudan a relacionar las cosas entre si

continuara.... (no lloren por favor ja ja ja)

El fotografo qeu vendio su alma al diablo.

Habia una vez, un hombre llamado Faustinus...que requeria tener una pagina web para sus fotos. Le interesaba que se hiciera juegos con su nombre, ya qeu como podemos ver, no un simpre "perdro juan" XD

asi pues se huicieron 2 diferentes, pero una se me hacia muy sobresaturada, asi qeu me enfoque a la mas "niu" con el diablito y toda la cosa.

hagamos un pequeño analisis:

safe exploration- no hay formularios

Instant gratification- PUes para emepzar, te pregutna si quieres acceder a la antigua, o a la nueva. Mejor deberia poner un elnace a la otra.

Satisficing- estan muy buenos los flash, pero tal vez se le paso un poco la mano con los actionscript, porque o se alenta, o no todas la maquinas lo ven sin el flash player.

Changes in mindstream- ??

Preferred choices- si no te gusta...te vas y ya. No necesitas nada mas.

Incremental construcion-permanece igual.

Habituation- NOtiene tags siempre visibles, y si un usuario inexperto se mete, puede resultarle dificil navegar

Spatial memory. Los iconos estan donde deben estar normalmente.

Prospective memory- sin recordatorios...a menos que te recuerden que no le pagaste la ultima vez.

Streamlined repetition-no hay para log. Siempre te hace las misma preguntas para entrar. NO hay.

Keyborad only- Al esta manejado en actionscript sera mas complicado usar shortcuts. no las tiene creo, o al menos no las encontre

Other people advice- Contactalo, para eso debe estar la seccion.

no encuentoro bien los patrones de trama, no es clear points, porque va mas alla de eso, pero tampoco el global. En genral, es una pagina muuuy chida, pero a veces el flash complica mas las cosas, como el hecho de qeu no tiene regreos, y cosas asi

color coded section tal vez para resaltar los links...y no hay cosas de ayuda

Divide,y venceras. BUeno, en este caso, mejor agrupate

esta sesion fue interesante, ya que vino nos dieron uan platica muy interesante.

pero bueno, antes de eso, vimos lo que era:

Groupware

Esta es un tipo de aplicacion muy interesante, ya que de esta manera varias personas pueden trabajar simultaneamente en el mismo proyecto, aunqeu esten lejos una de la otra. Esto permite ahorrar mucho dinero a las empresas, y tiempo, entre otras cosas.

imaginenen lo mucho que facilita esto las cosas para aquellas empresas qeu tienen plantas por todo el mundo. cada vez la Web 2.0 rompe mas barrearas, y nos permite estar mas en contacto.

ahora si...lo novedoso, el diseñador que platico con nosotros.


Pues para empezar, nos hablo de lo qu era la vida aya afuera, trabajando de freelacero. HAblo acerca de como son testarudos los clientes, teeercos como mula, qeu ellos a pesar de nos saber diseñar, queren las cosas a su antojo, al precio mas bajo que le spuedas dar. Muchas veces los clientes llegan a poner lso pelos de punta con su "factor terrorifico" el hecho de como te mangonean los clientes y te traen como su nose que...

sin embargo, tu tienes qeu hacer que la pagina funcione, y qeu a la vez cumpla las expectativas del cliente. eso es un verdadero reto de diseñador. Nos mostro la pagina para un fotografo, llamado "faustinus" (si. los gringos no tenian manera de pronunciar su nombre XD) proximo post: analisis de su pagina

Z es para Zooey!! XD

Saacare provecho del analisis de pagias para meterme a la pagina de http://zooey-deschanel.net/ ja ja

es para el analisis de maaas patrones, y de una vez todo lo demas (o sease, va para largo)

bueno, para empezar, esta sobre una plataforma. La mayoria de las paginas de org sobre alguna celebridad estan hechas practicamente igual. Usa los breadcrims, porque te muestra la ruta que seguiste por la pagina.




safe exploration- no hay formularios que llenar, solo para el log in, si eres miembro.

Instant gratification- vas directo al grano, queres ver fotos vas, audio? vas tambien. No te lleva a otro lado.

Satisficing-Notiene tantas cosas super interactivas de flash para usar, es bastante simple. A lo mucho, esq te abre fotos en una nueva ventana pra verla en tamaño completo

Changes in mindstream- no hay mucho de eso, mas qeu de username supongo. No se cambia.

Preferred choices- accesas al contenido sin tener qeuser miembro, y asui si no era lo que esperabas, no tuvste que llenar nada

Incremental construction- No hay gran cambio hayas avanzado o no.

Habituation- Es una pagina parecida a muchas otras, y es facil sabwer donde estan las cosas, no lo cambia.

Spatial memory-cosas donde podemos ubicarlas. nadamas.

Prospective memory- Nada relacionado con eso. SOlo las actualizaciones con noticias y eso, pero a mi me basta XD

Keyboard only- No tiene muchas "shortcuts" qeu yo sepa. tal vez solo para copiar??

Other ppl advice: tiene la seccion de "contact". Por ejemplo, yo acabo de avisar sobre un link roto en la seccion de audio.

Patrones:

clear point entry- es sencillo de interactuar con ella.

one window drill down- no me convence mucho, pero es lo que mas se le acerca.

extras on demand- no te salen mas cosas a menso que las solicites. en cuanto a las ayudas, pues no hay mucho en lo qeu puedes requerir ayuda, o un wizard.

compartir...XD

seehh...pero no se refiere a lo qeu dicen los programas de discovery kids....(AHH NO que horror!) en esta ocasion hablamos de...

APLICACIONES PARA COMPARTIR CONTENIDO

en resumen, son aqullas que nos permiten...compartir contenido ( si eso ya lo seee...pero qeu maaaassss!!!) a eso voy a eso voy...

Tal vez haya una presentacion...un disco que te guste, fotos que quieras compartir, pero ¿Como hacerlo? faacil...estas aplicaciones son nuestra mejor solucion, nos ayudan a subir lo qeu necesitemos a la red.

Creo qeu todos las hemos usado alguna vez...Rapidshare, megaupload, fliestube, mediafire...es una lista muuy grande...y tambien las hay especificas para algunas cosas...por ejemplo la que vas a usar es Slideshare, qeu sirve para compartir presentaciones. de esta forma, podemos ver presentaciones qeu creamos utiles respecto a diseño, y bajarlas de ahi.

pasando a otro tema...mas patrones (sii...maas todavia)

Bread crumbs- Asi...bien Hansel y Gretel XD es como el nos indica el "rastro" que dejamos al ir por una pagina...a donde nos hemos metido.


Sequence Maps-

Color-coded section- son espacios dentro de la página que tienen colores, texturas para hacer resaltar la información.

Anotated scroll bar- Cuando al hacer "scroll" te indica donde vas para que no te pierdas, un ejemplo es cuando usas el reader, y te dice en que pagina vas

en-trama-dos

en este ejercicio, relacionare una pagina, con cada uno de los tipos de patrones vistos la clase pasada:


Clear entry points- en esta pagina hay botones muy basicos, no esta todo lleno de ellos, si necesitas mas, esta es su subseccion. depende de lo que el usuario requiera, es aun mas simple que google

http://www.altavista.com/

Global Navigation- En la pagina de este estudio, vas a donde vayas, estan los botones para navegar a cualquier parte de la pagina

http://www.imaginismstudios.com/

Hub and spoke- 4-chan es una pagina donde si quieres er otra parte de contenido, siempre tienes que regresar al centro.

http://www.4chan.org/

Pyramid. En esta pagina navegas por "pisos" al estilo piramide...¿que es lo que dice? quien sabe...XD ahorita nos enfocamos a la estructura

http://www.sonymusic.co.jp/Animation/popolo

Modal panel- un mensaje que no te permite avanzar. o aceptas...o aceptas.