Puntos clave para el diseño gráfico web

El diseño gráfico web ha ido cambiando durante los últimos años. Anteriormente no existían plataformas para la practicidad de diseñar una página web, lo que exigía tener mucho más conocimiento de programas específicos para web como Firework, Dreamweaver o incluso Flash.

Gracias al avance tecnológico, actualmente el diseño web se ha optimizado mucho y ha acortado el proceso del mismo. Pero muchas veces nos olvidamos de los puntos clave que se tienen que tomar en cuenta al momento de diseñar.

Es por eso, que expongo a continuación algunos puntos clave a considerar en el diseño gráfico de una página o sitio web:

1: Definir objetivos del diseño gráfico web

Este primer paso muchas veces no lo tenemos presente o lo omitimos, pero es fundamental que, antes de diseñar, se definan junto con el cliente los resultados, objetivos y expectativas que se espera obtener en el sitio web.

objetivos del diseño grafico web

2: Contenido

En este punto tenemos que tomar en cuenta 4 preguntas que ayudarán a optimizar los contenidos; ¿Qué? ¿Cómo? ¿Dónde? ¿Por qué?.

contenido del diseño grafico web

3: Wireframes

Una vez definidos objetivos y contenidos, es momento de encender el ordenador y crear un esqueleto visual de lo que puede ser el sitio web, sirve para darnos una idea de cómo se conformará el sitio; jerarquías y esquema de navegación sin meternos en el diseño (colores, tipografías, imágenes, etc). En este punto es importante que se revise con el cliente porque se optimizará mucho trabajo y se definirá más rápido.

wireframes del diseño grafico web

4: Maquetación:

Una vez que tenemos el esqueleto definido y aprobado, es momento de vestirlo y darle una estética visual. En este punto del proceso es donde nuestra creatividad y sentido común tendrán que salir. Para esto tenemos que tomar en cuenta varios aspectos:

maquetación diseño grafico web

Colores

Siempre considerar los colores corporativos del cliente, pero tener cuidado con abusar de ellos. Les recomiendo que busquen equilibrarlos, para eso, les sugiero que prueben la herramienta online Adobe Color CC (www.color.adobe.com). Encontrarán mezclas atractivas para combinar los colores.

colores diseño grafico web

Tipografías

Les recomiendo que siempre tengan 2 tipos diferentes; títulos y cuerpo de texto. No olviden buscar tipografías legibles, armónicas y dinámicas. Para eso, les recomiendo Google fonts (www.fonts.google.com), les será de mucha utilidad.

tipografias diseño grafico web

Iconos gráficos

Es importante que existan iconos gráficos para dar énfasis a puntos que quieran resaltar o que tengan importancia para que el usuario lo identifique más rápido y sobe todo para darle dinamismo al sitio web. Siempre es bueno tener una inspiración para poder diseñar este tipo de gráficos, por eso, les recomiendo una página de referencia gráfica; Dribbble (www.dribbble.com).

iconos graficos diseño web

Imágenes:

Cuando busquen opciones de imágenes, les recomiendo que sean de pago, ya que tendrán opciones para usarlas como quieran, lo que permite más libertad. Existen muchas empresas de compra de imágenes online.

Una vez diseñado todo el sitio web y la aprobación del cliente, comienza la programación, para ello, se tiene que tener conocimiento en HTML, CSS, Javascript y PhP. A partir de este punto, pueden tener 2 opciones para seguir:

  • Trabajar de la mano con un programador web para maquetar todo el sitio web en código HTML, CSS, Javascript y PhP.
  • Si tu tienes los conocimientos de programación web, seguir con el proceso hasta el final.

Conclusiones

A pesar del boom de plataformas para crear las páginas web como WordPress, Prestashop, Magento, etc., no debemos olvidar que el diseño gráfico web sigue siendo un aspecto muy importante. La imagen visual debe causar una impresión positiva y sobre todo lograr captar la atención del usuario en poco tiempo.

conclusiones diseño grafico web

La credibilidad, seguridad, calidad y confianza son aspectos básicos generales que se tienen que tomar en cuenta para crear páginas web a través del diseño visual. Sin olvidarnos también de los conocimientos básicos de programación (HTML y CSS).