You are on page 1of 48

CURSO VISUAL Y PRCTICO

Diseo y tecnologa
EL DISEADOR WEB EVOLUCIN DE INTERNET TECNOLOGAS DE LOS SITIOS WEB PRINCIPIOS PARA UN BUEN DISEO WEB EVOLUCIN DEL DISEO WEB TIPOLOGA DE LOS SITIOS WEB DISEAR UN PORTFOLIO COMING SOON PAGE UN PROBLEMA CON BUEN DISEO CREAR UNA PGINA DE ERROR 404 TEORA DEL COLOR TIPOGRAFA

01

LA ESTRUCTURA Y EL DISEO DE LAS PGINAS CREACIN DE UN LAYOUT EN PHOTOSHOP

EL DISEADOR WEB
Para comenzar, veremos cules son las caractersticas y habilidades que todo diseador, programador o autodidacta debera sumar a su perfil profesional para convertirse en un experto del diseo y el desarrollo web.

ctualmente, es imposible referirse a un solo tipo de perfil de diseador web y mucho menos a un solo tipo de persona. La creacin de sitios web se ha convertido en una disciplina en la que se plantean proyectos que requieren de una conjuncin de conocimientos tcnicos (como lenguajes de programacin y servidores), conceptuales (usabilidad y accesibilidad, entre otros) y estticos (como percepcin y legibilidad). Atrs qued la poca en la que para realizar un sitio web alcanzaba con tener un mnimo conocimiento de HTML y de tratamiento de imgenes. Ahora es importante que un diseador sepa cmo planificar un sitio web, y que tenga presentes los aspectos tcnicos de diagramacin y de estructura al momento de ponerse a disear.

LAS HERRAMIENTAS DE TRABAJO


Para realizar su trabajo, un profesional del diseo y el desarrollo web necesita herramientas de software, que debe utilizar con criterio para sacar el mximo provecho de ellas, adems de conocer los fundamentos de su tarea. Debe ser un usuario intermedio de PC o Mac, utilizar los navegadores web y el correo electrnico, y estar al tanto de la existencia y el funcionamiento de las redes sociales. Como existen muchas herramientas de diseo en el mercado, lo importante es que hay un estndar muy bien definido de lo que se usa. Basta con echar una mirada a las solicitudes de trabajo que aparecen en los medios para saber qu es lo que se pretende hoy en da de un diseador web. Un diseador web debe tener conocimientos sobre HTML y CSS, trabajar

con Dreamweaver para armar los sitios, y poder armar por lo menos un banner en Flash. Tambin debe utilizar las herramientas principales de diseo, como Photoshop, Illustrator y Fireworks, que permiten trabajar en forma profesional y con la mejor calidad. Adems, resultarn importantes los conocimientos de animacin as como tambin la programacin en ActionScript 3.0.

LAS HABILIDADES DEL DISEADOR


Aunque es posible decir que un buen diseador web es aquel que sabe utilizar las herramientas con las que desarrolla sus proyectos, ste es slo un aspecto tcnico que no resulta fundamental para tener xito. Las habilidades principales del diseador sern: Buen criterio y sentido de la esttica: conocer los principios del diseo tradicional y los especficos del diseo web para crear sitios agradables. Eleccin de las herramientas: elegir la herramienta ideal segn el tipo de

En la Web tendremos muchos sitios como referentes estticos. Uno muy novedoso y atractivo es pikaboo (www.pikaboo.be).

1. DISEO Y TECNOLOGA / EL DISEADOR WEB

013 013

proyecto web que deba realizar y saber utilizarla al mximo. Conocer el ambiente: estar inmerso en el mundo virtual de Internet y conocer las ltimas tendencias y tecnologas. Estar actualizado: estar al tanto de todo lo que influye en el medio, como la aparicin de nuevas tcnicas de diseo, cambios en las tendencias y en los estilos, o nuevos dispositivos y utilidades que simplifiquen el trabajo. Entender los principios bsicos de funcionalidad en un sitio: de esta manera, puede ofrecer la mejor solucin a cada proyecto que realice. Capacidad de organizacin: esto es fundamental para poder llevar a cabo todo el proyecto de forma ordenada y prolija, sin sobresaltos. Facilidad para la relacin interpersonal: comunicarse de forma clara con los clientes y los colegas resulta fundamental para el xito de los proyectos, sobre todo, cuando se trabaja de forma freelance y se tercerizan tareas.

en Flash, deber determinar la mejor forma de crear un diseo optimizado, utilizar las herramientas grficas del programa y conocer su lenguaje de programacin, ActionScript. Para las etapas posteriores al diseo de los sitios, es necesario que sepa maquetar en HTML y utilizar CSS, y para estas tareas Dreamweaver resulta una herramienta

esencial. Por ltimo, es importante que tenga conocimientos sobre la forma de alojar un sitio en un servidor, ya sea por medio de Dreamweaver o mediante un programa especial para FTP (File Transfer Protocol), como por ejemplo, FileZilla. Como vemos, un diseador necesita contar con muchos conocimientos para poder crear un sitio de calidad.

ACTUALIZARSE
A la hora de mantenernos actualizados, podemos recurrir a los siguientes sitios:
TheFWA (www.thefwa.com): uno de los sitios ms conocidos, en donde premian a las mejores creaciones en Flash. Best Web Gallery (www.bestwebgallery.com): sitio de referencia para conocer los mejores diseos XHTML y CSS. Ateneu Popular (www.ateneupopular.com): blog en espaol con noticias, recursos y tutoriales. Web Developers Handbook (www.alvit.de/handbook): excelente sitio con cientos de links de recursos, noticias e inspiracin.

TAREAS DEL DISEADOR


Para definir de forma ms clara el perfil del diseador web, podemos realizar una divisin de sus tareas sobre la base de las diferentes etapas en las que se podra ver involucrado dentro de la realizacin de un proyecto web. Si pensamos en la concepcin del diseo de un sitio, es imprescindible que sea capaz de realizar un resumen o brief de trabajo, en donde pueda determinar las necesidades estticas y tcnicas del proyecto, y a partir de esto, comenzar a disear. En este momento, ser necesario que disponga de herramientas para confeccionar el diseo. Si el sitio es HTML, puede trabajar con aplicaciones como Photoshop, Illustrator o Fireworks, que ya mencionamos. En cambio, si el sitio es

014

EVOLUCIN DE INTERNET
Para comprender en detalle el avance del diseo de sitios, nada mejor que una lnea de tiempo que nos muestra cmo evolucionaron los navegadores web y los buscadores, dos piezas clave en el desarrollo de Internet.
a ada vez que surge una nueva tec tecnologa o aparece una versi versin ms moderna de alguna y existente, todos ya re los elementos relacionados con ella

se actualizan. De esta manera, los navegadores incluyen soporte para las novedades y, luego, los diseadores recrean los sitios incorporando en ellos la nueva tecnologa.

G Google.com: nacido como motor de bsqueda, Google slo exhibe un mensaje de bienvenida y un par de enlaces marginados a la izquierda.

1996
Yahoo.com: primera versin, donde se diferencian tres sectores: cabezal, pie y cuerpo de pgina. Su contenido principal, diagramado a una sola columna alineada a la izquierda, se compone de textos y enlaces sin estilos, y de unos pocos iconos de aspecto sencillo.

1997
Yahoo.com: la diagramacin pasa a ser en dos columnas; surge un nuevo estilo para algunos textos, y la pgina se centra en la ventana del navegador.

1998

2000
Google.com: el sitio vuelve a ser liviano visualmente. Los enlaces de contenido institucional se reducen, se eliminan los colores de fondo, y el logo sufre una suave metamorfosis.

2003
Yahoo.com: la incorporacin de soporte CSS en algunos navegadores trae mejoras en la calidad del diseo. Aumenta la cantidad de contenido, la diagramacin se hace ms rica y se suman las primeras fotografas al portal.

1. DISEO Y TECNOLOGA / EVOLUCIN DE INTERNET

015

OPERA Es un navegador creado por la empresa noruega Opera Software. En la actualidad se encuentra en la versin 10.54.

1994

NETSCAPE NAVIGATOR Netscape fue el primer navegador web. Su ltima versin es la 9.0.0.6, lanzada en febrero de 2008.

1994

INTERNET EXPLORER Es el navegador desarrollado por Microsoft para Windows. Hoy en da existe la versin 8.0.

1995

SAFARI Es el navegador de Mac desarrollado por Apple Inc. En junio de 2010 se lanz la versin 5.0.

2004

2003

FIREFOX Navegador multiplataforma y de cdigo abierto. Su ltima versin es la 3.6.6.

GOOGLE CHROME Es el navegador desarrollado por Google. Es de cdigo abierto y su ltima versin es la 5.0.375.86.

2008

Google.com: incorpora enlaces a las nuevas herramientas y recursos disponibles. Mejora los servicios de Gmail, Google Maps, Adwords y AdSense. Adems, cambia la bsqueda instantnea, y la posibilidad de elegir una imagen para la home del buscador.

2005
Google.com: mantiene sus principales caractersticas, incluyendo la personalizacin del logo, pero economiza recursos al reemplazar las pestaas por enlaces sin estilo.

2007
Yahoo.com: el portal incorpora una pre-home, indicando las versiones de navegadores que soporta.

2008
Google.com: incorpora enlaces a las nuevas herramientas y recursos disponibles. No aplica grandes cambios de estilo, ms all de las mejoras en los botones y en la definicin del logo.

2010
Yahoo.com: el sitio actual est optimizado para resoluciones de 1024 x 768, y es rico en diagramacin, diseo, implementacin de estilos y uso de JavaScript.

016

TECNOLOGAS DE LOS

SITIOS WEB

Aunque casi todos los sitios que navegamos parecen iguales, es posible encontrar diferencias en la forma en la que estn desarrollados, ya que utilizan distintas tecnologas o tcnicas para cumplir sus objetivos.
s habitual que a diario naveguemos por diversos sitios para revisar nuestro correo electrnico, leer las noticias, o hacer alguna compra o pago virtual. A simple vista, todos los sitios que encontramos parecieran estar hechos de la misma manera, aunque si hacemos un anlisis en detalle, descubriremos que en ellos intervienen diversas

tecnologas que se combinan de diferentes modos para lograr las funcionalidades y prestaciones que brindan al usuario. Conozcamos las principales.

nen son descargados e interpretados directamente por el navegador (Firefox o Internet Explorer). Pueden estar creados con las siguientes tecnologas: HTML y XHTML: la mayora de los sitios por los que navegamos se crean con estos lenguajes. Estas pginas se componen por una estructura

LENGUAJES DE EJECUCIN DEL LADO DEL USUARIO


En estos sitios, cuando el usuario accede a una pgina, los archivos que la compo-

TIPO DE SITIO
SITIO ESTTICO SITIO DINMICO BLOG E-COMMERCE PORTAL DE NOTICIAS APLICACIN ONLINE BUSCADOR FORO WIKI NEWSLETTER EXPERIMENTAL 3D

HTML
Usado slo para incluir el archivo Flash. Usado en toda la estructura, comentarios y videos relacionados. Usado en toda la estructura. Usado en toda la estructura. Usado en toda la estructura. Usado en toda la estructura. Usado en toda la estructura. Usado en toda la estructura. Usado en toda la estructura. Usado en toda la estructura. Usado slo para incluir el archivo Flash. Usado slo para incluir el archivo Flash.

CSS

FLASH/ ACTIONSCRIPT
Sitio creado totalmente en Flash y ActionScript. Usado para el player de video. No utilizado. No utilizado. Utilizado slo en p banners publicitarios. No utilizado. No utilizado. Utilizado slo en banners publicitarios. No utilizado. No utilizado. Sitio creado totalmente en Flash y ActionScript. p Sitio creado totalmente en Flash y ActionScript.

PHP/ASP

Usado slo para eliminar los mrgenes. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado para darle todo el estilo visual. Usado slo para eliminar los mrgenes. Usado slo para eliminar los mrgenes.

No utilizado. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. Usado para crear las pginas en forma dinmica. No utilizado. No utilizado. No utilizado.

Tecnologas que se utilizan para desarrollar cada tipo de sitio.

1. DISEO Y TECNOLOGA / TECNOLOGAS DE LOS SITIOS WEB


Aqu se ve el cdigo con el que est conformada parte de una pgina, con etiquetas que indican ttulos principales, prrafos, links e imgenes.

017

de etiquetas que tienen significados semnticos (ttulos importantes, prrafos o imgenes) para que los buscadores (como Google o Bing, por ejemplo) vinculen un determinado texto existente en la pgina al significado semntico que le da la etiqueta que lo contiene. JavaScript/AJAX: es un lenguaje de

programacin usado para generar interfaces de usuario mejoradas, con ms interactividad. Las sentencias y funciones de este cdigo pueden estar en el mismo archivo HTML o en un archivo externo. AJAX es una tcnica que se usa vinculando JavaScript a XML. JavaScript requiere la informacin alojada en el servidor en formato XML

para generar cambios o agregar funciof ncionalidades en la pgina, sin interferir con su visualizacin ni comportamiento.

YOUTUBE
En YouTube podemos ver que el reproductor de video y sus controles estn creados con Flash y ActionScript. El resto del entorno visual es HTML, pero tanto la informacin de los videos relacionados como los comentarios dejados por los usuarios estn almacenados en una base de datos, lo que indica que se trata de un sitio creado con PHP o ASP. Finalmente, las funcionalidades que proveen los botones de cantidad de reproducciones o cantidad de videos estn generadas con JavaScript y, tal vez, con AJAX.

JAVASCRIPT/ AJAX
No utilizado. Usado para crear la interactividad. Usado para crear la interactividad. No utilizado. Usado para crear la interactividad. Usado para crear la interactividad. Usado para crear la interactividad. No utilizado. No utilizado. No utilizado. No utilizado. No utilizado.

BASE DE DATOS
No utilizada. Usada para leer la informacin respectiva de los videos y los comentarios. Usada para almacenar la informacin de los posteos y comentarios. Usada para almacenar los datos de los usuarios, productos e imgenes. Usada para almacenar la informacin de los posteos y comentarios. Usada para almacenar los datos creados por el usuario. Usada para almacenar los datos indexados de las pginas. Usada para almacenar la informacin de los posteos y comentarios. Usada para almacenar la informacin de los posteos y comentarios. No utilizada. No utilizada. No utilizada.

URL DE EJEMPLO

www.metropolis-media.com.pl/2007 www.youtube.com http://es.wordpress.org www.officenet.com.ar/basket.asp www.lanacion.com.ar http://docs.google.com www.google.com www.psicofxp.com www.wikipedia.org *** www.davidlindseywade.com/#/portfolio/portfolio/19 www.vatican.va/various/cappelle/sistina_vr/index.html

018

Flash y ActionScript: Flash se asom al mundo de Internet como un programa destinado a generar vistosas animaciones vectoriales que se podran incorporar en las pginas. En su evolucin, desarroll un potente lenguaje de programacin que, hoy en da, permite crear sitios y aplicaciones web dinmicas, con conectividad hacia otros lenguajes y plataformas. Tambin brinda la posibilidad de generar entornos con gran interactividad e impacto visual, adems de manejar audio y video.

HTML VS. XHTML


Aunque lo veremos en detalle ms adelante, la diferencia entre HTML y XHTML radica, fundamentalmente, en que el ltimo requiere una sintaxis ms estricta en comparacin con el primero, en el que pueden omitirse las etiquetas de cierre, por ejemplo, sin que esto provoque fallas.

ALMACENAMIENTO DE DATOS
Cuando se genera un sitio web dinmico, es necesario contar con un repositorio de informacin. Para esto, disponemos de algunas alternativas que vemos a continuacin: XML (Extensible Markup Language): es un lenguaje de sintaxis similar a HTML, pero no tiene etiquetas predefinidas con significados particulares, sino que stas son establecidas por el usuario de acuerdo con la informacin que necesite almacenar. Suele usarse vinculado a Flash y ActionScript. Bases de datos: una base de datos es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemticamente para su posterior uso. En el entorno web, las bases ms utilizadas son SQL (SQL Server pertenece a Microsoft) y MySQL (open source). Se las usa para almacenar los datos que componen un sitio web, tales como textos e imgenes, entre otros. Suelen usarse vinculadas a ASP y PHP.

usarse sin costo alguno. Es compatible con la mayora de los servidores web y sistemas operativos, aunque suele implementarse en entornos Linux y con bases de datos MySQL, lo cual evita por completo los costos de licencias. ASP: es un lenguaje de programacin creado por Microsoft, que se ejecuta slo en servidores Windows. Su funcionamiento es igual al de PHP pero se utiliza, en general, vinculado a bases de datos SQL. La desventaja que presenta es que no es gratuito y que debe implementarse en un entorno 100% Windows, que tampoco es gratuito.

APLICACIN DE ESTAS TECNOLOGAS


Un caso en el que podemos ver muchas de estas tecnologas vinculadas es YouTube. En l se utiliza un reproductor con funciones especiales de video, creado en Flash, y en la interfaz de la pgina se pueden postear nuevos videos, crear perfiles y dejar comentarios. Tambin encontramos sitios experimentales que generan nuevas situaciones de interaccin y de experiencia con el usuario, al mismo tiempo que buscan un gran impacto visual sin limitaciones en cuanto al diseo. En ellos, tanto la interfaz como las situaciones interactivas son creadas en Flash y ActionScript de forma esttica. Adems, Flash tambin puede leer lenguajes de marcado (como XML) y bases de datos para generar sitios dinmicos.

Wikipedia es un entorno colaborativo generado en PHP, donde los usuarios crean la informacin, que es almacenada en bases de datos y, luego, mostrada ante el requerimiento de cada persona.

LENGUAJES DE EJECUCIN DEL LADO DEL SERVIDOR


Son lenguajes que ejecuta el servidor para crear una pgina cuando el usuario accede a un sitio. Es decir, buscan la informacin en una base de datos y, tomndola como referencia, generan archivos HTML que sern finalmente visualizados por el usuario. Conozcamos las alternativas ms difundidas: PHP: es un lenguaje de programacin al que pueden agregarse diversas libreras para otorgarle funcionalidades y
Este sitio de alto impacto visual permite tener interactividad tanto con el mouse como con el teclado.

DISEO WEB
la hora de disear un sitio, es conveniente tener presentes algunas recomendaciones que harn que nuestro trabajo sea efectivo en cumplir su objetivo. A continuacin, presentamos varios consejos para tener xito o, al menos, para mejorar las decisiones que tomemos al crear el sitio.

PRINCIPIOS PARA UN BUEN

El diseo web posee caractersticas particulares que debemos tener en cuenta para obtener, como resultado, una interfaz estticamente agradable y funcional.

LOS ELEMENTOS GRFICOS

NOS AYUDAN A INDICARLE

DE NUESTRO SITIO.
Color: utilizando el color, podemos generar muchas conductas en el usuario y guiar su atencin. Por ejemplo, si la palabra es azul, el navegante quiz la interprete como un vnculo. En cambio, si hay un texto rojo, seguramente lo leer con mayor precaucin. Elementos visuales: el uso de elementos tales como vietas (bullets), recuadros y destacados facilita la lectura y conduce la mirada. Posicin: el recorrido del usuario comienza por el logo y, luego, contina

AL USUARIO EL RECORRIDO QUE DEBE HACER DENTRO

segn el camino que tracemos. Entonces, si queremos que algo se vea en segundo plano, no deberemos ubicarlo en el pie de la pgina (footer), sino en un lugar superior.

MENOS ES MS: AIRE, ESPACIOS Y SIMPLICIDAD


Al disear una pieza comunicacional, debemos evitar llenar todos los espacios. El ojo necesita tener un descanso y no podemos bombardearlo con un sitio que tenga imgenes en todos lados, ya que el usuario no sabra por dnde comenzar a mirar. Pensemos en las sensaciones que experimentamos cuando pasamos por una vidriera y vemos una sola prenda en exhibicin. Probablemente, tengamos la impresin de que se trata de una marca exclusiva. De algn modo, los espacios con pocas cosas parecen ms elegantes, llaman ms la atencin. Por eso, es conveniente utilizar slo contenidos relevantes para que los usuarios hagan foco en ellos.

EL PUNTO DE TENSIN
Toda pieza comunicacional presenta diversos elementos, niveles de lectura y jerarquas. Se generan relaciones entre esos componentes para guiar al usuario, llevndolo por la informacin que queremos que vea y generando puntos de tensin para hacer foco en esos elementos. Algunos de los recursos que podemos utilizar para trazar un recorrido son los siguientes: Contraste: la diferenciacin, cromtica y de tamao, es una manera muy efectiva de conducir la mirada.

1 2 3

Existen varias formas de destacar los elementos principales, como el tamao, el color y la ubicacin, entre otras opciones.

020

NAVEGACIN CLARA
La claridad del men de navegacin es fundamental, porque el usuario debe encontrar de forma rpida y sencilla lo que est buscando. Todos nos hemos sentido perdidos en algn sitio mientras intentbamos descubrir el telfono de contacto. Esto hace que, luego de mover el puntero velozmente por toda la pgina, cerremos el navegador con un sentimiento de frustracin por no haber hallado lo que buscbamos. Esta situacin es, precisamente, lo contrario de lo que queremos que experimenten nuestros usuarios. Por eso, debemos intentar darles toda la informacin sin que tengan que hacer ms de dos clics. Los botones representan grficamente los links del men de navegacin, por lo que deben ser fciles de localizar e interpretar. En estos casos, lo obvio y predecible es lo ms recomendado. Otro elemento que podemos utilizar son las brjulas, que funcionan como los letreros que vemos en los grandes comercios con indicaciones del estilo Usted est Aqu. ste es el objetivo del uso de mens rastros o identificacin de secciones que solemos encontrar en los grandes sitios de Internet: nos muestran claramente cul es la seccin en la que estamos o el recorrido que hemos hecho para llegar hasta all. Los mens rastro son importantes para guiar al usuario en el recorrido del sitio, sobre todo, cuando tiene mucha cantidad de pginas y secciones.

MDULO CATEGORA TTULO BAJADA

La grilla constructiva permite organizar la informacin de manera ordenada y prolija.

ES CONVENIENTE QUE
LOS USUARIOS OBTENGAN

GRILLA
ste es uno de los elementos que, aun de forma inconsciente, conocemos y hemos visto en sitios y publicaciones. Es ms, tal vez lo usemos incluso sin saberlo, ya que todo diseo presupone una grilla constructiva. Esta grilla es utilizada en los medios grficos, como revistas y diarios, en donde la cantidad de informacin es muy amplia; poco a poco, tambin est cobrando importancia en la Web. El sentido de la grilla es mantener organizada la informacin, otorgando legibilidad y orden para una mejor lectura. Esto no significa que el diseo

TODA LA INFORMACIN

CON SLO HACER DOS CLICS.

Los mens rastro son importantes para guiar al usuario en el recorrido del sitio, sobre todo, cuando tiene mucha cantidad de pginas y secciones.

1. DISEO Y TECNOLOGA / PRINCIPIOS PARA UN BUEN DISEO WEB

021

quedar cuadrado y aburrido, sino, por el contrario, que tendr un valor agregado en cuanto al orden y la estructura. La grilla constructiva permite organizar la informacin de manera ordenada y prolija. En el ejemplo de grilla constructiva podemos apreciar el esqueleto del sitio web y ver que est compuesto por mdulos. Cada mdulo est determinado por un alto y un ancho y, a partir de su agrupacin, se definen nuevas estructuras. Por ejemplo, el ancho de las columnas est formado por dos mdulos. Tambin podemos observar que en las notas se mantiene constante una estructura, donde aparece la categora a la que pertenece la nota, el ttulo y una pequea bajada. Estos elementos mantienen siempre la misma letra, el mismo tamao y el mismo color.

ZONAS CALIENTES
Jakob Nielsen, Ingeniero de interfaces, realiz investigaciones sobre los contenidos ms vistos dentro enidos de un sitio web. Concluy en denominar como forma trmica a la presentacin de los contenidos, tacin marcando las zonas ms vistas como zonas calientes. Utiliz colores rojo y amarillo para indicar lo ojo ms visto, y azul y gris para lo menos visto. Como resultado, las zonas ms vistas forman una especie de stas letra F o tringulo sobre la estructura general del sitio, lo que confirma que las mejores ubicaciones para as los contenidos ms importantes son sas. Podemos leer ms informacin en www.useit.com.

ESTTICA, TEMTICA Y TARGET


Nadie pensara en vestirse con remera y bermuda para ir a un casamiento. Y as como creemos que ciertas cosas son ms adecuadas para determinadas circunstancias, lo mismo sucede con los elementos que podemos hallar en el diseo de una interfaz. Por ejemplo, no encontraremos un peridico que utilice tipografas manuscritas para los textos de las notas. En todos los diseos que hagamos, es importante saber qu queremos comu-

nicar y a quin lo dirigiremos. Teniendo en claro estas respuestas, podemos segmentar y definir el target de usuarios a los que apuntamos. De esta forma, ser mucho ms fcil seleccionar los elementos que resulten ms apropiados para definir la identidad de la empresa o el producto que estamos mostrando. Cabe aclarar que decimos ms apropiados porque, en realidad, no hay una regla que establezca para qu se debe usar una determinada tipografa o color. El diseo es subjetivo, y el concepto de belleza no es igual para todos; pero s hay pautas que estn muy arraigadas en la sociedad y que pueden ayudarnos a tomar algunas decisiones. Por ejemplo, sabemos que el rojo puede sugerir peligro y que el color negro se utiliza para luto, y podemos observar que los locales de comida rpida usan, generalmente amarillos y rojos para la decoracin.

COLORES
El uso del color aplicado de forma consciente por diseadores grficos profesionales es un arma muy poderosa que provoca sensaciones y tiene un efecto psicolgico en la conducta de la gente. Adems, por supuesto, hay connotaciones culturales que, en ciertos casos, refuerzan el mensaje que los colores transmiten. Por ejemplo, los productos con packaging verde y blanco son light, los locales con colores rojo y azul son supermercados, y el rojo indica peligro. As, a travs del uso del color, podemos generar un punto de tensin en el sitio, llevando la mirada del lector hacia donde queremos que mire.

MISCELNEAS Y FORMAS
Los pequeos elementos que sirven como detalles en nuestros diseos deben ser coherentes con la esttica general del sitio, ya que las formas tambin transmiten sensaciones. Si imaginamos un diseo para vender productos de cosmtica para mujeres, sera ms apropiado emplear lneas curvas de fondo, en vez de figuras geomtricas. A modo de conclusin, vale repetir que el diseo es subjetivo, y que cada persona tiene sensaciones y vivencias distintas, por lo que las percepciones difieren en todos nosotros. Teniendo en cuenta esto y las recomendaciones anteriores, podremos lograr que nuestros sitios tengan un diseo efectivo y que cumplan sus objetivos principales: comunicar claramente, y provocar en los usuarios las reacciones previstas y deseadas.

En esta imagen podemos ver otro ejemplo de grilla constructiva.

022

DEL DISEO WEB


Para comenzar nuestro recorrido, es importante conocer qu significaba un sitio web hace 20 aos y qu representa hoy. Esto nos ayudar a comprender el estado actual del diseo y del desarrollo web.

EVOLUCIN

omo usuarios de Internet, navegamos decenas de sitios por da con el objetivo de revisar nuestro correo, informarnos, compartir imgenes, comprar productos,contar lo que estamos haciendo o, simplemente, divertirnos. Hemos aprendido a utilizar estos sitios casi sin darnos cuenta, haciendo uso de interfaces que, en general, podemos entender y dominar sin grandes dosis de esfuerzo o atencin. Los elementos que hoy componen una pgina web y su diseo han evolucionado a travs del tiempo. En sus comienzos, surgieron gracias al uso de metforas basadas en el cine,la televisin, los libros o las galeras de arte, del mismo modo en queanteriormentelos sistemas operativos tomaronla metfora del escritorio. El uso de estos recursos ayud a los usuarios a familiarizarse con las funcionalidades de estos productos interactivos y marc el inicio de una disciplina que, luego, se convertira en un trabajo interdisciplinario, frentico y lleno de inventiva.

cos que atraves el medio web, entre los que podemos mencionar los siguientes: Avances en la velocidad y el tipo de conexin a Internet. Evolucin del hardware: monitores, tarjetas de video y procesadores, entre otros componentes. Crecimiento del software, principalmente, el de uso libre. Masificacin en el uso de los buscadores. Estandarizacin de los lenguajes segn las normas de W3C (World Wide Web Consortium, www.w3c.org). Aparicin de herramientas y aplicaciones web que ayudan a mejorar los procesos, los tiempos y la calidad de produccin. A partir de ahora, delinearemos los diferentes perodos del diseo web y analizaremos ejemplos caractersticos de cada uno.

UN RECORRIDO POR LA HISTORIA DEL DISEO WEB


El diseo web comenz a dar sus primeros pasos en la dcada del 90 y hoy, a casi 20 aos de su nacimiento, podemos decir que es una disciplina que ha tenido un crecimiento agitado, colmado de cambios, posibilidades, bsquedas e innovaciones. Esta metamorfosis fue la respuesta al ritmo vertiginoso de las necesidades y las tendencias que fueron mostrando los usuarios de Internet y a la evolucin de los factores tecnolgi-

1. DISEO Y TECNOLOGA / EVOLUCIN DEL DISEO WEB

023

PRIMEROS PASOS
En 1991, el fsico ingls Tim Berners-Lee public la primera pgina web. Su contenido estaba conformado nicamente por texto e hipervnculos que hacan posible la navegacin entre pginas. sta era una pequea referencia sobre qu era la World Wide Web y qu se poda hacer en ella, y en menos de un ao, recibi dos millones de visitas. En esta primera etapa, el foco estaba puesto en la tarea de enviar o recibir datos. Las pginas solan ser hechas por programadores, y se caracterizaban por tener una interfaz lineal y limitada. Su diseo estaba generalmente diagramado a una sola columna y no se observaba el uso de cuadrculas que ayudaran a organizar la informacin. El acceso a Internet se efectuaba, principalmente, a travs de conexiones dial-up, con una velocidad de navegacin muy lenta, factor limitante del peso que podan tener los archivos. Por eso, las pginas de esa poca contenan muy pocas imgenes, en general, dispuestas en orden consecutivo.

La primera pgina web, publicada en 1991 por Tim Berners-Lee, estaba compuesta slo por texto e hipervnculos.

EN LOS COMIENZOS,

LAS PGINAS SOLAN

bsicas). En las versiones posteriores, se incorpor el uso de imgenesy de tablas, y de la mano de estos avances, fueron apareciendo varios navegadores web.

HTML
HTML (HyperText Markup Language) es el lenguaje bsico con el que se escribe la mayora de las pginas web. Est compuesto por etiquetas delimitadas por parntesis angulares (<,>), que describen la estructura y el contenido. Ms adelante, conoceremos en profundidad este lenguaje y lo utilizaremos para crear nuestras propias pginas.

ESTAR HECHAS POR

ICONOS, BOTONES Y BANNERS


El perodo en el cual aparecieron estos elementos comenz alrededor del ao 1996, momento en el que sucedieron varias cosas simultneamente; veamos: Desarrollo de nuevos recursos grficos: iconos que reemplazan palabras, banners que conforman cabeceras, botones con volumen que invitan a la interactividad y fondos que invaden las pginas. En el afn de experimentar y aprovechar los nuevos recursos, los desarrolladores web, conocidos en esa poca como webmasters, empezaron a incluirlos de manera excesiva en sus diseos, lo que dio origen a pginas recargadas.

PROGRAMADORES,
Y SE CARACTERIZABAN POR
TENER UNA INTERFAZ LINEAL.
CREACIN DEL WORLD WIDE WEB CONSORTIUM (W3C)
En 1994, Tim Berners-Lee fund el consorcio W3C, organismo destinado a establecer reglas y pautas que ayudaran a unificar criterios y a definir el futuro del diseo web. En 1995 se public el estndar 2.0 del lenguaje HTML (HyperText Markup Language), que a pesar de su nmero de versin, es el primer estndar oficial de ese lenguaje.Las primeras versiones de HTML slo permitan dar a un texto el formato de encabezado, de prrafo y de hipervnculo (mediante etiquetas

Logo del consorcio W3C (www.w3c.org), organismo que an en la actualidad es de gran importancia para el diseo web.

024

Gracias a la definicin de estndares HTML, se dieron los primeros pasos hacia la escritura de cdigo semntico, compuesto por etiquetas bien estructuradas que describen el contenido. Para ordenar la informacin, comenz a implementarse el uso de tablas, uno de los elementos ms polmicos de HTML. Con este elemento, la diagramacin de las pginas se enriqueci sobre las bases del diseo editorial (libros y revistas) e hizo uso de mltiples columnas. Aparecieron las primeras aplicaciones web basadas en el uso de tablas para la creacin de pginas, lo que foment la adopcin de la tcnica por parte de los diseadores. Si bien algunos desarrolladores la siguen utilizando, se trata de una tcnica obsoleta y nada recomendable, concebida originalmente para mostrar informacin tabular. sta tambin fue la era del spacer.gif,una imagen transparente e invisible conformada por un pxel cuadrado. Su uso gan popularidad rpidamente al permitir forzar y controlar los espacios vacos dentro de una tabla, necesarios para separar los contenidos. En el terreno del hardware, se avanz en trminos de resolucin y definicin del color, tanto en los monitores como en las tarjetas grficas. Esto trajo importantes mejoras en la calidad del diseo web. Comenz a vislumbrarse lo que posteriormente se conocera como guerra de los navegadores, con las primeras diferencias en la adaptacin de los estndares por parte de los dos principales browsers: Internet Explorer y Netscape Navigator. A finales de 1996, W3C public la primera recomendacin oficial de CSS

(Cascading Style Sheets), conocida como CSS nivel 1, cuya adopcin formal se produjo ms adelante.

Pgina principal del buscador AltaVista, lanzado en 1995. Fue el primero que permiti realizar bsquedas de texto sobre una base de datos.

LA IRRUPCIN DE FLASH
Unos aos ms tarde, una aplicacin surgida con el nombre FutureSplash
Interfaz de FutureSplash Animator (el precursor de Flash), utilizado para crear animaciones sencillas basadas en el uso de vectores.

Animator (hoy Adobe Flash) gan popularidad entre los desarrolladores. Este software, que naci con una interfaz sencilla compuesta por una lnea de tiempo y herramientas muy bsicas, progres hasta convertirse en una aplicacin que permiti controlar el diseo y animar pginas web sin las limitaciones del cdigo HTML de la poca. La versatilidad de Flash permiti crear pginas dotadas de animacin e interactividad, gracias a la edicin de fotogramas y a la manipulacin de objetos por separado. Hay quienes opinan que esta herramienta contribuy a la evolucin del diseo web, aunque muchos desarrolladores tambin sostienen que su uso desmedido no hizo ms que degenerarlo. En 1998 se public la segunda recomendacin oficial de CSS, conocida como CSS nivel 2. La versin de CSS que utilizan los navegadores actuales es CSS 2.1, una revisin de CSS 2 que an se est elaborando. La siguiente recomendacin de CSS, denominada CSS

1. DISEO Y TECNOLOGA / EVOLUCIN DEL DISEO WEB

025

nivel 3, contina en desarrollo desde 1998, y hasta el momento slo se han publicado borradores.

EL DISEO WEB ACTUAL


A partir de la aparicin de mejoras en los navegadores, de la evolucin en la velocidad de las conexiones y del desarrollo de nuevos dispositivos de navegacin (celulares, PDA y consolas de juegos, entre otros), surgi una nueva generacin de desarrolladores que deben tener en cuenta tanto las restricciones como las mltiples posibilidades existentes a la hora de implementar sitios. La necesidad de reproducir los contenidos en los nuevos dispositivos y los s avances constantes en los estndares web produjeron un nuevo impulso de sitios basados en XHTML (una nto combinacin de HTML y XML) junto s con CSS para separar cada vez ms el diseo del contenido.

Pgina principal de uno de los sitios realizados en Flash ms populares de la poca: EYE4U.

LOS DESARROLLADORES

DEBEN TENER EN CUENTA LAS POSIBILIDADES Y LAS RESTRICCIONES A LA HORA DE DISEAR.


Por otro lado, la adopcin de JavaScript (un lenguaje de programacin sencillo capaz de generar contenidos interactivos) para la creacin de transiciones releg el uso de Flash a sitios de animacin cada vez ms especficos o al uso puntual de la tecnologa en elementos como reproductores de video o banners. A lo largo de los aos, los webmasters fueron reemplazados por equipos interdis-

ciplinarios de trabajo compuestos por programadores, arquitectos de la informacin, maquetadores y diseadores web. Todos ellos construyen sitios basndose en las mejores prcticas, que tambin evolucionan continuamente. La colaboracin fluida entre pares, el acceso a tecnologas web de cdigo abierto (gestores de contenidos), la disponibilidad de recursos grficos en lnea, y la incorporacin de herramientas de testeo y de desarrollo modificaron el trabajo del diseador web, y elevaron a un nivel muy superior la calidad de los productos finales.

CSS
Aunque lo conoceremos y utilizaremos ms adelante en esta obra, vale aclarar que CSS es el lenguaje de hojas de estilo en cascada creado para controlar el aspecto visual de los documentos HTML. Es la mejor forma de separar los contenidos y su presentacin.

TIPOLOGA

DE LOS SITIOS WEB


Un diseador web puede ofrecer muchas soluciones tecnolgicas a las necesidades de un cliente. Las herramientas y tecnologas actuales nos permiten crear pginas con informacin y con diversos servicios.
roducto del avance tecnolgico y del creciente nmero de personas que acceden a Internet, aparecieron variadas herramientas y servicios que es posible utilizar online. Gracias a esto, muchos aspectos de nuestra vida cotidiana se ven directamente influenciados por la proliferacin de los sistemas web, como nuestros hbitos de compra, de pago de servicios o de comunicacin. Para ofrecer estas utilidades, existen diversos tipos de sitios, que conoceremos a continuacin.

El caso ejemplar es Facebook (www.facebook.com), con una cantidad de usuarios que ronda los 124 millones a nivel mundial.

En este portfolio de fotografas, podemos ir navegando de una imagen a otra interactuando con la cmara web (www.davidlindseywade.com).

SITIOS DINMICOS
Aunque podramos pensar que un sitio dinmico es aqul que tiene animaciones o que es veloz en algn aspecto, este concepto se refiere al sitio en el que, al hacer clic para acceder a una pgina, sta se arma segn nuestro pedido. En los sitios estticos, en cambio, las pginas estn armadas y no se modifican por lo que el usuario efecte. El armado a pedido es realizado por dos partes: el motor de armado y la informacin con la que ste genera la pgina. El motor de armado est creado con un lenguaje de programacin, y la informacin suele provenir de una base de datos. Las ventajas de un sitio dinmico son la facilidad de actualizacin y la sencillez en la carga de datos. Encontramos sitios dinmicos en cualquiera de los siguientes casos:

WordPress
Dentro del listado de blogs y microblogs que analizamos, WordPress merece una mencin, ya que ofrece, en forma gratuita, los archivos fuente que componen el blog para descargar, instalar y personalizar, y as utilizar el blog en cualquier dominio y hosting de que dispongamos.

Foros: plataformas donde los usuarios de una comunidad escriben consultas, comentarios y respuestas que son almacenados en una base de datos. Blogs y microblogs: sistemas que nos permiten tener un espacio personal, a partir de una plantilla prediseada, en el que podemos compartir y comentar informacin como msica (www. myspace.com), videos (www.youtube. com), imgenes (www.fotolog.com y www.flickr.com), textos y multimedia (www.blogspot.com y http://wordpress.com), y textos reducidos (http://twitter.com). Wikis: plataformas de creacin de contenidos en forma participativa, como la enciclopedia http://wikipedia.org o http://commons.wikimedia.org, un repositorio de archivos de uso gratuito. Portales de noticias: sitios con contenidos generados, comnmente, por peridicos de edicin impresa. En este caso, los usuarios no pueden editar los contenidos, pero s dejar comentarios en algunas noticias. E-commerce (comercio electrnico): sitios como www.ticketmaster.com

1. DISEO Y TECNOLOGA / TIPOLOGA DE LOS SITIOS WEB

027

En este sitio la navegacion y el acceso a todas las secciones se hacen mediante un interesante sistema en el que no hacen falta los clics del mouse.

y www.amazon.com ofrecen entradas a espectculos o productos como libros y pelculas en sus pginas, donde el usuario puede elegir, entre otros detalles, la cantidad y el tipo de artculo, la forma de envo y la de pago, que suele ser mediante tarjeta de crdito. Redes sociales: plataformas en las que podemos generar un perfil con datos personales, intereses, profesin y educacin. A partir de l, es posible contactarnos con personas que tengan intereses similares o nuestra misma profesin, por ejemplo. Tambin permiten agregar lbumes de fotos, videos, links y comentarios, estos ltimos, tanto en el perfil propio como en el de los contactos.

de archivos. La calidad de las imgenes, los videos y el audio disponibles en las computadoras ha aumentado, lo que provoca cambios en el modo de distribuir y transferir estos archivos, cada vez ms pesados. Sitios como www.rapidshare.com, www. dropbox.com o www.yousendit.com nos permiten almacenar y enviar archivos de gran tamao.

SITIOS ESTTICOS
Son sitios donde los usuarios no pueden crear ni editar los contenidos. Los casos ms comunes de este tipo son:

OTROS TIPOS DE SITIOS


Muchos sitios ofrecen aplicaciones ac es online en forma gratuita, entre las es que encontramos editores de texto, es; de sonido y de imgenes; planillas a de clculo y agenda. La ltima tendencia stn es que las aplicaciones no estn instaladas doras en nuestras computadoras sino disponibles como un servicio online. ncial El ejemplo ms referencial es Gmail.com, que ofrece muchos de estos servicios y, naliza ores, adems, permite personalizar colores, icin logos, fondos y la disposicin de las interfantramos ces. Por otro lado, encontramos novedaojamiento des en el intercambio y alojamiento

Sitios experimentales: en estos casos se busca generar nuevas experiencias de navegacin para el usuario, al producir interacciones no convencionales (http:// dontclick.it), recorridos 3D (www. vatican.va/various/cappelle/sistina_vr/ index.html) o navegacin mediante la cmara web (www.davidlindseywade. com/#/portfolio/portfolio/19). Newsletters y flyers: son minisitios publicitarios que estn alojados en un servidor y son enviados por e-mail con el fin de promover algn producto o servicio. Sitios tradicionales: este tipo de sitios es el ms utilizado para presentar informacin. Se trata de sitios en los que el usuario puede navegar para leer co contenidos y ver imgenes, y tambin pone en contacto con la empresa o ponerse profesion dueo del sitio. Ejemplo profesional de este tipo de sitio es el portfolio e es p de un disea n diseador, tal como el que e haremos a lo largo de esta obra.

028

DISEAR

UN PORTFOLIO
Una tarea que debemos realizar los diseadores web es el desarrollo de nuestro portfolio personal, en donde mostraremos lo que hemos hecho hasta el momento a quienes estn interesados en nuestros servicios. Analicemos este elemento promocional en detalle.

l momento de disear nuestro portfolio, nos enfrentamos con una situacin de incertidumbre respecto a la manera en que deberamos exhibir nuestros trabajos y capacidades. sta es una decisin que debemos tomar con mucho detenimiento, ya que nuestro portfolio ser un sitio en donde otros diseadores podrn apreciar nuestro talento lo que generar una mayor reputacin, y en el que los posibles clientes analizarn nuestras capacidades y experiencia. Por eso, a la hora de disear y crear nuestro portfolio, es fundamental tener presentes algunos aspectos muy importantes, que veremos en detalle a continuacin.

DATOS RELEVANTES
Nuestros potenciales clientes precisarn ver datos que reflejen nuestra trayectoria y experiencia. Esta informacin tiene que incluir la cantidad de trabajos que hemos hecho, los detalles sobre el ltimo que efectuamos, el tiempo que llevamos ejerciendo como diseadores web freelance y las tecnologas empleadas en cada proyecto, entre otros puntos.

2Advanced (www.2advanced.com) nos permite revisar los proyectos organizados por fecha, por clientes o servicio, entre otras opciones.

TRABAJOS REALIZADOS
ste es uno de los elementos ms importantes de nuestro sitio, ya que ser una muestra directa de los proyectos que hemos llevado a cabo. Podemos mostrar lo que hicimos de dos maneras diferentes. Por un lado, si el proyecto desarrollado se encuentra online, es posible crear un enlace con la URL real correspondiente. Esto puede ser muy valorado

por quienes estn buscando un diseador, ya que as podrn apreciar nuestro trabajo funcionando en lnea. Adems, el hecho de que el material an est online significa que el cliente ha quedado satisfecho y que, por eso, lo sigue utilizando. Tambin podemos mostrar nuestros proyectos realizados a travs de la inclusin de imgenes en el portfolio. En este caso, debemos asegurarnos de que las imgenes sean un fiel reflejo de la calidad de lo que entregamos a nuestros clientes.

LAS OPINIONES Y RELATOS

DE NUESTROS CLIENTES

PUEDEN SER TILES


EN LA CONFECCIN DEL

PORTFOLIO

El portfolio de Minuco (www.minuco.com) nos ofrece la posibilidad de conocer cada uno de sus desarrollos desde view site .

1. DISEO Y TECNOLOGA / DISEAR UN PORTFOLIO

029

NUESTRA ESPECIALIDAD
Si bien es cierto que en el portfolio mostraremos, seguramente, la totalidad de nuestros trabajos, es preciso distinguir en qu nos destacamos y cul es nuestra mayor destreza. Esto puede resaltarse citando en qu nos diferenciamos del resto y cmo logramos esa diferencia.

DEFINIR EL DISEO
Exponer nuestro trabajo no slo implica colocar imgenes y enlaces sobre los proyectos que hemos desarrollado: el portfolio en s mismo debe demostrar nuestra calidad profesional y lo que estamos capacitados para realizar. Cuando creamos el sitio, debemos tener en cuenta cul es nuestro principal enfoque al disear el portfolio. Con esto nos referimos a los objetivos predominantes y a los destinatarios, es decir, a quines deseamos venderles nuestros servicios. Por ejemplo, podramos optar por un diseo minimalista para intentar manifestar nuestro profesionalismo, aunque en otros casos quiz deseemos exhibir un diseo con un gran nivel de detalle y elementos grficos de alto impacto, que pongan de manifiesto nuestra gran creatividad.

El estudio de diseo Noe (www.noedesign.com) resalta, dentro de cada categora, los nuevos trabajos realizados.

CASOS DE XITO
Algunos visitantes de nuestro portfolio podran requerir una mayor cantidad de informacin, ms all de los trabajos realizados. Por ejemplo, tal vez desearan encontrar redacciones que cuenten cmo logramos resolver los problemas de determinados clientes. Como podemos imaginar, este punto tambin es muy importante, ya que estos casos son una evidencia real de lo que hemos hecho y de la forma en la que lo conseguimos. Tambin podemos acompaar cada caso de xito con opiniones y relatos de nuestros clientes, quienes, voluntariamente, pueden colaborar con la confeccin de nuestro portfolio a travs de sus palabras y sus ancdotas mientras trabajaron con nosotros. Por todo lo que analizamos hasta ahora, es recomendable hacer varias revisiones del diseo y el contenido de nuestro sitio antes de darlo por terminado. Esto nos ayudar a lograr un portfolio que pueda sorprender al visitante, quien, gracias a lo que encuentre en el sitio, podra convertirse en nuestro prximo cliente.
Los sitios www.adaptd.com y www.method.com muestran diversos comentarios sobre los trabajos que realizaron.

030

COMING SOON PAGE


Si ya contamos con un nombre de dominio, es comn que, mientras estamos preparando nuestro prximo diseo, publiquemos la denominada coming soon page, es decir, un aviso indicando que, en breve, all estar nuestro trabajo.

ara entender mejor de qu se trata una coming soon page, analizaremos un ejemplo muy simple y cotidiano. Cuando una pelcula va a estrenarse en el cine, unos das antes de que esto suceda, se publican anuncios y publicidades que anticipan la fecha de estreno. De esta misma manera funcionan las coming soon pages: antes de que el diseo se encuentre implementado, se informa a quienes visitan el dominio que muy pronto vern el sitio online.

INFORMACIN SOBRE NUESTRA PGINA


En nuestra coming soon page, deberemos focalizarnos en dos tipos de datos: la informacin que brindamos y aquella que vamos a recolectar. Veamos los detalles de ambos casos: Los datos exhibidos: incluyen nuestro slogan, nuestros principales productos, algn medio de contacto (telfono o correo electrnico) y la fecha de publicacin del sitio, entre otros detalles. Los datos solicitados: son muy importantes porque podran incluir desde la direccin de correo electrnico del interesado en nuestro sitio web, hasta su nombre y datos personales. Si recolectamos este tipo de informacin, al momento de realizar la implementacin del sitio web, podremos enviar un correo electrnico anunciando sobre la puesta en marcha del sitio. As, lograremos que la visita se repita en el momento adecuado.

LA IMPORTANCIA DEL POSICIONAMIENTO SEO


Es importante mencionar que las coming soon pages tambin deben contar con una optimizacin para el posicionamiento SEO. Al ser indexada por los buscadores, nuestra pgina ser catalogada y ubicada en sus rankings, por lo que resulta fundamental tener presente el posicionamiento, incluso, de este tipo de pginas. Posteriormente, en la puesta en marcha del sitio, podremos comenzar con el posicionamiento en detalle. Para obtener ms informacin sobre este nsultar tema, recomendamos consultar el sitio web de la editorial Users, en la direccin: www.redusers.com.

DE QU SIRVEN LAS COMING SOON PAGES?


Supongamos que ya hemos hecho nuestras tarjetas personales y que, adems, invertimos dinero en publicidad y en otras acciones de marketing, incluyendo en todas ellas la URL de nuestro sitio web. Las coming soon pages invitarn a quienes ingresen en nuestra web a regresar en unos das, prometiendo que, en breve, vern lo que estamos preparando. Para decirlo de otro modo, estas pginas sern una carta bajo la manga que utilizaremos para aprovechar mejor el tiempo durante el cual estemos trabajando en nuestro sitio web.

APROVECHAR AL MXIMO ESTE RECURSO


La creatividad abunda en el diseo de este tipo de pginas temporales, y no es para menos. Muchos expertos invierten mucho tiempo diseando una idea creativa para exhibir como coming soon page, y el beneficio de esta inversin es doble. Por un lado, los visitantes sentirn una clida bienvenida a nuestro sitio y sern invitados a regresar pronto. Por el otro, si nuestra idea es original y el trabajo es de gran calidad, este tipo de pginas suelen ser listadas por directorios web y blogs de diseo web, lo cual nos dar prestigio y publicidad adicional.

1. DISEO Y TECNOLOGA / COMING SOON PAGE

031

NO OLVIDAR LA SIMPLICIDAD
Cuando hablamos de simplicidad, nos referimos a enviar un mensaje claro y directo a quien nos visita. Debemos ser precisos con la informacin que brindamos, y dejar una buena imagen en el visitante, que esperaba encontrar el sitio web finalizado en el dominio que visit. Tenemos que disear nuestra coming soon page con un mensaje limpio. Por ejemplo, podemos incorporar la palabra Prxima-

mente (un texto muy utilizado en estos casos), acompaada por los datos exhibidos y los solicitados. Respecto de estos ltimos, es conveniente mencionar que cuantos menos datos le solicitemos al visitante, mayores probabilidades tendremos de que nos los enve. En general, como lo que buscamos

con esta solicitud es lograr un acercamiento en el futuro, en lo posible, slo le pediremos su correo electrnico, que bastar para mantenernos en contacto.

LAS COMING SOON PAGES

INVITAN AL VISITANTE A
REGRESAR AL SITIO CUANDO STE SE ENCUENTRE ONLINE.

Podemos encontrar muy buenos ejemplos de coming soon pages en www.silverbackapp. com/holding, www.mynitelife.co.uk, www.pepsay.com y www.redkatana.com.

Las coming soon pages nos brindan una nueva posibilidad de destacarnos de nuestra competencia y de mostrar que, incluso en los detalles, contamos con una gran creatividad y alta capacidad de comunicacin. Aqu, un ejemplo que encontramos en www.dmbnewstudioalbum.com.

032

CREAR UNA

COMING SOON
D Disearemos una sencilla pero comunicativa coming soon page en Adobe Photoshop c para que el visitante vuelva pronto. p
FALTA

PASO A PASO

01|

MODIFICAR FONDO

ntes de crear nuestra pgina coming soon, sera ideal que tuviramos alguna idea sobre el diseo que tendr el sitio en el futuro. De esta manera, podramos utilizar los mismos colores y tipografas como adelanto de lo que vendr, mostrando desde el comienzo la capacidad que tenemos para disear. En cambio, si an no tenemos definidos los colores y el estilo del diseo, podemos crear una coming soon page donde prevalezcan formas y colores neutros y simples. Una vez que decidimos qu es lo que vamos a incluir, abrimos Photoshop y creamos un nuevo documento (desde [Archivo/Nuevo]). Ser suficiente con una medida de 1280 pxeles de ancho por 1000 de alto y un color blanco de fondo, ya que lo modificaremos como veremos a continuacin.

AGREGAR TEXTO

|02

Para modificar el fondo, que en este caso ser un degrad, seleccionamos la herramienta [Degradado] (tecla <G>) y colocamos los colores #0078e7 para el extremo izquierdo y #01a7ff para el extremo derecho. Luego, realizamos un clic en la parte inferior de nuestro documento y, sin soltar el clic del mouse, arrastramos el degrad hasta la parte superior del documento. Ahora, incluiremos el texto Prximamente en la parte superior-central del diseo. Para esto, seleccionamos la herramienta [Texto horizontal] (tecla <T>) y elegimos la fuente [Arial] con estilo [Bold]; le damos color blanco y 60 pxeles de tamao. Luego, escribimos la palabra Prximamente en nuestro documento y ubicamos ese texto donde deseemos.

PASO | 01

PASO | 02

033

PAGE
03|
PUBLICACIN

04|

CREAR FORMULARIO

BORDE DE CAMPO

|05

PASO | 03

Para agregar la fecha en que publicaremos, creamos otra capa de texto. Mantenemos la fuente y su color pero elegimos el tipo [Bold Italic] y 20 pxeles como tamao. Escribimos Septiembre de 2011 y la ubicamos en la parte inferior-derecha de la palabra Prximamente.

CREAR BOTN

|06

Para recibir correos electrnicos a travs de un formulario, seleccionamos la herramienta [Texto horizontal] con los mismos parmetros anteriores y escribimos Ingrese su correo para notificarlo:. Para hacer los campos de texto dibujamos un rectngulo con la herramienta [Marco rectangular] y lo pintamos con el [Bote de pintura] usando el color #07d6ff.

PASO | 04

Para crear el botn, elegimos la herramienta [Rectngulo redondeado] y configuramos 50 en el campo [Radio] de la barra de herramientas superior. Dibujamos la base, seleccionamos la herramienta [Texto horizontal] y escribimos el texto Enviar sobre l.

PASO | 06

PASO | 05

Para el borde, vamos a [Edicin/Contornear] y, en la ventana que aparece, ingresamos 1 pxel para el ancho del contorno y #047da5 como color.

RESUMEN
Hemos diseado una coming soon page. Gracias a esto lograremos que los visitantes, con una atractiva impresin, vuelvan a ingresar a nuestro sitio en un futuro muy prximo.

034

CON BUEN DISEO


Las pginas de ERROR 404 son aquellas que aparecen cuando el visitante ingresa en una URL que no existe en nuestro dominio. A continuacin, conoceremos la importancia de realizar un buen diseo para este tipo de elementos.

UN PROBLEMA

a manera en la que mostremos nuestras pginas de ERROR 404 determinar si el visitante se retirar del sitio web o continuar navegando en l. Por este motivo, resultan muy importantes y cumplen un papel fundamental en cualquier sitio que desarrollemos.

CUNDO SE PRESENTAN?
Estas pginas se visualizan cuando ocurre un error al intentar acceder a un sitio web. Los motivos ms comunes por los que puede producirse este inconveniente son los siguientes: Enlace roto dentro del sitio: esto ocurre cuando enlazamos un recurso dentro de nuestro sitio que ya no existe o que se ha movido de lugar. Enlace roto desde un buscador: los buscadores son la fuente de visitantes ms importante hacia el sitio web. Puede ocurrir que hayamos eliminado una pgina del sitio y que el buscador an no haya indexado este cambio, con lo cual mantiene un enlace que no
Hasta hace un tiempo, las pginas de ERROR 404 no eran consideradas por los webmasters y, en consecuencia, se perda al visitante que intentaba acceder a alguna parte del sitio web.

existe. Esto se da porque los buscadores tienen una determinada frecuencia para realizar la indexacin; por ejemplo, ingresan cada dos semanas en nuestro sitio para incluir en sus rankings los cambios que se hayan hecho.

CMO TENDRA QUE SER?


A la hora de crear una pgina de ERROR 404, hay dos aspectos bsicos que debemos tener en cuenta: Debera ser diferente del resto de las pginas del sitio, ya que con esto lograremos que el usuario perciba de forma rpida y clara que ha arribado a una pgina que no existe. Mensaje claro: tal como mencionamos con las coming soon pages, debemos transmitir nuestro mensaje de manera clara y directa hacia el visitante.

En la actualidad, abunda el ingenio a la hora de crear pginas de error. ste es un ejemplo de www.twitter.com.

1. DISEO Y TECNOLOGA / UN PROBLEMA CON BUEN DISEO

035

Desde TemplateMonster.com podemos bajar diferentes pginas de error (www.templatemonster.com).

QU DEBERA INCLUIR?
A grandes rasgos, la pgina de error debera incluir el logotipo de nuestro sitio web, el mensaje de error Pgina no encontrada, un buscador interno del sitio y enlaces de referencia para ayudar al visitante. Como vemos, existen dos objetivos en esta pgina. Por un lado, informar al visitante el sitio en el que est, a travs del logotipo y el mensaje. Por el otro, atraerlo a continuar navegando por el sitio web, a travs del buscador y los enlaces de referencia. En algunos casos, tambin se implementa la opcin de reportar o notificar el error por medio de un formulario directo de contacto. Esta opcin suele ser utilizada por grandes portales que consideran que esta alternativa es valiosa para mantener la fidelidad del usuario, quien as tiene oportunidad de expresar la situacin. La cordialidad tambin es parte importante de las pginas de ERROR 404. En este sentido, se colocan frases como Le pedimos disculpas o Lo sentimos, para que el visitante reciba un grato mensaje ante una situacin que suele ser confusa.

ERROR 404
QUE ES EL DE SER INFORMATIVA.
EL OBJETIVO ANTE TODO
Una regla de oro al crear este tipo de pginas es centrarse en su objetivo, que es informar. Debe ser una pgina clara, concisa y explicativa, con el nfasis puesto en comunicar dnde ha llegado el visitante, por qu est en ese lugar y cmo puede continuar. En tanto informemos, podemos mostrar un diseo serio o informal, ofreciendo herramientas y opciones de navegacin que ayuden a conservar esa visita que arrib a un lugar inexistente. As, lograremos convertir en productivo algo que, en un principio, es todo lo contrario.

AL CREAR UNA PGINA DE

EN SU OBJETIVO,

DEBEMOS CENTRARNOS

El blog de diseo espaol Ateneu Pupular 2.0 (www.ateneupopular.com) y su pgina 404.

En ocasiones, Taringa tambin tiene inconvenientes. Un hombre llorando es su imagen por defecto.

036

CREAR UNA PGINA


PASO A PASO
Una pgina 404 debe ser directa y bien informativa. Por este motivo, disearemos con Adobe Photoshop una pgina de ERROR 404.

01|

CREACIN DEL DOCUMENTO

omo ya vimos, las pginas de error son necesarias para avisarle al usuario que arrib a un lugar equivocado y, al mismo tiempo, para orientarlo hacia el punto que estaba buscando en un principio.

CREACIN DE CAPAS

|02

Para crear nuestra pgina de error, abrimos Photoshop y, desde el men [Archivo/Nuevo], creamos un documento que tenga el fondo blanco y un tamao de 1024 pxeles de ancho por 1000 pxeles de alto. Creamos una nueva capa a travs del comando <Ctrl + Shift + N>, la denominamos Fondo degrad y la rellenamos con la herramienta [Bote de pintura] para, despus, poder definir el degradado de su interior. Luego, seleccionamos la capa y abrimos el men [Capa/Estilo de capa/Opciones de fusin] y, en la ventana que aparece, vamos a la seccin [Superposicin de degradado]. All, configuramos #01a7ff para el extremo izquierdo del degradado y #0078e7 para el extremo derecho. All mismo, elegimos la opcin [Radial] en el desplegable [Estilo]. Al finalizar, presionamos [OK] para aplicar los cambios.

PASO | 01 PASO | 02

037

DE ERROR

404
TEXTO PRINCIPAL

04|

TEXTO EXPLICATIVO

LINKS

|05

03|

PASO | 03

Para incorporar el mensaje principal, que dir Lo sentimos en la parte superiorcentral del diseo, utilizamos la herramienta [Texto horizontal] (a la que accedemos con la tecla <T>) con la fuente [Arial], color blanco, estilo [Bold] y 30 pxeles de tamao. Para explicarle al visitante lo que ha ocurrido, agregamos un texto debajo del ttulo que colocamos en el paso anterior. Utilizamos la misma fuente y el mismo color, pero esta vez en un tamao de 24 pxeles. Podemos escribir el texto que deseemos; lo importante es que aclare que se trata de un error que no es culpa del visitante, ya que as lo mantendremos en calma. Para que el usuario pueda salir de la pgina de error, agregaremos algunos enlaces. Elegimos la herramienta [Texto horizontal] con la fuente [Arial] en color negro, estilo [Regular] y 24 pxeles de tamao. Escribimos los textos - Volver al inicio, Utilizar nuestro buscador y - Contactarse con nosotros, cada uno seguido de un salto de lnea para espaciar las frases.

INCLUIR UNA IMAGEN

|06

PASO | 04

Si queremos un mensaje formal y serio, podemos mostrar la fotografa de un oficinista. En cambio, si queremos dar una imagen ms informal, elegiremos una ilustracin o una fotografa creativa que pongan al visitante de buen humor ante el imprevisto. Incorporamos la imagen de un cartel de direcciones en una nueva capa y la ubicamos a la izquierda de nuestros enlaces.

PASO | 06

PASO | 05

RESUMEN
Podremos implementar la pgina de ERROR 404 y observar los asombrosos cambios en cuanto a las visitas en nuestro sitio. Veremos que aparecer una nueva cantidad de visitantes.

038

LA ESTRUCTURA DE LAS PGINAS


Todos los internautas somos testigos del avance que han sufrido los contenidos de un sitio web en sus tecnologas, su diseo y su interactividad. Veamos ahora la evolucin de su estructura.

s hora de comenzar a presentar los aspectos relacionados con los elementos que conforman una interfaz, la manera en la que stos se estructuran, y los criterios que debemos seguir para realizar una pgina atractiva y funcional. Cada sitio web tiene un objetivo comunicacional y, debido a eso, todos sus aspectos visuales y la articulacin de sus elementos deben garantizar que se cumpla ese objetivo. Es necesario que el internauta comprenda el objetivo del sitio en pocos segundos. El tiempo es tirano, y el navegante est expuesto a una innumerable cantidad de sitios, una avalancha de informacin que hace imprescindibles la claridad del mensaje y la buena legibilidad.

Todo el contenido del sitio est ubicado en una sola pgina muy larga, que se muestra por partes en la ventana del navegador.

sitio, todo el contenido se presenta en una sola pgina, que se mueve hacia arriba o hacia abajo segn las opciones que vayamos eligiendo. Podemos ver ejemplos en www.volll.com, www.kitfolio.com y www.pojeta.cz. Navegacin con el mouse: en http://doorstepdairy.com encontramos que la navegacin se realiza mediante el movimiento de un elemento. Aqu, arrastramos un pequeo camin en lugar de hacer clic en botones.

LA FORMA DE NAVEGACIN
A la hora de disear un sitio, tenemos la libertad de elegir qu forma de navegacin utilizaremos, pero debemos hacerlo con criterio y adecundonos a cada caso en particular. Veamos, a continuacin, algunos sitios que proponen formas novedosas de navegacin, con intervenciones poco comunes por parte de los usuarios. Navegacin sin clics: www.dontclick.it propone una navegacin sin clics, haciendo la eleccin de lo que deseamos con slo aguardar unos segundos sobre el elemento al que queremos acceder. Navegacin vertical: en lugar de tener una pgina para cada seccin del

INNOVACIONES SEGURAS
Sin recurrir a innovaciones que no son seguras, tenemos muchos recursos para impactar. En las siguientes direcciones podemos encontrar interfaces estructuradas que poseen un gran atractivo desde el diseo, el color, el uso tipogrfico, y otros elementos:
www.pieoneers.com www.meetemplates.com http://skype.com www.milrayas.com www.giraffe.net www.mcmillerssweetsemporium.co.uk

1. DISEO Y TECNOLOGA / LA ESTRUCTURA DE LAS PGINAS

039

S Si imaginamos una interfaz de navegacin c con movimiento vertical para un sitio con m muchas secciones y que ofrezca varios p productos, el largo necesario para la pgin na sera excesivo. Si nos moviramos del ltimo producto al comienzo, la sensacin a al ver pasar palabras, imgenes y colores a gran velocidad quiz resultara desagrad dable. Esto nos demuestra que no todos l los recursos disponibles son aplicables a cualquier sitio, y si a pesar de eso los u utilizamos, tal vez el usuario no tenga una b buena percepcin de nuestra propuesta.

QU ES LA ESTRUCTURA?
N Nadie espera encontrar un men en el medio de un prrafo, ni tampoco un buscador o un logo en el pie de la pgina. Aunque sea de forma inconsciente, todos esperamos que los elementos estn dispuestos de cierta manera, donde los buscamos en primer lugar cuando accedemos al sitio. Un usuario tiene la capacidad de predecir el sitio, buscando de forma rpida lo que le interesa. Luego de reconocer la disposicin de los elementos en la pgina de inicio, los seguir buscando en el mismo lugar dentro de las diferentes secciones. Por eso, necesitamos mantener estndares de estructura para darle una coherencia

Cada vez son ms los sitios con diseos de vanguardia que le otorgan un papel protagnico al header. En algunos casos ste mantiene el color del resto de la pgina.

TIENE UN OBJETIVO COMUNICACIONAL, Y TODOS SUS ASPECTOS

CADA SITIO WEB

visual a la distribucin del contenido en todas las pginas. Por supuesto que tambin podremos tomarnos pequeas libertades de diseo para darle un ritmo especial a la navegacin.

ENCABEZADO O HEADER
El header es uno de los aspectos principales que encontramos en un sitio web, ya que es lo primero que vemos. Ocupa todo el ancho superior del sitio y es uno de los elementos que se mantienen casi sin ninguna variacin dentro de todas las pginas. Veamos, a continuacin, los elementos que pueden estar presentes dentro del header de un site:

VISUALES DEBEN
GARANTIZAR ESE FIN.

Logo: dentro del header se sita el logotipo, es decir, la identidad grfica, el sello distintivo de una empresa. Como es fundamental diferenciarse, el logo ocupa un lugar protagnico en el extremo superior izquierdo. Esto no es casual: est comprobado mediante estudios que ste es el primer lugar donde los usuarios dirigen su mirada. Adems de ser un elemento grfico importante, al logo se le otorga una funcionalidad extra: posee un enlace al inicio del sitio, convirtindose en un atajo para que el usuario pueda volver a la pgina principal.
Todo el contenido del sitio est ubicado en una sola pgina muy larga, que se muestra por partes en la ventana del navegador.

040 040 40 4

Men: en el header tambin encontramos la barra de navegacin, que contiene los enlaces para acceder a las diferentes secciones del sitio. Los elementos del men deben estar expuestos de modo sencillo, intuitivo y bien visible para que el usuario tenga acceso rpido a la informacin y siempre encuentre lo que busca. Cuando un sitio tiene pocos enlaces, todos pueden estar en el men principal. En cambio, en uno ms complejo (de ms de seis o siete pginas), aparece el men principal para navegar por las secciones ms importantes y, luego, submens para moverse dentro de cada una. Estos submens deben mantener coherencia temtica y lgica en su agrupacin. Por ejemplo, si tenemos un sitio de venta de productos de electrnica, a nadie se le ocurrira buscar los productos dentro de la seccin Contacto. Men de rastros: como mencionamos antes, este men es recomendable en los sitios que tienen muchas secciones y subsecciones, ya que informa al usuario su ubicacin dentro del sitio. Por ejemplo, si estamos en la subseccin Aventuras, dentro de la subseccin Playstation 3, que a su vez est dentro de la seccin Videojuegos, deberamos de informarle al usuario algo como Videojuegos/Playstation 3/Aventuras. Esto representa de una manera visual la jerarqua del sitio y, en la mayora de los casos, lo encontramos antes del contenido principal. Identificacin de secciones: es importante que el usuario sepa en qu seccin se encuentra y que pueda identificarla de inmediato. En combinacin con el men de rastros, la identificacin de secciones debera tener mayor relevancia tanto en su ubicacin como visualmente, y por lo general, se la coloca por debajo del men principal de secciones, como encabezado de la seccin a la que identifica. Sliders: este recurso interactivo ha ganado terreno gracias a las nuevas tendencias del diseo 2.0, donde los headers son cada vez ms grandes, y la grfica, cada vez ms iconogrfica. Los sliders muestran un mensaje o publicidad de forma rpida y eficaz, ya que captan la mirada por su movimiento e interactividad. Para hacerlo, se valen de iconos, colores e informacin bien jerarquizada, con un diseo simple y atractivo. Buscadores internos: en sitios grandes, estos buscadores suelen ubicarse arriba a la derecha o en los sidebars.

Plantear una buena organizacin de contenidos da como resultado una navegacin clara.

Sirven para encontrar de forma rpida algo puntual. Esto quiere decir que no se accede a la informacin a partir de la navegacin, sino que se ingresa una palabra exacta o aproximada a lo que se desea encontrar y se presiona el botn [Buscar] o similar para obtener los resultados.

Modernos, prcticos y muy utilizados, los sliders dan dinamismo y transmiten mensajes claros de una manera efectiva.

Actualmente, los footers son algo ms que un buen cierre para el sitio. Su uso y actualizacin marca tendencia, y permite al diseador ser original con el sitio.

1. DISEO Y TECNOLOGA / LA ESTRUCTURA DE LAS PGINAS

041

CONTENIDO
Como mencionamos, est comprobado que el recorrido visual que realiza el visitante comienza por el extremo superior izquierdo (donde es usual que encontremos el logo) y luego se fija en el centro de la pgina, donde est el contenido principal. Aunque la organizacin vara entre diseos, veremos denominadores comunes para jerarquizar los diferentes tipos de informacin. El uso de destacados es un gran punto de tensin, as como tambin los ttulos, que son resaltados mediante el uso de fondos, bullets, iconos, u otros elementos, para luego continuar por la lectura de prrafos o de informacin secundaria.

COMPRENSIN INMEDIATA
No podemos dejar que el usuario tarde mucho tiempo en descubrir qu es lo que le ofrecemos. Si lo hacemos, corremos el riesgo de que cierre el navegador y perdamos nuestra posibilidad de mostrarle lo que queremos que vea, y quiz jams regrese a visitarnos. La investigacin sobre la forma de navegacin slo sera deseable si se tratara de sitios experimentales con interfaces no convencionales, en donde el usuario estara predispuesto a tener una experiencia diferente.

NO ES RECOMENDABLE HACER INNOVACIONES

DIFICULTARN LA
BARRA LATERAL O SIDEBAR

EN ASPECTOS QUE

NAVEGACIN DEL USUARIO.


Este elemento grfico sirve para organizar contenidos importantes del sitio. Se puede ubicar a la derecha del cuerpo principal, a la izquierda o en ambos lados. Contiene enlaces externos e internos, informacin adicional organizada por categoras y, actualmente, se utiliza tambin para incluir publicidades (banners, links, etctera).

PIE DE PGINA O FOOTER


As como los headers dieron un salto de lo tradicional a lo vanguardista, los footers tambin siguieron esos pasos. Pasaron de contener informacin como polticas de privacidad de uso y derechos de autor, a ser contenedores de elementos relevantes, como enlaces, mapas de sitios (para ayudar a la indexacin en Google), informacin y formularios de contacto, y los infaltables links a las redes sociales, que nos invitan a unirnos, compartir, ver perfiles y hasta visualizar los ltimos posts de Twitter. Todos los elementos mencionados determinan lo que llamamos una interfaz web. Los contenidos, la forma
Los sidebars son infaltables en las redes sociales y en los blogs, donde su rol es claramente organizativo, debido a la gran cantidad de informacin que se necesita comunicar.

de navegacin, los elementos de identificacin y las acciones que podemos generar dentro de un sitio son parte de su interfaz. Para transmitir un mensaje claro y de forma sencilla, al crear una interfaz debemos respetar las convenciones de estructura. En los prximos captulos veremos cmo aplicar estos principios en un diseo real.

042

GUA VISUAL
Para comprender mejor cules son las partes que componen la estructura de un sitio, analicemos un ejemplo de forma detallada en la siguiente gua visual.
3
1 1

1. LOGO El logo es un punto de tensin por el cual se entra en el sitio y se regresa a la pgina principal. Luego de esto, debemos guiar la mirada del usuario, trazando un recorrido visual por la informacin que tiene ms relevancia. Para hacerlo, podemos valernos de destacados, ttulos, grficos, etctera. 2. MEN PRINCIPAL El men es la herramienta de navegacin ms importante del sitio y debe ser adecuada para que ningn visitante naufrague, perdindose en mens y submens desorganizados o poco claros.

HEADER SIDEBAR

CONTENIDO

FOOTER

1. DISEO Y TECNOLOGA / LA ESTRUCTURA DE LAS PGINAS

043

FOOTER

CONTENIDO

HEADER

4
3. MEN SECUNDARIO Se utiliza para no sobrecargar el men principal. En general, son enlaces con un nivel diferente de jerarqua o atajos a funciones muy utilizadas. 4. BUSCADOR Permite encontrar informacin mediante palabras clave ingresadas en el cuadro de bsqueda. queda. Muchas veces est provisto por Google. 5. SLIDERS O VIDEOS Dentro del slider podemos mostrar imgenes y nes texto, el usuario los puedes cambia al hacer clic. Transmiten muchos contenidos en poco espacio. acio. 6. DESTACADO Este espacio se asigna a la promocin de elementos ntos o productos que requieran una mencin especial.

6 6

SIDEBAR
Ayuda a organizar los contenidos importantes del sitio. Se ubica en los laterales, y contiene enlaces, informacin adicional e, incluso, publicidad.

044

DE LA PGINA
Para visualizar de forma sencilla y rpida la estructura del sitio, la diagramacin del contenido y la relacin entre sus diferentes partes, realizaremos esquemas para tener una referencia visual y sinttica de todo.
uego de conocer las necesidades del cliente y de confeccionar el brief, es conveniente realizar una serie de esquemas que expresarn, de forma grfica, el relevamiento llevado a cabo en la etapa anterior.

ESTRUCTURA Y DISEO

LA ESTRUCTURA
Lo primero que suele hacerse es un esquema con la estructura del sitio, donde se definen las diferentes pginas que estn involucradas con la navegacin y las conexiones entre ellas, pero no se especifican los contenidos de cada

una. De este modo, podemos tener una referencia rpida del tamao, la profundidad y la complejidad de cada proyecto web que desarrollemos. Para tener una idea ms clara sobre las estructuras, podemos analizar algunos casos que corresponden a sitios de diferente magnitud. En el que desarrollaremos en esta obra, podemos notar que para visualizar el ejemplo de un trabajo, el usuario primero tiene que ir a Portfolio y, luego, seleccionar qu tipo de material quiere ver, donde tendr la posibilidad de acceder al

detalle correspondiente. Si imaginamos la realizacin de la estructura de sitios del tamao de Amazon, podremos darnos una idea de la cantidad de pginas y links que contienen, un esquema que resulta enorme. Un paso interesante que podemos dar para comprender la importancia que tiene la definicin temprana de la estructura de un sitio es visitar Webpages as Graphs (www.aharef.info), que muestra, de una manera visual muy atractiva, la estructura de cualquier sitio que deseemos.

home page
Estructura en rbol, con jerarquas muy marcadas.
1 2 3 4

Inicio

Servicios

Portfolio

Contacto

Web

Print

Ilustracin n

Multimedia

Detalle del trabajo

sta es la estructura del sitio que crearemos en este libro.

1. DISEO Y TECNOLOGA / ESTRUCTURA Y DISEO DE LA PGINA

045

ES RECOMENDABLE TENER

ANTES DE COMENZAR A DISEAR,


agregar a favoritos idioma

header
Se mantiene igual en todas las paginas.

LA APROBACIN FINAL DEL CLIENTE, PARA NO


SUFRIR CON LOS CAMBIOS.
ESTRUCTURA Y NAVEGACIN
La confeccin de la estructura de un sitio no solamente nos permite disponer de una referencia visual de sus partes y la cantidad de pginas, sino que tambin nos provee de un mtodo a travs del cual podemos determinar el tipo de navegacin y la manera en que los usuarios recibirn la informacin del sitio. Podemos elegir entre diferentes tipos de estructuras: Estructura en rbol: compuesta por una pgina principal desde la que se accede a otras que, a su vez, dan acceso a otras pginas en niveles inferiores. En lista: no existe una pgina principal sino que se accede a una pgina y luego a la siguiente en forma lineal, ya que todas tienen la misma profundidad. En red: todas las pginas tienen acceso entre ellas sin tener en cuenta la profundidad en la que se encuentre cada una.

logo

inicio servicios portfolio contacto

content
Utilizar tipografias web para los titulos y el resto del contenido.
header: SlideShow de imagenes o diseos
con flechas o con botones (ver q queda mejor)
1 2 3 4

Cambia segn la seccion en la que se encuentre. Cuatro servicios principales. Con un texto simple explicativo y un debajo que redirecciona a la seccion contacto en el ID especfico de ese servicio.

icono

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Nuestros Servicios
Subttulo Subttulo Subttulo Subttulo

ver ms

ver ms

ver ms

ver ms

footer
icono icono icono

Se mantiene igual en todas las paginas.

Twitter

Facebook

Linkd In

Direccion | telfono | email (simple mailto:)

Web Design 2010 | All right reserved

Inicio | Servicios | Portfolio | Contacto

XHTML 1.1 | CSS2 | Design by Users

men textual (solo texto)

Contacto (formulario de envio rapido de emails)

Los diagramas del sitio nos ayudan a determinar los contenidos que tendr cada una de las pginas.

Mixta: esta estructura es una mezcla de las anteriores ya que, a partir de una pgina principal, se accede a las siguientes, y desde ellas, a otras en su mismo nivel de profundidad.

EL DIAGRAMA DEL SITIO


Al profundizar ms en el esquema de nuestro sitio, ser necesario definir los contenidos de cada pgina, su ubicacin y los niveles de importancia. Para lograr este objetivo, se realiza un diagrama que sirve para presentar al cliente el contenido del sitio de forma especfica. De este modo, podremos mostrarle qu tendr su sitio, y detallarle qu va a pasar y cmo se va a comportar cada uno de los componentes de las diferentes secciones. El punto principal en esta etapa no es definir los textos e imgenes exactas, sino ms bien la cantidad de texto y el tipo de imgenes que habr. La funcin de estos diagramas es proveer de informacin general sobre los contenidos, pero no sobre su diseo ni la tecnologa que utilizan. Por ejemplo, en ellos podramos definir una zona de interactividad sin que sea necesario mencionar si ser hecha en Flash, en JavaScript o utilizando algn otro mtodo. Como vimos, los esquemas que realizamos al encarar un proyecto web nos ayudarn a simplificar el trabajo, tanto para manejarnos con colegas como para tratar con nuestro cliente. A partir de ahora, comenzaremos a dar los pasos que llevarn nuestro proyecto a la prctica.

Estructura en lista, sin niveles de profundidad.

Estructura en red, navegacin en todo sentido.

Estructura mixta, donde se combinan varios tipos de navegacin.

046

CREACIN DE UN
PASO A PASO
En las prximas pginas vamos a explicar todos los pasos que debemos realizar en Adobe Photoshop CS5 para disear un sitio de forma profesional.

01|

GENERACIN DEL DOCUMENTO

CARPETA DE CAPAS

|02

ara organizarnos desde el principio, es recomendable renombrar cada una de las capas con una denominacin que represente los objetos que se encuentran en ella. No es conveniente dejar nombres como capa 48 porque, cuando tengamos muchas capas, perderemos bastante tiempo buscando la que contiene el elemento para modificar. Por otro lado, como es muy usual que los diseadores pasen su archivo PSD para que lo maquete otra persona, es aconsejable que todo est claro para ganar tiempo y evitar consultas innecesarias. Si queremos mejorar an ms la organizacin, podemos agrupar las capas por carpetas. En cada una ubicaremos todas las capas relacionadas, como podran ser aquellas que forman parte del men, las del encabezado o las del pie de la pgina. Luego de estas recomendaciones, comencemos con la creacin del layout de nuestro sitio en Photoshop.

Para generar un nuevo documento, vamos a [Archivo/Nuevo] (<Ctrl + N>) y, en la ventana que aparece, ingresamos las medidas que se muestran en la imagen (1280 pxeles de ancho por 1400 de alto). Luego, para guardar el documento, nos dirigimos a [Archivo/Guardar como] y lo almacenamos en el lugar de la PC donde vayamos a trabajar con el proyecto. Como es conveniente trabajar de forma organizada, crearemos una carpeta para agrupar todas las capas correspondientes al header. Vamos a [Capa/Nuevo/Grupo] y escribimos el nombre que le daremos; en este caso, [Header]. A continuacin, creamos una capa desde el men [Capa/Nuevo/Capa] (<Ctrl + Shift + N>) y la nombramos para identificarla, tal como hicimos con la carpeta.

PASO | 01

PASO | 02

PASO | 03

Ahora, comenzaremos a disear la parte superior del sitio, es decir, el header.

047

LAYOUT

EN PHOTOSHOP

04|

CREAR DEGRAD

AGREGAR CAPAS

|05

03|

DISEO DEL HEADER

MEN DE NAVEGACIN

|06

Con la herramienta [Marco Rectangular] dibujamos el rectngulo que ser la base del header. Para lograrlo, hacemos clic y arrastramos el mouse con el fin de delimitar su superficie.

A continuacin del texto anterior, escribimos [Idioma] para completar el header. Para comenzar con la creacin del men de navegacin, generamos un nuevo grupo de capas para trabajar dentro de l. Tomamos la herramienta [Rectngulo Redondeado] y trazamos la base del men. Luego, aplicamos el mismo gradiente que le dimos a la base del header. Aadimos los iconos pertenecientes a cada botn y, despus, con la herramienta [Texto], escribimos el nombre que identifica a cada seccin.

PASO | 04

En la barra de herramientas, elegimos la correspondiente para hacer degrads y, luego, hacemos clic en la parte superior para editar sus colores. En este caso, ingresamos los tonos #0078e7 (el ms oscuro) y #01a7ff. Luego, usando la herramienta, arrastramos el mouse de arriba hacia abajo para pintar la figura. Colocamos el logo en una nueva capa, y en otra, el icono que hayamos elegido para que el sitio sea agregado a la carpeta [Favoritos]. Hacemos clic en la herramienta [Texto] y escribimos [Agregar a Favoritos] al lado del icono.

PASO | 06

PASO | 05

048

CREACIN DE UN LAYOUT
PASO A PASO
EN PHOTOSHOP

07| 08|

POSICIN DE LOS SLIDERS

APLICAR MSCARA

PARA TENER EN CUENTA... En este libro nos centramos en los programas Flash y Dreamweaver. En este paso a paso en particular utilizamos Photoshop, y el lector deber definir algunos parmetros segn su criterio personal para seguir adelante, ya que sera imposible cubrir todas las opciones. Quienes tengan dudas podrn enviar su consulta al Profesor en lnea.

TRAZAR BORDES

|09

PASO | 07

Vamos a indicar el lugar de los sliders mediante una imagen y una mscara con bordes redondeados. Para hacerlo, seleccionamos la herramienta [Rectngulo Redondeado] y definimos el contenedor. Veremos que en la ventana [Trazados] aparece una capa con esa forma delimitada.

Para trazar el borde de los sliders, presionamos la tecla <Ctrl> y pulsamos el mouse sobre la mscara creada en el paso anterior. De esta forma, quedar seleccionado el permetro del slider. A continuacin, vamos a [Edicin/Contornear] e ingresamos 3 pxeles para el ancho del contorno y #ff ff ff como color. Vamos a crear el rea del texto destacado, para lo cual definimos una nueva forma rectangular de la misma manera en que lo hicimos con el header. En este caso, utilizamos la herramienta [Marco Rectangular] con el color #1a171b. Agregamos el icono que hayamos elegido para los destacados y, con la herramienta [Texto], trazamos un rectngulo y pegamos el texto correspondiente.

PASO | 09

PASO | 08

Para convertir el trazado en una seleccin, hacemos clic sobre l con el botn derecho y, del men que se abre, elegimos [Hacer Seleccin]. Luego de aceptar la propuesta, notaremos que el permetro de la seleccin queda delimitado con una lnea punteada. Para aplicar la mscara, seleccionamos la capa que tiene la imagen y presionamos el tercer icono de la ventana [Trazados].

PASO | 10

049

10|

REA DE TEXTO

MDULO DE BLOQUE

|12

11|

FONDOS

BASE DE MDULO

|13

PASO | 11 PASO | 12

Para poner el fondo del ttulo Nuestros Servicios, nos dirigimos a [Archivo/ Colocar] y seleccionamos la imagen que queremos usar. La movemos hasta su ubicacin y presionamos la tecla <Enter>. Luego, seleccionamos la herramienta [Texto Horizontal] y escribimos el ttulo. Ahora crearemos un mdulo para el bloque de servicios y lo duplicaremos para colocar las diferentes ofertas de productos. Para lograrlo, trazamos la base y la pintamos del mismo color que la del destacado, como vimos en el paso 11. Para hacer el detalle de la base, definimos un tringulo con la herramienta [Pluma], haciendo un clic

para establecer cada vrtice. Realizamos la seleccin en la ventana [Trazados] como ya hicimos anteriormente y lo eliminamos de la base del mdulo con la tecla <Supr>.

PASO | 13

050

CREACIN DE UN LAYOUT
PASO A PASO
EN PHOTOSHOP

14| 15|
BASE DE BOTN

TTULO DEL PRODUCTO

DUPLICAR GRUPOS

|16

PASO | 14 PASO | 15 PASO | 16

Agregamos el ttulo del producto (Diseo Web) y, con la herramienta [Pluma], trazamos una lnea divisoria entre el ttulo y el texto del detalle. Le aplicamos el color #87b015 y le damos un grosor de 1 pxel. Luego, seleccionamos [Contornear Trazado] en la ventana [Trazados].

[Duplicar grupo]. Ubicamos el mdulo duplicado y realizamos los mismos pasos para tener cuatro mdulos. Para crear el footer, definimos los campos con la herramienta [Marco Rectangular] y los pintamos uno por uno. El primero es de 5 pxeles de alto y lleva el color #047da5. El segundo tiene un alto de 200 pxeles y el color #01e2ff, adems de una textura que aplicamos desde [Archivo/Colocar]. El tercero es el duplicado de la primera rea, y el ltimo, como llevar los detalles del copyright y otros datos, tendr un alto de 85 pxeles y el color #36c3ee.

PASO | 17

Despus de colocar el texto del detalle, trazamos la base del botn tal como lo hicimos en el men. Para conseguir extremos ms redondeados, aplicamos 50 pxeles de radio. Los colores del gradiente irn de #1a8cd3 a #06d9fb. Para obtener los otros mdulos, hacemos clic derecho sobre la carpeta del que hemos creado y elegimos la opcin

PASO | 18

La zona para las redes sociales tambin se manejar como mdulos, ya que todas contienen los mismos elementos.

051

17|

CREAR EL FOOTER

CAMPOS DE TEXTO

18|

|19

REDES SOCIALES

RETOQUES FINALES

|20

Entonces, creamos uno de ellos y, despus, lo duplicamos para tomarlo como base, cambiando la informacin especfica de cada red. Para hacer la lnea derecha que delimita el mdulo, establecemos los dos extremos con la herramienta [Pluma] usando el color #04c7e9. Para alinear los elementos, seleccionamos todas las capas y, en la barra de herramientas superior, elegimos la opcin [Alinear centros horizontales].

que se destaque (#07d6ff ) y bajamos la opacidad de la capa para darle el efecto de transparencia. Hacemos lo mismo para los dos campos restantes y, para finalizar, escribimos los textos correspondientes al copyright y otros datos complementarios que queramos agregar.

PASO | 19 PASO | 20

RESUMEN
Con lo aprendido, tendremos el diseo del layout bien organizado, tanto para hacerle modificaciones como para enviarlo a maquetar. Por supuesto, hay elementos que se mantendrn estables en las diferentes secciones del sitio, como el header, los botones y el footer. Por lo tanto, cuando diseemos las pginas interiores, vamos a copiar directamente las carpetas correspondientes a esos elementos fijos.

Para hacer los recuadros pertenecientes a los campos de texto, en una nueva capa dibujamos un rectngulo con la herramienta [Marco Rectangular] y lo pintamos con el [Bote de Pintura] usando el color #07d6ff. A continuacin, realizamos el borde con un color un poco ms oscuro para

052

TEORA
la hora de realizar un diseo web, nos encontramos con elementos tanto subjetivos como objetivos, y como profesionales de la comunicacin visual, debemos saber de qu manera trabajarlos para que los resultados no queden librados al azar.

DEL COLOR
El color es parte de nuestro mundo cotidiano y es, sin dudas, uno de los elementos ms importantes dentro de cualquier composicin visual.

USO Y CONFORMACIN DEL COLOR


El color se debe utilizar teniendo en cuenta las caractersticas mencionadas previamente, para poder llegar a un buen resultado. Adems, debemos saber que si existe una marca que tengamos que usar en nuestro diseo web, los colores que son parte de su sistema de identidad debern tener presencia para lograr un resultado ms armnico, pregnante y coherente.

EL COLOR COMO FENMENO FSICO, SENSORIAL Y CONTEXTUAL


Percibimos los colores gracias a la luz. Esto se debe a que, dentro del espectro electromagntico conformado por las diferentes longitudes de onda (equivalentes a niveles de energa), el ser humano slo ve una pequea porcin (denominada espectro visible) y distingue niveles que traduce en diversos colores. Al excitar nuestro sentido de la vista, ocurre un fenmeno de carcter sensorial que posibilita la evocacin de relaciones sinestsicas al utilizar cierto color. Esta experiencia se da dentro de un cierto contexto que acarrea diferentes significados segn las vivencias y la cultura del individuo. Por ejemplo, en la cultura occidental, algunos posibles significados del color rojo son: dinamismo, pasin, amor, vibracin, violencia, calor, lujuria y peligro. Dentro del grupo de todos los colores es posible distinguir tres subgrupos. En primer lugar, encontramos los colores clidos (rojo, naranja y amarillo) y los fros (azul y violeta). El verde puede ubicarse como intermedio, ya que se encuentra en el paso de los clidos a los fros, o viceversa, y dependiendo del matiz que predomine en su mezcla, se definir como de uno u otro tipo. Por ltimo, estn los colores neutros, como el gris, el blanco y el negro.

S
G B

MODELOS DE COLOR
Los modelos de color describen matemticamente cmo stos pueden ser representados. Algunos de los ms conocidos son RGB, CMYK, HSB (HSV) y LAB. A continuacin, conoceremos los referidos al mbito del diseo web. RGB: el nombre deriva de las siglas en n ingls de rojo, verde, azul (Red, Green,, Blue), haciendo referencia a los colores de luces que el modelo toma como primarios. Estos colores, de acuerdo con la intensidad con la que intervengan individualmente, resultarn en un color secundario (sntesis aditiva).

B
El modelo HSB toma su nombre de los trminos Hue, Saturation, Bright.

HSB (o HSV): el nombre de este modelo deriva de las siglas en ingls de tono (o matiz), saturacin y luminosidad (o valor), haciendo referencia a la relacin entre los diferentes colores. El tono representa el color que estamos tomando dentro del crculo cromtico, y la saturacin, la intensidad de ese tono (los colores ms brillantes son los ms saturados). Finalmente, tenemos el brillo o valor (brightness o value), que define los tintes (colores ms cerca del blanco) o las sombras (colores cercanos al negro) de un mismo tono.

En el sistema RGB, gracias a la sntesis aditiva, los colores primarios superpuestos conforman nuevos colores secundarios. La mezcla de las tres luces genera el blanco.

1. DISEO Y TECNOLOGA / TEORA DEL COLOR

053

COLORES EN EL DISEO WEB


Por lo general, en los programas que utilizamos a la hora de disear, encontramos un panel de seleccin de color donde podemos elegir valores para el modelo RGB (0-255 para cada uno de los colores) o el HSB (H en grados del ngulo en la rueda de color; S y B en porcentaje, con valores de 0 a 100). Colores hexadecimales: cuando trabajemos con documentos HTML, CSS, ActionScript o cualquier lenguaje de programacin, utilizaremos el cdigo hexadecimal para referirnos a los colores. El sistema hexadecimal es un sistema de numeracin posicional en base 16 con el que disponemos de 16 dgitos (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E y F) para formar

Composicin del cdigo hexadecimal, donde aparece la mezcla de rojo, verde y azul.

# RRGGBB
Valores hexadecimales que representen el azul del 0 al 255 Valores hexadecimales que representen el verde del 0 al 255 Valores hexadecimales que representen el rojo del 0 al 255

las distintas combinaciones posibles. Seguramente, habremos visto que, para un color azul, por ejemplo, se usa el valor 0000FF. ste determina la composicin del color en el sistema RGB (Red, Green, Blue), constituido por tres pares de

nmeros hexadecimales que nos indican qu cantidad de rojo, de verde y de azul, respectivamente, tiene el tono resultante. Es decir, los dos primeros dgitos determinan el rojo; los dos siguientes, el verde; y los dos ltimos, el azul.

En http://kuler.adobe.com podemos crear paletas de colores de diferentes tipos para usar en nuestros diseos.

HERRAMIENTAS ONLINE
A la hora de elegir colores para los diseos, podemos recurrir a nuestra mente o utilizar herramientas que nos ayuden a seleccionar aquellos que generen una buena combinacin. Para esta tarea, Adobe Kuler (http://kuler.adobe.com) es una gran opcin. Este sitio nos permi-

tir buscar esquemas de color creados por otros usuarios o, tambin, producir nuevas combinaciones. Si queremos crear nuestra propia combinacin, en la home page del sitio presionamos [Create], del men de la izquierda, para comenzar a trabajar. Accederemos al espacio de creacin de esquemas de

color, donde, a partir de un color base, podremos obtener el esquema de tonos anlogos, un esquema monocromtico y el de los complementarios, entre otras posibilidades. Como informacin de los colores, veremos el modelo empleado, controles deslizables para modificarlos y el cdigo hexadecimal correspondiente.

054

CRCULO CROMTICO EN EL MODELO RGB


El crculo cromtico representa de manera visual la conformacin de los colores. Veamos cmo utilizarlo para determinar valores de luminosidad, sombras y saturacin. Como mencionamos anteriormente, los colores primarios que conforman los dems tonos dentro del modelo RGB son el rojo, el verde y el azul. El crculo cromtico, como podemos deducir a partir del nombre, es representado por una rueda multicolor que delimita cmo se conforma la gama completa de colores de este modelo y las relaciones entre ellos. En el crculo cromtico RGB podemos visualizar de qu manera los colores pri-

marios juegan en la mezcla y cmo, segn a qu hemisferio pertenezca el tono o matiz que utilicemos, estaremos hablando de un color fro o de uno clido. Luminosidad: En el crculo cromtico tambin es posible representar la luminosidad. Para hacerlo, agregamos diferentes ruedas que aumentan el valor (o luminosidad) de los distintos tonos a medida que se acercan al centro. Entonces, si tenemos un rojo furioso de valores mximos (255), conseguiremos sus tintes si aumentamos en la misma medida los otros dos colores primarios. Esto se debe a que, en este modelo, el blanco es la suma de los tres colores primarios en la mxima medida (R:255, G:255, B:255).

Sombras: Tambin podemos agregar al crculo diferentes ruedas que disminuyen el valor (o luminosidad) de los distintos tonos a medida que se acercan al centro. Volviendo al ejemplo del rojo, para conseguir sus diferentes sombras, debemos bajar el valor de R en la mezcla. Esto se debe a que, en este modelo, el negro es igual a la ausencia de los tres colores primarios (R:0, G:0, B:0). Saturacin: En este caso, el crculo est intervenido por diferentes ruedas que disminuyen la saturacin de los tonos a medida que se acercan al centro. En este caso, la saturacin puede buscar que sus valores sean ms bajos (ms oscuros) o ms altos (ms luminosos).

Esta divisin tambin puede verse en los programas orientados al desarrollo web dentro de la suite de Adobe.

El crculo cromtico RGB y su saturacin.

Aqu podemos ver los valores de R, G y B para un color y sus tintes.

El crculo cromtico RGB con los tintes de los colores.

El crculo cromtico RGB y sus sombras.

Valores de R, G y B de un color y sus sombras.

1. DISEO Y TECNOLOGA / TIPOGRAFA

055

TIPOGRAFA
En un diseo web, adems de participar en el estilo, las tipografas son una parte determinante de la legibilidad del sitio. Por eso, es importante conocer qu factores debemos tener en cuenta a la hora de elegirlas.
uando hablamos de tipografa, nos referimos a los caracteres que conforman un texto (letras, nmeros o smbolos). Quienes trabajan con tipografas (tipgrafos) lo hacen con sus caractersticas visuales, como la forma, el peso, el tamao, la relacin entre los diferentes caracteres y la conformacin de bloques de texto. En esta oportunidad, nos abocaremos a conocer, puntualmente, lo que significa la tipografa en los medios digitales. Como bien sabemos, las pantallas fueron posteriores a los escritos y a los impresos, y las leyes para tratar la tipografa no son las mismas en ambos casos. A continuacin, veremos por qu sucede esto y cmo manejar las tipografas para que nuestros diseos tengan ciertos cuidados estticos que influirn en el contenido y, como consecuencia, en el usuario.

PAPEL
CANVAS RESOLUCIN UNIDAD MNIMA SNTESIS DEL COLOR SECUENCIA DE LECTURA LEGIBILIDAD DE TEXTOS USO DE TIPOGRAFAS

WEB
Indefinido; hay diversos dispositivos y formatos de pantalla Menor El pxel Aditiva Hipertextual Menor Restringido

Fijo Mayor (esto permite caracteres ms definidos) El punto Sustractiva Lineal Mayor Ilimitado

Diferentes caractersticas segn el soporte en el que estemos trabajando.

TEXTOS EN LA WEB VERSUS TEXTOS EN PAPEL


Para empezar, analizaremos una tabla con caractersticas para conocer algunas de las diferencias que generan los soportes sobre los que se utilizan tipografas (digital o analgico). Teniendo en cuenta este punteo bsico de las diferencias entre el soporte web y el tradicional, iremos viendo que los conceptos bsicos que influyen en cualquier puesta tipogrfica se aplicarn en la Web de otra manera.

recorremos rpidamente las pginas de los sitios buscando la informacin que nos resulte til o que llame nuestra atencin. Esto se debe a que la secuencia de lectura es hipertextual (buscamos links o conexiones con otros contenidos relevantes al tema), con saltos y ramificaciones; sin mencionar que el soporte del texto es una fuente luminosa y tiene una resolucin menor, que agota ms rpidamente nuestros ojos. Entonces, adems de elegir una tipografa correcta, debemos trabajar con otros factores de forma y de contenido:

La forma: el espacio blanco entre los caracteres y las palabras (la interlnea, la interletra, el ancho de lnea, el tamao de los caracteres, etc.). El contenido: cada prrafo deber cerrar una idea (independientemente del total del contenido). La jerarqua de la informacin y los niveles de lectura tambin son importantes, y la cantidad de informacin que utilizaremos deber ser un 50% menor a la que emplearamos en algn medio no digital.

LEGIBILIDAD Y CONTENIDO DE LOS TEXTOS


El medio digital es siempre menos legible que el analgico. Para comprender este concepto, comencemos por analizar a los que leen: los usuarios. Si pensamos en la manera en la que recorremos cualquier tipo de artculo en la Web, nos daremos cuenta de que, en realidad, no leemos, sino que escaneamos, lo que significa que

056

LAS TIPOGRAFAS O FUENTES SEGURAS


Antes de elegir una tipografa para un diseo web, es importante saber que no todas las computadoras tienen las mismas fuentes instaladas. Entonces, el navegador interpreta los textos dispuestos en una pgina con las fuentes que el usuario tiene disponibles en su sistema operativo. Por esta razn, en los diseos web se utilizan las fuentes ms comunes en todos los equipos: Arial, Arial Black, Comic Sans, Georgia, Impact, Times New Roman, Trebuchet, Verdana y Webdings. Nuestro diseo depender, en gran medida, de la eleccin que hagamos dentro de este grupo de tipografas, que podemos clasificar como serif, sans serif y de fantasa. Serif: son aquellas que tienen remates tanto inferiores como superiores. Son muy legibles en papel, pero en medios digitales dificultan la lectura, sobre todo, en cuerpos pequeos, ya que sus remates son mal interpretados por falta de antialiasing (suavizado en los bordes). Ejemplos de este tipo son las tipografas Georgia y Times New Roman. Sans Serif: son aquellas que no tienen ningn tipo de remate, y son ms legibles en los medios digitales, ya que la falta de antialiasing afecta en menor medida a la legibilidad de los textos. Ejemplos de este tipo son Arial, Arial Black, Comic Sans, Impact, Trebuchet y Verdana. Fantasa: son aquellas que no entran en ninguna de las dos categoras anteriormente mencionadas. Suelen ser ilustraciones, smbolos o signos, y no es recomendable usarlas para la redaccin de textos. Ejemplo de este tipo es la Webdings.

Verdana 12 pt
Verdana 10 pt
Verdana 8 pt
Verdana 6 pt
Verdana 5 pt

Verdana 12 pt
Verdana 10 pt
Verdana 8 pt
Verdana 6 pt
Verdana 5 pt

Tipografa sans serif sin (izquierda) y con (derecha) antialiasing en diferentes cuerpos.

EL PRRAFO, LA LNEA Y LA PALABRA


La tarea del diseador web generalmente no est asociada a la creacin de una tipografa desde cero (salvo raras ocasiones), sino que est relacionada con palabras, lneas y prrafos. A la hora de plantear un trabajo, el diseador no suele tener los textos definitivos y reales. En estos casos, para presentar un modelo, debe emplear un generador de texto, que brinda material para presentar y elegir tipografas y estilos. El generador ms conocido es Lorem Ipsum (www.lipsum.com), muy recomendado para los textos en espaol
Bit, consequi tem vitatemquae consectotat parupta spernatis ressi as autae nonsequaspis a sunda comnisi magnatus. Boreseque nia quas magnate porepellupta dolorep edictatur? Harum ex et eatemquiam, que eaqui omnihil lignatures et quatem res volorit qui re sit, non esequo temo et as dolum ne poresciis nihilliquod quis maximpos ex eum lam accus. Tem voluptam qui si acea aut ent eos aligent magnatus ende et eum, optatem ratiuntem quiatem et ulparist, tem nonsequi iliqui cum es sum es apera venti idelia quia qui dio bla nemquam sam esequi conem. To il mint, nime.

Times New Roman 12 pt


Times New Roman 10 pt
Times New Roman 8 pt
Times New Roman 6 pt

Times New Roman 12 pt


Times New Roman 10 pt
Times New Roman 8 pt
Times New Roman 6 pt

Tipografa serif sin (izquierda) y con (derecha) antialiasing en diferentes cuerpos.

Bit, consequi tem vitatemquae consectotat parupta spernatis ressi as autae nonsequaspis a sunda comnisi magnatus. Boreseque nia quas magnate porepellupta dolorep edictatur? Harum ex et eatemquiam, que eaqui omnihil lignatures et quatem res volorit qui re sit, non esequo temo et as dolum ne poresciis nihilliquod quis maximpos ex eum lam accus. Tem voluptam qui si acea aut ent eos aligent magnatus ende et eum, optatem ratiuntem quiatem et ulparist, tem nonsequi iliqui cum es sum es apera venti idelia quia qui dio bla nemquam sam esequi conem. To il mint, nime.

Bit, consequi tem vitatemquae consectotat parupta spernatis ressi as autae nonsequaspis a sunda comnisi magnatus. Boreseque nia quas magnate porepellupta dolorep edictatur? Harum ex et eatemquiam, que eaqui omnihil lignatures et quatem res volorit qui re sit, non esequo temo et as dolum ne poresciis nihilliquod quis maximpos ex eum lam accus. Tem voluptam qui si acea aut ent eos aligent magnatus ende et eum, optatem ratiuntem quiatem et ulparist, tem nonsequi iliqui cum es sum es apera venti idelia quia qui dio bla nemquam sam esequi conem. To il mint, nime.

Bit, consequi tem vitatemquae consectotat parupta spernatis ressi as autae nonsequaspis a sunda comnisi magnatus. Boreseque nia quas magnate porepellupta dolorep edictatur? Harum ex et eatemquiam, que eaqui omnihil lignatures et quatem res volorit qui re sit, non esequo temo et as dolum ne poresciis nihilliquod quis maximpos ex eum lam accus. Tem voluptam qui si acea aut ent eos aligent magnatus ende et eum, optatem ratiuntem quiatem et ulparist, tem nonsequi iliqui cum es sum es apera venti idelia quia qui dio bla nemquam sam esequi conem. To il mint, nime.

Comparacin de prrafos alineados a la izquierda y justificados. En los justificados, se pueden observar los ros que se forman.

057

por estar en latn, aunque no es el nico. Existe otro llamado Blind Text Generator (www.blindtextgenerator.com). Veamos algunos ejemplos de uso y aplicacin de textos que, en la prctica, son recomendables. En el sitio de Dedoce podemos ver, en la columna de la izquierda, una buena utilizacin de la alineacin hacia la derecha en los textos y una muy cuidada justificacin de textos en la columna derecha. Por su parte, en The Gates Notes, la decisin de emplear prrafos de texto con cuerpos tipogrficos pequeos y alineacin a la izquierda fue muy acertada, ya que cada noticia se puede leer y entender en forma sencilla y rpida. Las opciones de alineacin son a la derecha, a la izquierda, centrado y justificado. Esta ltima no debera de ser utilizada en textos web porque no es 100% controlable, y se terminan generando ros (huecos visuales) en el prrafo.

UTILIZAR FUENTES NO SEGURAS


Muchas veces, vemos sitios que no utilizan ninguna de las tipografas mencionadas anteriormente. A pesar de que hay muchas soluciones para lograr esto, las ms comunes son las siguientes: Reemplazo del texto por imagen: consiste en reemplazar los textos en HTML por una imagen que los contenga y que haya sido hecha en algn software de diseo. El problema de esta tcnica es que no ayuda a la indexacin de los contenidos y tampoco, a la practicidad del trabajo. Utilizar CSS: aunque hablaremos de este tema en los prximos captulos, vale adelantar que, mediante la propiedad font-face, podemos lograr que se incrusten ciertas fuentes, y que el navegador las utilice a la hora de leer el texto. sta no es una opcin muy segura ya que todava no funciona correctamente en todos los navegadores. Utilizar JavaScript: en la actualidad, existen soluciones como sIFR, que utiliza JavaScript y Flash para generar textos con una tipografa no usual. Sin embargo, dependemos de que el navegador tenga estas tecnologas instaladas para que esto suceda.
En www.dedoce.es podemos ver distintas formas de alineacin de los prrafos.

El sitio de Bill Gates utiliza tipografas pequeas para presentar las noticias. (www.thegatesnotes.com).

ACTIVIDADES
TEST DE AUTOEVALUACIN
01 Mencione las habilidades principales del diseador web. 02 Qu herramientas debe conocer un diseador web? 03 Cules lenguajes permiten crear sitios para Internet? 04 Qu recursos generan un recorrido de lectura del sitio? 05 Qu es una grilla? 06 Cmo definira el lenguaje CSS? 07 Qu diferencia a un sitio esttico de uno dinmico? 08 Cules son las ventajas de Wordpress? 09 Qu tipo de datos se colocan en una coming soon page? 10 En qu reside la importancia del posicionamiento SEO?

PRCTICAS
Cree una coming soon page en Adobe Photoshop con el objetivo de que el visitante regrese pronto.

01

03 Haga una estructura de su sitio. 04 Disee el diagrama de su pgina. 05 Cree un layout para su sitio en Adobe Photoshop.

02 Disee en Adobe Photoshop una pgina de error 404.