8 Herramientas de Diseño Visual para Mejorar tu Página Web

Bienvenid@ a un nuevo post de Coach2Coach.

8 Herramientas de Diseño Visual para Mejorar tu Página Web

Hace ya un tiempo prometí a alguien que escribiría un post como este (ellos saben quiénes son, ¿verdad, Andrés?), en el que enumerar algunas de las herramientas de diseño visual para mejorar una página web. Por fin ha llegado el momento.

Cuando diseñamos páginas web, los elementos visuales son muy importantes. No solamente porque las imágenes, otros elementos visuales y la apariencia pueden ser capaces de crear un estado de ánimo y cosas por el estilo.

Sino porque, además, las imágenes ayudan al posicionamiento orgánico, si se configuran bien. En el post Cómo elegir y optimizar imágenes para tu página web tienes info sobre eso y también bancos de imágenes. Pero hoy excluimos los bancos y los optimizadores de imágenes y nos centramos en herramientas de diseño para tu página web que pueden mejorar su apariencia.

Un diseñador web en WordPress tiene que estar siempre a la última, no solo en temas de usabilidad, funcionalidad, etc. Naturalmente, los elementos visuales y estéticos de una página web son importantísimos. Así que estas son las herramientas de diseño que yo uso regularmente para mi página web. Pero desde luego, hoy en día hay miles, no solamente estas.

Yo solo puedo hablar por las que utilizo habitualmente y me funcionan a mí. También he incluido algunas que utilizo más a nivel personal (como PicMonkey) y un par de ellas que utilicé en su momento y me encantan, pero ya no utilizo, como VideoScribe de Sparkol y PowToons.

Lo que no son las herramientas de diseño que vas a ver

No son Programas o Herramientas de Diseño Web o para crear páginas web

Si buscas programas o herramientas para diseñar tu página web, entonces no estás en el lugar adecuado. Y para no variar, te diré que hoy día la mejor herramienta de diseño web es WordPress y en este post tienes algunas razones por las que es lo mejor para tu negocio online.

No son Programas ni Herramientas de Desarrollo web

Naturalmente, estas herramientas de diseño para tu página web contribuyen o ayudan al desarrollo y creación de tu sitio, pero no son herramientas de desarrollo web como tal. Pero no busques aquí programas para el desarrollo de páginas web.

Herramientas de desarrollo web serían, por ejemplo, HTML5 y CSS. Si me tiras un poco de la lengua, te diría que podríamos considerar incluso Notepad++ o cualquiera de las excelentes páginas web de pruebas y tutoriales HTML que también uso a menudo y que ayudan un montón. No son estrictamente herramientas de desarrollo, pero sí que te hacen la vida más fácil.

No son, exactamente, Programas de Diseño Gráfico

La mayoría de las herramientas de diseño para tu página web que vas a ver aquí no son programas ni herramientas de diseño gráfico. Diseño gráfico, como tal, son palabras mayores.

De esta lista, exceptuando Adobe Photoshop, que sí lo es, y Canva, que también tiene características propias del diseño gráfico, y Color Hex, que te ayuda con los colores, el resto no lo son. Illustrator, Corel Draw, etc., ESOS sí son señores programas de diseño gráfico.

Y, sin embargo, hay cientos de herramientas de diseño visual

Si pones herramientas de diseño para web en Google y entras en varios de los artículos al respecto, te darás cuenta de lo que digo. Hay cientos, ¡o miles!, de herramientas para mejorar visualmente el look de tu página web y la experiencia de tus usuarios (que tiene una repercusión directa en la usabilidad web y por tanto en su posicionamiento, pero eso son otros temas).

La cosa está en probar unas pocas y empezar a elegir y descartar. No te vayas a emocionar y empieces con 40 a la vez. Es muy excitante al principio, pero después es más bien abrumador y estresante (…dijo la voz de la experiencia…).

Bueno, pues vamos ya con esas

Herramientas de diseño para tu página web

CANVA

herramientas diseño gráfico
Herramientas diseño gráfico: Canva

Ay, no podría ya vivir sin mi Canva.

Canva es una herramienta de diseño visual que dará un toque personal y original a tu página web. Digamos que Canva es una herramienta propiamente dicha de diseño gráfico, pero simplificada. Yo la uso tanto para mi propio sitio, como para los diseños web en WordPress de mis clientes.

Con Canva puedes crear elementos visuales de todo tipo, desde subir una foto que ya tienes en tu repositorio y añadir textos, más imágenes etc., hasta crear una imagen desde cero. También puedes hacer covers de Facebook, tarjetas, flyers, … en fin. Es una de mis favoritas.

Canva fomenta tu creatividad y además es buena para tu SEO. ¿Cómo? Sip. No sé si sabrás que a Google le gustan mucho las imágenes nuevas en su repositorio. Si usas imágenes originales será mejor para tu posicionamiento que si usas otras que ya están previamente indexadas por Google. ¿¡Qué te parece!?

¿Lo mejor de Canva? Su sencillez. No soy muy diestra en Photoshop, así que, en ocasiones, Canva es capaz de sustituir a la herramienta de diseño gráfico de imágenes por excelencia. Además, es que te haces con ella en dos minutos. Y, de todos modos, al darte de alta, te enviarán una guía para que te sea más fácil todavía.

Si entiendes inglés, tienes una versión mucho más completa.

RECORTES Y CAPTURA DE PANTALLA (SCRINPRINT)

¿Te sorprende? Pues es que a mí esta opción de recortes me sirve mucho como herramienta de diseño visual para los posts.

A veces necesito explicar partes de, no sé, el escritorio de WordPress, por ejemplo, y no hay mejor forma que mostrarlo gráficamente con una imagen recortada de mi propia pantalla.

¿No sabes cómo hacerlo?

Si quieres hacer una captura de tu pantalla, tal cual, solamente tienes que presionar un botón de tu teclado: IMPR PANT (o Print Screen si tu teclado es en inglés). Está a continuación del F12. Después vas al documento donde quieras pegarlo y haces Ctrl+V. Si quieres guardar esa imagen para después usarla en el diseño de tu página web o uno de tus posts, haz clic derecho y selecciona Guardar como imagen. Nombra la imagen y guárdala donde quieras. Recuerda que, para optimizar la imagen, si es necesario, deberás seguir los pasos que te explico en el post de optimización de imágenes que menciono al principio del post.

Si solamente quieres copiar una sección o parte de tu pantalla, entonces es mejor que uses la herramienta Recortes de Windows. Para encontrarla, no tienes más que abrir el menú de inicio y teclear snippingtool o recortes en la casilla de búsqueda. Ábrela y verás qué fácil es usarla.

(En Mac: Command + mayúsculas + 4).

Yo la uso muchísimo. Te puedes dar una vuelta por el blog y te darás cuenta de que entre Canva y recortes, hacen más del 50% de mis imágenes. Este mismo post es buena prueba de ello.

PHOTOSHOP

herramientas de diseño mejorar página web
Herramientas de diseño mejorar página web: Photoshop de Adobe

Aunque Photoshop es considerada como una herramienta de diseño gráfico, en realidad es un programa que se enfoca principalmente en solamente imágenes digitales. De cualquier modo, entra perfectamente en el saco de herramienta de diseño visual que puede mejorar tu página web.

Photoshop es el programa más utilizado para manipular imágenes de mil formas diferentes. Desde optimizar su peso y calidad hasta crear efectos que no se te ocurrirían en un millón de años.

Lástima que no tengo tiempo físico para aprender Photoshop algo más que para usarlo de forma bastante torpona y lenta. Ojalá tuviese más tiempo para aprenderlo mejor. Pero, hey, ¡no se puede tener todo en la vida! Lo cierto es que es un programa flipante y completísimo para imágenes, aunque complicado para mi nivel.

PICMONKEY

recursos diseño para paginas web
PicMonkey es otro de los recursos diseño para paginas web, aunque yo lo uso más a nivel personal.

Si te digo la verdad, no sé ni cómo fui a dar con este programa de edición de imágenes online. Es una herramienta similar a Photoshop, pero mucho más fácil de usar. También es cierto que es más limitada para un buen diseño gráfico de una página web. Tienes opción de usar la versión de pago.

Yo solamente la tengo para uso personal, la verdad. Como hay tantas otras que creo son mejores herramientas de diseño para mejorar tu web, pues qué quieres que te diga. Esta la veo más para hacer ajustes y algún que otro efecto facilongo a imágenes de Nochevieja, por ejemplo.

Eso sí, para uso personal, es la única que utilizo.

COLOR HEXYELLOWPIPE

herramientas diseño visual diseño web
Herramientas diseño visual para el diseño web: Los colores son importantísimos en el diseño web.

Estas dos herramientas de diseño para tu página web tienen que ver con los colores. Tal vez hay por ahí alguna otra herramienta del estilo que sea mejor o más moderna (seguramente sí), pero son las que me he acostumbrado a usar y me va genial.

Explico lo de Hex brevemente. Los colores en HTML se expresan en código hexadecimales. Esto quiere decir que se expresan en números (0 – 9) y letras (A – F). Hay una serie de 216 colores Hex, de todas las combinaciones posibles de esos números y letras, que son colores seguros para uso en páginas web. No es obligatorio que contengan ambos, números y letras, y siempre han de ir precedidos por un hashtag (#).

Los colores hex tienen su correspondencia en otro tipo de paleta de colores llamada RGB (Red, Green, Blue). Estos se representan en valores con este formato: nnn, nnn, nnn. Por ejemplo: el color hex que prima en esta web es el #e7276f. Es un rosa muy fuerte casi rojo. Pues ese código tiene su correspondencia en RGB que es: 231, 39, 111. Lo anterior quiere decir que el color lleva 231 unidades de rojo, 39 de verde y 111 de azul.

A veces es necesario hacer conversiones de Hex a RGB y viceversa. Eso es lo que podemos hacer fácilmente en cualquiera de las dos herramientas que cito en el encabezado. He puesto ambas, aunque color hex sirve tanto para verificar o buscar colores, como para calcular los equivalentes. Y Yellowpipe tiene otras funciones también.

herramientas diseño visual
Otra de las herramientas de diseño visual para convertir códigos de colores

POWTOON

herramientas de diseño visual para mejorar tu página web
Otra de las herramientas de diseño visual para mejorar tu página web es PowToon

Powtoon no se puede calificar de herramienta de diseño gráfico, pero sí de diseño… para mejorar tu página web. Powtoon es una herramienta para crear vídeos, compuestos de imágenes y textos en movimiento. En fin, es una herramienta que puede mejorar la experiencia de tus usuarios en tu página web. Si eres habilidoso con estas cosas de los vídeos, puedes crear escenas divertidas, llamativas, impactantes, novedosas o beneficiosas para tu página.

Tienes una versión gratuita y versiones de pago con más prestaciones. La verdad, si eres lo suficientemente creativo, igual no te hace falta tener más que lo que ofrece la versión gratis. Te dejo un vídeo que hice yo en hace mucho tiempo… exactamente 4 años y medio, recién nacidos Powtoon. Bueno, te dejo el vídeo. Es cortísimo y de cuando yo todavía no hacía web coaching sino coaching a secas. No me mates. Sólo pretendo que lo veas desde la perspectiva técnica.



VIDEOSCRIBE DE SPARKOL

herramientas y recursos de diseño
Más herramientas y recursos de diseño, en vídeo

Reconozco que mi debilidad por el inglés británico es grande. Cuando conocí Videoscribe creo que decidí probarla solo porque era una startup inglesa, y de Bristol, una de mis ciudades favoritas de la UK (damn effing brexit).

Tampoco se puede calificar a este software online estrictamente como de diseño para tu web, igual que Powtoon. En su día podías acceder a una semana de prueba gratuita. Para practicar al máximo, me di tal tute de Sparkol que saqué en una semana como 7 u 8 vídeos. Y te aseguro que, al principio, fácil, no es.

En realidad, solamente necesitaba esta herramienta para hacer un par de vídeos para mi canal de YouTube, así que me puse a crear y probar y testear y bueno, no me puedo quejar de lo que salió en tan solo una semana de prueba. Después la abandoné, pero realmente es una buena herramienta para mejorar la experiencia de tus usuarios o crear vídeos para tu canal de YouTube.

Como no podía ser de otra manera, te tengo que dejar uno de esos vídeos. Jajaja. Siento que tengas que sufrirlos. No, en serio. Te dejo una de las primeras pruebas que hice, por eso es el más corto.



PIKTOCHART

diseño visual para páginas web infografías
Otro recurso de diseño visual para páginas web son las infografías

Si eres más de crear elementos visuales estáticos diferentes de las típicas imágenes, … o sea, si eres más de crear infografías, te recomiendo Piktochart.

Es, como tantas otras, un software o aplicación online que te permite crear infografías, de forma simple y sin necesitar grandes conocimientos. Ahora, la infografía te la vas a tener que currar.

Hubo una época en que todo el mundo hacía infografías. Parece que todo son modas. Últimamente veo pocas. Aun así, sigo mencionando esta herramienta de diseño para tu página web porque las infografías siguen siendo muy útiles si están bien hechas. Se comparten, se mueven, se difunden… Yo, seguiría teniéndola en cuenta.

GOOGLE FONTS

las fuentes son otro recurso de diseño visual de una página web
Fuentes: otro recurso de diseño visual de una página web

Bueno, es que las fuentes no podían falta en el saco de las herramientas de diseño para mejorar tu página web. Las fuentes son una de las cosas más importantes del diseño visual de un sitio web.

Google Fonts es un espacio online de Google en el que se reúnen miles de fuentes disponibles para tu página web de forma gratuita. Aquí tienes un repositorio de fuentes de todo tipo que puede que sean adecuadas para el diseño de tu página web o puede que no. Ten cuidado con la o las que eliges. También otra cosa. No te confundas. Que sean gratuitas y que estén ahí disponibles, no quiere decir que tu tema de WordPress (o de lo que sea) las admita así como así. Pocos temas gratis de WordPress pueden ser configurados en ese sentido. Que no se pueden cambiar las fuentes, vamos (a menos que sepas cambiar el código fuente, claro).

Como decía al principio, la mayoría de éstas las uso a menudo. Las uso en mis propias páginas web y en las de mis clientes. Las que dejé de usar no fue porque no cumpliesen su función o porque dejasen de gustarme. Dejé de usarlas porque ya no las necesitaba para mis objetivos o porque no tengo tiempo. Por ejemplo, Powtoon o Piktochart. Por eso, aunque no cabe duda de que hay herramientas que son mejores y herramientas que son peores, creo que:

La mejor herramienta de diseño para mejorar tu web es aquella con la que, estando a la altura de tus expectativas, TÚ te sientas más cómodo/a trabajando.

Ahora te recomiendo que te pases por el post sobre imágenes que te mencionaba al principio de este post, para saber cómo elegir y optimizar tus imágenes y elementos visuales.

Si tienes un rato, molaría que nos dejases tus comentarios o algunas de las herramientas que tú usas para mejorar el diseño de tu página web. ¿Te animas a compartirlas con nosotros?

La entrada es un artículo original de Diseño Web WordPress.

Fuente: este post proviene de este blog, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Actualizar Temas de WordPress Tal vez ya te has enfrentado alguna vez a ello, actualizar temas de WordPress, cada vez que recibes el aviso de que hay una actualización disponible. Actualizar tu tema ...

Qué son los child themes o temas hijo de WordPress Al principio de usar WordPress, recuerdo que el tema de los child themes o temas hijo me volvía loca. No había mucha información sobre ello y la que ...

Recomendamos

Relacionado

WordPress

Bienvenid@ a un nuevo post de Coach2Coach. 13 Herramientas para analizar tu diseño web en WordPress En estos días he estado buscando herramientas útiles para analizar tu diseño web en WordPress en términos de velocidad, marcadores sociales, programación, SEO, etc. Como he encontrado unas cuantas, he pensado en compartirlas contigo. Este post es algo más corto de lo que acostumbro, pretendo escribi ...

DISEÑO WEB GUÍAS Programación Web Herramientas ...

En la actualidad existen multitud de herramientas de diseño web profesional que son capaces de facilitar muchas tareas. Por eso hemos intentado realizar una selección de esas herramientas para diseñadores web profesionales que merece tenerlas a mano. Puede que algunas no las utilices en meses, pero pueden sacarte de más de un apuro o simplemene agilizarte el trabajo. Herramientas de diseño web y p ...

Internet Diseño web Software

Los profesionales del diseño web tienen a su alcance numerosas herramientas, pero si quieres probar suerte y comenzar a dar tus primeros pasos en el mundo de la creación web, hoy hablaremos de los mejores softwares para crear y llevar adelante tu página. Muchas de estas herramientas son conocidas por los profesionales, así que si aspiras a convertirte en uno de ellos, tienes que ir dominándolas de ...

Publicidad

En el post anterior te hablamos de la importancia de la imagen corporativa, si quieres dar una buena imagen es imprescindible que tu web esté adaptada a tu identidad y que sea útil para los usuarios. A continuación te explicamos cómo mejorar y actualizar el diseño de tu página web Actualizar la imagen de la página web de tu empresa es importante para que consigas destacar sobre la competencia,  ma ...

Página web para Recomendados

Diseño web Madrid Página web para traducir documentos Buscando una Página web para traducir documentos Hoy, y sin pensarlo demasiado, estaba buscando la forma de traducir un documento a otro idioma de unas 32 páginas. Encontré una estupenda Página web para traducir documentos que no sólo traduce documentos sino que te ofrece otras herramientas muy rápidas y útiles. Por estas cosas si que merece ...

Diseño Web (cat)

Bienvenid@ a un nuevo post de Coach2Coach. 13 Herramientas para Analizar tu Diseño Web En estos días he estado buscando herramientas útiles para analizar páginas web en términos de velocidad, marcadores sociales, programación, SEO, etc. Como he encontrado unas cuantas, he pensado en compartirlas contigo. Este post es algo más corto de lo que acostumbro, pretendo escribirlo en un par de horas. Tamb ...

general blogs herramientas ...

Comprime las imágenes de tu sitio web y aumenta la velocidad de carga. En notas anteriores, hemos hablado sobre la gran importancia que tiene el manejo de las imágenes en la comunicación de las ideas, a través de nuestro sitio web o blog. El material gráfico es de gran importancia hoy en día y que nos ayuda a crear mensaje más eficientes. Sin embargo el tener muchas imágenes en nuestro sitio web ...

entretenimiento seo tools seo ...

Todos aquellos que tengan una página web y se dediquen cien por ciento a configurar su contenido, deben optar por aplicar las estrategias que los hará triunfar en Internet, es decir, el posicionamiento web, mejor conocido como el análisis SEO. Si estás leyendo este artículo y no te encargas al cien de tu sitio web, continúa leyendo porque a continuación te explicaremos cómo lo podrás mejorar tú mi ...

general artículos blogs herramientas seo ...

Herramientas web Google analytics: con esta herramienta podrás ver todo el tráfico que tiene tú página web. Google webmaster: por medio de esta herramienta podrás corregir los principales errores de tu página web Searchmetrics: Esta herramienta es perfecta para que puedas descubrir que cosas están mal en tu página y en caso de que no lo sepas, porque cosas te debe haber penalizado google. Puedes r ...

desarrollo web inteligencia artificial

Para el año 2024, la IA se ha vuelto fundamental en el diseño web. La IA facilita análisis de datos, por eso, los sitios web podrían ajustarse instantáneamente para proporcionar una experiencia más valiosa y agradable para cada visitante. La inteligencia artificial también se utilizará para mejorar el diseño visual y la usabilidad del sitio. Los sistemas de IA pueden procesar grandes volúmenes de ...