Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Complementos

Manuales necesarios para el desarrollo web distintos de la programación.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 36

Visitas el mes pasado: 46

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de esta sección:

Diseño web
Wikipedia
Curso práctrico de diseño web
Desarrollo Web
Breve guía para iniciarse en el diseño web.
La webera.es
Diseño de páginas Web
www.um - Francisco Hurtado - pdf.
Diseñando sitios amigables para el IPhone
Maestros del Web

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Diseño de páginas (III)

Técnicas del diseño

Definición

diseño web

Veremos en este apartado una serie de aspectos clave que aparecen en cualquier página y que forman parte del diseño. Ya no se trata de la distribución de los elementos en la página, sino de una serie de aspectos técnicos que debemos tener en cuenta para diseñar una página web

Veremos aquí las siguientes técnicas para el diseño web: El espacio en blanco, El color, La tipografía, La carga rápida, La navegabilidad, La resolución de pantalla.

Las tres primeras técnicas son aplicables a cualquier tipo de diseño gráfico, no así las tres últimas, las cuales son específicas del diseño web.


El espacio en blanco

Tan importante como la distribución de los textos, imágenes, videos, etc, es la distribución de los espacios en blanco en la página. Dejar un margen de espacio entre un apartado y otro, escribir los párrafos con un cierto margen de espacio entre unos y otros, dejar algunos espacios en blanco en la página, es imprescindible para no sobrecargar la página y dar una sensación de espacio abierto.

Los espacios en blanco, bien usados, contribuyen a la aplicación de los principios descritos en la página anterior, colaboran en el balance de la página, ayudan al contraste entre elementos, son necesarios para crear un ritmo en la página, y dan una sensación de proximidad entre elementos semejantes

Podemos comparar los espacios en blanco a los puntos y las comas en la escritura. Un espacio en blanco hace que el usuario pueda tomar un respiro en la visión de la página y contribuye a que ésta no se sobrecargue con demasiados elementos.


El color

El color es lo primero que percibimos al abrir una página web. Es sabido que no todos los colores producen las mismas sensaciones en nosotros. Así los colores cálidos (rojos, naranjas, amarillos) son estimulantes, y los colores fríos (verdes, azules) son relajantes. Además de esto cada color tiene su simbología, lo cual hace que la reacción del usuario ante los distintos colores sea diferente dependiendo del color dominante que encuentre al abrir una página.

Los distintos colores que empleamos al crear la página y la combinación que hagamos de ellos es determinante para la estética de la página, ya que muchos factores van a depender de esto.

El contraste entre diferentes elementos, o entre un elemento y su fondo, dependerá en gran parte de los colores que usemos. Asimismo podemos hacer que el foco de atención se centre en uno o varios elementos dependiendo del color que les demos, ya que los colores luminosos o puros llaman más la atención que los colores más oscuros o tipo pastel o degradados.

Simbología de los colores

Debemos tener en cuenta también la simbología de cada color. Sin querer hacer aquí un tratado sobre la simbología de los colores daremos algunas pautas para el uso de los colores según su simbología. Cada color despierta una serie de sensaciones en las personas, y está unido a una serie de conceptos, los cuales dependen no sólo de la naturaleza humana, sino también de la cultura, de la educación y del medio en el que se ha desarrollado cada individuo.

Con todo se pueden dar unas pautas sobre cuales son las sensaciones que suelen despertar ciertos colores en la cultura occidental. Veamos la simbología y el uso de algunos colores básicos en la web.

El rojo es el color de la sangre, de la pasión, de los sentimientos acelerados. Conviene no abusar mucho de este color, ya que es el que más cansa al usuario, el cual seguramente prefiere colores más relajantes.

El amarillo es tal vez el color más luminoso, si exceptuamos el blanco, sin embargo el blanco es un color neutro, el cual toleramos bastante bien. El amarillo es un color excitante, adecuado para un público infantil, pero informal para un público adulto, el cual lo prefiere en tonos más degradados (tipo beis).

El azul es el color de la tranquilidad, no sólo por el hecho de que tanto el mar como el cielo son azules, sino también porque se considera un color neutro que da un cierto grado de seriedad y formalidad a la página. De hecho es el color predominante en el S.O. Windows, y también en muchas páginas de empresas o entidades serias como bancos, compañias de seguros, etc.

el verde Aunque es también un color relajante, se relaciona con la naturaleza y el ecologismo. La mayoría de las páginas sobre este tema prefieren tener este color como dominante.

El blanco es el color más luminoso aunque en sí es un color neutro. En la web suele utilizarse a menudo como fondo de los textos escritos en negro, ya que esta combinación es la que mejor resalta la escritura.


La tipografía

La tipografía o tipo de letra empleada es fundamental en el diseño web. En los textos debemos buscar sobre todo la legibilidad. Un tipo de letra que sea fácilmente legible por el usuario hace que la lectura se vuelva amena e interesante. Asimismo si el tipo de letra dificulta la lectura, es posible que el usuario pierda interés y abandone la lectura e incluso la página.

El tipo de letra tiene una serie de características que podemos modular mediante las propiedades CSS: estas son el color, el tamaño, el grosor, y el tipo de fuente.

Nos centraremos aquí en las fuentes o tipos de letra que son más apropiadas para la web. Si bien hay algunas fuentes que pueden resultar más atractivas, éstas no siempre son más apropiadas para los textos en la web. Veamos aquí cuales son las fuentes que ofrecen una mejor legibilidad en la web, teniendo en cuenta que los textos deben verse en una pantalla.

Fuente tipo serif

Desde el punto de vista del diseño web podemos dividir las fuentes en dos tipos, las fuentes tipo"serif" y las fuentes tipo "sans-serif".

Las fuentes tipo serif tienen en sus bordes unos remates que amplian su contorno. Esto si bien es apropiado para un tipo de letra impresa en papel, no lo es para la web, ya que las letras debemos verlas en una pantalla. En tamaños pequeños la letra pierde legibilidad debido a que en la web estamos condicionados por la resolución de pantalla del usuario.

Ejemplos de fuentes tipo serif son "times new roman", "Garamond", "Palatino", "Bodoni".

Las fuentes tipo sans-serif no tienen remates en sus bordes. Estas están compuestas por líneas simples que forman las letras. Estas son más apropiadas para los textos en la web, ya que tienen mayor legibilidad, incluso con tamaños pequeños.

Fuente tipo sans_serif

Ejemplos de fuentes tipo sans_serif son "Arial", "Verdana", "Tahoma", "Georgia".

Por tanto vemos que cuanto más sencillo es el tipo de letra empleado, éste tendrá mayor legibilidad en la página. Las fuentes tipo sans_serif son las más de más fácil lectura en las pantallas que utilizan los usuarios. En concreto fuentes como "Verdana" o "Tahoma" consiguen una fácil lectura, incluso con tamaños muy pequeños.

Es preferible poner para los textos normales tipos de letra sans-serif, los cuales son más legibles. Sin embargo para títulos y otros elementos destacados nada nos impide poner otros tipos de letra más complicados o más ornamentales, ya que son textos cortos y además suelen ponerse en un tamaño más grande.


La carga rápìda

La mayoría de los usuarios que navegan por la Web esperan que al abrir una página, ésta se carge rápidamente, de forma casi instantánea. Resulta molesto tener que esperar varios segundos a que la página se cargue completamente. Está comprobado que muchos usuarios, al ver que una página tarda demasiado en cargarse, suelen abandonar la página.

Por tanto debemos conseguir que nuestra página se cargue de forma rápida. La carga de la página depende del "peso" o tamaño en Kb. que tenga.

El peso de la página es igual a la suma del peso de todos los ficheros que la componen, incluidas las imágenes y otros ficheros adjuntos (javascript, CSS, etc.). Por tanto debemos procurar que estos ficheros tengan el menor tamaño posible, e incluso desechar algunos ficheros que puedan ser demasiado "pesados", si es que éstos no son un elemento fundamental de la página.

En la sección Imágenes en la web/Generalidades se explica la importancia del peso de una imagen en la web, y cómo tratar las imágenes para que tengan un menor peso sin perder calidad.


Navegabilidad

Por navegabilidad entendemos la facilidad, dentro de un sitio web de ir de una página a otra. Es decir el usuario, al entrar en un sitio debe poder encontrar fácilmente aquello que busca, aunque esté en otra página del sitio.

Para ello es fundamental poner los enlaces bien claros y destacados. Las barras y menús de navegación deben estar no sólo en la página principal, sino también en todas las páginas del sitio, de forma que el usuario se sienta cómodo y pueda ir de una página a otra sin problemas.

Hay varias reglas que es recomendable seguir. En primer lugar que el usuario, si se pierde pueda volver siempre en un click a la página principal. Un botón de "Página de inicio", normalmente en un menú de navegación nos resuelve este problema.

Por otra parte podemos aplicar la regla de los tres clicks, esta dice que para pasar el una página a otra dentro de un sitio, el usuario no debería hacer más de tres clicks o cambios de página. Una buena distribución de los menús internos y de navegación debe hacer que ésto sea pòsible.

En sitios con gran cantidad de páginas, suelen usarse menús desplegables, que facilitan llegar a una página concreta sin tener que pasar por otras páginas de paso. Crear un menú desplegable no es difícil si sabemos usar Javascript, y además ahorra espacio en la página, ya que no tienen que estar visibles todos y cada uno de las demás páginas del sitio.


Resolución de pantalla

Es sabido por todos los diseñadores web que los usuarios, al visualizar las páginas emplean diferentes resoluciones de pantalla. La resolución de pantalla es el número de píxeles que emplea la pantalla para visualizar la página. Esta depende de la configuración que tenga el usuario en su ordenador o dispositivo.

Las pantallas de ordenador han evolucionado con el tiempo, los monitores antiguos tienen una pantalla con una relación 4:3, (4 de ancho por 3 de alto) sin embargo los más modernos suelen ser mas anchos, con relación 16:9. Además los monitores cada vez admiten resoluciones de pantalla más elevadas. Esto unido al hecho de que cada usuario puede elegir en su sitema operativo la resolución de pantalla que quiera, hace que el diseñador web tenga que diseñar la página pensando en varios tipos de resolución de pantalla.

Para complicar la cosa tenemos que tener en cuenta que nuestra página no sólo puede ser vista en un ordenador, sino también en otros dispositivos como tablets, o teléfonos móviles, los cuales también tienen sus propias resoluciones de pantalla.

Diseñar una página que se adapte a todas las resoluciones de pantalla existentes es casi imposible, por lo que deberemos tener en cuenta las más habituales, En los ordenadores actuales, y teniendo como base una pantalla con relación 16:9 las resoluciones más comunes oscilan entre 1280 x 768 px y 1600 x 900 px . Para que la página pueda visualizarse bien en distintas resoluciones de pantalla, debemos hacer un diseño flexible. No entraremos aquí en cómo realizar este tipo de diseño. Sólo indicaremos que ciertas propiedades CSS permiten realizarlo.



Complementos/Diseño

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com