Diseño de páginas Web: Fundamentos básicos

Diseño de páginas Web: Fundamentos básicos

Publicado el 04 Jun 2014 en Noticias por Webmaster nSOLVER

Al ver una página web por primera vez, es fácil apreciar los elementos que provocan que el sitio sea funcional o no: plantillas estándar, imágenes pre-diseñadas o cursis, abuso de efectos de bisel o de sombras, etc.

Según un estudio realizado por la Universidad de Standford (http://credibility.stanford.edu/guidelines/), las páginas web con diseños correctos, son más creíbles para el usuario que navega en ellas y por lo general, suele ser más sencillo interactuar con ellas.

Es importante seguir una seria de reglas para mantener una buena calidad en nuestros diseños web:

1) Sigue las reglas – Se deben respetar los principios del diseño, como el orden y la simetría, pero a su vez, crear contrastes para llamar la atención del usuario. Puede resultar muy interesante crear nuevos sitios con grandes scroll horizontales/verticales, y a la vista resultan muy creativos, pero la razón por la que muchas páginas web usan la disposición en 3 columnas, es simplemente porque funciona, (las personas, sobre todo las adultas, llevamos mucho tiempo acostumbradas a ver esta disposición en los medios escritos).

2) El color como un elemento de diseño, no como simple decoración – El color únicamente se ha de utilizar para apoyar el contenido, no como relleno para decorar una página web. Una de las mejores reglas para aplicar en el diseño web es el uso de colores complementarios.

Colores complementarios páginas web

En la siguiente imágen aparece en círculo cromático en el que las líneas unen dos colores que son complementarios entres sí mismos.

3) No utilizar (o no abusar) de imágenes parpadeantes, que se muevan demasiado, que giren…, ya que según muchos estudios este tipo de gráficos son una distracción y suelen molestar y entorpecer la navegación de los usuarios en las páginas web.

4) Ayuda externa – Sírvete de los consejos de personas corrientes o de comunidades de profesionales para realizar una crítica constructiva y así poder mejorar tu sitio web a través de la experiencia de otros.

5) Usa imágenes e iconos para comunicarte siempre que sea posible. Existen iconos universales que las personas comprenden nada mas visualizar, la lupa (buscar), la casa (página de inicio) y el disquete (guardar) por ejemplo, aunque este último esta ya en desuso por el hecho de que las nuevas generaciones jamás han visto ni utilizado un disquete.

Un ejemplo de como los tiempos cambian, como ven los niños un ordenador de hace 20-30 años:

6) Optimiza las imágenes y que se ajusten a nuestro contenido (no al revés) – Aunque hoy en día muchos usuarios ya disponen de banda ancha, las páginas con gran cantidad de imágenes y de tamaños considerados ralentizan la carga de la web y puede resultar bastante molesto y por consiguiente el abandono de la página antes de tiempo.

No hay que olvidar el incremento estos últimos años de los accesos de los usuarios a través de sus smartphone, por lo que resulta fundamental disponer de todos nuestros elementos multimedia (imágenes, vídeos…) adaptados para distintas resoluciones de pantalla: Diseño Web Responsive

7) Elegir fuentes compatibles con el contenido – En la red existen miles de fuentes para elegir, pero recuerda que es recomendable usar como máximo tres fuentes a la vez, una para el título, una para el cuerpo principal, y la última para cualquier tipo enlace que se pueda necesitar.

Fuentes Diseño Web

8) Multi-navegador – La página web tiene que ser testada en los diferentes navegadores existentes. Muchas veces puede ocurrir que determinados elementos del diseño de la web se muestren de manera diferente según el navegador (Según el navegador que utilices, las nuevas propiedades/atributos del HTML5 o CSS3 podrán ser visualizadas o no).

Volver Arriba

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies