Se encuentra usted aquí

Como Hacer Una Web Atractiva

Convertir a PDFConvertir a PDF
Es un hecho que Internet y las páginas webs son principalmente visuales y la presentación es tan importante como la información que contienen. Aunque se pueden encontrar sitios de mucha audiencia con un diseño simple también hay otros que basan toda su autoridad en el aspecto que presentan. La clave está en buscar el compromiso entre dos factores: el diseño y la usabilidad.

En este artículo mostramos algunos consejos que pueden resultar útiles para mejorar la faceta visual de una página web. Quizás no convenga usarlos todos a la vez, además hay que tener en cuenta que no existen normas fijas de diseño pues las tendencias cambian. Igualmente no todo combina con ciertas temáticas. Por eso son presentados a modo de consejos más que de reglas obligadas.

Consejos de diseño

Evitar música e imágenes en movimiento

Durante los inicios de Internet fue bastante común que las páginas reprodujeran alguna melodía al cargarse. Ahora no resulta atractivo el contenido multimedia cuando quien está al otro lado no lo solicita. Hay que pensar que nuestros futuros lectores posiblemente estén escuchando música o se encuentren en una habitación silenciosa.

Igualmente un poco de movimiento puede resultar útil si se usa con buen gusto, pero está totalmente desaconsejados los parpadeos y las animaciones.

Dejar espacios en blanco y márgenes

Una web de información no suele ser un periódico donde el espacio está limitado y fijado, sino que puede expandirse por la pantalla. En diseño web se suele decir que hay que perder el miedo a los espacios en blanco.

Sin embargo en sitios que contienen información abundante como periódicos online, directorios, webs de recursos de informacion, etc... la información presenta una condensación similar a la prensa escrita, aun así es fundamental mantener los márgenes suficientes para que el texto siempre esté separado de sus bordes más cercanos.

 

Usar gradientes y degradados

Una web donde haya muchos colores puede resultar pesada a la vista, pero otra donde no exista ninguna variación resultará monótona. La solución que lleva adoptándose desde hace años y que parece que seguir siendo la tendencia general es  usar degradados.

En esta web se pueden observar varios: la pagina empieza con un degradado, las letras del logotipo son mas oscuras en su parte superior con un reflejo y los bordes laterales cambian del blanco al azul claro.

Usar sombras y/o reflejos

Las sombras también se están convirtiendo en casi una norma, sobre todo en los logotipos. El texto de la web también puede contener sombreados y es muy fácil de implementar o quitar con una propiedad llamada text-shadow colocada en determinadas partes del código.

En el ejemplo hay una letra O que tiene una pequeña sombra de una luz imaginaria que entraría desde arriba-izquierda y un reflejo en su parte inferior.

Variar la gama de colores

Es recomendable usar una gama de colores con pequeñas variaciones. Si se optara por tonos anaranjados sería conveniente elegir cuatro naranjas: uno claro, otro oscuro, otro tendiendo hacia el amarillo y otro tendiendo hacia el rojo. Eso hace que una web resulte colorida a la vez que mantiene la coherencia cromática.

En la imagen de ejemplo se han escogido tres colores, pero el situado en el centro tiende hacia el rojo, por eso se ve más morado que los otros dos sin dejar de ser azul.

Ajustar los bloques y justificar el texto

En la medida de lo posible todo tiene que construirse pensando en rectángulos alineados. Puede resultar desordenado ver un bloque en una posición y el que tiene inmediatamente debajo desplazado.

Hace años no recomendaban justificar el texto debido que los espacios en las palabras se vuelven variables y a veces pueden resultar excesivos. Si bien las tendencias han cambiado últimamente se tiende a hacerlo para mantener los textos como si de bloques se tratasen.

Dar coherencia al tamaño de las imágenes

La vista tiende a adaptarse a patrones y este consejo tiene mucho que ver con el anterior. Es conveniente elegir un tamaño fijo para cada tipo de imagen. Por ejemplo en esta web todas las imágenes contenidas en los artículos se han ajustado a un ancho exacto de 150 píxeles.

Si lo que tenemos es una tienda también es recomendable que las fotos de todos los artículos tengan el mismo patrón. Por ejemplo en una tienda de llaveros conviene que todos tengan el mismo fondo en blanco, el mismo tamaño y la misma iluminación.

Materia: 
Nivel: 
Medio: 
Asignatura: 

Comentarios

Muy bueno, gracias

Es la primera vez que entro en vuestra página y tengo que daros la enhorabuena, por los vídeos y los artículos. En particular, este me ha parecido muy interesante y útil.

GRACIAS!!!!!!!

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
CAPTCHA
Esta pregunta es para asegurarnos de que eres un humano y no un robot.
Fill in the blank.