Tecnología

Web Coach Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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 Web Coach, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Envía una notificación de una presunta infracción de derechos. También puedes hacerlo a través de nuestro formulario de contacto.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Debo usar Facebook para Atraer Clientes?

Bienvenid@ a un nuevo post de Coach2Coach. Usar Facebook para Atraer Clientes Todos los que me siguen saben que no soy muy amiga de las redes sociales y que no creo en ellas como un método efectivo de ...

Diccionario SEO de Coach2Coach

Bienvenid@ a un nuevo post de Coach2Coach. Diccionario SEO Te presento un diccionario SEO para que conozcas algunas definiciones de términos básicos relacionados con el SEO o posicionamiento orgánico. ...

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

Publicidad

Cómo mejorar y actualizar el diseño de tu página web

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

WordPress

13 Herramientas para Analizar tu Diseño Web en 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 (cat)

13 Herramientas para Analizar tu Diseño Web

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 artículos blogs herramientas seo ...

Herramientas web

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

Diseño de páginas web Diseño web Monetiza tu Web

Trucos de diseño web para tu página profesional

Si estás pensando en realizar un diseño de página web para un sitio profesional, entonces toma nota de estos trucos. Seguro te ayudarán a obtener el mejor resultado con tu web para que los usuarios lleguen se sientan cómodos y puedan apreciar tus servicios de manera eficiente, simple y rápida en la web. Limpio y fácil de usar Hoy en día hay muchos sitios web, y muchos de ellos tienen diseños caóti ...

general diseño web hacer una web ...

Tutorial de Diseño Web

Bienvenid@ a un nuevo post de Coach2Coach. El único servicio de Coaching de posicionamiento y marketing online en España. Tutorial de Diseño Web Diseño web definición: Se define diseño web como la actividad que consiste en la planificación, estructuración, diseño e implementación de un sitio web. No es simplemente una aplicación del diseño convencional sobre Internet, como hacerlo gráfico para exp ...

entretenimiento seo tools seo ...

Mejora la página web de tu negocio y utiliza herramientas gratis

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 blogs herramientas ...

Herramientas para comprimir las imágenes de tu sitio web.

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

Diseño Gráfico Marketing Online Posicionamiento web

5 consejos para diseñar tu página web

El diseño web está en constante cambio y requiere de un conjunto de estrategias para que nuestra página sea un gran vendedor de los servicios que ofrece al consumidor. Así pues debemos captar el interés de nuestro público y que la navegación que realice en nuestra página sea fluida y no ocasione impedimentos. Me refiero a que las páginas no carguen muy lentas y que el sitio web sea lo más dinámico ...

Diseño Web consejos diseño web consejos usabilidad ...

5 Consejos para Mejorar la Usabilidad de tu Diseño Web ¡Fácil!

Bienvenid@ a un nuevo post de Coach2Coach. El único servicio de Coaching de posicionamiento y marketing online en España. Mejora la Usabilidad de tu Diseño Web sin complicaciones Mejorar la usabilidad de un diseño web puede parecer irrelevante pero es uno de los factores más importantes a la hora de posicionar tu página. Uno de los factores más importantes para que Google te quiera mucho es el fac ...