CAPITULO I

CONCEPTOS GENERALES

www.cromodesign.com.ec
CAPITULO II

www.cromodesign.com.ec
CAPITULO III

www.cromodesign.com.ec
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

DIAGRAMA DE FLUJO PAGINA WEB

CROMO DESIGN

ENTRAR

HOME INTEGRANTES PORTAFOLIO BLOG CONTACTOS

INTEGRANTES JUAN DISEO GRAFICO BLOG CROMO

PORTAFOLIO
SANTIAGO CORPORATIVO NOMBRE
BLOG
ANDRES ILUSTRACION EMAIL
CONTACTOS
EDITORIAL TEMA
WEB MENSAJE
MODELADO 3D
ANIMACION

DISEO INTERIOR

18
JERARQUIA

ENTRAR

HOME INTEGRANTES PORTAFOLIO BLOG CONTACTOS

DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Retcula

Este tipo de navegacin es una combinacin entre la

estructura secuencial y la de jerarqua, ordena la informacin
categricamente; es utilizada generalmente para uso acadmico. La re-
tcula de CROMO tiene como base la que se utilizo en el Home, la cual
se divide en tres partes en sentido vertical y cinco en sentido horizon-
tal para as en los espacios determinar mens, secciones, botones, etc.

Empezaremos describiendo y explicando el porque se

colocaron todos los elementos para determinar la retcula de esta interfaz:
De arriba abajo tenemos: en el bloque superior de izquierda a derecha tenemos:
en el centro tenemos la barra de men en iconos y el ttulo, en el bloque central
debajo del men tenemos los submens y en el ttulo, en el siguiente bloque tene-
mos las secciones y en el bloque inferior tenemos un banner y en el los siguientes
elementos de izquierda a derecha: copyright, en el centro logo de cromo ani-
mado y contactos con la marca. A continuacin tenemos el grfico de ejemplo:

Retcula Home

RETICULA
MENU ICONOS HOME
SUB MENU ANIMADO

SECCIONES

PIE BANNER ANIMADO PIE

En la siguiente retcula hay un ligero cambio pero se mantiene con la estructura

de la retcula anterior: En el segundo bloque de izquierda a derecha: texto y sec-
ciones como se muestra en el siguiente grfico:

20
RETICULA
MENU ICONOS INTEGRANTES

TEXTO SECCIONES

PIE BANNER ANIMADO PIE

RETICULA
MENU ICONOS PORTAFOLIO

SECCIONES

BARRA
DE DESPLIEGUE

PIE BANNER ANIMADO PIE

DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

En la siguiente retcula ha y cambios puesto que es aqu donde se pone

mas nfasis a la imgenes de los trabajos, en el primer bloque en el cen-
tro tenemos: Men y debajo del mismo ttulo, en el tercer bloque tenemos
men desplegable men de imgenes e imagen, en el quinto bloque te-
nemos copyright, logo animado y contactos. A continuacin la grfica:

RETICULA
MENU PORTAFOLIO

MENU
DESPLEGABLE

MENU
IMAGENES
IMAGEN
PEQUEAS

PIE BANNER ANIMADO PIE

En la ltima retcula tenemos de arriba abajo y de izquierda a derecha: en el

primer bloque marca, men y ttulo, en el tercer bloque tenemos en el centro
formulario de contactos y a la derecha datos CROMO y en el cuarto cloque tene-
mos copyright, banner con logo animado y contactos. A continuacin la grfica:

RETICULA
MENU ICONOS CONTACTOS

FORMULARIO DATOS
DE CONTACTOS AGENCIA

PIE BANNER ANIMADO PIE

22
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

3.3.3 Interfaz

Interfaz es la conexin e interaccin entre hardware, software y el usua-

rio. La evolucin de la informtica ha sido tan rpida que hace muy poco
tiempo que disponemos de la suficiente potencia informtica a bajo cos-
te para usarla libremente facilitando as la interaccin entre usuario y orde-
nador. Antes se consideraba frvolo e incluso antieconmico dedicar tiem-
po y dinero a la interfaz de usuario, porque los ciclos del ordenador eran
tan valiosos que haba que emplearlos en problema, no en la persona. 23

Debemos tener muy en cuenta esta definicin para poder crear una interfaz
teniendo claro que la funcin y el diseo de la interfaz son muy importantes, es
por eso que Nicols Negroponte dice: la mejor interfaz debera tener muchos
canales de comunicacin diferentes, a travs de los cuales un usuario podra
expresar y reconocer inmediatamente mediante su anlisis toda una serie de
sensores distintos (los del usuario y los de la mquina). O tambin, y esto es importante,
un canal de comunicacin podra suministrar la informacin que faltaba en el otro.

El diseo de interfaz de CROMO como principal aliado tendr a la imagen grfica ya

que ser una buena estrategia de enganche a usuarios utilizando estrategia sensorial
y perceptiva de los sentidos, el diseo de estructura determina un orden secuencial
que ayuda a la navegacin y la jerarqua que forman conjuntamente una interfaz
con criterios estticos y conceptuales que no saturan al usuario en su navegacin.
CROMO manejo elementos legibles tales como textura de piedra explcitamente el
metal cromo dando ese aspecto de dureza y solidez como imagen en su interfaz.
Es por ello que el resultado buscado y planificado se ve plasmado en
una interfaz esttica, agradable y dinmica en su navegacin pues
es fcil de usar, su navegacin es secuencial y no satura al usuario.

3.3.4 Cromtica

El color ha sido el principal elemento en el campo de la comunicacin de los

ltimos tiempos, los medios impresos y Web cada da aprovechan este re-
curso para comunicar aprovechando los avances tecnolgicos y digita-
les que el mundo experimenta hoy en da, un ordenador es capaz de pro-
ducir millones de colores que son utilizados para nuestros computadores.
En la composicin de una pgina Web juegan un papel muy importante los
colores que usemos para el diseo. Los colores se indican en valores RGB,
es decir, que para conseguir un color cualquiera debemos mezclar canti-
dades de Rojo, Verde y Azul que son los colores aditivos. A cada color corres-

23 Nicholas Negroponte, El Mundo Digital, Editorial. B.S.A.,Barcelona, 2002, p 60

23
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

ponde con 6 tonos de rojo, 6 de azul y 6 de verde, a partir de los cuales se

obtiene por mezcla entre ellos los 216 colores posibles para Web por lo que
todos ellos tendrn un cdigo hexagecimal en el que cada color primario
viene definido por una pareja de valores iguales que se componen con valores
RGB dentro de un rango, son los compuestos por valores 00, 33, 66, 99, cc, ff.

En el mundo del diseo la forma en la que aplicamos el color es un aspecto de la

mxima importancia, a travs de los colores somos capaces de comunicar sensa-
ciones o sentimientos empleando muy poco espacio y muy poco tiempo. Estos dos
aspectos hacen que sea bsico su uso en una pgina Web, en donde en un tiempo
menor de diez segundos debemos captar la atencin de nuestros visitantes si no que-
remos que abandonen nuestra Web para irse a otro lugar que capte ms su atencin.

Un uso adecuado del color en una pgina es una clave segura para su xito.
A la hora de navegar por la red todos nos hemos encontrado con las tpicas
pginas con aspecto descuidado, o con pginas donde a veces el texto era ile-
gible debido a una mala combinacin de los colores. O donde el uso de colores
chillones nos ha alterado y enseguida nos hemos ido a otro lugar ms agradable. 24

La cromtica de CROMO que utilizaremos en nuestro proyecto de

pgina, estarn regidos bajo el sistema RGB del sistema
hexagecimal, este sistema nos ayudar a encontrar los colores exactos para
nuestra pgina, los colores que usaremos para nuestra pgina estn basa-
dos en la cromtica utilizada en nuestro manual corporativo de la agencia.

En la pgina de CROMO DESIGN se usar colores bases tales como:

Colores fros neutros:

000000 al 100%

000000 al 40%

FFFFFF al 100%

24 Internet: http://www.desarrolloweb.com/articulos/1879.php
24
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

25 Internet: http://diseno.ciberaula.com/articulo/tipografia_diseno_grafico/
26
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

26 Royo Javier, Diseo Digital, Ediciones Paidos Ibrica S.A., Barcelona Espaa, 2004
28
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

ESTRUCTURA DE LOS ICONOS DE CROMO

0,7467cm
0,8231 0,7911cm 0,832cm 0,7248 cm

1,301cm 0,7467cm 1,5052cm 0,6879cm 1,22cm

SOLIDEZ DIVERSIDAD VARIEDAD FUERZA LIBERTAD

29
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

3.4 Diseo de la pgina Web de CROMODESIGN

3.4.1 Bocetaje de concepto y estructura lineal

PLANIFICACION Y DIAGRAMA DE FLUJO

DIAGRAMA DE FLUJO PAGINA WEB

CROMO DESIGN

ENTRAR

HOME INTEGRANTES PORTAFOLIO BLOG CONTACTOS

INTEGRANTES JUAN DISEO GRAFICO BLOG CROMO

PORTAFOLIO
SANTIAGO CORPORATIVO NOMBRE
BLOG
ANDRES ILUSTRACION EMAIL
CONTACTOS
EDITORIAL TEMA
WEB MENSAJE
MODELADO 3D
ANIMACION

DISEO INTERIOR

30
JERARQUIA

ENTRAR

HOME INTEGRANTES PORTAFOLIO BLOG CONTACTOS

DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

ESTRUCTURA LINEAL Y RETICULA

RETICULA
MENU ICONOS HOME
SUB MENU ANIMADO

SECCIONES

PIE BANNER ANIMADO PIE

32
RETICULA
MENU ICONOS INTEGRANTES

TEXTO SECCIONES

PIE BANNER ANIMADO PIE

DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

ESTRUCTURA LINEAL Y RETICULA

RETICULA
MENU PORTAFOLIO

MENU
DESPLEGABLE

MENU
IMAGENES
IMAGEN
PEQUEAS

PIE BANNER ANIMADO PIE

34
RETICULA
MENU ICONOS PORTAFOLIO

SECCIONES

BARRA
DE DESPLIEGUE

PIE BANNER ANIMADO PIE

DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

ESTRUCTURA LINEAL Y RETICULA

RETICULA
MENU ICONOS CONTACTOS

FORMULARIO DATOS
DE CONTACTOS AGENCIA

PIE BANNER ANIMADO PIE

36
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Boceto digital integrantes

Tendremos las secciones de los integrantes.

38
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Boceto digital portafolio

Vista grfica digital de una de las secciones del portafolio.

40
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Boceto digital portafolio

Vista grfica digital de una de la seccin de contactos.

42
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Vista real de la pagina en la red

Vista real del home en la red.

43
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Boceto digital portafolio

Vista real en la red la seccin de integrantes.

44
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Boceto digital portafolio

Vista real en la red la seccin de portafolio, seccin ilustracin

DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

Boceto digital portafolio

Vista real en la red la seccin de contactos.

46
ANEXOS

www.cromodesign.com.ec
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

3.5 Anexos

Entrevista realizada a Renato Puruncajas diseador.

47
BIBLIOGRAFIA

www.cromodesign.com.ec
DISEO DE LA PAGINA WEB
DE LA AGENCIA DE CROMO DESIGN

3.6 Bibliografa

FLEMING Pal y ALBERDI Ma. Jos, Hablemos de Marketing Interactivo, Editoria

Nicholas Negroponte, El Mundo Digital, Editorial. B, S.A.,Barcelona, 2002
Istvan Schritter, La otra Lectura, ilustraciones en los libros de los nios, Lugar
Editorial S.A., 2005
LOGOS, logotipos, identidad, marca, cultura, Conway Lloyd Morgan, Edit. Mc
Graw Hill
LOGO DESIGN, Ed. Julius Wiedemann, Edit. Taschen
Web Design index6, Gunter Beer
EWAR K Quentin, Qu es el diseo?, Editorial Gustavo Gili, Singapur, 2002
Istvan Schritter, La Otra Lectura, Lugar Editorial S.A., Buenos Aires, 2005
revista AR TE Y DISEO N 97, 1999
HAHN Harley, Internet Manual de Referencia, Editorial Osborne Mc Graw-Hill,
Madrid Espaa, 1994
WYATT Allen, Magia de Internet, Editorial Mc GRAW-HILL, Mxico D.F. Mxico,
1995, Pgina 6
FLEMING Paul y ALBERDI Ma. Jos, Hablemos de Marketing Interactivo, Editorial
ESIC, Madrid-Espaa, 2000.
Nicholas Negroponte, El Mundo Digital, Editorial. B.S.A.,Barcelona, 2002
Diario el Telgrafo, 2010-01-07
Diario El Mercurio, 2010-01-17, seccin Temas, pgina 2B

Web

Internet: http://www.sdgestudio.com/usos_de_la_pagina_web.html
http://www.desarrolloweb.com/articulos/19.php

48