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 (contenedores) para entregar uno o varios mensa jes, 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 principalmente el index de ella, a excepción de un caso, y el header con parte o su totalidad del contenido.
behance.net/signalnoise
1
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 plataforma es como reune distintos contenidos como información de contacto, muestra de sus traba jos, su circulo de amigos en su cuenta y comentario de su perfil, sin olvidar los sponsor. Ninguno de estos elementos es molesto para otro. La lectura está bien guiada.
+ + + +
Pastillas traba jos (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
2
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 imagenes 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
3
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 todos heredan un código visual. the99percent.com es la página con mayor información textual en el index, 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
4
Icon_ology es un catálogo de arte urbano-popular del mundo en general, 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
5
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 pastillas tipo diapositiva que se hace casi imperceptible el hecho que existan dos ejes de imagen.
typographyserved.com
6
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
7
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
8
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
9
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
10
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 cambiando a su lado. Es de estructura simple pero atractiva.
mikelynchcartoons.blogspot.com
11
Blog de ilustraciones de Mike Lynch. Tambi茅n traba ja 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
12
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 adquiere un rol importante en la animación.
uglydolls.com
13
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 elementos animados, donde prácticamente cualquier enlace que uno vaya hacer click esté la sorpresa que suceda algo previo, como un guiño.
ilustri.pl
14
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ápidamente y puede contener un mensa je más amplio que una frase.
Wireframe y Mockup Primera propuesta
Proyecto
Flipbook
Ilustraciones
GalerĂas
Inicio | Mapa de Sitio | Contacto
Mesa 3
Diseño de Navegación Valparaíso a Vuelo de Pájaro
De lo recogido en las páginas referentes, hemos comenzado a construir nuestro sitio. A continuación un boceto de la forma de navegar, cabe destacar que la página (previo a interactuar con ella) puede verse de colores opacos, sin embargo a medida que el cursor pasa sobre el menú va apareciendo colores y las palomas de nuestra campaña. La idea es generar una sorpresa al lector como también mantener el sentido de humor que hemos estado trabajando para este proyecto.
Proyecto
Flipbook
Ilustraciones
GalerĂas
Inicio | Mapa de Sitio | Contacto
Mesa 3
Proyecto
Flipbook
Ilustraciones
GalerĂas
Inicio | Mapa de Sitio | Contacto
Mesa 3
Proyecto
Flipbook
Ilustraciones
GalerĂas
Inicio | Mapa de Sitio | Contacto
Mesa 3
Proyecto
Flipbook
Ilustraciones
Galer铆as
Mesa 3
FLIPBOOK
Planteamiento >>> Aped quo idis et, quam nonestia 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.
Adquisici贸n >>> 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
<h1> Trebuchet MS </h1>
24 pt
<h2> Trebuchet MS </h2>
18 pt
<h3> Trebuchet MS </h3>
14 pt
<p> Trebuchet MS </p>
11 pt
<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.