> WEB-Resumen

Técnicas para mejorar el diseño de la interfaz

WEB Resumen

La Importancia del COLOR en tu WEB

El color es uno de los aspectos más importantes, en general cuando hagamos una web elegiremos una gama de colores que sea adecuada para el tipo de web, enfocada al público al que vaya dirigida la web, y también a la empresa a la que se la estamos elaborando.

Si nuestra empresa cliente cuenta con un logotipo, lo normal es que los colores de la web se adapten al mismo, también debemos tener en cuenta que todos los colores en mayor o menor medida evocan sentimientos por tanto dependiendo de la impresión que se desee causar podemos usar un color u otro, por ejemplo el color negro provoca un sentimiento de dureza, seriedad… mientras que el color blanco expresa pureza, simplicidad…

¿La Tipografía puede ser un problema?

La tipografía es al igual que el color prácticamente lo más importante y debe estar, por un lado relacionada con el logotipo de la empresa, estar enfocada a la imagen que la empresa quiere proyectar y tener un tamaño que nos permita diferenciar los distintos elementos de la web, por ejemplo poner de mayor tamaño el título de un artículo es esencial para resaltar que por ahí es por donde debemos empezar

cambiar mediante el CSS de nuestra página web la fuente con la que se va a trabajar, así como asegurarnos de cumplir las reglas de ortografía y gramática, da a nuestro cliente una sensación de profesionalidad.

En la siguiente imagen puedes observar las 10 reglas básicas para que tu web tenga una tipografía idónea

Puedes hacer click en los mandamientos '1', '5' y '10' para más información

El contraste. La gran preocupación del diseñador

Es importante también tener en cuenta el contraste que se le da a los elementos de nuestra página ya que esta debe ser legible por todos los usuarios, y no podemos colocar por ejemplo un fondo azul oscuro y unas letras verde oscuro por que la legibilidad se vería muy reducida.

Colócate sobre la imagen posterior para observar el cambio de contraste:

Visualiza el contraste

El contraste ayuda además a enfatizar contenidos de nuestra web y por tanto podemos usar técnicas de contraste para resaltar elementos frente a otros, o para incitar al usuario a hacer clic en una zona determinada de nuestra página web, para ello podemos aplicar estilos determinados a elementos sobre los que se encuentre colocado el puntero del ratón, como por ejemplo cambiar el fondo de una tipografía cuando se pasa el ratón por encima de ella

Ejemplo

El texto anterior no conduce a ningún enlace, pero el contraste y la disposición incitan a hacer click sobre él.

E l e s p a c i a d o e n t r e e l e m e n t o s

Los espacios que dejamos entre distintos elementos de la web así como entre las letras nos sirven para relacionar elementos entre sí.

Además una página web que tiene sus elementos correctamente espaciados otorga sin duda una mayor sensacion de orden y limpieza, y facilita al usuario de la misma la comprensión de la distribución, el contenido y la ordenación que debe seguir cuando nos visite.

A continuación se muestra una galeria de imagenes sin espaciado, y que no respeta las proporciones de orden y tamaño, frente a otra en la que las imagenes se encuentran separadas correctamente y son proporcionales en cuanto a su tamaño.

Como se puede observar, la galería de imágenes ordenadas transmite mayor confianza y seguridad en el sitio web.

La reutilización de código

mantener en nuestra web un mismo estilo en la página principal y en las subpáginas de la misma, es fundamental

A continuación se muestra una galeria de imagenes sin espaciado, y que no respeta las proporciones de orden y tamaño, frente a otpor ejemplo el header de nuestra página y el footer, serán igual en todas los HTML y mantener estilos como por ejemplo si en la página principal al pasar sobre un link el color de la fuente cambiase a rojo, sería importante que en todas las páginas se mantuviese esa característica, debido a que el usuario que acceda ya estará acostumbrado a esa característica y la identificará fácilmente cuando la vea, y ya sabrá lo que puede hacer, en este caso, hacer clicra en la que las imagenes se encuentran separadas correctamente y son proporcionales en cuanto a su tamaño.

Como se puede observar en las imágenes superiores, pertenecen a la misma página web, pero a diferentes pestañas de la misma en ellas podemos observar como la barra de navegación, los iconos del idioma y la barra lateral se mantienen con el mismo formato en ambas pestañas, este es uno de los ejemplos más claro de la reutilizacion de código

Precisión, sinónimo de éxito

tener en cuenta la eliminación de contenido innecesario y de elementos innecesarios en la página web, es muy importante, ya que estos restan importancia a los elementos principales de la web, y además provocan una sensación de falta de profesionalidad y de orden.

La precisión a la hora de escoger el contenido de nuestra página web, contribuye al éxito de la misma, proporciona a nuestra web un diseño limpio, reduce el tiempo de carga y capta con mayor facilidad la atención del usuario.

Para que puedas tener más en cuenta estos aspectos en cuanto al contenido de tu web, echa un vistazo al siguiente artículo

Disiminución de ruido visual

Cuando se reliza una página web se debe prestar atención a este detalle, una página web con demasiado ruido visual, da al usuario una sensación de complejidad y desorden innecesaria, cuando mayor organización, y menos ruido visual contenga nuesttra web, mayor sensación de simpleza otorgará a nuestro usuario y por tanto facilitará que continue en ella, por más tiempo.