26
Instituro Profesional DuocUC Sede San Carlos de Apoquindo Escuela de Diseño Proyecto: “Me Tinca Editorial” Profesor: Pablo Lobos Alumnos: Cristián Ballerines Hernandez Patricio Moreno Brevis Camila Vidal Swett Informe ME TINCA EDITORIAL

Informe Web

Embed Size (px)

DESCRIPTION

En el siguiente informe se encuentran los fundamentos de la página queb meticaeditorial.com

Citation preview

Page 1: Informe Web

Instituro Profesional DuocUCSede San Carlos de Apoquindo

Escuela de Diseño

Proyecto: “Me Tinca Editorial”Profesor: Pablo Lobos

Alumnos: Cristián Ballerines HernandezPatricio Moreno Brevis

Camila Vidal Swett

Informe

ME TINCA EDITORIAL

Page 2: Informe Web

2

Page 3: Informe Web

3

Informe Taller Multimedia

AlumnosCrisitian Ballerines HernandezPatricio Moreno BrevisCamila Vidal Swett

ProfesorPablo Lobos

AsignaturaTaller Multimedia

CarreraDiseño Gráfico

Duoc UCSan Carlos de Apoquindo

Santiago de Chile, 17 de Diciembre, 2010

Page 4: Informe Web

4

Page 5: Informe Web

INDI-CEINTRODUCCION

DESCRIPCION DEL PROYECTO

Problema y Oportunidad Conceptualización Proyecto Foda Definición de Usuarios

IMAGEN, CREACION Y DESARROLLO

MANUAL DE MARCA

Tamaño Mínimo Area Autónoma

COLOR, DESCRIPCION & ATRIBUTOS

PAPELERIA Tarjeta de Presentación. Sobre Americáno Hoja Carta

TIPOGRAFIA

ARQUITECTURA DE LA INFORMACION

Procesos Wireframe Final Mock Up Final Mock Up Final

07

08

08080910

12

13

1313

14

16

171819

20

22

23252627

Page 6: Informe Web

6

INTRO-DUCCIONColectivo: Proyecto:

Proyecto que busca resolver una pro-blemática de información editorial y mejorar las condiciones de ayuda a usuarios, mediante un soporte virtual. Buscamos educar en el área de diseño gráfico editorial, organizando los temas tratados para el proyecto, incorporan-do los conocimientos adquiridos en estos años de estudios de la carrera, integrándolos en el medio multimedia.

Yapo Colectivo corresponde a un grupo formado por tres estudiantes de Diseño Gráafico. El colectivo nace al darnos cuenta de que cada uno maneja un tema en particular mejor que el otro, complementandonos.

Es así como nuestro primer proyecto está relacionado con los libros y editorial en sí, ya que es en esta área donde cada uno puede desempeñarse y entrelazar ideas, buscando un resultado lo mas completo posible en cuando a diseño y a satisfacción por el mismo.

PRO-YECTO

Page 7: Informe Web

7

DESCRIPCION, PROBLEMA, CONCEPTUALIZACION, FODA & USUARIOS

PRO-YECTODetección problema y oportunidad:

En el estudio de información de diseño editorial, son muchos los usuarios que buscan temas relacionados en esta área, la cual abarca distintos y amplios temas.

Esto se vuelve un problema cuando la información no es especifica, sobretodo si existe la constante exploración para lograr un resultado óptimo.

Existen muchas páginas relacionadas con el tema en cuestión, pero el proble-ma general es que no explotan el tema en profundidad. Casi todos estos medios, resuelven solo algunas problemáticas, hablan sobre ciertos temas, como los foros por ejemplo, en donde se puede ver como los usuarios llegan a ellos en búsqueda de una respuesta.

Conceptualización proyecto:Los conceptos a ocupar son muy si-milares a los ocupados en la concep-tualización del colectivo, esto debido a que el colectivo y su gráfica fueron pensados para integrar todos los as-pectos del diseño gráfico.En la conceptualización del logo quisi-mos que se vieran reflejados aspectos tanto gráficos, como de terminaciones editoriales (troquel). En cuanto al color el negro y el blanco aparecen por los aspectos digitales y análogos del tema editorial, siendo el color rojo el balan-ce cromático de la composición, que aporta con calidez a la marca.Conceptos1. Simpleza2. Actualidad3. Dinamismo4. Juventud

Page 8: Informe Web

8

FODAFortalezas

1. Compilar toda la información relacio-nada al diseño editorial en un solo sitio.

2. Incorporar referentes hechos por estu-diantes de la carrera y de la institución, para poder vincular más estrechamente al mismo, a la comunidad de diseña-dores y a los consumidores del diseño editorial en lo novedoso y actual de las propuestas de los estudiantes.

3. Abarcar los aspectos análogos y digitales del diseño editorial.

Oportunidad

1. Llegar a ser una alternativa interesante para, las empresas o particulares que deseen, publicitar o promocionar pro-ductos y servicios, relacionados al diseño editorial, debido al público objetivo aquien está dirigida nuestra página y a lo atrayente del material que mostremos.

2. Expandir el número y diversidad de contactos profesionales en el área del diseño editorial.

3. Promocionar nuestro propio trabajo reflejado en el diseño del sitio y la con-ceptualización del mismo, en cuanto a su proyección, gestión y análisis del proyecto

Debilidades

1. Existe la posibilidad de que, en un comienzo, el público objetivo del sitio pase a ser exclusivamente estudiantil, ya que como sabemos, los estudiantes de diseño son la base piramidal de nuestro proyecto debido a que dentro de la maya de la carrera el aspecto editorial es parte integral de la formación del profesional.

Amenazas

1. Pasa por aspectos internos, ya que debemos mantener actualizados los trabajos y los contenidos, para lo cual debemos mantener contacto con los talleres de editorial y los contenidos que tratan.

Page 9: Informe Web

9

Definición de usuarios:

Hemos definido nuestro proyecto en dos etapas: En la primera etapa el usuario será básicamente estudiantes de entre los 18 y los 23 años en busca de conoci-miento respecto del diseño editorial en todas sus aristas, lo que involucra softwares, sustratos, tipografías, retículas (como usarlas y como generarlas), encuadernación, terminaciones (folia, troquel, relieve), referentes (revistas, libros, desplegables, etc) y datos prácticos de como conseguir los mejores resultadospara hacerlos de manera casera.

El contenido generado en esta primera etapa tendrá directa relación con los contenidos que se verán en el taller editorial para generar un mayor volu-men de visitas y de pregnancia entre los alumnos.

En una segunda etapa pretendemos que el mismo usuario inicial (los estu-diantes) continúe visitando el sitio, pero con fines profesionales con el fin de actualizarse con referentes, para usar a modo de ejemplo al momento de estar en una reunión con algún cliente y/o quizás a través del sitio educar a los clientes en lo que es considerado un trabajo de calidad, mejorando la comunicación entre el cliente y el diseñador.

Page 10: Informe Web

10

IMA-GEN CREACION & DESARROLLO DE LA IMAGEN

El proceso para la creación de la iden-tidad del proyecto, se basa en la bús-queda de los conceptos que queriamos y necesitabamos enfocar al público.

Estos atributos corresponden a una estética simple pero pregnante, obte-niendo un llamado de antención que no resulta agotador a la vista ni como gráfica aplicada al proyecto en sí.

Cerca de la mitad del proyecto, nos encontramos con el problema del “avatar“. Gran parte del desafio es aplicado a redes sociales, por lo tanto debimos crear una imagen especial para estos formatos.

Marca final

Avatar

Procesos

Page 11: Informe Web

11

MAR-CA

MANUAL DE

Yapo es una marca juvenil que busca ser pregnante en base a líneas y colo-res planos, los conceptos usados en el desarrollo de la marca son:

SimplezaActualidadDinamismoJuventud

Area autónomaSe refiere al espacio mínimo donde no puede ir ubicado cualquier otro elemento gráfico.

Tamaño Mínimo:Será utilizado en la papelería, como es el caso de este manual. Tendrá un tamaño de 3 x 2 cm.

3 cm

2 cm

Page 12: Informe Web

12

Monocromática

Yapo funciona oficialmente para todo su formato de papelería en hoja carta en color verde, en las tarjetas de pre-sentación los espacios de color pueden variar al igual que en su formato web donde además puede llevar fotografías dependiendo del tema del que se trate.

Complementos

La gráfica complementaria comprende las barras en sentido diagonal, tal y como aparecen en la gráfica del ma-nual y la papelería y la etiqueta que a continuación se presenta.

Restricciónes de color

Las restricciones se aplican en los casos en que el color de fondo o la imagen contengan negro en el lugar donde la marca irá o en el caso de que estos mismos tiendan a confundirse con el color negro de las lineas de la marca.

Colores corporativos

Yapo funciona oficialmente para todo su formato de papelería en hoja carta en color verde, en las tarjetas de pre-sentación los espacios de color pueden variar al igual que en su formato web donde además puede llevar fotografías dependiendo del tema del que se trate.

CO-LORDESCRIPCION & ATRIBUTOS

Page 13: Informe Web

13

C: 61M: 0Y: 100K:0

R: 0G: 255B: 56

R: 0G: 173B: 230

C: 100M: 0Y: 4K:0

R: 234G: 0B: 134

C: 0M: 0Y: 100K:0

R: 247G: 148B: 30

C: 0M: 50Y: 100K:0

Colores CorporativosMonogromáticaComplementosRestricciones

Page 14: Informe Web

14

PAPELE-RIALa papeler ía de Yapo Colec t ivo, pertenece a la misma estética de este, aplicada de un modo mas completo, complementando formas y conceptos antes analizados.

La imagen de nuestro colectivo varia según el formato y/o tema tratado; por lo tanto hemos aplicado la misma lógica al momento de diseñar nuestras tarjetas de presentacion y restode los componentes que pertenecen a la papelería clásica.

El color verde se estable a modo grupal, al momento de presentarnos como un grupo perteneciente al ambito del dis-eño, pero cuando es hora de abarcar ofertas laborales personales, existe la opcion de optar por colores estblecido para cada uno de nosotros.

TARJETAS DE PRESENTACION, SOBRE AMERICANO & HOJA CARTA

Page 15: Informe Web

15

Tarjetas de Presentación

Page 16: Informe Web

16

Retiro Sobre AmericánoTiro Sobre AmericánoSobre Americáno abierto

Page 17: Informe Web

17

Hoja Carta

Page 18: Informe Web

18

TIPO-GRAFIALa tipografia elegidas son pertenecen a familias tipograficas amplias y reco-mendadas. Son caracteres simples y de fácil lectura

Din Pro

LightRegularMediumBoldBlack

Extra LightBookMediumDemiBold

Extra Light ObliqueBook ObliqueMedium ObliqueDemi ObliqueBold Oblique

Avant Garde Gothic

Extra Light CondensedBook CondensedMedium CondensedDemi CondensedBold Condensed

Extra Light Condensed ObliqueBook Condensed ObliqueMedium Condensed ObliqueDemi Condensed ObliqueBold Condensed Oblique

CORPORATIVO &COMPLEMENTARIA

Page 19: Informe Web

19

8 pt A a B b C c D d E e F f G g9 pt A a B b C c D d E e F f G g10 pt A a B b C c D d E e F f G g11 pt A a B b C c D d E e F f G g12 pt A a B b C c D d E e F f G g14 pt A a B b C c D d E e F f G g16 pt A a B b C c D d E e F f G g18 pt A a B b C c D d E e F f G g20 pt A a B b C c D d E e F f G g

8 pt A a B b C c D d E e F f G g9 pt A a B b C c D d E e F f G g10 pt A a B b C c D d E e F f G g11 pt A a B b C c D d E e F f G g12 pt A a B b C c D d E e F f G g14 pt A a B b C c D d E e F f G g16 pt A a B b C c D d E e F f G g18 pt A a B b C c D d E e F f G g20 pt A a B b C c D d E e F f G

Tipografía Corporativa:Din Pro Light

Tipografía Complementaria:Avant Garde Gothic Extra Light

ABCDEFGHIJKLMNÑO-PQRSTUVWXYZ

abcdefghijklmñnopqrs-tuvwxyz

1234567890¡!#$%/&*()_+

ABCDEFGHIJKLMNÑO-PQRSTUVWXYZ

abcdefghijklmñnopqrs-tuvwxyz

1234567890¡!#$%/&*()_+

Page 20: Informe Web

20

INFOR-MACIONARQUITECTURA DE LA

La información tratada en el proyecto “Me Tinca Editorail”, es un ayuda para alumnos, diseñadores y/o clientes, como ya se a mencionada neteriormente.

Buscamos con esta información, aclarar dudas y mostrar nuevas opciones en el ámbito editorial, para luego posi-cionarnos y ser reconocida como un red satisfactoria dentro del ámbito del diseño.

Los contenidos tratados están divididos en dos tópicos fundamentales: lo digital y lo análogo, por lo tanto mostramos e informamos a nuestros usuarios desde estos dos puntos de vistas.

Wireframes & Mock Ups

Los primeros bocetos de la página web interpretaban un estilo adolescente y un tanto desordenado., alejandose del modo visual en que queriamos representar nuestro proyecto.

Estos primeros esbozos, resultaron ser desordenados y poco claros, lo tanto hibo un replanteamiento en la forma visual de ser representados.

En cambio, los bocetos finales se acer-can a los conceptos que trabajamos desde un principio, representandonos y representados nuestro proyecto

Page 21: Informe Web

21

FORMATOS

Métodos

Aureo Raiz de 2 2:3

Partes del Libro

CAJAS TIPOGRáFOCAS Tamaños Aureo 2:3 Proporcional

FOLIOS

Numericos Explicativos Particularidades

COMPOSICION Tipos de Parrafos

REQUISITOS GENERALES

REFERENTES

RECURSOS

Mapa de Información

Page 22: Informe Web

22Procesos Wireframes y Mock Ups

Page 23: Informe Web

23Wireframe Home

Page 24: Informe Web

24Wireframe Interior

Page 25: Informe Web

25Mock Up Final

1- Botonera Navegación2- Información de temas3- Temas4- Redes sociales5- Buscador

Page 26: Informe Web

Metincaeditorial.com