Diseño Web

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).




4 Comments

  1. 4 de marzo de 2021 at 2:14 pm

    Daniel Cruz

    Responder

    Hola Cecilia Chávez, quisiera pedirte un por favor, que me dieras un temario específico de lo que se podria dictar en un curso de Diseño gráfico orientado a la web. He buscado y no encuentro. Gracias por el tiempo brindado.

  2. 17 de noviembre de 2019 at 1:37 pm

    victor

    Responder

    Si mi trabajo consiste solamente en el diseño en Adobe Illustrator, para luego pasarlo al programador, ¿como se le indica, por ejemplo, si el Header es fijo, si una imagen tiene efecto Parallax y este tipo de detalles? ¿Hay alguna manera estándar de hacer este tipo de cosas en Illustrator o Photoshop, indicándolo de alguna manera en espacial? ¿Se añade alguna anotación de alguna manera que se entienda ese detalle? Agradecería la ayuda. Un saludo.

    1. 20 de noviembre de 2019 at 1:55 pm

      Cecilia Chavez

      Responder

      Hola Victor,
      Puedes generar una capa dentro del archivo de Illustrator con todos los comentarios y aclaraciones para el programador.
      Actualmente hay mejores programas para las creaciones de diseños web más prácticas, eficientes y rápidas. Te recomiendo Sketch (es la que utilizo yo) o si quieres seguir trabajando dentro de la plataforma Adobe, está el programa Adob XD.

      Espero haber solucionado tus dudas.

  3. 30 de mayo de 2017 at 11:31 pm

    Bobby

    Responder

    Heckuva good job. I sure apetacipre it.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *