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
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
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
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 HEX y YELLOWPIPE
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.
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
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
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
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:
