10 Elementos que todo Diseño Web debe tener

El diseño web es un tema que nos da para escribir toda una tesis, pero no se preocupen, que con este blog estoy tratando de tocar los puntos más relevantes y no hacer del tema algo largo y pesado. En el articulo anterior estábamos viendo la importancia que tiene el diseño web en las empresas y que beneficios obtenemos al implementar un buen diseño. Pero… ¿Que necesitamos para crear un buen diseño web?

Elementos que toda página web debe tener

Antes de empezar a hablar de todos estos factores que influyen en un buen diseño web, quiero resaltar que estos puntos están basados bajo mi experiencia en este mundo del Diseño Web, tomar en cuenta estos factores no solo te ayudara a captar más usuarios en tu sitio web, si no que te beneficiara de cara al posicionamiento en buscadores (probablemente el siguiente articulo sea acerca de este tema), así que espero que no eches en saco roto mi recomendaciones y te animes a mejorar tu sitio web si piensas que estas fallando en alguno de estos puntos 😉

Correcta maquetación

Un sitio web que no este correctamente maquetado generara muchos errores a la hora de visualizarlo, de acuerdo a la definición aulaclic «la maquetación es la distribución de los elementos en nuestra página».

La maquetación web inicia desde el momento en el que convertimos nuestro diseño hecho en papel (actualmente en herramientas de diseño como Illustrator, Photoshop, Indesign, etc) a HTML y CSS.

Hace tiempo la maquetación se hacia con tablas (hoy ya obsoleto), pero con el avance tecnológico, han salido tecnologías muy potentes como HTML5 y CSS3 que nos permiten maquetar sitios web bastante potentes.

¡Pero ojo! Como mencione al principio, si no maquetamos correctamente el sitio habrán errores a la hora de visualizarlo y eso no nos gusta en nada a los que visitamos los sitios web.

Navegación

Un sitio web en el que empiezas a entrar a diferentes páginas del mismo sitio y no te pierdes y en todo momento sabes en donde estas ubicado, habla de una buena navegación.

La navegación usualmente la relacionamos con los menús, y en efecto, eso es parte de la negación. La navegación del sitio no es más que esos enlaces que nos permiten acceder a las diferentes secciones del sitio web y que siempre nos permiten volver al punto inicial.

Los menús de navegación normalmente los encontramos en la parte superior de la página (como en este blog) aunque hay webs que los implementan en su barra lateral o en el footer (pie de pagina).

Color

Los colores que implementes en tu sitio web deben transmitir los valores de tu negocio o empresa, aquí juego un papel fundamental la psicología del color, por ejemplo, si lo que quieres transmitir es seguridad o formalidad, el color azul es el más optimo para este caso.

El sitio web que tiene más que definido el color azul entre su identidad, es Facebook, y estoy seguro que al pensar en sitio web azul es el primero que se te viene a la mente, bueno, pues eso es precisamente lo que debemos buscar con nuestro diseño web.

Tipografías

Aunque no lo creas la tipografía o fuente de letra es un elemento super importante en todo diseño web, esta le da mucha presencia al blog y al igual que los colores, estas transmiten diferentes sensaciones al lector, por ejemplo los periódicos y diarios utilizan mucho las tipografías serif.

En el diseño web debemos marcar correctamente la diferencia entre los titulos, subtitulos y el contenido, para esto es necesario variar el tamaño del texto y sobre todo en los titulos utilizar negritas.

Identidad Corporativa

Si, con identidad corporativa me estoy refiriendo al logo del sitio web. Todo página web debe ir acompañado de un logotipo que lo identifique, no importa que sea un sitio empresarial o un pequeño blog, tu logo es lo que te diferenciara del resto de sitios web ¿Te imaginas si todas las web no tuvieran un logo? No sabríamos ni siquiera que web visitamos.

Este casi por regla general tiene que estar en la parte superior, no importa si es en el centro o la izquierda. ¿Esto por qué? Simple, porque es lo primero que visualizamos al abrir un sitio web.

Favicon

El favicon es el icono pequeñito que visualizamos en las pestañas de nuestro navegador y aunque no lo crean muchos diseños no lo implementan. Para mí es un elemento fundamental en todo sitio web, ya que al igual que nuestro logotipo nos sirve para diferenciarnos del resto de sitios web, o díganme cuantos no reconocen este favicon ?

El favicon aunque pareciera un elemento poco relevante, no lo es. Tiene un gran poder visual que sin él seguramente las personas no podrían identificar cual es nuestra web entre las muchas pestañas que normalmente abre un usuario en su navegador.

Ilustraciones

Ya lo dice aquella famosa frase: «Una imagen vale más que mil palabras». Usar imágenes en tu sitio web sin duda reforzara más tu contenido, por ejemplo en los sitios web empresariales se suelen usar iconos junto a los servicios que se ofrecen ¿Quieres ver un ejemplo? te invito a que veas mi sección de servicios de Diseño Web en donde hago uso de imágenes para ilustrar los servicios que ofrezco.

Las imágenes siempre serán un elemento visual que le dará un plus a nuestro sitio web, busca que las imágenes sean originales para que sobresalgas de tu competencia 😉 ¡Pero ojo! No abuses de ellas o saturaras de demasiados elementos tu página y perderás la atención del usuario sobre el contenido que realmente te interesa que vea.

Velocidad del sitio

Si hay algo que los diseñadores web infravaloran muchísimo es la velocidad de carga de la página, normalmente se están preocupando en que elemento se ve más bonito, que animaciones se verán mejor o cuantos iconos deberían colocar para hacerla más llamativa, pero se olvidan de la parte más importante, ¿Cuanto tarda en cargar todos esos elementos?

De nada sirve tener el diseño más bonito si cuando el usuario entra a la página, ésta tarda muchísimo en cargar, lo más probable es que el usuario después de unos segundos abandone la página y ni siquiera vea esos iconos bonitos que te esforzaste en poner.

Algunos estudios demuestran que un usuario esta dispuesto a esperar hasta 2 seg para que la página cargue completamente, después de eso lo más probable es que salga y busque otra opción.

Así que lo mejor es buscar un equilibrio entre diseño y velocidad.

Diseño adaptado a los diferentes dispositivos

Hoy en día las personas no solo acceden a un sitio web desde su computadora, ahora con el avance de la tecnología ya lo pueden hacer desde un celular o una tablet, y si tu página no esta lista para mostrarse en dichos dispositivos, ten por seguro que perderás muchas visitas.

Está nueva técnica de diseño se le conoce como Responsive Web Design o diseño Responsivo, el cual consiste en desarrollar sitios web que se adapten a diferentes tamaños de pantalla, lo que garantiza que no se rompa tu diseño cuando no es visto desde una computadora.

Me ha tocado ver que muchas Agencias de Diseño Web (y son agencias, ojo) que con tal de dar sitios web más baratos, no los desarrollan con Responsive Web Design, y cuando los ves desde tu móvil resulta una tortura tratar de leer el contenido, porque hay que estar haciendo zoom o scroll horizontal.

Diseño intuitivo

Y finalmente pero no menos importante, el último punto que yo les recomiendo es que elaboren un diseño fácil de usar, en donde el usuario pueda realizar una compra, un registro o una descarga sin la necesidad de darse de golpes en la cabeza porque no encuentra el botón o porque no sabe como realizar el proceso.

Recuerda que “Intuitivo es aquello que comprendes de inmediato, sin estudiarlo, sin dedicarle tiempo, sin razonarlo”.

Espero que este articulo te ayude a identificar algunos de los elementos más importantes del diseño web y te sea útil para cuando desarrolles tus futuros proyectos web, o si ya tienes una web, analiza en que estas fallando y mejorala 😉