Análisis de Referentes+ Aspectos Modulares+ Diseño Gráfico+ Temático

En una carpeta anexa están las imagenes de las páginas en su totalidad, sirven para entender mejor lo que vimos.

Esta selección de referentes se hace a partir desde el uso óptimo de una estructura (conte-nedores) para entregar uno o varios mensajes, como también el parentesco, ya sea mucho o poco, del diseño gráfico con nuestro proyecto.A continuación se mostrará pantallazos de

distintas páginas considerando principalmen-te el index de ella, a excepción de un caso, y el header con parte o su totalidad del contenido.

11behance.net/signalnoise

Este es el caso que hace la excepción, es el portafolio on-line de alguien que tiene una cuenta en behance.com. Lo interesante de esta platafor-ma es como reune distintos contenidos como información de contacto, muestra de sus trabajos, su circulo de amigos en su cuenta y comenta-rio de su perfil, sin olvidar los sponsor. Ninguno de estos elementos es molesto para otro. La lectura está bien guiada.

+ Pastillas trabajos (degradación).+ Paleta cromática bien resuelta.+ Muy dúctil para navegar.+ Es fácil de entender de que trata a primera vista

behance.com 22

A diferencia de lo que muchos creen sobre “mucho color sinónimo de buen diseño”, esta página resuelve de manera austera pero muy fina el tema cromático. Solo con 2 colores arman el index entero, y las image-nes están en blanco y negro a excepción de unos colores que siguen la coherencia visual.

+ + + +

Buena conducción de los contenidos (pasos de lectura).Paleta cromática sencilla.Interesante efecto a hover en las pastillas.Index con la información precisa para comenzar a seguir navegando en ella.

the99percent.com 33

De la misma empresa Behance, esta página tiene que ver con un evento de congregación de diseñadores. Lo que queremos destacar con esto es como un gran sitio puede tener diferentes sub-sitios sin embargo to-dos heredan un código visual. the99percent.com es la página con mayor información textual en el in-dex, no obstante tienen una ley entre contenido ~ estructura.

+ + + +

Describe el tema con una cita de Edison.Mucho texto, densa mucho la info del index.Sin embargo los divs distinguen bien los items.El espacio entre cada div es el mismo, y por ende le da una estructura ordenada visualmente.

iconology.therndm.com 44

Icon_ology es un catálogo de arte urbano-popular del mundo en gene-ral, y como tal el index parte de una vez mostrando sus últimas entradas. Y similar a el caso anterior, acá explican su temática con una definición de diccionario.Otro punto interesante, a propósito de su propuesta gráfica, es que los post están diseñados horizontalmente.

adsoftheworld.com 55

El fin de analizar páginas tipo catálogo, es ver como ellas resuelven juntar material muy diferente entre sí y como la hacen homogénea en el diseño del index. Lo interesante está en la toma de decisión de los contenedores, ya sea de imagen o texto, que es lo que permite tener una linea gráfica. En “Ads of the World” se puede apreciar que sin importar el formato de la imagen, horizontal o vertical, consiguen darle un orden en las pasti-llas tipo diapositiva que se hace casi imperceptible el hecho que existan dos ejes de imagen.

typographyserved.com 66

En esta página solo queremos destacar el contraste cromático, que es bien osado y aun así no es ruidoso con el contenido en sí. Es bien ligero para la lectura la división de dos partes verticales del body, una para el contenido principal y la otra para distintos propósitos desde banners o sponsor hasta buscadores y noticias.s

comedycentral.com 77

Comedy Central posee una gráfica llamativa, entregando a través de los módulos del contenido, una soltura un poco lúdica, pero sin perder formalidad.También los colores generan un ambiente con gracia.

electricpulp.com 88

Electric Pulp posee un diseño aireado, suelto, con toques de acuarela lo que fusiona la idea de web con la ilustración.

erskinedesign.com 99

Diseño ultra simple, pero con pequeños detalles que le entregan una mano más suelta.Esto se nota en el menú y en el logotipo del sitio, que se asimila mucho a la intención de nuestro proyecto.

thecurtis.com 1010

La gran cantidad de colores lo convierten en un sitio llamativo, dinámico tanto en el diseño, como en la visualización de imágenes que van cam-biando a su lado.Es de estructura simple pero atractiva.

mikelynchcartoons.blogspot.com 1111

Blog de ilustraciones de Mike Lynch. También trabaja el concepto de la irónia y la interacción de animales con el ser humano. Aunque no tengan color, son de líneas interesantes y llaman a la lectura.

benjerry.com 1212

A partir de este referente y los otros dos que quedan, si bien no tienen estilo CSS (están hechos en Adobe Flash), están diseñado conservando el dibujo como herramienta primordial para comunicar su temática.En Ben & Jerrys se puede destacar el manejo de colores (lo opuesto a Behance) que favorece su producto, helados. También como la vaca ad-quiere un rol importante en la animación.

uglydolls.com 1313

El caso de Ugly Dolls es una página ilustrada, a diferencia del anterior que la ilustración es una herramienta pero no todo el contenido.El juego en páginas como esta es la interacción del cursor con los ele-mentos animados, donde prácticamente cualquier enlace que uno vaya hacer click esté la sorpresa que suceda algo previo, como un guiño.

ilustri.pl 1414

Este caso en sí es el extremo de una página hecha a base de ilustración, sin estilo CSS, y al igual que el ejemplo anterior, el hecho de que se haya construído una página web en Adobe Flash para poder animar muchos elementos gráficos, hace que la página se demore mucho en cargar. No obstante, el dibujo puede potenciar mucho siempre y cuando sea el elemento primordial, ya que por sus características seduce rápidamen-te y puede contener un mensaje más amplio que una frase.

Wireframe y MockupPrimera propuesta

Proyecto IlustracionesFlipbook Galerías Mesa 3

Inicio | Mapa de Sitio | Contacto

Diseño de NavegaciónValparaíso a Vuelo de Pájaro

De lo recogido en las páginas referentes, he-mos comenzado a construir nuestro sitio. A con-tinuación un boceto de la forma de navegar, cabe destacar que la página (previo a interac-tuar con ella) puede verse de colores opacos, sin embargo a medida que el cursor pasa so-bre el menú va apareciendo colores y las palo-mas de nuestra campaña. La idea es generar una sorpresa al lector como también mantener el sentido de humor que hemos estado traba-jando para este proyecto.

Proyecto IlustracionesFlipbook Galerías Mesa 3

Inicio | Mapa de Sitio | Contacto

IlustracionesFlipbook Galerías Mesa 3Proyecto

Inicio | Mapa de Sitio | Contacto

Proyecto IlustracionesFlipbook Galerías Mesa 3

Inicio | Mapa de Sitio | Contacto

FLIPBOOK

Proyecto IlustracionesFlipbook Galerías Mesa 3

Planteamiento >>>

Adquisición >>>

Aped quo idis et, quam nones-tia quasi aut rem nobit ariorpo resentu ribus, quas sit ut arum la simustis pora asiti aut quis aut latis ati dolum etur, solorae esequas moluptia et qui dio.

Tum, sum fugit apis ped ent re nonet et harchit ut verrum recullaborem culla volorru ptii

Inicio | Mapa de Sitio | Contacto

Propuesta Tipográfica

Display marca

Html

24 pt

18 pt

14 pt

11 pt

<h1> Trebuchet MS </h1><h2> Trebuchet MS </h2><h3> Trebuchet MS </h3>

<p> Trebuchet MS </p>

<small> Trebuchet MS </small> 9 pt

Creemos que la fuente Trebuchet MS, una de las fuentes segura para la web, en su forma tipográfica (en su trazo, curvas y ojo de la letra) tiene algo que la hace muy diferente a las demas Sans-Serif en el sentido que pareciera que fuera dibujada como caricatura y no tan rígido como las demás de esa familia. Es por eso que hemos elegido esta fuente para la página.