Principios básicos de diseño para web

Internet, el instrumento esencial de la diplomacia del siglo XXI

PRINCIPIOS BÁSICOS DE DISEÑO PARA WEB
Composición de página El éxito de una buena composición de página consiste en una organización balanceada, clara y concisa de la información usando las herramientas básicas de diseño: formato editorial, tipografía, color y uso de gráficas. Sugerencias: • La composición debe guiar al usuariovisualmente. Distinguir en un principio las áreas de información, navegación principal, secundaria, local, etc. • El contraste es importante y nos ayuda a mantener módulos de información y a facilitar la lectura. Ejemplo http://www.moma.org

Imagen proveniente de http://www.webstyleguide.com • Usar plantillas. Usar una misma plantilla no quiere decir que la página sea aburrida, al contrarioutilizar la misma plantilla mantiene una página consistente, limpia y ORDENADA.

Imagen proveniente de http://www.webstyleguide.com

Principios básicos del diseño para Web

-1-

Internet, el instrumento esencial de la diplomacia del siglo XXI

• Establecer áreas "verticales". Utilizar este principio sobre todo en páginas principales o portales de información. Ejemplo:http://www.nytimes.com • Uso de Encabezados y pie de página. Los encabezados deben de presentar la identidad gráfica del sitio y el pie de página presenta por lo general el origen del sitio y ligas acerca del sitio: información legal, derechos de autor, año de producción, contacto, etc.

Dimensiones El diseño de Web implica una serie de limitaciones. Dada la naturaleza del medio, nuestras páginas deben defuncionar en diferentes plataformas y con distintas dimensiones de pantalla. Comenzaremos por hablar de las dimensiones de pantalla. Debemos mantenernos al corriente de estadísticas del usuario. La siguiente página proporciona estadísticas de uso de sistemas operativos, navegador, resolución, etc. http://www.thecounter.com. De acuerdo a este sitio, actualmente la mayor parte de usuarios usa unaresolución de pantalla de 1024 x 768 y en segundo lugar sigue la resolución de 800x600. Antes de empezar el diseño y la producción de un sitio de Web, debemos definir con nuestro equipo de trabajo que formato seguiremos. El siguiente sitio proporciona una plantilla de navegador (Browser Grid: http://www.wpdfd.com) en donde podemos ver las áreas "seguras" dentro de cada una de las dimensiones de pantalla.Quiere decir que si por ejemplo decidimos hacer una página para una resolución de 800x600 entonces debemos trabajar con unas dimensiones reales de 760x420, este es el espacio visible, la diferencia en los números se debe al espacio utilizado por botones de navegación que requiere el navegador y nuestro propio sistema operativo.

Tablas El uso de tablas es sumamente importante. No solo sirvenpara presentar datos de forma tabular, o como las conocemos fuera del contexto de Web, sino porque nos ayudan a crear espacios editoriales. Sugerencias: • Usar tablas para crear columnas. Dividir la página en varias columnas facilita la distribución de información. • Mantener separadores de columnas (Gutters) y márgenes.

Principios básicos del diseño para Web

-2-

Internet, el instrumentoesencial de la diplomacia del siglo XXI

Página que utiliza una columna de la tabla como separador Imágenes provenientes de http://www.webstyleguide.com • Usar tablas para incorporar gráficas y pie de foto dentro de un área de texto largo.

Página sin separador

Imagen proveniente de http://www.webstyleguide.com

Principios básicos del diseño para Web

-3-

Internet, el instrumentoesencial de la diplomacia del siglo XXI

•

Usar tablas para “armar” composiciones gráficas.

Imagen proveniente de http://www.webstyleguide.com

Presentación de elementos de navegación Gran parte del éxito de una buena navegación se debe a la estructura del sitio en general; como decidimos agrupar nuestro contenido, bajo que secciones, etc., pero la otra parte se la debemos a una clara...