Beruflich Dokumente
Kultur Dokumente
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
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.
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 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.
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.
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
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
13
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.
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
GRFICAS.
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
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
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
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.
Daphne
Design &Graphics
30
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.
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.
Daphne
Design &Graphics
32
sus sucursales. Fondo y grficos distintivos Color de texto y enlaces Barras de navegacin en el mismo lugar.
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.
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-
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.
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.
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.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.
Daphne
Design &Graphics
36
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).
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
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.
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
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
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
Cuotas
?Quines somos?
Calendario
Inicio.
Contacto
Eventos
Daphne
Design &Graphics
56
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.
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