s4_pautas para el diseño

7/26/2019 S4_pautas Para El Diseo

1/16

PAUTAS PARA EL DISEO WEB

Disear una pgina web es principalmene una

ar!sica "ue c#mbina in$eni$a % creai$i&a&' El #b(e

esa gu!a es lisar $ari#s elemen#s cla$e "ue se usa

#bener un &ise# e)ca*' De cual"uier m#+ ambi,n

enc#nrarse inspiraci-n en una $isia a l#s sii#pr#.esi#nales'


2/16


Generalmente al disear un sitio web se crean plantillas quecomo modelo. Las plantillas son imgenes en "carbnico" o pgque representan el esquema grfco de un modelo de pgina.La esrucura ra&ici#nal &e una pgina web es la siguiene

ORGANIZACIN DE LA PGINA

Un logotipo ubicado en la esquina superior izquierda. Los usuariopueden hacer clic en la maor!a de los logotipos oler a la pginicio.

Un men# localizado a la derecha o a la izquierda. Un encabezado que contiene el nombre del sitio web$ un banner

naegacin un rea reserada para un banner %publicitario o detipo&.

'l cuerpo principal de la pgina que contiene la maor parte de lin(ormacin.

Un pie de pgina que inclue in(ormacin #til como ser$ la #ltimactualizacin$ un !nculo a un (ormulario de contacto$ un !nculo


3/16

PAUTAS PARA EL DISEO WEBORGANIZACIN DE LA PGINA

El diseador debe definir en la plantilla qu elementos no cambian y son idnticos en cada

elementos varan de una pgina a la otra.


4/16


Un "esau# gr)c#" es un documento integral que detalla las reglpresentacin para los elementos grfcos que transmiten la identidad de un sitio web.'l estatuto grfco defne el equipamiento grfco de un sitio weparticular los tamaos$ colores apariencia del te*to$ las imgenbotones del sitio tambi)n la ubicacin que tienen con respecto a ob+etos en la pgina.

ESTATUTO GRAFICO

Un boceto es un modelo o prototipo de un sitio web que presenta los

grfcos la naegacin del sitio. Los bocetos permiten a los disead(ormalizar el diseo del sitio web casi siempre se usan para alid

(ase de diseo antes de pasar a la (ase de "realizacin".

'l boceto inclue pginas estticas que representan las pginas princidel sitio web %sin contenido&$ las cuales se usan para simular la naega,urante la simulacin$ elementos dinmicos tales como el moto

b#squeda$ pueden conducir a una pgina que contiene resulinentados or e em lo.

BOCETO


5/16


'l tamao de una pgina web depende principalmente de la defnic

tenga la pantalla del usuario %no de su resolucin&.

-eniendo en cuenta el ancho$ es pre(erible seleccionar un tamaque la defnicin horizontal de la pantalla de la maor!a de los isitanque )stos no tengan que desplazar la pantalla con la bdesplazamiento. Una pgina angosta permite a los isitantes hin(ormacin (cilmente para encontrar lo que les interesa.

on respecto al largo$ es aconse+able no e*ceder de tres a cinco altura de la pantalla. ,e hecho$ las pginas e*cesiamente largas criesgo de no leerse por completo adems toma muchodescargarlas.

TAMAO DE LA PANTALLA


6/16


TAMAO DE LA PANTALLA

'*isten arias estrategias para garantizar que la pgina se ea de manera pt

maor!a de los equipos de los isitantes/

'legir el ancho ms pequeo admitido por la maor!a de los equipos %por e+e011 211 p!*eles de ancho&.

'legir una pgina que contenga tablas inisibles con ancho ariable %defnidporcenta+e&.

Usar un script %por e+emplo$ 3aa4cript& para detectar la resolucin de la panusuario redireccionarlo a una pgina con el ancho adecuado. 'ste m)todo

el isitante utilice un naegador con 3aa4cript actiado la creacin de tancomo anchos solicitados.POSICIONAMIENTO DE LA INFORMACION

4i se tiene en cuenta la direccin en la que los usuarios leen la in(o&iag#nal &es&e la es"uina superi#r i*"uier&a 2acia la es"u&erec2a3$ la in(ormacin que est) ubicada en la parte superior de la pms probabilidades de ser le!da por los usuarios de 5nternet.


7/16


6o se recomienda usar ms de tres colores distintos en un sitio wcon el criterio de simplicidad. Los colores deben corresponderse co

la organizacin$ especialmente los del logotipo$ es recomendabuna sensacin en particular.

4in importar qu) colores se eli+an$ debe elegirse un color dominanteel color principal de la pgina web. 4e deben elegir uno osecundarios ms brillantes dinmicos usarse en proporcionedestacar los elementos de la pgina.

ELECCION DE LOS COLORES

Los colores tienen un simbolismo impl!cito. 7or este motio$ se lo

elegir en (uncin de ob+etio. Los colores tienen in8uencia socomportamiento de los indiiduos/

9 niel (!sico %sobre el apetito$ el descanso$ la temperatura coetc)tera&.9 niel emocional %sobre sensaciones de miedo$ seguridad$ aetc)tera&.

9 niel psicolgico %sobre la energ!a$ la concentracin$ etc)tera&.

La composicin de colores puede dar una sensacin d

tanto en una casa hermosamente decorada como en un


8/16



9/16



10/16

PAUTAS PARA EL DISEO WEBEL CIRCULO CROMATICO

'l c!rculo cromtico es una herramienta #til para comprender cmo interacolores. 's una representacin de los colores en (orma circular. 5nclue los scolores/

Los colores primarios %ro+o$ azul$ erde& o "puros"$ que no pueden omezclando otros colores.

Los colores secundarios %cian$ magenta$ amarillo&$ que se obtienen al mpartes iguales dos colores adacentes. Los colores secundarios son diametopuestos a sus colores complementarios %sustractios& en el c!rculo cromtic

Los colores terciarios$ que se obtienen al mezclar un color primario secundario.

Los colores tambin se dividen en "clidos" (tonos que se acercan al rojo y "fros" (tono

pr!imos al a#ul.


11/16



12/16


'*isten lees uniersales que dominan la armon!a entre los colores responden a las propiedades (!sicas del o+o. uando el o+o e un crea automticamente un fltro para el color complementario alrededor. 'sto se llama 4c#nrase simulne#4' 7or eso$ la (ormque se percibe un color depende de los colores que lo rodean.amarillo se er ms anaran+ado al lado de un azul el azul se erp#rpura. 'l azul al lado de el ro+o se er ms erdoso$ etc)tera.

los colores lindantes en el diagrama cromtico crean una sensaci

equilibrio para el o+o debido a la ausencia de contraste: esto es lo qllama "armon!a de colores".


13/16


Para finalizar, en trminos generales, los obetos !e "olores "#li!os $ere"m#s gran!es %&e a%&ellos !e "olores fr'os(

'*isten dos maneras de elegir colores que armonicen/

; 4eleccionar matices del mismo color o colores dentro de la mismagama con tonalidades similares.

< =ezclar colores complementarios %clidos (r!os&$ o sea$ colores qest)n le+os unos de otros dentro del c!rculo cromtico.

uando se eli+an dos colores$ estos deben ser diametralmente opues

complementarios: para tres colores$ los colores seleccionados debenubicados en un tringulo equiltero$ etc)tera.


14/16


SELECCIN DE IMAGENES

Las imgenes siren para darle italidad hacer ms alegre un siti-omando eso en cuenta$ imgenes mal utilizadas pueden pertur

comodidad isual como tambi)n la descarga de una pgina.Los webmaster principiantes gustan de italizar sus sitios web diertidas imgenes animadas encontradas en la >eb. 'sto se eitar al m*imo porque dichas imgenespueden molestar a los lectores proocar que el sitio web transmitsensacin de poco pro(esionalismo.La correcta eleccin de los colores de (ondo

a que un (ondo mal elegido puede difclectura. Es esencial elegir un contraste apentre el color de primer plano y el color dedominante. 's por esto que se aconse+a no e(ondo con grfcos$ porque puede obstacullectura transmitir una sensacin geneamateurismo. Generalmente, el color de fonser algo plido.

COLORES DE FONDO


15/16


TIPOGRAFIA

4e recomienda no usar ms de dos tipos de (uente en un sitio we(uentes estilizadas se deben usar con moderacin %por e+emplo$ pa

t!tulo& para la maor parte del sitio web coniene utilizar una clsica %arial$ erdana$ hel)tica$ etc)tera&.'n los te*tos impresos tradicionales$ las (uentes con seri(as %sepequeos adornos$ suelen (acilitar la lectura a que las seri(as aulos lectores a seguir el te*to.

7ero no se recomienda usar seri(as en 5nternet porque$ dependiendodefnicin de la pantalla del usuario$ pueden de(ormarse pgarabatos que obstaculizan la lectura. 7or lo tanto$ es una opcinadecuada usar (uentes de palo seco o sin seri(as %sans?seri(&redondeadas.


16/16


PICTOGRAMAS

4e recomienda usar pictogramas e !conos para establecer sisuales. ,e cualquier manera$ se debe tener cuidado al elegir s!m

porque los usuarios pueden malinterpretarlos$ en especial si se trsitios web internacionales. 'stos son los pictogramas que ms se u

Una lupa simboliza caracter!sticamente la (uncinde b#squeda.

Un sobre representa la opcin de contactar alwebmaster a tra)s del correo electrnico.

Un signo de interrogacin simboliza la auda enl!nea

Una casa representa el !nculo a la pgina de inicio.Una bandera simboliza el idioma de la pgina actual

o la posibilidad de cambiarla a otro idioma.

s4_pautas para el diseño

Documents