DISEÑO WEB

IntroducciónUna vez hemos decidido cual será la estructura que tendránuestro sitio, los datos que vamos a incluir y como vamos aorganizarlos, ha llegado el momento de pensar en el aspecto.

Lo primero a tener en cuenta, es qué colores vamos a utilizar.Para ello tendremos que fijarnos en la información recopilada,folletos, logotipos etc. y decidirnos por los colores corporativos dela empresa o, en su defecto, por colores que vayan acordes conesa imagen.

Para empezar a diseñar, además de los colores a utilizar,tendremos que tener presente para qué tamaño de pantallavamos a hacerlo. Hoy por hoy, y dado que la mayoría de losusuarios de Internet trabajan con resoluciones de 1024x768,adaptaremos nuestros diseños a ese tamaño.

IntroducciónComenzaremos por arrancar el programa de diseño gráfico queprefiramos para plasmar una portada y un modelo de página decontenidos, de modo totalmente gráfico.

Podemos plasmar 2 ó 3 modelos diferentes para que sea nuestrocliente final el que elija el que más le guste o nos pida querecombinemos ideas de dos de ellos.

Una vez decidido el aspecto y la estructura que tendrá la páginaweb, es el momento de empezar a desarrollar código HTML.

Tamaño de las páginasEl tamaño de nuestras páginas es importante a la hora de iniciar eldiseño gráfico de las mismas, y es la primera cuestión quedebemos resolver. No existe un tamaño único pero si hay una seriede normas que nos llevarán a la elección del tamaño másadecuado.

Hay que evitar la necesidad de utilizar un “scroll” horizontal (lapresencia de este es el primer síntoma de un mal diseño). Paraesto fijaremos el tamaño mínimo recomendado para visualizarcorrectamente nuestra página teniendo en cuenta cual es eltamaño de pantalla que usan la mayoría de los “internautas”.

Tamaño de las páginasActualmente las estadísticas indican que este tamaño es1024x768 px por lo que nuestro diseño no debería ser mayor de1000 px de ancho ( dejamos algo debido a la barra de ·scroll”vertical) quizás algo menos ya que no todos los navegadores tienenlas mismas dimensiones en su pantalla.

La página debería funcionar y tener su mejor imagen con laresolución más común. También significa que debe funcionaradecuadamente en otras resoluciones, razón por la cual veamosestas tres razones para optimizar el diseño a una resolución:

Visibilidad inicial: Información visible sin utilizar la barra de scrollLectura fácil: Se puede leer el textoEstética: ¿Qué imagen tienen los elementos?

Fuente: StatCounter

Tamaño de las páginas - Altura

• Si queremos captar la atención del navegante, no deberemoshacer la página más grande de una pantalla. Muchas de laspersonas que navegan por Internet no consultan la parteinferior de las páginas porque no saben que hay másinformación en la parte de abajo o simplemente por pereza.

• En general es una buena costumbre no hacer páginas detamaño mayor a una pantalla y media. De esta manera evitarámuchos problemas y facilitará la lectura de las páginas. Laspáginas de tamaño una pantalla y media son cómodas de leer yno saturan al lector con demasiada información.

Tamaño de las páginas - Altura• Si necesitamos poner gran cantidad de texto escrito que ha de

leerse completo, es recomendable hacer una única páginalarga. Es menos molesto hacer “scroll” a lo largo de unaventana que seguir un enlace a la siguiente parte deldocumento.

Tipos de páginas en una WebAquí consideramos algunas de las alternativas principales para eldiseño de las páginas web y los sitios, para los diferentes nivelesde estructura de que los dotemos.

Típicamente, una web tiene una página de inicio, índice, portada ohomepage; de ésta dependen una serie de páginas de sección quepermiten a su vez acceder a las diferentes páginas de contenido:artículos, páginas de catálogo, listas, fichas de productos,formularios... Esta estructura esencial puede complicarse más omenos, por ejemplo, introduciendo diferentes subsecciones yprofundizando así la estructura.

Tipos de páginas en una WebEn general no es buena idea crear un esquema de navegación muyramificado, porque confunde a muchos visitantes; para webs muyextensas es preferible una portada sin demasiado detalle porquetambién puede despistar; es preferible enlazar con las principalessecciones y desde éstas, ir detallando la estructura.

Los criterios para diseñar las páginas correspondientes a cadanivel son distintos, respecto de la organización del espacio, el usodel color e imagen y la elección de la tipografía. En general,podemos considerar que a cada uno de los tres niveles (portada /secciones / artículos) las restricciones que podemos aplicar sonlas que detallamos en el gráfico siguiente:

Tipos de páginas en una WebNaturalmente, debe haber una cierta consistencia en el estilográfico y tipográfico de los tres niveles: no ha de parecer que, másque niveles distintos, sean webs distintas. Debemos plantearnos sioptamos por un estilo gráfico basado en:

• fotografías,• imágenes realistas,• imágenes simples en color o blanco y negro,• imágenes estilo cómic o caricatura,

iconos simples (símbolos, signos y señales), o una combinaciónaceptable de más de una de estas opciones: pero cuidado con lasmezclas indigestas. Por ejemplo, en una web de diseño sobrio,funcionan bien imágenes icónicas simples, pero desentonanmucho las imágenes caricaturescas.

Páginas de portadaLa página de portada es un elemento decisivo de la web. Dado quees habitualmente el punto de entrada en nuestro sitio, la imagenque proyecta debe ser la deseada: el visitante debe adivinar qué seofrece -o al menos sentir curiosidad por saberlo y navegar másadentro para verlo por sí mismo. Por tanto, conviene dedicarmucho más esfuerzo, proporcionalmente, a esta página, parahacerla atractiva, funcional y única.

Desde la página índice debemos proporcionar acceso a las páginasde secciones principales de nuestra web, aunque no es buena ideallenar el espacio con descripciones detalladas de éstas.

Páginas de portadaEn la página inicial es más fácilrecurrir al lenguaje visual que alescrito. Los textos deben ser concisosy claros, indicando qué encontraremosen la web o suscitando la curiosidad einterés del visitante. Probablemente,es en la página de inicio donde máspodemos usar la imaginación ycreatividad. No es necesaria unaestructura previsible: podemos, casidebemos sorprender y entretener. Esun buen lugar para utilizar algollamativo, como una película de Flasho efectos de mouseover.

Páginas de secciones La Web debe estar constituida por secciones lógicas y bienestructuradas. Una página de sección dará acceso a los artículosrelacionados; al añadir nuevos artículos bastará modificar lapágina de sección añadiendo un enlace. Para identificar lassecciones -y distinguir unas de otras- se puede utilizar un colordistintivo para cada una, combinado con un icono o imagenexclusiva. En muchas webs se utiliza una barra de navegación enla que se indica en qué sección estamos con un color diferente, omodificaciones semejantes, por ejemplo, oscureciendo odifuminando el resto de la barra de navegación.

Para decidir el diseño de las páginas de sección, no debemosperder de vista la facilidad con que podamos actualizarlas.

Páginas de secciones En la mayoría de casos deben evitarse los marcos o frames.

Páginas de contenidosRealmente, éstas son las páginas de la Web. El resto no es másque un añadido para llegar aquí de la forma más fácil... pero sonpiezas clave, dada la forma en que se navega. Para un libro, laportada y el índice no tienen tanta importancia. Pero, por analogía,un buen diseño de portada puede ayudar mucho a mejorar lasventas de una publicación.

El principal criterio de las páginas de contenido es la claridadexpositiva. El texto debe ser fácilmente legible, con una correctadistribución y ancho de las líneas adecuado. Las ilustracionesdeben ser funcionales y el uso del color, en correspondencia, debeser más sobrio que en la portada.

Páginas de contenidosLa distribución del texto en columnas, tan común en los mediosimpresos, presenta un problema en las páginas web. Ya que launidad que se muestra en pantalla no es una hoja, sino unapantalla de tamaño variable, el texto en dos columnas o tres, enlas páginas web no se distribuye de la forma previsible, de arribaabajo y de izquierda a derecha.

Las columnas son, de hecho, independientes entre sí y el texto nofluye automáticamente. Así, no hay forma de crear un textocontinuo realmente funcional para leer en pantalla. Por estemotivo, una solución muy utilizada es optar por columnasasimétricas.

Páginas de contenidosLa columna pequeña contiene enlaces, información adicional,pequeñas ilustraciones... y la columna más ancha tiene el cuerpodel texto y las imágenes mayores.

Para ir avanzando en la lectura de los artículos no debería sernecesario volver a las páginas del nivel superior. Para ello convieneproporcionar una o varias barras de navegación que lleven a lasprincipales secciones, y botones para avanzar y retroceder, omoverse rápidamente por la página. Si ésta tiene una ciertalongitud, es una buena idea colocar un botón para subir sinnecesidad de desplazarse por la página con el ratón o los cursores(el estándar es una flecha que apunta hacia arriba.)