Los 6 elementos gráficos imprescindibles para una página web

Por Daniela | Consejos sobre diseño

Top los 6 elementos gráficos imprescindibles para una página web

Cuando te pusiste a diseñar tu web, probablemente una de las primeras preguntas que te habrán venido a la mente fue ¿cuáles son los elementos gráficos imprescindibles que debe llevar mi web?

Bueno, tal vez no haya sido con esas palabras jajaja, pero tú me entiendes. ¿Como organizo la información? ¿Dónde pongo las imágenes? Y el texto… ¿mucho o poco? ¿Qué colores debería usar?

En fin, son muchas dudas las que probablemente hayas tenido, incluso puede que todavía te cuestiones si has colocado toda la información para que comunique correctamente.

Los elementos gráficos dentro de una web juegan un papel fundamental, ya que no solo las imágenes transmiten un mensaje, sino todo el conjunto.

Top 6 elementos gráficos imprescindibles para tu página web #diseñoweb #identidadgrafica Clic para tuitear

Imagina que entras en una web que tiene un montón de imágenes pero poquísimo texto, a no ser que sea un portfolio de un profesional o un álbum de fotografías de lugares para conocer, te quedarías con la necesidad de que te dieran más información.

Lo mismo si te encuentras con una masa de texto puro de más de 5000 palabras, sin ninguna imagen, es más complicado quedarse a leerlo entero.

Tanto si ya tienes en funcionamiento tu web o la estás creando, este listado te ayudará a tener una idea más amplia de los elementos que debes usar y el estilo que tienes que conseguir.

Imágenes

Las imágenes son el elemento gráfico por excelencia que mejor comunica. Si, aquí viene el super-conocido-y-repetido-un-millón-de-veces refrán “Una imagen vale más que mil palabras”. Por eso debemos hacer un uso correcto de ellas.

Antes de elegir cualquier imagen, primero debes elegir tu estilo, y luego incorporar imágenes que se adapten a este estilo. No puedes mezclar imágenes “Shabby Chic” con imágenes de “Estilo moderno”, porque no tienen coherencia entre sí.

Consejo práctico
Ve guardando las imágenes en la misma carpeta de tu ordenador, y la que veas que no “encaja” quítala.

También puedes ir guardando imágenes en un tablero de Pinterest, para reforzar y definir aún más tu estilo. Así cada vez que tengas dudas con respecto a usar una foto, compárala con las de este tablero.

No abuses de las imágenes, es decir, no llenes las páginas con imágenes, acuérdate que son muy potentes a la hora de comunicar. Si te pasas, puede que se genere demasiado ruido visual, y al final termines espantando a tu lector.

En tu página de inicio, una buena idea es poner una foto tuya. Las fotos con personas, generan más cercanía y confianza. Es importante que esta foto sea una imagen cuidada, ya que será tu carta de presentación para la gente que no te conoce.

Las fotos borrosas, con posturas forzadas, con los ojos rojos, que se noten que están hechas al “estilo cutre”, dan la impresión de descuido y desinterés.

Un fotógrafo profesional encontrará tus poses naturales, les aplicará los filtros que considere conveniente, buscará transmitir lo que tu quieres comunicar, y te encantará verte en esas fotos.

También es importante la ropa que te pongas y los elementos del entorno, ya que tiene que transmitir tu lado profesional.

Colores

Los colores son una excelente forma de guiar al lector dentro de tu página web.

Pero debes tener cuidado de no abarrotar de colores tu web, elige dos o tres colores de tu paleta cromática. Uno será el principal y los otros serán los secundarios.

Puedes utilizar los colores para los títulos importantes, textos cortos, llamadas a la acción, crear divisiones.

Dentro del desarrollo personal el color más utilizado es el azul, porque se le considera un color beneficioso tanto para el cuerpo como para la mente. Retarda el metabolismo y produce un efecto relajante. Es un color fuertemente ligado a la tranquilidad y la calma.

Aquí te dejo esta guía de colores con sus recomendaciones, para que elijas el que más se adecua a lo que quieres transmitir:

  • Azul: calma, paz, profesionalidad.
  • Verde: naturaleza, frescura, serenidad.
  • Amarillo: calidez, positividad, alegría.
  • Naranja: vitalidad, modernidad.
  • Violeta: sabiduría, espiritualidad.
  • Rosa: sensibilidad, inocencia, delicadeza, romántico.
  • Marrón: tierra, simplicidad, rústico.
  • Blanco: pureza, limpio, nobleza.
  • Negro: prestigio, valor, fortaleza.

Información obtenida desde este post.

Tipografía

Reconozco que la tipografía me encanta como elemento gráfico. De hecho mis preferidas son las Script con trazos delicados y muchos ribetes (como la del nombre de mi logo). Pero lamentablemente, son las que peor se leen, así que no las puedo incorporar tanto como quisiera.

Cuando elijas tipografías para tu web, es buena idea elegir solo dos o tres como máximo. Lo ideal es no utilizar muchas fuentes tipográficas, pero sí las suficientes como para generar contraste y variedad.

Cuando definas las fuentes que utilizarás, tienes que tener en cuenta que no choquen entre sí, es decir, que no sean las dos tan potentes que llamen la atención con la misma intensidad.

Tienen que trasmitir armonía visual cuando están juntas.

Hay varios tipos de fuentes, pero las más genéricas son:

Serif:

Son las que tienen como un apoyo en la base de la letra. Por ejemplo la tipografía Times New Roman.

Estas tipografías se utilizan para textos largos, permiten una lectura rápida y lineal, gracias al apoyo que te comenté antes. Por eso la mayoría de los libros con mucho texto utilizan esta tipografía.

Utilízala si el estilo de tu negocio es tradicional y clásico.

Sans Serif:

Son las que tienen trazo recto, como por ejemplo la Arial o Helvética.

También se pueden utilizar para textos largos dentro de una web. Aunque tienen un mejor uso en los títulos y textos cortos.

Elige esta tipografía si el estilo de tu negocio es moderno y fresco.

Script:

Estas fuentes son perfectas si el estilo de tu negocio es romántico y delicado. Hay que tener mucho cuidado en cómo las usas, por lo que te comenté que no se leen muy bien, por lo tanto no son aptas para textos largos.

Puedes utilizarlas en pareja con otra tipografía que sea más legible. Puedes incorporarlas en los títulos de tus post, en una llamada a la acción dentro de tu web, en tu logo.

Llamadas a la acción

Son importantísimas, ya que como su nombre indica, incitan al lector a realizar una acción dentro de tu web. Ya sea para darse de alta en tu newsletter, para realizar una compra o para ver otro contenido.

Para reforzar su cometido, aplícales el color más potente que tengas dentro de tu paleta cromática.

Evita poner distracciones alrededor, ya que perderá fuerza. Tu cliente potencial tiene que ver claramente qué es lo que tú quieres que haga: descargarse el ebook, pedir una evaluación gratuita, contratar tu servicio, apuntarse a un webinar, etc.

Indícale la acción a realizar y refuerza esta acción con un color que destaque del resto.

Espacios

Adoro los espacios en blanco dentro de una web. Espacios que dejen respirar a los demás elementos gráficos.

Seguramente te ha pasado que has entrado a una web, y tenía tanto contenido junto, amontonado, que te has ido sin leer prácticamente nada porque no sabías por dónde empezar a leer.

A ese espacio tan necesario me refiero.

Como referencia puedes utilizar estos parámetros
Tiene que haber 50% de espacio en blanco (o de cualquier otro color que utilices de fondo, aunque yo recomiendo el blanco para profesionales del desarrollo personal) y 50% con el resto de elementos gráficos.

Cuando coloques los elementos, comprueba que generan armonía visual, es decir, que la organización de los elementos te invita a seguir la lectura.

Por ejemplo, divide la página en varias secciones horizontales, y luego cada sección la puedes dividir en secciones verticales como en el dibujo:

Ejemplo organización elementos gráficos página Home

Iconos

Los iconos son imágenes sencillas y simplificadas que acompañan al mensaje que quieres comunicar.

Lo ideal sería que tuvieses iconos exclusivos tuyos, porque representarían con más claridad tu estilo. Pero si no los sabes crear, ni tampoco puedes invertir en un profesional que te los diseñe, existen iconos gratuitos. Elige el que más se acerque al tono de tu identidad gráfica.

Aquí te dejo dos páginas donde puedes descargarte iconos gratis (lo único que tendrás que acreditar al autor):

Flaticon

Freepik

Estos son algunos ejemplos de iconos:

Iconos creados por Freepik desde www.flaticon.com

Como ves es solo cuestión de conocer todos los elementos gráficos con los que puedes jugar para crear un web que comunique de forma correcta tu mensaje.

Acuérdate de que todos los elementos gráficos tienen que ser coherentes entre sí, tienen que llevar grabados tu propio estilo. Así de apoco tu audiencia empezará a reconocerte a través de tu gráfica.

Ahora que ya sabes los elementos gráficos imprescindibles para tu web y cómo hacer uso de ellos, te invito a que me cuentes ¿Te resultó difícil ordenar los elementos gráficos en tu web, cuál fue el obstáculo principal que tuviste?

Si te ha resultado útil el post, compártelo! 🙂

Seguir

Sobre la Autora

Ayudo a Profesionales del desarrollo personal, a trasmitir el mensaje adecuado para atraer a su audiencia, a través de una identidad gráfica coherente que proyecte su VALOR profesional. Una identidad gráfica diseñada adecuadamente, generará parte de esa confianza que necesita tu cliente para conectar contigo.

Deja un comentario:

Deja un comentario:

DESCARGA GRATIS TU CHECKLIST

conseguir más clientes #masymejoresclientes

Averigua si estás trasmitiendo el mensaje adecuado para atraer a la audiencia con la que quieres trabajar.

x