memoria proyecto sergio aguilera

49
revista y web MEMORIA

Upload: sergio-aguilera

Post on 03-Feb-2016

216 views

Category:

Documents


0 download

DESCRIPTION

memoria del proyecto de sergio

TRANSCRIPT

Page 1: memoria proyecto sergio aguilera

revista y webMEMORIA

Page 2: memoria proyecto sergio aguilera

Análisis del sector.

El sector del diseño gráfico abarca cuatro áreas fundamentales cuyos límites se superponen parcialmente en la actividad profesional. Las áreas son:

1. Diseño para formación

Incluye el diseño editorial. Productos como flyers, libros, periódicos, revistas, catálogos, CD, DVD, etc.

2. Diseño para persuación

Comunicación destinado a influir sobre la conducta del público. Incluye la publicidad y la entidad corporativa: marcas, logotipos, carteles, etc.

3. Diseño para educación Material didáctico como los manuales instructivos, indicaciones de uso, fichas didácticas educacionales, etc.

4. Diseño para administración

Diseño de formularios, señalética urbana, billetes, sellos, etc

¿Que producto editorial hacemos?

REVISTA destinada a informar a estudiantes de

diseño gráfico. Además queremos que los

usuarios sean parte activa de la revista,

mostrando sus trabajos.

Proceso de indagación

Page 3: memoria proyecto sergio aguilera

Proceso de indagación

Revistas relacionadas

Categoría: DiseñoISSN: 0075470002Páginas: 100Idioma: Español

Categoría: DiseñoISSN: 02323424344Páginas: 144Idioma: Español

Categoría: DiseñoISSN: 04587349573Páginas: 80Idioma: Inglés

Categoría: DiseñoISSN: 02753232312Páginas: 120Idioma: Español

Visual es un magazine de diseño, creatividad gráfica y comunicación.

Presenta trimestralmente una mirada global e internacional sobre el diseño y la cultura gráfica

Es la revista de comercio líder para las comunicaciones visuales.

La revista arte y diseño se caracteriza por tener una gran parte sobre enseñanza y formación

CONCLUSIONES

- VISUAL

Muy atractiva visualmente ambito nacional

- ÉTAPES

Muy bien estructurada, ycon mucho contragrafismo.Es la revista más similar a lo que quiero para Univers

- ARTE Y DISEÑO

Mucho contenido para la formación en programas de diseño, no nos interesa.

Page 4: memoria proyecto sergio aguilera

Publico objetivo

El publico objetivo al que va destinado la revista son estudiantes de diseño gráfico, que están en periodo de aprendizaje en esta materia y ya tienen un nivel básico.

Sus gustos son el diseño en general (la comunicación visual) y respecto a las necesidades de este público nos encontramos con personas exigentes (que tienen claro que quieren) y con grandes espectativas de que se lo ofrezcas.

El ámbito territorial del publico objetivo es “Andalucia” y se pretende dirigirse a ellos con un lenguaje directo y coloquial.

PERFIL DEL TARGET- Hombres y mujeres

- Edad entre 20 y 30 años

- Nivel cultural medio-alto

- Nivel socioeconómico medio

- Personalidad ambiciosa, extrovertida

- Estilo de vida liberal y aventurero.

Proceso de indagación

Page 5: memoria proyecto sergio aguilera

Posicionamiento

Quiero posicionar la revista para que sea una gran referencia para los estudiantes de diseño gráfico, donde puedan mostrar sus trabajos y ver trabajos de los demás estudiantes, asi como diseñadores ya consagrados. Debemos conseguir que la revista no se dedique solamente a informar, además debe cubrir ciertas necesidades como la de entretenimiento, una de su principal característica es que va dirigida a un publico específico, a grupos de personas con características comunes entre sí.

Se desea que sea facilmente accesible y que pueda captar el interes de todos los estudiantes. Para ello se pretende que la distribución comercial sea en escuelas de enseñanza de diseño gráfico de toda Andalucía.

POSICIONAMIENTO- Hecha Por y para estudiantes

- Capacidad de Entretenimiento

- Accesible y gratuita

- Distribucción en Escuelas Andaluzas

Proceso de indagación

Page 6: memoria proyecto sergio aguilera

Nombre de la revista

El nombre elegido para la revista es univers El nombre escogido es fundamentalmente porque es el nombre de una tipografia muy conocida y con mucha historia. Es fácilmente reconocible en el mundo del diseño gráfico.

Cabecera de la revista

Una vez escogido el nombre de la publicación debemos construir su cabecera, que será la marca de reconocimiento de esta. Indudablemente la tipografia utilizada será la Univers LT Std en Black.A dicha cabecera se le incorpora también la especificación de la revista.

CABECERA- Cabecera limpia y minimalista

- Especificación en Univers Roman

- Color gris 50%

Proceso de indagación

universestudiamos el diseño

Page 7: memoria proyecto sergio aguilera

Contenidos de la revista

Univers tiene un ritmo de lectura claramente definido en 3 partes, lo que se puede denominar:

- Introducción:

En estas primeras páginas (toma de contacto con la revista), y que son de consumo rápido se hablan de temas de actualidad.

- Nudo:

Contiene el peso informativo de la publicación y es la parte más importante.

- Desenlace:

Ultima parte de la revista y donde los lectores se pueden hacer participes (concursos, libros, agenda)

Libro de estilos

BREVES

SUMARIO

BREVES

ESTUDIANTE DISEÑO

ENTREVISTA DISEÑADOR

ENTREVISTA

TIPOGRAFIA

GRAFISMO

AGENDA

STAFF, EDITORIAL

ESTUDIANTE DISEÑO

ENTREVISTA

ENTREVISTA

LIBROS Y WEBS

TIPOGRAFIA

CONCURSO

C: Color 1T: 1 Tinta

C

C

1T

1T

1T

1T

C

C

C

Page 8: memoria proyecto sergio aguilera

Contenidos

Sumario:Resumen de lo publicado en el numero.

Breves:Ultimas noticias y actualidad en el mundo del diseño gráfico.

Estudiante de diseño:Entrevista y portfolio de los trabajos de un estudiante de diseño gráfico.

Entrevista diseñador:Esta es la sección estrella de la revista, en ella se hará una entrevista amplia a un personaje de relevancia de diseño gráfico.n1_ isaac león /diseñador español, trabaja en varias áreas como director de arte, creativo para campañas publicitarias y como actionscripter.

Tipografia:Sección donde se hablará sobre tipografias. Historia, Tipografias modernas.Ejemplo:n1_ Historia de la tipografia Univers

Grafismo:Sección donde se intercambian según los números: ilustracción, fotografia, infografia.Ejemplo: n1_ Annie Leibovitz (fotografa)

Libros y webs:En esta sección se darán a conocer libros y webs de referencia que debe conocer un diseñador gráfico.

Agenda:Agenda del mes donde podremos encontrar fechas de conferencias, concursos, exposiciones, etc.

Concurso:Cada numero se propone un concurso para que participen los estudiantes. La contraportada se dedicará al ganador del concurso, exponiendo su diseño. Se consigue hacer participes a los lectores en la revista, Ejemplo:n1_ concurso talentos design 2010

Libro de estilos

Page 9: memoria proyecto sergio aguilera

Formato

El formato elegido para la revista Univers es un tamaño proporcional al A4, siendo este reducido a las siguientes medidas:

27cm x 19,1cm.

Con estas medidas se pretende conseguir un formato optimo para el usuario de Univers, al ser unas proporciones muy utilizadas en libros y revistas.Con la revista abierta quedarian las siguientes medidas: 27cm de alto, 38,2cm de ancho

Libro de estilos

Formato elegido: 27 x 19,1

Formato A4 (29,7 x 21)

270

mm

191 mm

Page 10: memoria proyecto sergio aguilera

Reticulas

Márgenes:

Superior: 21,1 mmInferior: 28,7 mmExterior: 15 mmInterior: 15 mm

Reticula:

Nº columnas: 12 Espacio columnas: 4,233 mm

Rejilla base:

Incremento 12 puntosInicio 25,4 mm

Libro de estilos

382 mm

15 mm

15 mm

191 mm

270

mm

21,1

mm

28,7

mm

Page 11: memoria proyecto sergio aguilera

Modulos por sección

Sección actualidad

Para la sección de actualidad se han agrupado las noticias en modulos de5 columnas, dejando 2 de ellas para contragrafismo.

Libro de estilos

Page 12: memoria proyecto sergio aguilera

Modulos por sección

Sección entrevista estudiante

Para esta sección se escogen 2 columnas, dejando una en blanco.Para la cabecera de la sección y la presentación de la entrevista se deja un espacio en la parte superior, con todo el ancho posible.

Libro de estilos

Page 13: memoria proyecto sergio aguilera

Modulos por sección

Sección entrevista diseñador

Esta es la sección principal de la revista. Para ella escogemos 2 columnas por página, agrupando las fotografias y entresacados para la parte superior.Se deja un pequeño modulo de una columna en los margenes exteriores.

Libro de estilos

Page 14: memoria proyecto sergio aguilera

Modulos por sección

Sección tipografia y grafismo

Ambas secciones tienen la misma estructura. La parte superior se reserva para la cabecera de sección. Para el texto solo se usa una columna, y las fotografias se agrupan todas en una columna del mismo ancho.

Libro de estilos

Page 15: memoria proyecto sergio aguilera

Modulos por sección

Sección libros y agenda

Para la sección de libros (pag izquierda) se organiza la información de la siguiente manera (de arriba a abajo): Portada del libro, datos técnicos y para el resto del texto del libro se usa una columna de 5 modulos.

La agenda también se pretende que este bien agrupadas, con modulos para cada evento.

Libro de estilos

Page 16: memoria proyecto sergio aguilera

Tipografias

Respecto a la tipografia usada en la revista se opta por estas tres familias tipograficas de Adrian Frutiger:

UniversVersailles Glypha LT Std

Libro de estilos

abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLM-NÑOPQRSTUVWXYZ0123456789

abcdefghijklmnñopqrstuvwxyzABCDEFGHI-JKLMNÑOPQRSTUVWXYZ 0123456789

abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKL-MNÑOPQRSTUVWXYZ 0123456789

abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKL-MNÑOPQRSTUVWXYZ 0123456789

- Texto base: Univers 9

- Interlineado 12pt

- Color negro

- Titulares con Versailles o Glyphia

según la sección

Page 17: memoria proyecto sergio aguilera

Mancha tipografica

Podemos ver como quedaria la mancha tipográfica con las tipografias escogida y sus carácteristicas.

Capitular: Versailles, bold,14 Texto base: Univers, roman, 9, 11Entresacado: Univers, Oblique, 14, 16

*Tamaño real de como quedaría en la revista

Libro de estilos

En 1951 realiza un estudio sobre la escri-tura occidental que merece un premio del Ministerio del Interior. Su trabajo llega a oídos de Charles Peignot, presidente de la fundición francesa Deberny & Peignot, quien sorprendido por su trabajo preciso y detallista ofrece a Frutiger un puesto en su empresa. Frutiger trabaja en esta fundición durante nueve años, siendo su primer tra-bajo el diseño del tipo President.Durante los años 50 Frutiger supervisa la adaptación de muchos de los tipos clá-sicos de Deberny & Peignot (Garamond, Baskerville, Bodoni, etc) para el sistema de fotocomposición Lumitype (conocido como “Photon” en USA) y en el año 1955 diseña el tipo Meridien para este sistema. Abandona Deberny & Peignot en 1960 para abrir su propio estudio cerca de París (este estudio todavía existe y está ocupado por su socio Bruno Pfäffli). Tipografía simple, clara y robusta, que cumplía perfectamente su objetivo y que como nombre adquiere el mismo que el de su creador, Frutiger. Esta

tipografía no es estrictamente geométrica ni humanista, sus formas están diseñadas para que cada carácter individual sea reco-nocido fácilmente. Aunque en un principio fuese pensada para su uso a gran escala en aeropuertos, su enorme calidad hizo que muchas marcas se apropiaran de ella y hoy

en día es una de las tipografías preferidas en las agencias de publicidad y estudios de diseño. Su uso es casi universal, funcionan-do perfectamente tanto en titulares y carte-les como en grandes bloques de texto.

Frutiger supervisa la adaptación de muchos de los tipos clásicos de

Deberny & Peignot

Univers: Una tipografía de Adrian Frutiger.

Page 18: memoria proyecto sergio aguilera

Portada

Aqui mostramos la cubierta de la revista, La estrategia es escoger un color plano y sobre el poner la cabecera de la revista en gris (50% negro), también se incluye en la esquina inferior derecha el número de la publicación. La cubierta será impresa en papel brillo.

Libro de estilos

estudiamos el diseño estudiamos el diseño

Page 19: memoria proyecto sergio aguilera

Elementos corporativos

A continuación se detallan los elementos coporativos de la propia revista, tales como la cabecera de sección, numeración, siguiente pagina.

univers //actualidad14 puntos bold 12 puntos roman

7 10 puntos roman

sigue en la siguiente página

Libro de estilos

univers //actualidad

univers //tipografía

univers //entrevista

7

univers //actualidad

76

Page 20: memoria proyecto sergio aguilera

Imágenes

Al ser una revista con páginas a todo color y en b/n intento escoger imágenes en blanco y negro originales (que no tenga que quitar el color) para dichas páginas, ya que son diseños de otros diseñadores en su mayoria.Lás imágenes no son retocadas en ningún caso exepto en la apertura de sección de la entrevista ya que la fotografia del diseñador se le ha dado un efecto de tramado.

Libro de estilos

Page 21: memoria proyecto sergio aguilera

Conclusiones

- Conseguir mucho contragrafismo

- Uso de imágenes originales en b/n (sin quitarle el color)

- Jerarquizar bien las páginas

- Que respire la página con grandes márgenes

- No excesivo uso de detalles)

- Conseguir una versión online coherente

Libro de estilos

Page 22: memoria proyecto sergio aguilera

introducciónproyecto

web

Sobre la empresa:

La marca “de Arte” es una empresa joven que se dedica al Diseño Grafico.Nace en el año 2009 como una idea individual donde los diferentes campos a cubrir se van definiendo en función de la demanda de los clientes. Finalmente se opta por trabajar sobre estas lineas generales de forma especializada:

- Identidad corporativa

- Editorial

- Web

- Grafica publicitaria

- Packaging

- Fotografía

Page 23: memoria proyecto sergio aguilera

¿Que necesita la empresa?, ¿Por qué?

El proyecto consiste en la realizar una plataforma web completa adecuada a las necesidades de la empresa y de sus clientes. Tener tu propio sitio web establece tu credibilidad de inmediato online y offline.

En nuestro caso en particular, necesitamos la web para:

- Promoción:

En la web debemos hacer saber al cliente los servicios que ofrecemos, también se mostarán los trabajos ya realizados a otros clientes. Un amplio portfolio dividido en las categorias: Imagen corporativa, editorial, diseño web, packaging...

- Imagen de marca:

Asentar la imágen de marca de nuestro estudio creativo.

introducciónproyecto

web

Page 24: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

La competencia en la red

Dentro del sector del diseño gráfico nos disponemos a analizar las distintas web del sector, para ello nos hacemos las siguientes preguntas:

¿Que webs analizamos?

Dividiremos las web a analizar en tres grupos: - Estudios de diseño de tamaño mediano (son nuestra competencia directa). - Agencias de publicidad - Diseñadores Freelance

Se analizarán las web corporativas de las que disponenen. Dado la gran cantidad de estudios de diseño que hay me decanto por las webs que veo más interesantes, y cuya tecnologia sea accesible.

¿Que información nos interesa? - Lenguaje que utilizan (HTML, PHP, MySQL, JavaScript, ¿Flash?). - Numero de Secciones. - Contenido. - Aspecto.

Page 25: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Brida Estudio creativo

Este estudio creativo con sede en Málaga tiene una estructura sencilla, parte izquierda para mostrar los trabajos y parte derecha para un menu que se divide en dos partes: estudio y portfolio dividido en categorias. En la sección de estudio nos muestran los datos para contactar y los productos/servicios que ofrecen. El menú y la cabecera se encuentran en la parte derecha (algo poco habitual) y nunca cambia, exepto el recurso del circulo que cambia según la sección en la que nos encontremos. Los trabajos se muestran verticalmente con scrool hacia abajo y cada proyecto con un botón ‘ver mas’ que permite ampliarlo con más fotografias.

Zona de muestra de trabajos

Cabecera y menú

Botón ampliar trabajo

GRUPO 1: ESTUDIOS DE DISEÑO

análisis delsector

proyectoweb

Brida Estudio creativo

Este estudio creativo con sede en Málaga tiene una estructura sencilla, parte izquierda para mostrar los trabajos y parte derecha para un menu que se divide en dos partes: estudio y portfolio dividido en categorias. En la sección de estudio nos muestran los datos para contactar y los productos/servicios que ofrecen. El menú y la cabecera se encuentran en la parte derecha (algo poco habitual) y nunca cambia, exepto el recurso del circulo que cambia según la sección en la que nos encontremos. Los trabajos se muestran verticalmente con scrool hacia abajo y cada proyecto con un botón ‘ver mas’ que permite ampliarlo con más fotografias.

Zona de muestra de trabajos

Cabecera y menú

Botón ampliar trabajo

GRUPO 1: ESTUDIOS DE DISEÑO

Page 26: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Be My Design Studio

La web de Be My Design Studio dispone de una pagina de inicio donde muestra una presentación en Flash, en esta presentación está también el menú pudiendo entrar directamente a la sección que desees. El tamaño de la pagina es fijo y esta centrado. Una vez dentro de las secciones los trabajos se muestran hacia abajo. La web también esta disponible en inglés.

GRUPO 1: ESTUDIOS DE DISEÑO

Zona de muestra de trabajos

Cabecera y menú

Pagina de inicio

Page 27: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Tac creativos

GRUPO 1: ESTUDIOS DE DISEÑO

Detalles del trabajo

Zona de muestra de trabajos

Menú

Esta web tiene la particularidad de mostrar los trabajos en la zona superior de la web, de forma horizontal con una barra de desplazamiento. Abajo tiene una zona fija que es el menú dividido en las siguientes categorias y clientes. También disponemos de una zona donde se muestras los detalles del trabajo tales como año, cliente, producto...La web está echa totalmente en Flash.

Page 28: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Takeone

GRUPO 1: ESTUDIOS DE DISEÑO

La caracteristica más importante de esta web es que no tiene menú. Se divide en dos bloques (como podemos ver arriba), la cabecera y el contacto están en el primer bloque y el portfolio se muestra hacia abajo pudiendo ampliarse los trabajos haciendo click en ellos. La tecnologia que usa es HTML y JavaScrip para ampliar los trabajos en una nueva ventana.

Zona de muestra de trabajos

Cabecera

Page 29: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Limón publicidad

GRUPO 2: AGENCIAS DE PUBLICIDAD

En esta web se divide en 4 zonas claramente diferenciadas como se indica arriba. No dispone de ninguna sección sobre la empresa y opta por tener un footer inferior con la dirección, correo electronico, telefono y demás datos.Para contactar con ellos dispone de un formulario arriba. Todas las zonas son fijas excepto la de muestra de trabajos que va cambiando según la categoria en que estemos. Respecto al tamaño es fijo y la pagina esta centrada. Usa la metafora como modo de comunicar.

Zona de muestra de trabajos

Contacto

Menú

Datos de la empresa

Page 30: memoria proyecto sergio aguilera

Zona de muestra de trabajos

Menú y control

análisis delsector

proyectoweb

Oi estudio creativo y publicidad

GRUPO 2: AGENCIAS DE PUBLICIDAD

Respecto a esta web decir que es totalmente diferente a todas las vistas hasta ahora. Está echa totalmente en flash y es muy dinámica. Tiene un escenario que incluso puedes cambiar a tu gusto moviendo los iconos. La web tiene la particularidad de que interactua con el usuario mediante el audio y video. Según la sección en que te encuentres se ejecuta un audio que te va explicando cosas del estudio.

Page 31: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Peha Personal Portfolio

GRUPO 3: DISEÑADORES FREELANCE

Respecto a esta web del freelance nos encontramos con una pagina con una interfaz limpia, con un menú en el lateral izquierdo que siempre se mantendrá en el mismo lugar, la pagina va cambiando el contenido según la sección que escojamos en el menú. Los trabajos se muestran verticalmente hacia abajo, nos muestra 5 trabajos en cada pagina, pudiendo pasar a la siguiente mediante un botón “Next Page”.

Zona de muestra de trabajosMenú

Page 32: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

Isaac León

GRUPO 3: DISEÑADORES FREELANCE

Pagina web muy dinámica y realizada completamente en Flash, nos encontramos todos los trabajos realizados por el diseñador en miniaturas ampliandose cuando pulsamos sobre ellas, dandonos también la información del cliente, nombre del proyecto, año, etc. En el menú podemos encontrarnos un enlace hacia un blog o la pagina de Facebook del freelance.

Zona de muestra de trabajos

Menú

Page 33: memoria proyecto sergio aguilera

análisis delsector

proyectoweb

CONCLUSIONES

- La interfaz tiene que ser clara e intuitiva (lo importante son los trabajos).- Portfolio dividido en categorias.- Para diferenciarnos necesitamos alguna sección diferente. Ejm: Proceso de trabajo.- Lenguaje HTML, uso de javascript para efectos.

Uso de las siguientes tecnologías:

- HTML 4.0- CSS- JavaScript- PHP- MySQL

Page 34: memoria proyecto sergio aguilera

posiciona-mientoproyecto

web

Queremos posiconar a la web como una referencia para nuestros clientes, la cual acudan para ver que está haciendo nuestro estudio y como (proceso de trabajo de nuestros proyectos). También se usará de modo de promoción para captura de nuevos clientes.

Respecto al posicionamiento web depende de 2 procesos:

1º El grado de Optimizacion Web que tiene su página web. Los buscadores tienen que identificar y entender a que se dedica su empresa y que palabras son las que quiere posicionar. Para ello, el codigo fuente de su página web debe de estar perfectamente optimizada para cumplir con los requisitos establecidos de posicionamiento.

2º La Popularidad Web. Una vez optmizada la página es necesario generar popularidad.

Posicionamiento web

Page 35: memoria proyecto sergio aguilera

público objetivoproyecto

web

El público objeto de la web se puede diferenciar en tres grupos fundamentales:

- Clientes: Empresas que necesitan de nuestros servicios. Es el grupo fundamental al que va destinado la pagina web.

- Profesionales del diseño gráfico: Profesionales del mismo sector que entran para investigar que se está haciendo en su materia.

- Estudiantes de diseño gráfico: Estudiantes del sector que quieren estar informados del trabajo que se está realizando en los estudios de diseño, incluso les sirve de inspiración para sus propios trabajos.

El diseño de la web debe estar muy cuidado ya que nos encontramos con un público objetivo exigente, con grandes espectativas y que sabe apreciar el buen diseño. Por tanto es desisivo un buen diseño web para atraer y retener al usuario.

Público objetivo

Page 36: memoria proyecto sergio aguilera

puntofuerte

proyectoweb

El punto fuerte de mi pagina web será el proceso de trabajo que se lleva a cabo a la hora de hacer un proyecto. Como rasgo caracteristico los clientes tendrán acceso a ver el proceso de trabajo de sus proyectos mediante una zona de acceso a clientes que tendrán que estar registrados en la base de datos de la web. Para identificar al usuario necesitamos una base de datos donde estarán los datos de cada cliente, asi como su login y contraseña.

Punto fuerte

Page 37: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Mapa Web y contenido

Home

Proceso de trabajoClientes

Presentación de la empresa, filosofia, contacto...

Servicios que ofrece la empresa.ServiciosPortfolio

Identidad corporativa

Editorial

Web

Packaging

Fotografia

Grafica publicitaria

Zona acceso clientes

0 0

1.112

34

3.13.23.33.43.53.6

4.1

2

3

4.1

Fotografias e información del los trabajos realizados

agrupados por tipo del proyecto.

Proceso de trabajo de los proyectos realizados.

Zona de acceso para que los clientes puedan ver el

proceso de sus trabajos.

Page 38: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Proporciones

Una de las preguntas más frecuentes al diseñar una web es ¿Cual es la mejor resolución? Actualmente, la mejor resolución es la de 1024 x 768 por tres razones fundamentales:

- Visibilidad inicial- Lectura fácil- Estética

960 px

uso Scrool

alineación

Horizontal

Vertical

Centrada

Page 39: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Reticulas y módulos

Al igual que en el diseño editorial el uso de reticulas es esencial para realizar un buen diseño.En este caso se realizará una reticula con estas caracteristicas.

- Fuente base: 12 px- Columnas: 12- Ancho columna: 69 px- Medianil: 12 px

Page 40: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Reticulas y módulos

960 px

69 px

usoScrool

Page 41: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Interfaz

A continuación se detella la propuesta para GUI (interfaz de usuario) de nuestra web. La estrategia utilizada es crear un menú gráfico el cual te permite mediante un script moverte por el scrool según la sección. Por tanto toda la información estará en la misma pagina.

Page 42: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

HOMEIDENTIDAD

CORPORATIVA

FOTOGRAFIA

Proyecto 1

Proyecto 2

Proyecto 3

Proyecto 4

Proyecto 5

Proyecto 6Cliente: cliente

Fecha: 2010

Interfaz

Page 43: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Menú y submenú

Tanto el menú principal como el submenu se-rán gráficos, mediante el uso de iconos.

Adjunto los iconos del menú. El color princi-pal será el gris, al pasar el ratón por encima del icono este será diferente (naranja).

Para ayudar a la navegación el icono de la sección donde nos encontremos se quedará en naranja, con esto ayudamos al usuario a que no se pierda y sepa siempre donde se en-cuentra. También a cada icono del menú y del submenú le acompaña el nombre de la sec-ción, asi reforzará a la imágen y no dará lugar a equivocaciones.

Page 44: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Uso del color

Naranja corporativoR. 255G. 171B. 7

Gris claroR. 214G. 214B. 214

Gris oscuroR. 128G. 128B. 128

Page 45: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Tipografia

Las tipografias elegidas para el proyectos son las siguientes:

Miryam Pro12 px

Britannic Bold14 px

Nativa: para todas las masas de texto (infor-mación de proyecto, etc).

Rasterizada: para el menú y submenú.

Page 46: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Recursos gráficos

Las imágenes del portfolio tienen las siguientes dimensiones:

568 px

302 px

Page 47: memoria proyecto sergio aguilera

libro deestilos

proyectoweb

Recursos gráficos

En el index de la pagina tenemos una presentación en Flash con la siguiente estructura:Las imágenes van pasando automaticamente o manualmente mediante los botones ant/sig.

Menú alternativo del portfolio

Galeria de imágenes de la empresa

Page 48: memoria proyecto sergio aguilera

conclusionesproyecto

web

CONCLUSIONES

- Importante ver muchas web para coger ideas.

Ejemplo: el modo de navegación de mi web es original y no muy utilizado.

- Tener alguna sección que no tenga tu competecia directa.

Ejemplo: la sección de proceso de trabajo del estudio.

- La programación en JavaScript te permite multiples efectos faciles de emplear.

- Lo importante es el CONTENIDO y como se muestra.

Page 49: memoria proyecto sergio aguilera

2º ASergio Aguilera Sánchez