You are on page 1of 60

PLANTEL XOLA

R.V.O.E. SEP ACUERDO 972305 29-JULIO-1997

Rediseo de Sitio Web Donals Kinder. Proyecto que para obtener el ttulo de Licenciada en Diseo Grfico. Presenta: Daphne Olvera Morales. Mxico, DF, Agosto 2012
Daphne
Design &Graphics

Dedicatoria A las personas que estuvieron a mi lado apo-

yndome y que en todo momento confiaron en m: Gracias, pero sobre todo a las personas que desearon cualquier sentimiento contrario a prosperidad y que fallara, les dedicar este trabajo, ya que solo a travs de la adversidad se conoce la fuerza y de lo que somos capaces, solo en la desesperanza encontramos la fuerza para dar un paso ms. Sin ellos no sera posible la realizacin y la conclusin de mi Licenciatura.

Agradezco A mis padres por haberme apoyado durante

este tiempo. Por las noches en las desmadrugadas y a todas horas. En las buenas en las malas y en las peores. Sin ti no hubiera podido ver el amanecer. Anata domo. Y a los chicos de mi generacin por tantos buenos momentos, por hacerme rer hasta las lgrimas y hacer de mi licenciatura algo ms que solo escuela y trabajos escolares y a todos ustedes les dedico este poema.

HE AH A MI HERMANA Y HERMANO HE AH A MI MADRE Y PADRE HE AH A LA PERSONA AMADA. SIEMPRE CONMIGO Y EN CADA MOMENTO. HE AH DOS LUCEROS AL ALBA, MEDIODIA Y ATARDECER, HE AH MIS ENEMIGOS FALTOS DE CONFIANZA Y LLENOS DE MENTIRAS Y POCO AMOR. HE AQU LES DIGO MI VALOR HE AQUI MI VIDA Y MI CONVICCIN SOLO A SEGUIR Y NUNCA PERECER JAMAS INTENTAR SOLO HACER. HEME AQU PARADA FRENTE A USTEDES NO COMO LO QUE FUI SINO COMO LO QUE SER. HEME AQU PELEANDO SIN DESCANSO Y SIN FIN POR HACER VALER TODO LO QUE SOY Y DE AHORA EN ADELANTE SIMPRE SER PARA SIEMPRE Y POR SIEMPRE... DAPHNE

Daphne
Design &Graphics

ndice. Introduccin.............................7 Planteamiento del Problema. Objetivo General. Objetivo Particular. Justificacin. Hiptesis.

CAPTULO 1. El cliente.
1.1 Quin es?.............................9 1.2 Qu hace? 1.3 Objetivos 1.4 Valores 1.5 Misin 1.6 Visin 1.7 Imgenes y anlisis del sitio...10

Daphne
Design &Graphics

CAPTULO 2. Pblico Meta.


2.1 Definicin de nivel socioeconmico .........................13 2.2 Encuesta............................15 2.3 Cuestionario y grficas.....16 2.4 Competencias y Tabla de evaluacin.........................22 2.5 Referencias, tabla de evaluacin.........................24

CAPTULO 3. Conceptos.
3.1 Definicin de diseo...............29 3.2 Definicin de diseo grfico 3.3 Definicin de sitio...................30 3.4 Definicin de HTML 3.5 Caractersticas de un HTML...31 3.6 Estructura de un sitio WEB. 3.7 Diferencias de Navegador 3.8 Color para Web.....................33 3.8.1 Definicin de color. 3.8.2 Numero de colores en una pgina. 3.8.3 Los colores y el texto
Daphne
Design &Graphics

3.9 Tipografa...........................34 3.9.1 El ancho de lnea 3.9.2 Kerning............................35 3.9.3 Color y contraste con el fondo 3.9.4 Alineacin de texto 3.9.5 Negritas...........................36 3.9.6 Tamaos de la fuente. 3.9.7 Uso de maysculas 3.9.8 Otras apreciaciones. 3.10 Estructura y Retculas.......37 3.10.1 Sistematizando la retcula. 3.10.1 Manuscrita 3.10.2 Columnas...............39 3.10.3 Modular. 3.10.4 Jerrquica..............40

3.10.5 Orgnica...................41 3.10.6 Matemtica 3.10.7 Base circulo ureo...43 3.11 Programas de retculas......45 3.12 CSS...................................46

Daphne
Design &Graphics

CAPTULO 4. Proyecto.
4.1 Conceptos.........................48 4.2 Cuadro de pertinencias....49 4.3 Bocetos..............................51 4.4 Pantalla final......................55 4.5 Diagrama de flujo.............56 4.6 Pantallas rediseo del sitio web Donals Kinder.................57

Conclusiones..........................59 Bibliografa.............................60

Daphne
Design &Graphics

Introduccion
Este trabajo se realiz al detectar una falta de comunicacin en los elementos grficos del sitio web de Donals Knder. Este es un Knder con ms de cuarenta aos de experiencia. La competencia a pesar de tener solo una pgina para hacer referencia al sitio carece de ms elementos grficos. En este trabajo me encontr con algunos problemas, los cuales fueron desde encontrar un cliente con un problema y que este se mantuviera durante los ocho meses de elaboracin del proyecto y su debida conclusin.

Objetivos Particulares:
Determinar quien es el cliente, sus valores y objetivos. Dar una mejor usabilidad y leibilidad por ende legibilidad del sitio Disear una usabilidad en base a la competecia. Elegir los elementos graficos y tipogrficos correctos de acuerdo a composicin, color, equilibrio y forma que se usaran en la composicion.

Justificacin
El sitio debe mostrar los valores sobre los que la escuela se fund. Y dar un mensaje ms claro sobre lo que la escuela representa a una persona que empieza su vida. Por esta razn se debe comunicar algo que se haga ms legible. En la actualidad la web nos ofrece un soporte digital el cual nos dar a conocer la escuela.

Planteamiento del problema


Los signos (tipografia, color, el equilibrio, leibilidad y dar una correcta orientacion a su accesibilidad.) que denotan los valores y propsitos no estn bien definidos en la comunicacin visual, del sitio web.

Objetivo General:
Crear una pagina de Internet de acuerdo a las necesidades del cliente. Y que contenga un mensaje claro de la identidad del Kinder. Tomando en consideracin sus valores se creara un sitio que las refleje.

Hiptesis
Se lograra un resultado funcional del diseo del sitio con base en la investigacin realizada.

Daphne
Design &Graphics

CAPTULO 1

CLIENTE.
Daphne
Design &Graphics

CAPTULO 1. El cliente.
1.1 Quin es? 1.4 Valores.
Es una escuela preescolar, con ms de 40 aos de servicio, su fundadora Miss Farfn, actual director Oscar Amor, Respeto, tica Profesional. Farfn. El knder se encuentra ubicado en Cerro de la Estrella # 116 esq. Cerro de San Juan, Colonia Campestre Churubusco. Tel: 53 36 23 32.

1.5 Misin.

1.2 Qu hace?
Imparte estudios de carcter bsico, brindando a su vez servicios de estudios preescolares, guardera, tareas, actividades y club de verano.

Educar en el respeto y formar en el amor para lograr un futuro mejor

1.3 Objetivos.
Trabajar con nios en su primera infancia, aplicando conocimientos tcnicos y tica profesional para lograr un mundo mejor.

1.6 Visin:
Preparar nuevas generaciones a corto, mediano y largo plazo, con conocimientos y valores bien fundamentados.

Daphne
Design &Graphics

1.7 Imgenes y anlisis del sitio.


En cuanto a usabilidad, la experiencia que se tiene es nula pero, se entiende de manera clara las vietas en las que esta la informacion salvo en la pagina de la fundadora, a la cual le hace falta espacio. En cuanto a accesibilidad, por definicion la accesibilidad es cuando las pginas web sean utilizables por el mximo nmero de personas, en este aspecto la pgina es poco accesible. Las personas buscan en cualquier buscador, la siguiente liga: www. donalskinder.com la cual despliega las opciones, las cuales ninguna es la del kinder. Este tiene la pagina donals.edu.mx

Daphne
Design &Graphics

10

Cuadro de pertinencias.
Accesibilidad Usabilidad Caractersticas de Interfaz Interaccion. Leibilidad Legibilidad Contrastes Proporciones. 1 2 4 2 1 2 3 4

Donde:
1 2 3 4 5 Nula. Poco Regular Aceptable Buena.

Daphne
Design &Graphics

11

Gracias al cuadro de evaluacin se pudo comprobar que los elemntos como los botones carecen de una buena leibilidad y legibilidad, la pantalla de artculos esta desde hace meses sin ningn cambio (pantalla presente) adems del elemento de texto donde se ve la direcin, el cul a penas se distingue entre el fondo de nubes de movimiento y la letra bold que se us. De igual manera las imgenes como las manos y otros elementos en las pginas alternas no reflejan nada de los conceptos del kinder haciendo ver una completa falta de interz. Uno de los problemas tambien encontrados fue que la pgina acerca de, dnde se habla del sitio hay un botn el cual nos genera el men de inicio dentro del cuerpo de texto. Lo favorable de este sitio han sido las caractersticas de interfz y las proporciones pero esta ultima depende del navegador por lo tanto no es viable.

Daphne
Design &Graphics

12

CAPTULO

PBLICO META Y COMPETENCIAS.


Daphne
Design &Graphics

13

2.1 Definicin nivel socioeconmico.


El nivel socioeconmico se define como la estratificacin de los hogares urbanos (ciudades de 50,000 habitantes o ms).Es una caracterstica de cada hogar relativamente estable a travs del tiempo. Se asume que todos los miembros de la familia dentro de un hogar, pertenecen a la misma clase social. Se usan bsicamente trece tipos de pregunta para poder hacer este anlisis y dar la clasificacin entre los 6 niveles socioeconmicos. Donals Knder se encuentra en la delegacin Coyoacn, en la colonia Campestre Churubusco donde el nivel es de C+ localizado en este rubro de nivel socio econmico en especfico en el mapa que aparece en el blog de El que Localiza con la siguiente referencia http://elquelocaliza.blogspot. mx/2011/12/mapas-de-nivel-socioeconomicos-en_8674. html. El cual se bas para hacer esta determinacin en las encuestas realizadas por los organismos especializados INEGI y AMAI. Este nivel es el 13.7% de los hogares en el valle de Mxico. Puesto que se conforma por personas que tienen un promedio de nivel escolar de licenciatura, pero en ocasiones solo preparatoria, cuentan con telfono fijo y celular, cuentan por lo menos con una computadora en el hogar, adems de contar con el servicio de internet las tres cuartas partes de este extracto socio-econmico;

lo cual les da la posibilidad de poder contratar el servicio del Knder por medio del internet y; por lo cual se justifica el rediseo del sitio web Donals Knder ubicado en esta zona especfica. Conforme a los datos anteriores y con base a las encuestas oficiales realizadas por el INEGI y AMAI se determin que los clientes a los que va dirigido el rediseo del sitio web Donals Knder es de extracto socio-econmico C+ por lo que este ser tomado como base referencial para la continuacin del trabajo.

Nivel C+

Daphne
Design &Graphics

14

2.2 Encuesta.
Para la determinacin de la encuesta y de sus preguntas se tom como base principalmente el estrato socioeconmico C+, esto para rectificar el tipo de cliente al cual va dirigido el rediseo del sitio web Donals Knder. Los cuales nos proporcionaran la informacin necesaria que despus se representara en graficas

2.2.1 Cuestionario.
EDAD________ SEXO: ____________ A QUE SE DEDICA: _________________________ 1.-VISITA PGINAS DE INTERNET. SI NO 2.- CON QUE FRECUENCIA: DIARIO 1 VEZ POR SEMANA 2 VECES POSEMANA 1 VEZ POR MES.

3.-HA VISITADO LA PGINA DONALS KINDER? SI NO

En caso de responder afirmativamente. 3 a) COMO ES LA PGINA? DIVERTIDA, DINAMICA INTERESANTE POCO INTEREZANTE. 3 b) QUE IMGENES RECUERDA QUE CONTIENE LA PAGINA. EVENTOS. OTRO. ESPECIFIQUE: ___________________ ESPACIO ABIERTO NO RECUERDO. LE FALTA ALGO.

Daphne
Design &Graphics

15

4 c) EL TEXTO EN LOS BOTONES ES COMPRENSIBLE? SI NO

GRFICAS.

5 c) LOS BOTONES SON ACCESIBLES. SI NO

6 c) COMO DESCRIBE LA PGINA: MUCHO CONTRASTE. EL FONDA DA VERTIGO

LOS BOTONES NO SE LEEN FACILMENTE SU CONTENIDO ES POCO INTERESANTE. 7 c) Es fcil encontrar la pgina. SI NO

4) En caso de haber contestado NO: POR QUE NO HA VISITADO LA PGINA DEL KINDER. POR QUE NO SABIA QUE HABIA UNA. POR QUE NO TENGO TIEMPO DEBIDO AL TRABAJO. OTRO: ___________________________________________ __________

Daphne
Design &Graphics

16

Daphne
Design &Graphics

17

Daphne
Design &Graphics

18

Daphne
Design &Graphics

19

Daphne
Design &Graphics

20

Conclusin de encuesta.
La encuesta para el rediseo del sitio web se aplic a los padres de los alumnos del Knder. (Se realizaron 10 preguntas a 15 personas) Las Grficas nos dicen que a pesar de que los padres de familia saben del sitio web no se encuentran conformes con l. Por tanto mi cliente pidi el rediseo conforme a las expectativas de los usuarios del Knder, con lo que se puede concluir que el pblico meta de este estudio es el antes mencionado, aunado a esto se hizo la revisin de otros sitios web similares y, por tanto, la competencia de mi cliente, esto para superar los estndares que en estos se observan y por tal motivo obtener prioridad en la eleccin del Knder por medio de este sitio web.

Daphne
Design &Graphics

21

2.4 Competencias y Tabla de evaluacin


La competencia directa es el colegio Antonio Jos de Sucre el cual cuenta con un sitio web http://colegiosucre.edu.mx/preescolar.html de este solo una pgina pertenece al Knder hasta hace un par de meses cuando hicieron una remodelacion. Ahora es un sitio el cual cuenta con cuatro pginas. La primera pgina es el mensaje del director, la segunda los objetivos del programa, la tercera actividades recientes y la cuarta nuestros alumnos, estas ltimas dos sin contenido. Tambin tiene una pgina con el contenido de las inscripciones. Y una liga al wordpress de la escuela. http://notisucre.wordpress.com/blog-de-noticias-del-colegio-antonio-jose-de-sucre/.

Daphne
Design &Graphics

22

El Jardn de Nios Francisco Mrquez es competencia indirecta el cual no cuenta con sitio web. Al igual que el Kinder Ferma.

Daphne
Design &Graphics

23

2.5 Referencias y tabla de evaluacin.


En cuestin de sitio web se tmalos sitios www.mecanokindergarten.com.mx y www.appletreekinder.com.como referencias visuales para de esta manera tener una idea de cmo debera ser el rediseo del sitio web. Cada una de estas referencias fueron analizadas mediante los conceptos bsicos que debe tener una pagina web, tales como, usabilidad (Un sito web al cual le denominamos usable, es aquel que de una manera clara un usuario entiende el contendio y navega por el web de una forma cmoda y sencilla.)http://www.entraenlared.com/usabilidad_en_buscadores/, Caractersticas de interfaz. (este aspecto hace referencia al conjunto de mtodos para lograr interactividad entre un usuario y una computadora) Legibilidad (se refiere a que el texto no solo sea facil de entender, sino que se consideren el diseo de la tipografa, palabras,oraciones, y toda la composicion), Leibilidad (se refiere a la comprencion del texto con el minimo de cansancio) Contraste (todos los colores de composicion tienen una ) influencia sobre los colores con los que entra en contacto), proporciones (los tamaos posibles son muy pocos, generalmente dos para pginas web (800x600 y 1024x768 pxeles), pero es de suma importancia decidir para cul de ellos se va a trabajar, ya que, aunque es

posible disear una pgina para que sea compatible con ambas resoluciones, tan solo en una de ellas se visualizar tal y como la diseemos.) http://www.desarrolloweb.com/articulos/1509.php,

Daphne
Design &Graphics

24

Al analizar este sitio como una referencia, nos encontramos con varios aspectos interezantes como, el cursor, en vez de ser el que normalmente es (una flecha) es de hecho, una animacion de un colibri volando, la interactividad con los botones es buena ya que estan representados graficamente como manzanas. Lo que se encontro diferente al diseo fueron los bulets ya que parecen que fueron puestos tan solo por el hecho de hacerlo. Pero al cumplir con loselementos del cuadro de evaluacion se encontro que este sitio es de hecho una buena referencia.

Cuadro de evaluacin.
Accesibilidad Usabilidad Caractersticas de Interfaz Interaccion. Leibilidad Legibilidad Contrastes Proporciones. 4 4 5 5 4 4 4 4

Donde:
1 2 3 4 5 Nula. Poco Regular Aceptable Buena.

Daphne
Design &Graphics

25

Este sitio tambien cuenta con una buena estrategia. ya que su interaccion con los botones es excelente, (son los bloques de construccin de colores) los cuales al colocar el cursor sobre ellos se desplazan de manera horizontal a la derecha. El fondo, a diferencia del fondo del sitio donals kinder, a pesar de tener mopviemiento no proboca la sensacionde vertigo, su velocidad es lenta,pero no lo suficiente para no notar su avance. Otro aspecto fue el haber puesto en la parte superiror la incorporaciona a la sep y la direccion.

Elhaber colocado el loo del kinder en un pin, fue un detalle bastante bien pensado, y se puede concluir que el diseo mismo del sitio esta basado en el logo. Este sitio no solo cumple con el cuadro de evaluacion tambien cuenta con una facil memorabilidad.

Daphne
Design &Graphics

26

Donde:
1 2 3 4 5 Nula. Poco Regular Aceptable Buena.

Cuadro de evaluacin.
Accesibilidad Usabilidad Caractersticas de Interfaz Interaccion. Leibilidad Legibilidad Contrastes Proporciones. 4 5 4 4 5 4 4 4

Daphne
Design &Graphics

27

CAPTULO

CONCEPTOS.
Daphne
Design &Graphics

28

3.1 Definicin de diseo


Del italiano disegno, la palabra diseo se refiere a un boceto, bosquejo o esquema que se realiza, ya sea mentalmente o en un soporte material, antes de concretar la produccin de algo. El trmino tambin se emplea para referirse a la apariencia de ciertos productos en cuanto a sus lneas, forma y funcionalidades. El concepto de diseo suele utilizarse en el contexto de las artes, la arquitectura, la ingeniera y otras disciplinas. El momento del diseo implica una representacin mental y la posterior plasmacin de dicha idea en algn formato grfico (visual) para exhibir cmo ser la obra que se planea realizar. El diseo, por lo tanto, puede incluir un dibujo o trazado que anticipe las caractersticas de la obra.(http://denicion.de/diseno/8/05/2012) Al disear, la persona no slo tiene en cuenta aspectos estticos, sino tambin cuestiones funcionales y tcnicas. Esto exige a los diseadores estudios, investigaciones y tareas de modelado que le permitan encontrar la mejor manera de desarrollar el objeto que pretenden crear. Cabe destacar, por ltimo, que la nocin de diseo tambin puede hacer mencin a la disposicin de los colores o los dibujos que brindan las caractersticas distintivas a un animal, una planta o un objeto: Me encanta el diseo de ese bolso, Las cebras suelen fascinar a los nios por su diseo rayado.

3.2 Definicin de diseo grfico


Podemos definir el diseo grfico como el proceso de programar, proyectar, coordinar, seleccionar y organizar una serie de elementos para producir objetos visuales destinados a comunicar mensajes especficos a grupos determinados. La funcin principal del diseo grfico ser entonces transmitir una informacin determinada por medio de composiciones grficas, que se hacen llegar al pblico destinatario a travs de diferentes soportes, como folletos, carteles, trpticos, etc. El diseo grfico no significa crear un dibujo, una imagen, una ilustracin, una fotografa. Es algo ms que la suma de todos esos elementos, aunque para poder conseguir poder comunicar visualmente un mensaje de forma efectiva el diseador debe conocer a fondo los diferentes recursos grficos a su disposicin y tener la imaginacin, la experiencia, el buen gusto y el sentido comn necesarios para combinarlos de forma adecuada.(http://definicion.de/diseno/, 28 abril 2012) Construccin de todo tipo de mensajes grficos (logotipo, libros, revistas, portadas etc.). (http://definicion.de/ diseno/, 28 abril 2012) Diseo grfico se denomina grafismo, y es una unidad por s misma, aunque est compuesto por multitud de elementos diferentes. Podemos establecer una

Daphne
Design &Graphics

29

analoga entre un grafismo y un plato de cocina. Ambos estn compuestos por diferentes elementos individuales que, unidos correctamente y con sabidura, componen una obra final nica y definida que va ms all de la suma de las partes que la forman. (http://definicion.de/diseno/, 28 abril 2012). Para mi diseo grfico, significa representar de manera correcta mediante elementos bsicos como: color tipografa, forma, un mensaje.

Internet, este no es ms que el conjunto de pginas web que lo componen ordenadas jerrquicamente bajo una misma direccin de Internet (URL). Las pginas web son visualizadas a travs de Navegadores Web que interpretan el cdigo con el que son diseadas estas. En la actualidad las pginas web se pueden ver en mltiples dispositivos como Computadoras, Smartphone, Netbooks, Consolas de Videojuegos, incluso en Refrigeradores de ltima generacin y un sin fin de dispositivos ms. Pero: Para qu sirve una pgina web?, Cules son los beneficios de una pgina web? Una pgina web o ms bien dicho un sitio web tiene mltiples beneficios y utilidades que van desde el uso personal como E-mail, Redes Sociales, Pginas Personales, Blogs, etc. Hasta el uso en los Negocios y Empresas y es aqu donde queremos profundizar ms en el resto de este trabajo, en resaltar los mltiples beneficios que tienen los sitios web en los Negocios y Empresas.

3.3 Definicin de sitio.


Un sitio web es un sitio (localizacin) en la World Wide Web que contiene documentos (pginas web) organizados jerrquicamente. Cada documento (pgina web) contiene texto y o grficos que aparecen como informacin digital en la pantalla de un ordenador. Un sitio puede contener una combinacin de grficos, texto, audio, vdeo, y otros materiales dinmicos o estticos. Una pgina web es un documento electrnico diseado para el World Wide Web (Internet) que contiene algn tipo de informacin como texto, imagen, video, animacin u otros. Una de las principales caractersticas de las pginas web son los Hipervnculos tambin conocidos como links o enlaces y su funcin es la de vincular una pgina con otra. Una pgina web forma parte de un Sitio Web o Sitio de

3.4 Definicin de HTML


HTML son las siglas para Hyper Text Markup Lenguage (Lenguaje de marcas de hipertexto). Esto quiere decir el hipertexto es uno de los aspectos revolucionarios de la web, y permite que las pginas web tengan enlaces y al hacer clic sobre ellos se pueda acceder a otras pginas, sitios web o partes de una sola pgina web. Aunque se utilice la palabra hipertexto, su significado se refiere ms a aspectos visuales.

Daphne
Design &Graphics

30

3.5 Caractersticas de un HTML


Un HTML, antes que nada, es un lenguaje con una estructura muy simple. A esta estructura se le llama cdigo. Este cdigo contiene, ciertos elementos y estos elementos contienen toda la informacin que introduciremos para dar vista a lo que se presentara en el monitor. Incluyendo animaciones e imgenes. Cdigo: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> EXPLICACION. <HTML>Todos los documentos deben comenzar con esta etiqueta: <HEAD>Contiene toda la informacin del encabezamiento <TITLE>Contiene el nombre del documento, este aparecer en la parte superior de la ventana del navegador Es necesario cerrar la etiqueta TITLE esto se indicara mediante un barra / Tambin se cerrara la etiqueta HEAD. Al cerrar estas etiquetas se indica que se cierra la accin indicada. Todo lo que es visible se encuentra dentro de la etiqueta

BODY Se cierra la etiqueta BODY. Tambin se debe cerrar la etiqueta HTML. Dando asi finalizado el cdigo de una pgina de web. Naturalmente hay ms etiquetas y cada una de ellas tiene atributos y valores necesarios para la creacin de una pgina web.

3.6 Estructura de un sitio WEB.


Aunque se pueden disear diagramas de flujo a mano existen algunos editores de HTML y ofrecen funciones que permiten mostrar la estructura de un sitio web. Un ejemplo claro es Dreamweaver el cual nos da una funcin para crear mapas de sitios web. A la vez es preferible realizar un mapa de sitio web para tener mayor control sobre lo que vamos a mostrar. Este mapa debe ser sencillo al navegar por el sin abrumar al usuario, En estos casos es mejor realizar un ndice. Pero solo funcionara si el usuario conoce el nombre de la seccin donde desea ir. Tambin existen distintos tipos de men y para poder entender lo que se habla explicar los ms comunes:

Men principal.
Bsicamente el men con las principales opciones a ubicar en el sitio web. Estas opciones pueden estar dispuestas en todos los niveles deseados creando, de esta ma-

Daphne
Design &Graphics

31

(opciones dentro de opciones). Pueden ser mostradas (activadas) o no, pueden llamar a pginas de contenidos o expandirse en otro rbol de sub opciones (como opciones dependientes).

utilice. Asimismo la misma versin de navegacin puede comportarse de forma distinta en un ordenador MAC, PC, o UNIX, lo cual aumenta el nmero de variables. Aqu hay algunas sugerencias para conseguir compatibilidad. Probar con varias plataformas. La mayora de los estudios profesionales de diseo para la web disponen de equipos de prueba y navegadores antiguos. Esto para probar que aun en una maquina con un procesador y navegador lento la pgina puede abrirse y mostrarse tal cual se dise. Utilizar etiquetas estndar: Si se tiene la posibilidad de elegir entre una etiqueta propia y una estndar utilice la segunda. Netscape y Explorer resultan infames por el hecho de crear sus propias etiquetas. Ya que el programa puede confundirse con alguna etiqueta y colocar algo que nosotros no queremos. Proporcione opciones de navegacin: Si va a utilizar una barra de navegacin visual, recuerde que tambin debe incluir texto escrito como alternativa. Los mapas de imgenes funcionan de forma distinta en los navegadores antiguos, por lo que no sabr con seguridad la forma en que un usuario va a encontrar su sitio web. Es necesario lograr que el sitio web obtenga consistencia y una imagen distintiva, mediante el uso de fondos, grficos y logos, colores uniformes en el texto y los enlaces, barras de navegacin en el mismo lugar, etc.; de la misma manera que una tienda comercial mantiene una esttica nica, tanto para su casa central como para

Men General.

Realmente es un men de accesos directos principales, es decir, opciones situadas en el men principal que tambin aparecen en el general y que se desee destacar de alguna manera, ya sea porque es contenedora de informacin relevante o se encuentre dentro del rbol del men principal y no se aprecie a simple vista.

Men destacados.
Por medio de este men es posible insertar un nmero indeterminado de anuncios, enlaces a otras pginas o alertas con imgenes, vnculos, ttulos en formatos especficos, etc ya que otorga la posibilidad de insertar cdigo html, JavaScript o cualquier otro estndar para la realizacin de pginas web y que pueda ser interpretado por un navegador.

3.7 Diferencias de Navegador.


El navegador interpreta un papel importante ya que es el encargado de interpretar el cdigo HTML, los colores, los grficos y la presentacin de una pgina. Esto implica que el usuario tendr una percepcin de sitio Web distinta dependiendo de la versin del navegador que

Daphne
Design &Graphics

32

sus sucursales. Fondo y grficos distintivos Color de texto y enlaces Barras de navegacin en el mismo lugar.

3.8 Color para Web


3.8.1 Definicin de color.
El color es una sensacin que producen los rayos luminosos en los rganos visuales y que es interpretada en el cerebro. Se trata de un fenmeno fsico-qumico donde cada color depende de la longitud de onda.

Como norma inicial puede asegurarse que siempre es mejor pocos colores mejor que muchos. Como mnimo, el riesgo de estridencias es menor. Como siguiente norma se puede afirmar que 3 colores en una misma pgina sera lo mnimo a utilizar y, en la mayora de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la pgina sea anodina y aburrida son muy grandes. Color Primario: es el tono bsico de la pgina, el que la define, y el que ocupa la gran mayora de la misma. Sera el color del atributo background de la pgina. Color Secundario: es el segundo tono predominante en la pgina, aunque en mucha menor medida que el primario. Normalmente debe acotar o resaltar reas y debe ser bastante prximo en tono al primario. Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la pgina. Por definicin debe contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con moderacin. Puede utilizarse el Complementario o el Complementario del color primario de la pgina.

3.8.2 Numero de colores en una pgina.


Esta es una faceta primordial al definir las lneas maestras de diseo de un sitio web: va a tener una influencia realmente grande en como lo perciban los usuarios y la sensacin que les quede despus de la visita. Por descontado que es un tema subjetivo, ya que cada uno puede aceptar mejor o peor determinadas combinaciones de colores. Sin embargo existen criterios objetivos si se quiere obtener un diseo equilibrado y agradable y, sobre todo, que ni estrese ni canse.

3.8.2 Numero de colores en una pgina.


Es arriesgado establecer una norma estricta, ya que 6 colores simultneos en una pgina pueden ser demasiados si existe un gran contraste entre ellos, pero pueden conformar una combinacin agradable si la relacin entre los mismos es adecuada.

3.8.3 Los colores y el texto


Como acabamos de comentar usar convenientemente el contraste es especialmente importante cuando se trata de escribir texto y resaltarlo suficientemente para garantizar su legibilidad a la totalidad de nuestros usuarios.

Daphne
Design &Graphics

33

Pero no slo es una cuestin de contraste. Hay combinaciones de colores que son especialmente conflictivas para usuarios con disfunciones en la vista.

recen menos definidos y lo que hacen es dificultar la lectura, por lo tanto, en la web es ms recomendable utilizar fuentes sans-serif.

3.9 Tipografa.
La tipografa en la web Qu tipo de fuentes son ms legibles, serif o el sansserif Bueno en este apartado vamos a intentar ayudaros a solucinar estas dudas. Formato serif y sans-serif Los formatos de fuente serif son aquellos que las letras tienen unos pequeos remates en los extremos, por ejemplo: Times New Roman es un tipo de letra serif Las fuentes sans-serif son aquellas sin esos pequeos remates en los extremos, por ejemplo: Arial es un tipo de letra sans-serif Varios estudios han demostrado que sobre papel impreso las fuentes serif son ms legibles, ya que esos pequeos remates en los extremos dan ms informacin sobre los caracteres y facilitan la lectura. Sin embargo en los monitores, por su menor resolucin en comparacin con el papel, los pequeos remates apa-

3.9.1 El ancho de lnea


Cuanto menor es la longitud de lnea, mayor es la velocidad de lectura (esta es la razn de que los peridicos presentan su informacin en columnas). Una mayor longitud de lnea requiere de un salto de mayor longitud de un punto de fijacin ocular al siguiente. A mayor longitud del salto, ms inexactitud en la siguiente fijacin y por tanto mayor ser la dificultad de lectura. Aunque no existe una recomendacin nica en cuanto a la longitud mxima de lnea se suele hablar mximo correcto entre los 60-70 caracteres. Adems, en lneas muy cortas es importante la distribucin de las unidades de significado, como se puede ver en este ejemplo tomado de Jarret, C. (va Nielsen, J. 2000):

Daphne
Design &Graphics

34

3.9.2 Kerning
El espacio entre las letras de una misma palabra (kerning) no debera ser siempre fijo. Cuando este espacio se ajusta correctamente, los textos son ms legibles y el aspecto esttico es mucho mejor. El kerning es lo que da ese aspecto tan profesional a los libros impresos. Sin embargo, en los navegadores es imposible de regular (incluso en algunos programas de edicin tampoco), ya que no ofrecen esta posibilidad. Ahora bien, es un aspecto a tener en cuenta a la hora de trabajar en los ttulos de seccin o textos incluidos en una imagen. Por ejemplo No debemos confundir el kerning con el ajuste del espacio que ocupa cada letra. Existen dos tipos de fuente: las proporcionales y las no proporcionales (monos paced). En las proporcionales este espacio depende del carcter, por ejemplo una i ocupa menos espacio que una M. En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio. Por ejemplo: Arial es una fuente proporcional Courier New es una fuente no proporcional La mayora de los medios escritos: peridicos, libros y sitios web usan fuentes proporcionales. Las no proporcionales (monos paced) son adecuadas para el mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc... Tambin son ms adecuadas para la entrada de datos en las cajas de texto de formularios porque es mas fcil

ver los errores por la mayor separacin entre letras. El espacio en blanco entre varias letras, aparte de escogiendo el tipo de fuente puede controlarse mediante la utilizacin de hojas de estilo.

3.9.3 Color y contraste con el fondo

La combinacin ms adecuada para el 90% de los casos es texto negro sobre fondo blanco. En todo caso, si decides utilizar color en el fondo, es aconsejable utilizar colores suaves y claros y siempre un color de texto oscuro, por supuesto, las cabeceras de un sitio web son una excepcin.

3.9.4 Alineacin de texto


Para los textos largos se recomienda alineacin a la izquierda puesto aunque es posible la justificacin mediante hojas de estilo, pueden existir casos en los que no funcione correctamente. El problema es que al justificar un texto se modifica el espacio entre palabras y/o caracteres, lo que hace los textos menos legibles y provoca que algunas palabras con mayor espacio entre sus caracteres sean involuntariamente enfatizadas, adems, al contrario que en el papel impreso, puede suceder que la longitud de lnea no sea fija (si hemos maquetado nuestra web utilizando tablas en porcentaje o si no definimos el tamao de texto en la hoja de estilos)a diferentes resoluciones o di-

Daphne
Design &Graphics

35

ferentes tamaos de visualizacin del texto, no es posible saber la longitud de lnea que ver el usuario y por tanto la justificacin no funcionar bien.

3.9.7 Uso de maysculas.


Las maysculas son mucho ms difciles de leer que las minsculas por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atencin sobre un elemento de informacin.

3.9.5 Negritas.
Las negritas (bold) deben utilizarse solo para enfatizar algunas palabras, resaltar puntos clave dentro de la informacin o resaltar alguna frase de gran importancia. Si son utilizadas correctamente ayudan a ojear rpidamente el texto y facilitan la rpida comprensin de la informacin. Las negritas llaman poderosamente la atencin dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.

3.9.8 Otras apreciaciones.


Un documento no debera utilizar ms de dos fuentes diferentes. Las cursivas son muy poco legibles y son poco recomendables, solo deberian utilizarse para unas pocas palabras y en caso necesario con fuentes de tamao suficientemente grande. El subrayado es un recurso que en papel impreso se utiliza para enfatizar, sin embargo en la web no se debe emplear con este objetivo ya que da lugar a confusin con los vnculos. Las vietas (bullets) y sangras (indent) son recursos tiles para estructurar la informacin, separar conceptos, subordinar unos a otros, crear dependencias, etc. Bien utilizadas mejoran la comprensin y facilitan la lectura de un texto.

3.9.6 Tamaos de la fuente.


Un tamao de entre 10 y 13 puntos suele ser el ms adecuado para la mayora de textos en la web, a excepcin de titulos y nombre de apartado, en los que perfectamente puede utilizarse un tamao superior..

Daphne
Design &Graphics

36

3.10 Estructura y Retculas.


Qu es una retcula Cualquier documento que tenga que ser maquetado tendr que estar compuesto en base a una retcula. La retcula son una serie de guias que nos darn los tamaos de las columnas para el texto, grficos e imgenes que tengamos que componer.

Si los aspectos tcnicos son los que imperan, al final todas las web acaban pareciendo lo mismo. La retcula es la nica va para un diseo escalable El diseo basado en la retcula es la nica va que te garantiza que tu proyecto, a nivel de diseo, sea escalable. Por otro lado, a pesar de optar por un diseo rganico como mtodo de aproximacin al diseo, lo mejor a nivel operativo es que ese diseo se traduzca a trminos lo ms redondos posibles. Es decir, que al acabar el proyecto tengamos un lenguaje del estilo: Ancho de parrafo: 350 px Ancho de columna 1: 150 px Ancho de columna 2: 150 px ... Informacin de:(http://www.desarrolloweb.com/articulos/2259.php).

3.10.1 Sistematizando la retcula.


Dentro de nuestro ancho general, debemos de ser capaces de dividir la retcual en un nmero suficiente de columnas y filas como para poder alojar todo tipo de elementos pero sin que sean demasiados como para que parezca arbitrario o demasiado complejo de gestionar. Aqu igualmente debemos trabajar de forma orgnica al principio creando el layout de forma libre. Photoshop suele ser la herramienta ms cmoda. Debemos componer las fotografas, posibles grficas de forma natural y luego ver como sistematizar los elementos. Es decir, debemos separar los procesos de diseo y de produccin. Y es bueno que sean personas diferentes. El diseador debe liberarse de posibles trabas tcnicas que le impidan expresar con libertar el concepto a plasmar.

La ms sencilla de todas, se usa para textos largos porque estn contenidos en un bloque grande delimitado por un margen y tiene un espacio para los ttulos y la numeracin.

3.10. 2 Manuscrita.

Daphne
Design &Graphics

37

No muy recomendable para utilizarlo en una web, es dificil seguir la lectura y lo hace tedioso.

Daphne
Design &Graphics

38

3.10. 3 Columnas.
Es muy flexible y se pueden separar distintos tipos de informacin, es unas de las retculas ms utilizadas en revistas y tambin en el diseo web, porque puede utilizarse varias columnas para texto amplio e imgenes grandes y tambin pequeas. En el primer ejemplo utiliza de columnas y tambin por modulos, es muy agradable por que se ve ms limpio, atractivo y los elementos estn claramente diferenciados.

3.10. 4 Modular:
til cuando es algo muy complejo, es parecida a la de columnas solo que las divide en filas creando as una matriz de celdas que se denominan mdulos, en cada uno de ellos se puede colocar informacin o en varios agrupados. Son flexibles y precisos pero en exceso puede crear confusin. En esta web utilizaron este tipo de retcula para hacer un men de los juegos que tienen, con muy buenos resultados.

Daphne
Design &Graphics

39

3.10. 5 Jerrquica.
Es la mas comn ya que se ocupa en gran medida en el diseo web, la informacin se organiza de forma intuitiva en proporcin a los elementos y no en intervalos regulares y repetidos como sucede con las otras, es por eso que es muy variable.

Daphne
Design &Graphics

40

3.10.6 Matemtico.
Se supone que uno puede directamente tomar el ancho del documento, calcular la proporcin aurea y sacar una retcula.

3.10.7 Orgnico
La aproximacin ms natural es la orgnica donde el contenido nos dara las proporciones que luego podremos sistematizar en forma de retcula. Por ello el primer paso para establecer la retcula es poner nuestro contenido sobre el papel o en este caso, sobre el navegador. Debemos ser capaces de crear un ancho de texto donde veamos que nuestro contenido fluye de forma natural.

En este caso, las lneas azules nos marcan la proporcin area del documento y de ahi podemos sacar una retcula. A mi este mtodo no me suele gustar porque da por entendidos muchos aspectos de ancho de prrafo, etc.. que son necesarios cuidar.

Daphne
Design &Graphics

41

En pantalla la lectura es mas dura que en papel y por tanto debemos cuidar el ancho de lnea. Por lo general algo superior a los 350 pixeles con tipografas de tamao 10 / 11 / 12 suele ser correcto. Aun as, debemos cuidar mucho estos aspectos de tamao y ancho de lnea ya que un documento que puede leerse con comodidad en pantalla ahorra mucho tiempo a los usuarios. En especial en mbitos como intranets, universidades o centros de documentacin, si se consigue hacer los documentos legibles en pantalla, el ahorro de impresiones, etc... puede ser maysculo. Este ancho de columna base es el punto de partida para la retcula. Ahora tenemos que ver como pondremos las fotos, llamadas de texto, anotaciones, etc.

Daphne
Design &Graphics

42

3.10.8 Base en crculo ureo


El rectngulo dibujado anteriormente es un area de trabajo urea, si esto lo aplicamos al diseo web obtenemos que para una intefaz 1024 x 768 con un ancho de 1010 pixeles visibles (le restamos 14 pixeles, que es lo que usan las barras de deslizamiento laterales) le corresponderia una altura de 624 pixeles. Aqui surge un problema, ya que en el diseo web generalmente podemos saber la anchura de un contenido, pero no la altura, ya que depende de la cantidad de contenido que estar en la pgina. Pero gracias a esta rea de trabajo podemos crear una reticula proporcionada, para ajustar los elementos principales del diseo de un sitio web y ajustando los restantes con proporciones aureas.

En este caso hemos dividido el area total en dos areas, de la cual el rectangulo del lado derecho es un rectngulo ureo. Como resultaron esas medidas? de multiplicar el ancho total (1010 px) por Phi dando como resultado 624px, asi el rectngulo queda dividio en un cuadrado y otro rectngulo ureo que a su vez vamos a dividir.

Si seguimos dividiendo infinitamente y luego trazamos un arco por la diagonal de cada cuadrado, se obtiene la espiral logartmica, que aparece frecuentemente en la naturaleza y su ejemplo mas clsico la concha de un nautilus.

Daphne
Design &Graphics

43

Con estos rectngulos aureos que hemos conseguido, podemos disear la reticula bsica para hacer el diseo de nuestro sitio web.

Daphne
Design &Graphics

44

Esta reticula es bsica, pero sirve de ejemplo para ilustrar lo que se puede hacer utilizando la proporcin urea para disear, las posibilidades son infinitas, se puede cambiar la orientacion de los rectangulos al lado derecho, hacer tres columnas, etc. En este caso es una retcula a dos columnas orientada al lado derecho con cabecera y un pie de pgina, cada una de las secciones encaja en un rectangulo aureo, habr ocasiones en que esto no sea posible, porque, como habiamos comentado anteriormente, muchas veces no se puede tener el control total sobre el contenido, y la altura es la que se ve afectada, pero si definimos bien la anchura de las secciones, la proporcin se seguir manteniendo en gran medida. En caso de que sea un diseo lquido, se trbaja con porcentajes en lugar de pixeles.

3.11 Programas de retculas


3.11.1.960 Grid Sistem.
960 Grid System es un framework CSS, que no es ms que una declaracin de estilos que dispone las clases necesarias para implementar columnas en una pgina web, de diversos tamaos, con las que maquetar nuestros contenidos fcil y ordenadamente. Nosotros mismos podramos hacer un sistema propio para maquetar una pgina con diversas columnas, pero utilizando un framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tenga la anchura y posicin deseadas.

Utilizar un framework CSS no aporta nada de creatividad para realizar un diseo bonito, pero nos permite anclar contenidos en la pgina de una manera sencilla. Nosotros, por tanto, seremos los que nos encargaremos de disear una pgina web que tenga un aspecto agradable, pero podremos partir de una estructura en columnas, donde ceir los espacios para que quede todo bien colocado. Con la prctica notaris que, saber de antemano los espacios disponibles para las columnas del diseo de nuestra web, resulta bastante til a la hora de disear con algn programa como Photoshop 960 Grid System lleva este nombre porque es un sistema de rejilla para hacer pginas con 960 pxeles de ancho. Las columnas que podremos colocar en la rejilla tendrn dis-

Daphne
Design &Graphics

45

tintas anchuras, pero siempre el ancho total de la pgina ser de 960 pxeles. Se ha elegido este valor porque 960 es divisible por una buena cantidad de nmeros, lo que lo hace ms verstil para poder alcanzar pginas resultantes de la ms variada gama. En la propia pgina de inicio de 960 Grid System se puede acceder a la descarga del Framework y a algunas explicaciones sobre su uso, as como a ejemplos de pginas que lo utilizan para la maquetacin CSS y a un demo interesante para poder ver el tipo de columnas que se pueden conseguir, sus anchuras, etc.

3.12 CSS.
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentacin. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de mltiples pginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectar a todas las pginas vinculadas a esa CSS en las que aparezca ese elemento. Ejemplo de hoja de estilo.

Daphne
Design &Graphics

46

CAPTULO

PROYECTO.
Daphne
Design &Graphics

47

4.1 Tabla.

Se selecionaron cinco valores y se acomodaron en orden de importancia y se definieron conforme lo que significa para el cliente,el diccionario y para el proyecto.

Daphne
Design &Graphics

48

4.2 Cuadro de pertinencias.


Este cuadro contiene los aspectos fundamentales de la investigacin. Estos elementosse debern representar d emanera figurativa, abstracto, geomtrico, color, y tipogrfico. Cada uno de estos bloques deben ser representados conforme a los valores escogidos para el proyecto.

Daphne
Design &Graphics

49

Daphne
Design &Graphics

50

4.3 BOCETOS
Las propuestas para el rediseo del sitio se basan en los elementos del cuadro de pertinencia.

Primeros bocetos hechos de manera tradicional una vez que esten bien justificados se pasar al proceso de digitalizacin donde se crearn ms bocetos como variaciones y de esta manera seleccionar los mas adecuados al cliente y presentarlo como boceto final.

Daphne
Design &Graphics

51

Daphne
Design &Graphics

52

Daphne
Design &Graphics

53

Daphne
Design &Graphics

54

4.4 Pantalla final .


El boceto final se justifica de lasiguientemanera,los elementos destacados incluso el ms mnimo fueron tomados a base del cuadro de pertinencias y en una retcula llamada 960, el cul nospermite acomodar lainformacin en columnas de un mismo tamao con un espacio determinado por el mismo sistema, de esa manera se pueden hacer columnas para el acomodo de informacion que no exedan los 960 pixeles de la retcula.

Hablando de los elementos para el rediseo del sitio Web Donals KInder de latabla de pertinencias se expresan dela sguiente manera: Los colores de cada pgina reflejan un aspecto del cuadro, educacin, respeto, seguridad, funcionalidad y dinamismo, mismos conceptos se repiten en lasiguienteimagen.

Daphne
Design &Graphics

55

4.5 Diagrama de Flujo.


Este ser el diagrama de flujo del rediseo del sitio Web Donals Kinder. El cul, solo tendr cinco destinos.

Cuotas
?Quines somos?

Calendario

Inicio.

Contacto

Eventos

Daphne
Design &Graphics

56

4.6 Pantallas Rediseo Sitio Web Donals Kinder.

Pantalla de inicio
los botones con un minimo de movimiento para dar dinamismo a la interaccion de usuario y sitio, sin producir un sentimiento de agotamiento o mareo con imgenes que se deslizan hacia la izquierda.

Pantalla Quines somos?


En esta sencilla hoja se dice un poco de la historia de nuestro cliente y su fundadora.

Daphne
Design &Graphics

57

Pantalla de Eventos.
Las imagenes enmarcadas poseen una animacin las cuales hacen que al poner el mouse sobre ellas estas se moveran de su lugar y se ampliaran al llegar al centro de la pantalla y un pequeo texto de la foto sale en el recuadro inferior.

Pantalla de Calendrio
La imgen del calendario se muestra primero pequea en el centro de la pantalla y al colocar el mouse sobre ella se amplia.

Pantalla de Cuotas.
En el cuadro de texto se muestra un scroll lateral para poder ver los costos de uniforme material y otras apliacaciones.

Daphne
Design &Graphics

58

Conclusiones.
En la realizacin del sitio se consigui que los valores fuesen representado se manera correcta en los siguientes aspectos, figurativo, geomtrico, abstracto, color y tipografa. Asi cuando se determino quien era el cliente y que tipo de giro es la empresa se comenz a dar prioridad en la resolucion del problema de comunicacin, tales como usabilidad y leibilidad y tambin en su legibilidad en el sitio, pero resolverlo a base de la competencia y tomando en consideracin las referencias. Es satisfactorio que al final de este proyecto y en su proceso de bocetaje se lograron estos puntos. Por lo tanto se cumplio con la investigacin y con la hiptesis, la cual es, que se lograra una resultado funcional del diseo del sitio, y de esta manera se Elegieron los elementos grficos y tipogrficos correctos de acuerdo a composicin, color, equilibrio y forma que se usaron en la composicin final.

Daphne
Design &Graphics

59

Bibliografa:
HELLER Eva, (2008)Psicologia del color, Barcelona, Ed Gutavo Gilli,, pp 329. LEWIS John, (2005), Principios bsicos de Tipografa, Mxico D.F., ED Trillas, pp 96 ROJAS Soriano Ral, (1998), Guia para realizar investigaciones sociales, Mxico D.F., ED. Plaza y Valdez pp. 153 WEINMAN Lynda, (1999), Diseo de Imagen para la web. Espaa,Ed.Anaya. pag. 320 WONG Wucius, (2004), Diseo Grfico Digital, Barcelona ED Gustavo Gili, pp 272

http://www.wikilearning.com/curso_gratis/fundamentos_ de_diseno_de_sitios_web/9291-1 http://www.masadelante.com/faqs/sitio-web http://www.posydi.es/conceptos_basicos_tutorial.html http://www.slideshare.net/guest9803aa/disenoweb http://www.slideshare.net/23290969/sobre-disenio-web2 http://www.slideshare.net/guest9803aa/disenoweb-110209 http://www.slideshare.net/guest9803aa/disenoweb http://www.slideshare.net/raymarq/fundamentos-diseoweb http://www.slideshare.net/hectorium/usabilidad-en-laweb http://definicion.de/diseno/ http://www.webusable.com/coloursMix.htm http://www.guiawebmaster.com/diseno-web/tipografiaweb.php

Referencias.
http://elquelocaliza.blogspot.mx/2011/12/mapas-de-nivelsocioeconomicos-en_8674.html. www.inegi.org.mx/sistemas/mexicocifras/default. aspx?e=9 www.inegi.org.mx/rne/docs/Pdfs/Mesa4/20/HeribertoLopez.pdf. www.economia.com.mx/nivel_socioeconomico_c_clase_media_alta.htm http://www.desarrolloweb.com/articulos/1425.php

Daphne
Design &Graphics

60

You might also like