Download - Pauta Brief de Diseño Gráfico
![Page 1: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/1.jpg)
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.
![Page 2: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/2.jpg)
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.
![Page 3: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/3.jpg)
11behance.net/signalnoise
![Page 4: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/4.jpg)
![Page 5: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/5.jpg)
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
![Page 6: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/6.jpg)
behance.com 22
![Page 7: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/7.jpg)
![Page 8: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/8.jpg)
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.
![Page 9: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/9.jpg)
the99percent.com 33
![Page 10: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/10.jpg)
![Page 11: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/11.jpg)
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.
![Page 12: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/12.jpg)
iconology.therndm.com 44
![Page 13: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/13.jpg)
![Page 14: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/14.jpg)
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.
![Page 15: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/15.jpg)
adsoftheworld.com 55
![Page 16: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/16.jpg)
![Page 17: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/17.jpg)
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.
![Page 18: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/18.jpg)
typographyserved.com 66
![Page 19: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/19.jpg)
![Page 20: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/20.jpg)
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
![Page 21: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/21.jpg)
comedycentral.com 77
![Page 22: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/22.jpg)
![Page 23: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/23.jpg)
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.
![Page 24: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/24.jpg)
electricpulp.com 88
![Page 25: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/25.jpg)
![Page 26: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/26.jpg)
Electric Pulp posee un diseño aireado, suelto, con toques de acuarela lo que fusiona la idea de web con la ilustración.
![Page 27: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/27.jpg)
erskinedesign.com 99
![Page 28: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/28.jpg)
![Page 29: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/29.jpg)
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.
![Page 30: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/30.jpg)
thecurtis.com 1010
![Page 31: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/31.jpg)
![Page 32: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/32.jpg)
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.
![Page 33: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/33.jpg)
mikelynchcartoons.blogspot.com 1111
![Page 34: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/34.jpg)
![Page 35: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/35.jpg)
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.
![Page 36: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/36.jpg)
benjerry.com 1212
![Page 37: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/37.jpg)
![Page 38: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/38.jpg)
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.
![Page 39: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/39.jpg)
uglydolls.com 1313
![Page 40: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/40.jpg)
![Page 41: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/41.jpg)
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.
![Page 42: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/42.jpg)
ilustri.pl 1414
![Page 43: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/43.jpg)
![Page 44: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/44.jpg)
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.
![Page 45: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/45.jpg)
![Page 46: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/46.jpg)
Wireframe y MockupPrimera propuesta
![Page 47: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/47.jpg)
![Page 48: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/48.jpg)
Proyecto IlustracionesFlipbook Galerías Mesa 3
Inicio | Mapa de Sitio | Contacto
![Page 49: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/49.jpg)
Diseño de NavegaciónValparaíso a Vuelo de Pájaro
![Page 50: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/50.jpg)
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.
![Page 51: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/51.jpg)
Proyecto IlustracionesFlipbook Galerías Mesa 3
Inicio | Mapa de Sitio | Contacto
![Page 52: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/52.jpg)
IlustracionesFlipbook Galerías Mesa 3Proyecto
Inicio | Mapa de Sitio | Contacto
![Page 53: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/53.jpg)
Proyecto IlustracionesFlipbook Galerías Mesa 3
Inicio | Mapa de Sitio | Contacto
![Page 54: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/54.jpg)
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
![Page 55: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/55.jpg)
Propuesta Tipográfica
![Page 56: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/56.jpg)
Display marca
![Page 57: Pauta Brief de Diseño Gráfico](https://reader030.vdocumento.com/reader030/viewer/2022020209/568bf0891a28ab8933900026/html5/thumbnails/57.jpg)
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.