Webmastering - Diseo webJunio 2014

Introduccin al diseo webEl trmino "diseo web" se refiere a la actividad que consiste en estructurar los elementosgrficos de un sitio web para expresar estticamente la identidad visual de una compaa uorganizacin. Se trata de una etapa de diseo virtual ms que de diseo funcional (ergonoma,navegacin).El objetivo del diseo web es realzar la imagen de una compaa u organizacin a travs deelementos grficos con el objeto de reforzar su identidad visual y despertar una sensacin deconfianza en el usuario. An as y junto con el criterio de ergonoma, un sitio web debe, sobretodo, cubrir las expectativas del usuario y permitirle encontrar fcilmente la informacin quebusca.Por eso, el diseo web consiste en encontrar un trmino medio entre una presentacin quetenga grficos impresionantes -y que le proporcione a la compaa tanto credibilidad comoimagen de marca- y una presentacin simple y sencilla que permita a los usuarios encontrar loque estn buscando.Por extensin, el trmino diseador web se refiere a la persona cuyo trabajo es disear sitiosweb.

Inspiracin necesariaDisear una pgina web es principalmente una tarea artstica que combina inventiva ycreatividad. El objetivo de esta gua es listar varios elementos clave que se usan para obtenerun diseo eficaz. De cualquier modo, tambin puede encontrarse inspiracin en una visita a lossitios web de referencia, en especial los sitios web profesionales. Es muy interesante observarcmo cada sitio web organiza la informacin, cmo se presentan los mens y los bloques deinformacin y, en general, determinar qu le brinda una apariencia "profesional" a un sitio web.

Organizacin de la pginaGeneralmente al disear un sitio web se crean plantillas que se usan como modelo. Lasplantillas son imgenes en "carbnico" o pginas web que representan el esquema grfico deun modelo de pgina.La estructura tradicional de una pgina web es la siguiente:

Un logotipo ubicado en la esquina superior izquierda. Los usuarios pueden hacer clic en lamayora de los logotipos y volver a la pgina de inicio.

Un men localizado a la derecha o a la izquierda.Un encabezado que contiene el nombre del sitio web, un banner de navegacin y un reareservada para un banner (publicitario o de otro tipo).El cuerpo principal de la pgina que contiene la mayor parte de la informacin.Un pie de pgina que incluye informacin til como ser, la ltima actualizacin, un vnculoa un formulario de contacto, un vnculo al mapa del sitio, etctera.

El diseador debe definir en la plantilla qu elementos no cambian y son idnticos en cadapgina y qu elementos varan de una pgina a la otra.

Estatuto grficoUn "estatuto grfico" es un documento integral que detalla las reglas de presentacin para loselementos grficos que transmiten la identidad visual de un sitio web.El estatuto grfico define el equipamiento grfico de un sitio web, en particular los tamaos,colores y apariencia del texto, las imgenes y botones del sitio y tambin la ubicacin que tienencon respecto a otros objetos en la pgina.

BocetoUn boceto es un modelo o prototipo de un sitio web que presenta los grficos y la navegacindel sitio. Los bocetos permiten a los diseadores formalizar el diseo del sitio web y casisiempre se usan para validar la fase de diseo antes de pasar a la fase de "realizacin".El boceto incluye pginas estticas que representan las pginas principales del sitio web (sincontenido), las cuales se usan para simular la navegacin. Durante la simulacin, elementosdinmicos tales como el motor de bsqueda, pueden conducir a una pgina que contieneresultados inventados, por ejemplo.

Tamaos de la pginaEl tamao de una pgina web depende principalmente de la definicin que tenga la pantalla delusuario (no de su resolucin).Teniendo en cuenta el ancho, es preferible seleccionar un tamao menor que la definicin

horizontal de la pantalla de la mayora de los visitantes para que stos no tengan que desplazarla pantalla con la barra de desplazamiento. Una pgina angosta permite a los visitantes hojearla informacin fcilmente para encontrar lo que les interesa.Con respecto al largo, es aconsejable no exceder de tres a cinco veces la altura de la pantalla.De hecho, las pginas excesivamente largas corren el riesgo de no leerse por completo yadems toma mucho tiempo descargarlas.Existen varias estrategias para garantizar que la pgina se vea de manera ptima en la mayorade los equipos de los visitantes:

Elegir el ancho ms pequeo admitido por la mayora de los equipos (por ejemplo: entre600 y 800 pxeles de ancho).Elegir una pgina que contenga tablas invisibles con ancho variable (definido porporcentaje).Usar un script (por ejemplo, JavaScript) para detectar la resolucin de la pantalla delusuario y redireccionarlo a una pgina con el ancho adecuado. Este mtodo requiere queel visitante utilice un navegador con JavaScript activado y la creacin de tantas pginascomo anchos solicitados.

El posicionamiento de la informacinCmo se posiciona la informacin es un elemento importante en el diseo web. Si se tiene encuenta la direccin en la que los usuarios leen la informacin (en diagonal desde la esquinasuperior izquierda hacia la esquina inferior derecha), la informacin que est ubicada en la partesuperior de la pgina tendr ms probabilidades de ser leda por los usuarios de Internet.

Eleccin de los coloresNo se recomienda usar ms de tres colores distintos en un sitio web para cumplir con el criteriode simplicidad. Los colores deben corresponderse con los colores de la organizacin,especialmente los del logotipo, y es recomendable que expresen una sensacin en particular.Sin importar qu colores se elijan, debe elegirse un color dominante y usarse como el colorprincipal de la pgina web. Se deben elegir uno o varios colores secundarios ms brillantes ydinmicos y usarse en proporciones menores para destacar los elementos de la pgina.Los colores tienen un simbolismo implcito. Por este motivo, se los debe elegir en funcin deobjetivo. Los colores tienen influencia sobre el comportamiento de los individuos:

A nivel fsico (sobre el apetito, el descanso, la temperatura corporal, etctera).A nivel emocional (sobre sensaciones de miedo, seguridad, alegra, etctera).A nivel psicolgico (sobre la energa, la concentracin, etctera).

La tabla que sigue es una lista de los significados que se asocian caractersticamente concolores especficos:

Color Significados positivos Significadosnegativos reas

Azulcalma, confianza, autoridad, pacificacin,serenidad, proteccin, seriedad,misticismo, amabilidad, agua, cielo, paz,

fro, sueonavegacin,nuevastecnologas, IT,medicina

Violeta delicadeza, pasin, discrecin, modestia,religinmelancola, tristeza,pena, decepcin Cultura, poltica

Rosa encanto, intimidad, feminidad, belleza ingenuidad diarios ntimos,mujer

Rojo calor, fuerza, coraje, dinamismo, triunfo,amor, entusiasmo

violencia, rabia,peligro, urgencia,restriccin, sangre,infierno

lujo, moda,deportes,marketing, medios

Naranja tibieza, bienestar, virtud, felicidad, riqueza,placer, ctricos, aroma, energa, vitalidad fuego, advertenciaentretenimiento,deportes, viajes

Amarillo luz, alegra, sol, vida, potencia, dignidad,oro, riqueza, inmortalidadengao, egosmo,celos, soberbia,advertencia

turismo

Verdenaturaleza, vida vegetal, ayuda, equilibrio,pacificacin, descanso, confianza,tolerancia, esperanza, orgullo, juventud,caridad

descubrimientos,naturaleza, viajes,educacin

Marrn calma, filosofa, campo suciedad medio ambiente

Blanco pureza, inocencia, nieve, pulcritud,frescura, riqueza modas, noticias

Gris neutralidad, respeto diseo,asociaciones,organizacionessin fines de lucro

Negro simpleza, lujo, noche muerte, oscuridad,tristeza, monotonacine, arte,fotografa,restriccin

La composicin de colores tambin tiene influencia sobre cmo se perciben los volmenes. Lacomposicin de colores puede dar una sensacin de bienestar, tanto en una casahermosamente decorada como en un sitio web.El crculo cromtico es una herramienta til para comprender cmo interactan los colores. Esuna representacin de los colores en forma circular. Incluye los siguientes colores:

Los colores primarios (rojo, azul, verde) o "puros", que no pueden obtenerse mezclandootros colores.Los colores secundarios (cian, magenta, amarillo), que se obtienen al mezclar en partesiguales dos colores adyacentes. Los colores secundarios son diametralmente opuestos a

sus colores complementarios (sustractivos) en el crculo cromtico.Los colores terciarios, que se obtienen al mezclar un color primario con uno secundario.

Los colores tambin se dividen en "clidos" (tonos que se acercan al rojo) y "fros" (tonos msprximos al azul).

Existen leyes universales que dominan la armona entre los colores y que responden a laspropiedades fsicas del ojo. Cuando el ojo ve un color, crea automticamente un filtro para elcolor complementario a su alrededor. Esto se llama "contraste simultneo". Por eso, la forma enque se percibe un color depende de los colores que lo rodean. As, el amarillo se ver msanaranjado al lado de un azul y el azul se ver ms prpura. El azul al lado de el rojo se verms verdoso, etctera.Adems, los colores lindantes en el diagrama cromtico crean una sensacin de equilibrio parael ojo debido a la ausencia de contraste; esto es lo que se llama "armona de colores".A grandes rasgos, existen dos maneras de elegir colores que armonicen:

Seleccionar matices del mismo color o colores dentro de la misma gama con tonalidadessimilares.Mezclar colores complementarios (clidos y fros), o sea, colores que estn lejos unos deotros dentro del crculo cromtico. Cuando se elijan dos colores, estos deben serdiametralmente opuestos, complementarios; para tres colores, los colores seleccionadosdeben estar ubicados en un tringulo equiltero, etctera.

Para finalizar, en trminos generales, los objetos de colores clidos perecern ms grandes queaquellos de colores fros.

Seleccin de imgenesLas imgenes sirven para darle vitalidad y hacer ms alegre un sitio web. Tomando eso encuenta, imgenes mal utilizadas pueden perturbar la comodidad visual como tambin ladescarga de una pgina.Los webmaster principiantes gustan de vitalizar sus sitios web con divertidas imgenesanimadas encontradas en la Web. Esto se debe evitar al mximo porque dichas imgenes

pueden molestar a los lectores y provocar que el sitio web transmita una sensacin de pocoprofesionalismo.

Colores de fondoLa correcta eleccin de los colores de fondo es vital ya que un fondo mal elegido puede dificultarla lectura. Es esencial elegir un contraste apropiado entre el color de primer plano y el color defondo dominante. Es por esto que se aconseja no elegir un fondo con grficos, porque puedeobstaculizar la lectura y transmitir una sensacin general de amateurismo. Generalmente, elcolor de fondo debe ser algo plido.

TipografaSe recomienda no usar ms de dos tipos de fuente en un sitio web. Las fuentes estilizadas sedeben usar con moderacin (por ejemplo, para un ttulo) y para la mayor parte del sitio webconviene utilizar una fuente clsica (arial, verdana, helvtica, etctera).En los textos impresos tradicionales, las fuentes con serifas (serif), o pequeos adornos, suelenfacilitar la lectura ya que las serifas ayudan a los lectores a seguir el texto.Pero no se recomienda usar serifas en Internet porque, dependiendo de la definicin de lapantalla del usuario, pueden deformarse y parecer garabatos que obstaculizan la lectura. Por lotanto, es una opcin ms adecuada usar fuentes de palo seco o sin serifas (sans-serif) msredondeadas.Por ltimo, tenga en cuenta que con las fuentes no estndar se corre el riesgo de que no sevisualicen correctamente en algunas pantallas. Si se desea crear ttulos con este tipo de fuente ypara evitar la limitacin mencionada antes, se pueden crear imgenes transparentes quecontengan el texto.

Smbolos grficosSe recomienda usar pictogramas e conos para establecer signos visuales. De cualquiermanera, se debe tener cuidado al elegir smbolos porque los usuarios pueden malinterpretarlos,en especial si se trata de sitios web internacionales. Estos son los pictogramas que ms seusan:

Una lupa simboliza caractersticamente la funcin de bsqueda.Un sobre representa la opcin de contactar al webmaster a travs del correo electrnico.Un signo de interrogacin simboliza la ayuda en lneaUna casa representa el vnculo a la pgina de inicio.Una bandera simboliza el idioma de la pgina actual o la posibilidad de cambiarla a otroidioma.

Webmastering - Webdesign Webmastering - Webdesign Webmastering - WebdesignWebmastering - Webdesign Webmastering - WebdesignEste documento intitulado Webmastering - Diseo web de Kioskea (es.kioskea.net) esta puesto a diposicin bajo

la licencia Creative Commons. Puede copiar, modificar bajo las condiciones puestas por la licencia, siempre que estanota sea visible.