Principios Básicos para Diseño Web

Diseño de páginas Web

Para que exista un buen diseño web, todos los elementos que conforman una página y por consiguiente un sitio web, deben estar correctamente estructurados y organizados, considerando que existen criterios que deben tomarse en cuenta en cuanto a: formato con áreas diferenciadas (generalmente mediante el uso tablas), dimensiones de la página, fuentes, colores y uso de imágenes.

Formato con áreas Diferenciadas

Debe permitir distinguir las áreas de:

·         Identificación de la página o encabezado: Muestra el nombre y logo de la empresa, organización o sitio web. También puede contener el eslogan de la empresa, una caja de búsqueda del contenido, banner publicitario (en la imagen debajo se muestra un ejemplo de banner en la página de Banesco), entre otros. Algunas veces la barra de navegación horizontal se considera parte del encabezado.

·         Barras de Navegación: Son las opciones que organizan el contenido y/o que permiten acceder a las diversas partes o páginas del sitio web. Pueden existir dos barras de navegación: una navegación principal y la navegación secundaria. Por ejemplo, en la siguiente imagen puedes observar la barra de navegación principal del sitio web de la UCV (Universidad Central de Venezuela).

·         Contenido o áreas de información: Presenta el contenido o información que se desea mostrar en cada página.

·         Pie de página: Es el área donde se presenta el nombre del sitio, los datos del copyright (derechos de autor del sitio web), RIF de la empresa; y se presentan enlaces a algunas partes del sitio web, como por ejemplo: inicio, página de contacto (contáctenos), descripción de la empresa (Acerca de…, quiénes somos), entre otros que el diseñador del sitio considere necesarios.  Ejemplo de pie de pie de página de Banesco:

Nota: Si navegas por un sitio web correctamente estructurado observarás que lo único que cambia de una página a otra dentro del mismo site es el área de contenido, mientras que el encabezado, las barras de navegación principal y el pie de página se mantienen iguales. En algunas ocasiones cambia la barra de navegación secundaria, aunque tienen a mantenerse constante. Puedes visitar las páginas de la UCV (http://www.ucv.ve) y la página de Banesco (http://www.banesco.com) o cualquier otro banco como ejemplo.

Estilos de estructuración de una página web

Existen diferentes estilos que pueden utilizarse dependiendo de si el sitio tiene una sola barra de navegación o dos.  Generalmente, para estructurar las páginas web se usan diseños con tablas como se podrá observar a continuación.

Una sola barra de Navegación

Se usa cuando el sitio web tiene poca información que mostrar, o bien, cuando se quiere demostrar sencillez y facilidad de navegación en el diseño.

 

Dos Barras de Navegación

Cuando un sitio web tiene muchas páginas se utilizan dos barras de navegación: una principal y otra secundaria. Existen distintas formas de presentar estar barras de navegación, observa los siguientes ejemplos:

Dimensiones

Deben utilizarse dimensiones de página que permitan que el sitio web que estamos diseñando se muestre bien en distintos sistemas operativos y con las diferentes resoluciones de pantalla de los usuarios. Actualmente, las resoluciones de pantallas más usadas son 1024x768 y 800x600.  Por esta razón, al diseñar una página web deben tomarse en cuenta estos estándares. Recuerda que las barras de los navegadores web usan un espacio de ese tamaño total, por lo que la ONU (2005) recomienda usar unas dimensiones reales de 760x420 en el diseño, dado que ese es el espacio visible. Si tienes dudas visualiza tu página usando varios navegadores web (Internet Explorer, Mozilla Firefox, Google Crohme).

Fuentes

De acuerdo a las recomendaciones de la ONU (2005), podemos tener presente en cuanto a las fuentes:

·         Utilizar tipos de fuentes diseñadas para pantalla como: Verdana, Georgia o Trebuchet, tipos de fuentes que han sido adaptadas para pantalla como Times New Roman.

·         No utilizar más de tres tipos fuentes o estilos en una misma página.

·         No usar subrayado para resaltar un texto, ya que puede confundirse con un hipervínculo.

·         Respecto al color del texto, evite colores claros o brillantes sobre fondos oscuros.

·         Use texto convertido en imágenes únicamente para encabezados o botones de navegación, no use imágenes para representar párrafos de texto completos.

Colores

De igual manera, la ONU (2005) destaca entre sus recomendaciones basadas en colores web lo siguiente:

·         Se puede observar en los diferentes sitios de empresas e instituciones (google, msn, banesco, mercantil, sofitasa, movilnet, entre otras) que la tendencia actual es utilizar fondos blancos, o fondos con colores suaves. (ONU, IUTEPI, UCV, Movistar, entre otras).

·         Se pueden utilizar color para distinguir secciones en nuestra página (maestrosdelweb, ejemplo de Jammin’ Juice).

·         No deben utilizarse muchas mezclas de colores en una sola página.

·         No se deben usar fondos con colores brillantes.

·         No usar colores fluorescentes ni en texto ni en el fondo.

Imágenes

Las imágenes deben estar complemente nítidas, considerando que se deben combinar la mejor calidad de la imagen junto con un tamaño de archivo reducido. Para ello se utilizan la opción de photoshop de guardar para la web, donde el programa busca la configuración más apropiada para imágenes en formato JPEG (Joint Photographic Experts Group = Grupo conjunto de expertos en fotografía). Otro formato cada vez más usado en la web es el formato PNG (Portable Network Graphics = Gráficos portables para la red), el cual fue diseñado para reunir las mejores características de los formatos anteriores.

Referencias Bibliográficas

Matos Padilla, R. (2007). Desarrollo de un buen encabezado y pie de página para tus sitios web.  Maestros del Web. Consultado el Mayo 10, 2011.  Disponible en: http://www.maestrosdelweb.com/editorial/desarrollo-de-un-buen-encabezado-y-pie-de-pagina-para-tus-sitios-web/

Organización de las Naciones Unidas. (2005). Internet el instrumento esencial de la diplomacia del Siglo XXI. Consultado el Mayo 10, 2011. Disponible en: www.un.org/spanish/Depts/dpi/seminario/pdf/fireworksMX.pdf