dis. web-1

I.E.S.T.P FRANCISCO RICCI

www.jctecnologias.blogspot.com

MDULO DE DISEO WEB

2014

Sesin 1: Fundamentos Web Carrera Profesional: Tcnico en Computacin e Informtica

Trainer IT: Juan Carlos Bruno Vsquez

Formador TI: JCBRUNO DISEO WEB

2 Web Site: www. jctecnologias.blogspot.com

DISEO WEB

El diseo web exige que las pginas cumplan una funcin visual, comunicativa, expresiva, usable, interactiva y amigable. La funcin visual se refiere al uso apropiado de los colores, imgenes, y fuentes de texto. La funcin comunicativa y expresiva se refiere a que transmite de forma clara y concisa no solo la informacin, sino las ideas y sentimientos del autor de la pgina o de la compaa. La usabilidad y la interfaz amigable van a permitir al usuario navegar con facilidad por el sitio web en donde la interactividad, los hipervnculos y conexiones funcionan de forma adecuada.

La primera pgina de un site define el xito o el fracaso de todo nuestro trabajo:

Si quieren que sus visitantes permanezcan en la pgina y la visiten el sitio completo, asegrese de que la primera pgina atraiga su atencin y les provoque curiosidad. Recuerden, lo que para ustedes es un diseo espectacular, para otros puede que no lo sea.

Como comenzar

El diseo web es similar a la construccin de una casa o el bosquejo del diseo de una mquina. Necesitamos antes que nada, un plan de contenido y apariencia. Qu clase y qu cantidad de texto quiero incluir? Qu imgenes (diagramas y fotos) voy a utilizar y cuntas hay? Qu imgenes ilustran o acompaan qu parte de la copia?, Necesito tablas, efectos de sonido, msica, animacin? Debemos de tomar esta etapa sistemticamente, para que la etapa de ensamble nos resulte ms sencilla. Una vez que tenemos decidido todo esto, procederemos a hacer un borrador aproximado de las pginas. Necesitaremos un block de dibujo y lpices de colores. En el mundo de la publicidad, estos borradores se llaman bosquejos, y nos darn una idea de cmo se va a ver el contenido de nuestra pgina web propuesta.

Cuando estn conformes, pasarn a la etapa de procesamiento. Aqu es donde se crean los grficos necesarios, se trabaja con las imgenes, fotografas y se comprime su tamao, se elige el audio apropiado y se lo edita, y donde se producen las animaciones. Finalmente, comenzamos a crear nuestras pginas web. Se darn cuenta de que sern necesarios algunos cambios, pero es probable que sean pequeos.

Mantener la Identidad

Las grandes empresas generalmente prestan mucha atencin a la imagen que presentan al pblico. Valoran la identidad corporativa tanto como sus activos fijos, y por lo general son muy estrictas con respecto a sus logos y colores corporativos que se pueden usar y cules otros no. Regla nmero uno, cuando diseamos un web site comercial, debemos asegurar que el logo de la empresa se utiliza de acuerdo a lo especificado en sus guas. Regla nmero dos: en todas las pginas de la web, utilizar el logo de nuestro cliente o sus colores corporativos, para crear una identidad unificada y



que se reconozca fcilmente. Esto tambin ayudar a causar una experiencia visual agradable para nuestros visitantes.

Navegacin

Obviamente, el propsito de un men es mostrarles a los visitantes el contenido de nuestra web. El hacer clic en un item de menu los lleva directo a una pgina que contiene ms informacin sobre ese item o para mostrar un sub-menu que contiene varios temas bajo ese grupo particular. Naturalmente, nuestros links deben ser correctos (de lo contrario, llevamos a la gente a las pginas equivocadas), y los sub-menues se deben agrupar de forma coherente.

Animacin

La animacin nos ayuda a que la pgina se vea interesante, pero en mucha cantidad resulta tediosa para nuestros visitantes. Por eso es necesario limitar la animacin para no distraer a la gente de los contenidos en la pgina que realmente importan, o incluso hasta para no enojarlos. Por supuesto, si nuestra animacin constituye el nico elemento, entonces esta gua es irrelevante.

Tamao en bytes

Aparentemente, hay gente que todava insiste en que ninguna pgina debe pesar ms de 45kb. Con conexiones ms rpidas, e incluso banda ancha tan popularizado, no est mal que el tamao sea de ms o menos 100 kb. Se debe tener en cuenta, sin embargo, que nuestra primer pgina deber ser lo ms pequea posible (en cuanto a bytes), sin comprometer la calidad.

Uso de Tipografa La tipografa es un elemento importante en internet, aunque como en el diseo grfico la regla principal es que todo sea legible, es algo as como la regla de oro de las tipografas (si no se puede leer no sirve). A la hora de trabajar con nuestros textos podemos separar en dos grupos, ttulos y cuerpos de texto o mensajes. Para los primeros necesitaremos letras generalmente gruesas y detalladas.

Para los segundos deberemos usar tipografas "Lisas" (Arial, Verdana), nunca con "Serifa" (Times). Aqu tienen una imagen de ejemplo: Colores Los colores de los objetos nos transmiten emociones muy fuertes. Los hospitales carecen de color rojo, pues ste es asociado a la sangre, y en las oficinas suele predominar el blanco que denota orden y pulcritud. Acaso os imaginis trabajando en unas oficinas de color rojo? Sera demasiado estresante, pues es un color de un fuerte impacto visual y que tiene mucha fuerza y energa. Esto son claros ejemplos de cmo



en la actualidad estamos usando los colores para nuestro beneficio, para trabajar mejor, para estar ms tranquilos, etc.

El color y su expansin Probablemente alguna vez os hayis preguntado por qu la mayora de las pginas web que hay en internet tienen un fondo claro y no negro. De hecho, las pginas que tienen un fondo negro suelen quedar peor. Esto se debe al carcter expansivo de los colores, no se ver igual un texto sobre fondo negro que blanco: El texto sobre fondo blanco es ms legible y por lo tanto el lector debe forzar menos la vista, sintindose agradecido. Esto tambin lo podemos ver en colores claros y oscuros, no es algo que suceda nicamente en blanco y negro.

Armona y contraste

Armona: Crear una gama de colores para nuestra web que est compuesta por colores de la misma gama o tono. Por ejemplo, CLab es una web con colores armnicos, ya que usa el mismo color y diferentes tonalidades del mismo.

Contraste: Combinar diferentes colores para crear una gama como, por ejemplo, claros y oscuros, clidos y fros, etc.

La combinacin de los diferentes colores, tanto si armonizamos como si contrastamos, suele generar diferentes impresiones sobre un mismo objeto. El uso correcto de los colores en el fondo como en el frente es una de las principales bases del xito de un buen diseo.

Significado del color



Rojo: pasin, amor, ira Naranja: energa, alegra, vitalidad Amarillo: alegra, la esperanza, el engao Verde: Abundancia, Naturaleza Azul: calma, tristeza Responsable, Prpura: La creatividad, la Realeza, la Riqueza Negro: El misterio, la elegancia, el Mal Gris: Formalidad conservador, Blanco: Pureza, Limpieza, la Virtud Marrn: la naturaleza, la salubridad, la confiabilidad Beige: conservador, Piedad, sordo Crema o marfil: calma, la pureza elegante

Espaciado y composicin Deje que tu texto respire. Es la expresin que se utiliza cuando se busca una web legible. En estas dos imgenes de aqu abajo podemos ver como una tiene el texto muy pegado a la imagen y su interlineado es muy bajo para el tamao de letra escogido, hacindolo confuso para la lectura. La otra imagen en cambio, se lee perfectamente.

Este es un buen ejemplo de cmo hacer que nuestros textos no se vean compactados. Tambin es importante saber que el espaciado entre lneas suele ser un 20% superior al tamao de la letra, por ejemplo, para un tamao de letra de 10 puntos pondremos 12 puntos de interlineado.

Colocando nuestros elementos

La posicin de nuestros elementos en la pantalla es uno de los puntos ms importantes a la hora de hacer nuestro diseo, pues no es lo mismo colocar una imagen arriba que abajo, con un texto al lado o sin el, que sea una imagen grande o pequea y as infinidad de detalles que dotarn a nuestra pgina de personalidad. Un buen ejemplo de cmo componer una web con imgenes y texto adecuadamente puede ser la pgina principal de Adobe la cual usa eficientemente el espacio entre lneas, y posiciona las imgenes por tamao y relevancia.

dis. web-1

Documents