Cuarta Entrega-Blueprint, Wireframes, Mockups

Recopilación de todo lo realizado en la primera parte de la cuarta entrega, solo falta hacer la pagina en html y css...

Get your own - Open publication

Cuarta Entrega-Primera Parte

El trabajo consiste en escoger un tema dentro del Diseño Gráfico que sea tomado de referentes personales y desarrollarlo en una aplicación web.

Esta Primera parte consta de desarrollo de objetivos y blueprint.

Get your own - Open publication

Tercer Encargo

Estudio de referentes

La idea de este encargo es analizar paginas web desde su usabilidad y navegación, hasta el diseño y composición que poseen.

Servicio de Impuestos Internos (SII)



Contenido

Coherencia del Rotulado: Los títulos conducen exactamente donde uno quiere ir, pero al ser una pagina con mucha información, hace falta el uso de listas ordenas de manera jerárquica, según índole de importancia.

Lógica de Navegación: No hay jerarquía, nada sobresale. El usuario no sabe distinguir que es mas importante. Los menús no son claros, son poco descriptivos. No hay punto de partida. Demasiada presencia de links.

Consistencia del Contenido: Todos los aspectos informativos están abordados, pero en esta pagina ese es el problema, ya que la pagina se satura.

Diseño

Estructura Visual
Composición: Utilización de 3 columnas, saturadas, sin jerarquía.

Espacio: Saturado.

Color: No se utiliza un paleta de colores para la pagina. Predomina el azul de los links, que pasa a ser un fondo.

Contraste: Fondo blanco y utilización de formas con colores planos.

Matices: No hay matices, todo es plano.

Imagen: No se utilizan imágenes en ningún momento. Se utilizan iconos para diferenciar temas, pero son muy pequeños y se pierde su mensaje.

Contraste de Lectura: Fondo blanco y letras negras, la lectura después de un rato provoca cansancio en el usuario.

Coherencia Visual
Unidad Visual: Del homepage de 3 columnas, se puede pasar a paginas interiores con 1 o 2 columnas. No hay coherencia visual ya que no existen elementos que provoquen esto (colores, formas, estructura).

Duoc UC



Contenido

Coherencia del Rotulado: Los rótulos direcciones de manera correcta.

Lógica de Navegación: Hay 2 menús, que se diferencian, lo que es bueno, ya que ambos apuntan a cosas distintas. Se diferencian las secciones, ya que cada una es un modulo que se distingue del resto.

Consistencia del Contenido: No hay abandono de contenido, la pagina es estable.

Diseño

Estructura Visual
Composición: Se compone en columnas, que poseen módulos en distintos tamaños, para destacar y dar mas importancia a ciertos temas de la pagina.

Espacio: El espacio se ocupa de buena manera, las cosas no están dispersas, ni muy juntas.

Color: Se utilizan los colores de Duoc UC (Amarillo y Azul).

Contraste: diferentes contrastes denotan importancia o sirve solo como diferenciación.

Matices: Si existen matices, diferentes contrastes, una vez mas indicando jerarquía.

Imagen: Se utilizan imágenes para resaltar información. En algunos casos son un poco pequeñas.

Contraste de Lectura: Fondo blanco y letras grises, la lectura se hace compleja ya que no hay mucho contraste.

Coherencia Visual
Existe coherencia entre el homepage y las paginas interiores, el problema ocurre cuando se abre una sección muy especifica, que dista mucho del diseño de la pagina de inicio.


Artnomono



Contenido

Coherencia del Rotulado: Los rótulos direccionan de manera correcta.

Lógica de Navegación: Hay un solo menú, que se divide en 3 secciones. Cada link direccionan a la ilustración o proyecto que corresponde. Las imágenes son lo fundamental.

Consistencia del Contenido: El contenido es consistente. No hay nada que distraiga, el enfoque se centra en los trabajos.

Diseño

Estructura Visual
Composición: La pagina es minimalista, pero esto no quiere decir que falte algo. A veces menos es más.

Espacio: Hay hartos espacios en blanco que provocan atención en las imágenes.

Color: Tonos grises y celestes suaves en las tipografías.

Contraste: poco contraste.

Matices: pocos matices.

Imagen: las imágenes son el ítem fundamental en la pagina, son el foco de atención.

Contraste de Lectura: Fondo blanco y letras grises, la lectura se hace compleja ya que no hay mucho contraste.

Coherencia Visual
El homepage es lo mismo que las paginas interiores, ya que se trata de un portafolio de trabajo. Esto igual puede llegar a hacer aburrida la navegación después de un rato.

Canal 13



Contenido

Coherencia del Rotulado: Los rótulos direccionan de manera correcta. Pero hay muchos títulos, y ninguno es más importante que el otro.

Lógica de Navegación: Hay muchos menús. Hay jerarquía, pero es difícil encontrar lo que uno esta buscando.

Consistencia del Contenido: Hay mucha distracción y mucha saturación. Esto asusta y aleja al usuario.

Diseño

Estructura Visual
Composición: La pagina esta copada de información, y de mensajes que saturan todo el espacio.

Espacio: Falta separación entre las columnas y entre los objetos dentro de la misma.

Color: Distintos tonos de naranjo, color insigne de canal 13.

Contraste: contraste medio

Matices: matices medios

Imagen: imagen como respaldo a información.

Contraste de Lectura: buena lectura.

Coherencia Visual
La paginas cambian, dependiendo de la sección a la que corresponde, se mantiene el menú principal, pero en algunos casos cambia en demasía la justificación de la grilla.


Agencia Perrocarton



Contenido

Coherencia del Rotulado: El rotulado es coherente, en cuanto a su menú, pero hace falta un titulo mas grande que especifique de que se trata la agencia.

Lógica de Navegación: Hay un menú que capta la mirada, hecho en flash, pero también hay otro colorido que lleva al mismo lugar. Dos caminos para llegar a un mismo resultado. Aunque el realizado en flah, agota un poco.

Consistencia del Contenido: Demasiada distracción, no se enfoca en lo que realidad importa, los trabajos y la publicidad realizada por la agencia.

Diseño

Estructura Visual
Composición: Pagina a modo de módulos que flotan sobre una foto.

Espacio: Se manejan bien los espacios, se nota lo que es mas importante de lo que no.

Color: Amplia gama de colores, pero todos de un cierto tono para generar relación.

Contraste: el fondo se confunde con lo que esta al frente.

Matices: muchos matices, es bastante desordenada, pero a la vez calma.

Imagen: galería de imágenes con los trabajos mas importantes.

Contraste de Lectura: mala elección de tipografía e interlinea en ciertos ítems.

Coherencia Visual
Todos lo interiores coinciden con el homepage, se aprecia una coherencia visual.


Banco Falabella



Contenido

Coherencia del Rotulado: el rotulado es bueno, dirige de buena forma al usuario. Mucha Utilización de rotulo descriptivo.

Lógica de Navegación: Funciona de manera directa, lleva al usuario donde pretende llegar. Formularios simples y precisos. Tiene diversos menús relacionados con la función del banco, pero ademas posee un menú que direcciona a otras paginas que prestan otros servicios de Falabella.

Consistencia del Contenido: bastante limpia y estable. Directa y sin preámbulos.

Diseño

Estructura Visual
Composición: Pagina a modo de módulos, que mantiene una estructura central que presenta paginas nuevas dentro de una tablilla central

Espacio: equilibrado, buena utilización de blancos y espacios entre bloques y tablas de texto.

Color: Gama de verdes correspondientes a Falabella.

Contraste: contraste medio.

Matices: matices medios.

Imagen: imágenes para respaldar información.

Contraste de Lectura: buena lectura, de pronto la tipografía es muy pequeña, pero en algunos lugares.

Coherencia Visual
Como en muchas pagina anteriores lo que sucede es que muchos elementos del hompage se mantienen, por lo que la coherencia visual continua a lo largo de la navegación. Esto se debe a que las paginas que cambian, muestran su info dentro de una tablilla dentro del diseño de la pagina de inicio.


Radio Play FM



Contenido

Coherencia del Rotulado: Es bastante coherente, direccionan de manera correcta y se respetan de manera jerarquía los tamaños de las tipografías. Hace falta un rotulo que identifique mas la pagina en si, que indique que nos encontramos en Play FM.

Lógica de Navegación: Posee un menú que nos lleva a distintas secciones de la pagina, que poseen comentarios y post a modo de blog. El problema es que se trata de una pagina de radio, y hace falta que suene la música que esta sonando en la radio, o una sección mas importante a la transmisión online, ya que la que existe se termina perdiendo como publicidad.

Consistencia del Contenido: bastante directa, sin muchas distracciones. Posee una linea que se respeta entre homepage e interiores.

Diseño

Estructura Visual
Composición: Pagina a modo de módulos, que mantiene una estructura central que presenta paginas nuevas dentro de una tablilla central.

Espacio: buena utilización de espacios blancos, la pagina no esta saturada.

Color: Se ocupan distintos colores pa diferenciar las distintas secciones.

Contraste: buen contraste.

Matices: hace falta matizar, de pronto todo se hace muy igual y aburre.

Imagen: imágenes para apoyar tema central, la música.

Contraste de Lectura: buena lectura. De pronto la interlinea es muy poca, lo que cansa la vista.

Coherencia Visual
Se mantiene la estructura del homepage en los interiores, que muestran solo un cambio dentro de unas de sus tablas.


Kind Company



Contenido

Coherencia del Rotulado: rotulado descriptivo, para visualizar los trabajos. En la base se mantiene un texto que describe de que se trata la empresa y en lo alto una saludo que los representa y dice de que se trata la pagina.

Logica de Navegación: Posee 2 manera de visualizacion, como galeria de trabajos o como boletin de informacion reciente.

Consistencia del Contenido: posee distintas grillas, pero en este caso no se provoca un desorden, todo esta compuesto dentro de un estilo, bastante sobrio y limpio.

Diseño

Estructura Visual
Composición: Pagina limpia, que se centra en sus trabajos, describiendo lo justo y necesario.

Espacio: buena utilización de espacios blancos, la pagina no esta saturada.

Color: distintos tonos de grises, y el rojo como identificador y resaltador de ideas y secciones.

Contraste: buen contraste, facilita la navegación.

Matices: es una pagina bastante plana en cuanto a matices, pero es el estilo sobrio que se busca.

Imagen: son parte fundamental en la descripción de trabajos.

Contraste de Lectura: buena lectura, buena interlinea.

Coherencia Visual
Completa coherencia entre homepage e interiores.


Sodimac



Contenido

Coherencia del Rotulado: demasiados rótulos, que ademas conducen a distintos lugares.

Lógica de Navegación: saturado, sin lógica de navegación. Presencia de 2 menús desordenados y poco estructurados.

Consistencia del Contenido: poco consistente, poco estable. Luego de navegar por un rato, todo el diseño y estructura cambian sin sentido.

Diseño

Estructura Visual
Composición: Saturada.

Espacio: falta de espacios entre tablas, columnas y divisiones.

Color: Distintos Azules y Celestes.

Contraste: poco contraste.

Matices: pagina plana, sin diseño.

Imagen: se ocupan para mostrar productos.

Contraste de Lectura: no hay preocupación por cajas de texto ni tipografías.

Coherencia Visual
Poca coherencia entre homepage e interiores.

Get your own - Open publication

Segundo Encargo

Crear un sistema de difusión de la Bienal que contenga datos relacionados de al menos 5 fuentes (de información) que se desprendan directamente de las temáticas de la bienal y que sean un complemento al eje central de información.