Ebook herramientas de diseño

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES Guía imprescindible de recursos de diseño gratuitos para tus proyectos

MARÍA LÁZARO ÁVILA

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

www.hablandoencorto.com

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES Guía imprescindible de recusos de diseño gratuitos para tus proyectos

© MARÍA LÁZARO ÁVILA, 2016 Blog: www.hablandoencorto.com Twitter: @marialazaro Obra bajo licencia Creative Commons 4.0 “Reconocimiento - NoComercialCompartir Igual”: http://creativecommons.org/licenses/by-nc-sa/4.0/ Se puede copiar, distribuir y comunicar públicamente la obra y hacer obras derivadas bajo las siguientes condiciones: qDebes reconocer que María Lázaro Ávila es la autora. qLa explotación de la obra queda limitada a usos no comerciales. qLa explotación autorizada incluye la creación de obras derivadas siempre que mantengan la misma licencia al ser divulgadas.

¿QUIERES RECIBIR CONTENIDOS EXCLUSIVOS SOBRE MARKETING, COMUNICACIÓN Y SOCIAL MEDIA? APÚNTATE GRATIS A LA NEWSLETTER DE MI BLOG ‘HABLANDO EN CORTO’ EN: www.hablandoencorto.com/p/suscribete.html HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

ÍNDICE 1_ Introducción

04

2_ Cómo crear tu logo online

06

3_ Dónde descargar imágenes gratis y de forma legal

12

4_ Cómo conseguir iconos e ilustraciones para tus proyectos

17

5_ Claves para diseñar infografías, paso a paso

20

6_ Cómo elaborar nubes de palabras sin instalar programas

23

7_ Cómo desarrollar imágenes con frases en unos minutos

26

8_ Cómo optimizar el peso de las imágenes

29

9_ Sobre la autora

31

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

03

1_ INTRODUCCIÓN Todo nuevo proyecto requiere algún elemento de diseño. Ya sea un negocio, una presentación, una web o blog, un documento, un ebook: antes de “empezar a ser”, fue una página en blanco sobre la que extender un trazo.

Pero no siempre hay recursos para ello. No siempre se cuenta con presupuesto para comprar imágenes, adquirir ilustraciones, diseñar una infografía, crear un logotipo. Y aunque lo más aconsejable sea contratar un diseñador, en ocasiones la realidad, tozuda, nos dice que no hay margen.

Y otra veces, simplemente, se trata de optimizar la posible inversión, o poner a trabajar la imaginación.

Este ebook nace con la vocación de ayudar a todos aquellos que, sin ser diseñadores ni poder contar con un profesional externo, necesitan desarrollar piezas y elementos de diseño para sacar adelante su proyecto. “Herramientas de diseño para no diseñadores. Guía de diseño imprescindible de recursos de diseño gratuitos para tus proyectos” está especialmente dirigido a: q Autónomos y freelances que precisan recursos gráficos para sus trabajos, y no cuentan con presupuesto para ello. q Pequeños emprendedores que no pueden invertir grandes presupuestos en diseño, porque aún están arrancando. Pero lo necesitan. q Profesionales que buscan complementar sus herramientas de diseño habituales para equilibrar presupuestos. q Mentes inquietas y curiosas que quieren desarrollar sus habilidades y dotes creativas, y no saben de qué herramientas echar mano. q Estudiantes sin ingresos, pero con ganas de dar un toque de diseño a sus propuestas.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

04

Porque si tienes capacidad, lo mejor para desarrollar un proyecto de diseño es contar con un diseñador. Pero si no dispones de estructura, aquí tienes multitud de recursos, tutoriales y consejos prácticos para crearlos tú mismo, paso a paso. Todas las herramientas de este ebook han sido previamente testadas por mí, no es una recopilación aleatoria: funcionan y son útiles, lo sé porque lo he comprobado.

Eso sí, antes de ponerte manos a la obra, recuerda: q Prueba las diferentes herramientas de cada categoría y decide cuál responde mejor a tus expectativas. En cada selección encontrarás pequeñas variantes, para complementar diferentes necesidades. q Para aprender más rápido, recurre a las plantillas predeterminadas. q Personaliza, en la medida de lo posible, el resultado final. Dale tu propia identidad. qEvita los diseños muy cargados, o de difícil legibilidad. Restarán más que sumar.

Y ahora, adelante: aquí tienes todo listo para empezar a diseñar.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

05

2_ CÓMO CREAR TU LOGO ONLINE Ocurre a veces: te planteas lanzar un proyecto, desarrollar un negocio, potenciar tu marca personal, poner en marcha una web o blog, idear un catálogo de servicios, emprender… Y necesitas un logo, pero ni eres diseñador, ni tienes de momento capacidad para invertir dinero en ello, o no sabes a quién recurrir. ¿Te suena esta situación?

Tengo dos noticias: una buena y otra… menos buena.

La buena es que existen múltiples webs con las que crear tú mismo tu logo en apenas unos minutos, sin coste, con variadas opciones de personalización, estilos y colores.

La menos buena es que diseñar un logotipo efectivo, un buen logo, no es fácil. No basta sólo con darle al clic. Por eso, antes de contarte dónde y cómo desarrollar tu propio logotipo, ocho consejos prácticos:

1

Piensa qué quieres transmitir Tal vez sea prematuro trazar un estudio de valores de marca, pero en cualquier caso, pregúntate qué quieres proyectar, qué es lo que te caracteriza: ¿innovación, tradición, sobriedad, lujo? Y además, ¿a qué tipo de público va dirigido el logo?

2

Decide los elementos ¿Un texto con símbolo, o sólo texto? ¿Unas siglas con un desarrollo de texto, o sólo las siglas? ¿Con o sin claim? Recuerda que cuanto más recargado y más detalles tenga el logo, más complicada será su reproducción en determinados elementos de papelería, merchandising, incluso la web. Por eso, cuanto más simple, mejor: más fácil será de identificar, reconocer y recordar.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

06

3

Busca versatilidad y adaptabilidad Ten en cuenta los tamaños mínimos de reproducción necesarios, tanto en papel como en entorno online, para una correcta legibilidad. ¿En qué soportes vas a reproducirlo? ¿Se leerá bien en un tarjeta de visita? ¿Lo vas a usar como avatar en un perfil de Twitter, Facebook o cualquiera otra red social? En ese caso, por ejemplo, comprueba cómo se percibirá en el time-line de un usuario desde dispositivo móvil: ¿se distingue bien? Tal vez sea mejor crear dos composiciones, una más sencilla y otra con el desarrollo completo de todos los elementos y texto.

4

Elige bien los colores Cuantos más tenga, más complicado será reproducir el logo de forma fidedigna en las diferentes aplicaciones. Si tienes curiosidad, puedes investigar también un poco sobre psicología del color y los valores asociados (ya sabes: rojo se suele identificar con pasión, naranja con confianza, verde con salud, etcétera), pero te advierto que no es inamovible y que además cambia según los países y las culturas. Piensa también que la paleta de colores que selecciones para el logo te puede servir de base para otros documentos que desarrolles, y consolidar así la identidad corporativa.

5

Cuida la tipografía Hay muchísimas, y para todos los gustos. Lo principal en cualquier caso es que tu logotipo se entienda bien. De nuevo, menos es más: cuanto más simple, mejor.

Pregúntate qué quieres proyectar, qué te diferencia y caracteriza. ¿A qué tipo de público te diriges? Cuanto más simple sea el logo, más fácil de identificar y recordar

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

07

6

Comprueba versiones en positivo y negativo Revisa que el logo no genera problemas de comprensión si por algún motivo necesitas reproducirlo a un solo color y que funciona bien en positivo y en negativo. Evita sombras, degradados y bordes con volúmenes: mejor colores planos.

7

Sé único Aunque esto es más complicado cuando utilizas herramientas de diseño online: dedica un tiempo a personalizar las opciones. En caso de duda, busca y compara diseños en Internet.

8

Registra tu logo Suele olvidarse, y es esencial. En España el organismo responsable del registro de marcas y nombres comerciales es la Oficina Española de Patentes y Marcas (OEPM) (www.oepm.es). La tramitación se realiza online.

¿Empezamos a crear el logo? A continuación tienes cuatro herramientas online y gratuitas para desarrollar tu logomarca.

En el diseño evita sombras, degradados y volúmenes, y ten en cuenta los tamaños mínimos de reproducción necesarios.

Busca flexibilidad y adaptabilidad

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

08

Cuatro herramientas gratuitas para diseñar tu logo En Internet puedes encontrar infinidad de herramientas para desarrollar tu logomarca, unas más complejas, otras más sencillas. Todo dependerá de la capacidad de ingenio que seas capaz de poner en marcha, y si quieres aprovechar para diseñar material de merchandising o promocional adicional, con tu nuevo logo.

Aquí tienes una selección de las herramientas más versátiles: FreeLogoServices ­— www.freelogoservices.com Selecciona la categoría sectorial a la que pertenece tu logo, y decide si quieres el texto a una o dos líneas. El sistema te propondrá una serie de combinaciones de tipografía y símbolos, en las que puedes editar colores, tamaño, tipo… Incluye la opción de desarrollar tarjetas de visita, aplicación de logo en merchandising… Para descargar el archivo de logo tendrás que registrarte.

Con FreelogoServices puedes editar colores, tamaños, tipografías... y explorar la aplicación del logo en artículos de merchandising y tarjetas de visita.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

09

DesignMantic ­— www.designmantic.com Introduce el texto y la categoría industrial, y selecciona entre las combinaciones de símbolo disponibles. Puedes girar el diseño, mover el texto, cambiar colores, tamaños, tipografías, añadir texto extra… La descarga exige registro previo. La web ofrece también diseños de tarjetas de presentación, camisetas, encabezados de redes sociales…

Con DesignMantic puedes girar el diseño, añadir texto adicional y aplicarlo a tarjetas de presentación, camisetas, imágenes para redes sociales...

LogoFactory ­— www.logofactoryweb.com Herramienta mucho más simple que las anteriores. No hay aquí clasificación por categorías, ni propuestas automáticas: eliges entre casi 500 símbolos, añades texto y listo. Puedes modificar tipografía, tamaño y color de texto y ubicación del símbolo, pero poco más. Para descargar el logo debes proporcionar tu mail.

LogoFactory es una herramienta más simple, en la que puedes elegir entre unos 500 símbolos.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

10

Logosea ­— http://logosea.com Esta web te permite diseñar tu logo desde cero, o seleccionar entre plantillas ya elaboradas. En el primer caso, introduces el nombre de la marca, eliges tipografía y colores, y a continuación tienes la opción de subir una imagen propia, o elegir entre símbolos proporcionados por la herramienta. Si prefieres trabajar con plantilla predeterminada, bastará con que introduzcas el nombre de la marca y definir tipografía y categoría sectorial: podrás seleccionar entre las combinaciones propuestas, pero no modificarlas con la herramienta. También tendrás que registrarte para descargar el logo.

Logosea permite diseñar tu logo desde cero, o hacerlo a partir de plantillas ya prediseñadas.

Comprueba si la herramienta permite añadir texto, girar diseños, modificar colores y tipografías o aplicar el logo en artículos de promoción, y elige la que te interese

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

11

3_ DÓNDE DESCARGAR IMÁGENES GRATIS Y DE FORMA LEGAL “Una imagen vale más que mil palabras”. Bueno, quizá no tanto, pero sí es cierto que las fotos son el complemento perfecto en una presentación, blog o web: los post con imágenes se leen más, y el lector les dedica más tiempo. Si es posible, conviene ilustrar el post con una imagen, al menos conceptual.

Ahora bien, no siempre se dispone de presupuesto para comprar fotos (y menos aún, si se trata de un blog sin fines comerciales o en sus comienzos). Entonces, ¿qué hacer? Para empezar, hay que descartar de plano recurrir a Google Images: que una foto esté publicada en Internet no significa, ni mucho menos, que pueda reutilizarse a gusto del usuario: el copyright existe y seguirá existiendo.

Y existen, también, webs de imágenes de descarga gratuita, totalmente legales, a las que acudir. Aunque antes de empezar a seleccionarlas, conviene tener en cuenta algunos consejos sobre el uso de imágenes en un blog o web.

Cómo utilizar (bien) una imagen en tu blog o web Cuestiones legales, cómo aprovechar las fotos para intentar aumentar el tráfico hacia tu web, peso y formato de la imagen, ubicación... Hay cinco detalles que no debes pasar por alto:

1

Comprueba siempre las condiciones de uso de la foto o ilustración Si es gratuita, probablemente exigirá que en el mismo post en el que se publique, se indique el autor y la procedencia de la imagen, con link al sitio de descarga. Puedes ponerlo junto a la foto o al final del post. Pero hay que incluirlo.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

12

2

Optimiza la imagen para los buscadores En otras palabras: haz un poquito de SEO, contribuirá a que tu blog se posicione en las búsquedas online. Piensa cuáles son las palabras clave más relevantes para la foto, e inclúyelas en las etiquetas “alt” de texto alternativo y “título”. Si tienes alojado tu blog en Blogger (como “Hablando en corto”), sólo tienes que desplegar el apartado de “Propiedades” cuando subas la imagen a tu post, y rellenar estos dos campos. No olvides también nombrar el archivo de la foto de forma adecuada (olvídate del típico “Imagen1.jpg”).

3

Procura que las imágenes no pesen mucho Ralentizarán la carga del blog, y será contraproducente para el posicionamiento en buscadores. Eso sí, sin menoscabar la calidad de la foto.

4

Revisa el formato

5

Abre tu post con la imagen, si es posible

Mejor si es jpg, gift o png, a Google le gusta más. No es conveniente que uses tiff ni bmp.

Ejercerá de “foto de portada” de la página… aunque luego, obviamente, puedes utilizar más a lo largo del artículo. Es más: es recomendable incluir fotos intercaladas en el texto.

No recurras a imágenes de Google Images: que una foto esté publicada en Internet no significa que puede reutilizarse a gusto del usuario: el copyright existe, y seguirá existiendo

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

13

Webs de imágenes gratuitas… y legales Aquí tienes 5 plataformas de imágenes gratuitas a las que acudir:

Dreamstime ­— www.dreamstime.com Contiene más de 19 millones de fotos e ilustraciones, aunque ojo, no todas son gratuitas: debes realizar la búsqueda en el apartado de “Free Images”. Exige registro previo, y al descargar la primera imagen tendrás que completar datos personales como dirección postal y teléfono. Para publicarla legalmente, hay que incluir el autor y un link a Dreamstime (que la propia web proporciona en el momento de la descarga). También da la opción de embeber la imagen.

Dreamstime contiene más de 19 millones de fotos, aunque no todas son gratuitas.

MorgueFile ­— www.morguefile.com Su sección “Free” ofrece un amplio recopilatorio de fotos e imágenes vectoriales. No hace falta registrarse para descargar los archivos, y tienes permiso para adaptar las imágenes, si lo deseas. Aunque “attribution is not required”, el equipo de MorgueFile agradece que se incluya un crédito con el nombre del site y el link… Y si es posible, el del autor.

En MorgueFile no necesitas registrarte para descargar la imagen.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

14

FreeDigitalPhotos ­— www.freedigitalphotos.net Buen catálogo de fotos e ilustraciones de todo tipo, todas ellas de descarga gratuita para un tamaño máximo de unos 400 x 300 píxels (para tamaños superiores, hay que pagar). No exige registro, pero sí proporcionar tu mail e indicar atribución de las fotos: tanto del autor como del sitio web. En caso de duda, puedes pedir que te envíen un mail con los datos exactos que debes publicar.

En FreeDigitalPhotos la descarga es gratuita para un tamaño de unos 400x300 píxels.

ImageAfter ­— http://imageafter.com Proporciona fotos y también imágenes de texturas en alta resolución: de madera, metales, telas… No hace falta registrarse, y se permite alterar las imágenes.

ImageAfter está especializada en fotos de texturas en alta resolución.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

15

FreeFoto ­— www.freefoto.com Incluye más de 132.000 imágenes, organizadas por temáticas y por lugares, entre ellos: EEUU, España, Austria, Bélgica, República Checa, Francia, Islancia, Noruega, Suiza… Aunque de España, por ejemplo, priman las fotos de girasoles y de Torremolinos. No precisa registro, pero para descargar las fotos hay que proporcionar un email al que envían los archivos. Las imágenes se distribuyen bajo licencia Creative Commons by-nc-nd: no se permite un uso comercial de la obra, ni la generación de obras derivadas, y hay que referenciar el sitio web e incluir un link.

En Freefoto las imágenes se distribuyen bajo licencia Creative Commons by-nc-nd_: no se permite un uso comercial de la obra, ni la generación de obras derivadas, y hay que referenciar el sitio web.

Prácticamente todas las webs de descarga gratuita requieren atribución de la imagen al publicarla: indicar el autor y el servicio de fotos donde se obtuvo. En algunos casos también hay que registrarse previamente

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

16

4_ DÓNDE CONSEGUIR ICONOS E ILUSTRACIONES PARA TUS PROYECTOS Los pictogramas, iconos e ilustraciones ayudan a sintetizar en una imagen, una idea, un concepto, una acción: captan la atención y complementan el diseño de cualquier proyecto, ya sea una web, un blog, un ebook, una revista o una aplicación, además de dotarlo de personalidad propia.

Pero, ¿cómo conseguir estos recursos cuando no hay presupuesto para ello? Aquí tienes cuatro webs de iconos e ilustraciones gratis en alta resolución, en varios formatos (jpg, png, pdf, eps, etcétera) y de diferentes estilos, para enriquecer tus diseños.

Freepik ­— www.freepik.es/ Más de 224 millones de recursos gráficos lleva descargados esta web, que es al mismo tiempo buscador y desarrollador de diseños propios.

Freepik rastrea Internet en busca de vectores, psd, iconos y fotos libres de derechos, y los cataloga combinados con contenidos exclusivos creados por su equipo, también gratuitos: en total, más de 1,4 millones de diseños. Para descargarse los archivos Freepik no hace falta registrarse, la única condición es incluir un enlace. Además, la búsqueda puede realizarse en español sin limitaciones: no en vano, Freepik tiene su sede en Málaga.

Freepik es al mismo tiempo una web con recursos gráficos propios y un buscador de ilustraciones en múltiples sitios web. Ofrece 1,4 millones de diseño gratuitos.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

17

Vecteezy ­— www.vecteezy.com Se trata de una comunidad de casi 30.000 artistas de todo el mundo que comparten libremente sus creaciones. Aquí encontrarás gran cantidad de dibujos, ilustraciones, recursos gráficos y, por supuesto, iconos, en distintos formatos, todos ellos en alta resolución. No hace falta registrarse para descargar los archivos, aunque sí atenerse a los requisitos de atribución que cada autor haya establecido. La web está disponible en español y en inglés, pero si realizas la búsqueda en inglés obtendrás muchos más resultados (y de estilos más variados).

En Vecteezy casi 30.000 artistas de todo el mundo comparten libremente sus creaciones.

FindIcons ­— http://findicons.com Más de 450.000 iconos e ilustraciones y 2.500 paquetes de iconos ofrece este buscador, que incluye además un conversor de archivos en distintos formatos. La licencia de uso varía según el autor, aunque todos son de descarga gratuita y sin necesidad de registro. Eso sí, la búsqueda sólo puede realizarse por palabras clave en inglés, ya que no reconoce ningún otro idioma.

FindIcons ofrece más de 450.000 iiconos e ilustraciones y 2.500 paquetes de iconos.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

18

OpenClipArt ­— http://openclipart.org Es la web con menos ilustraciones, en comparación con las anteriores: unas 60.000 de casi 4.000 artistas, pero también muy original por el estilo y el tratamiento de los dibujos e iconos. La descarga es sin registro previo, y ofrece varios tamaños para ello. Todas las ilustraciones pueden utilizarse libremente tanto en proyecto comerciales como no comerciales. La búsqueda sólo puede hacerse en inglés.

Los contenidos de OpenClipart son muy originales por el estilo y tratamiento de los dibujos.

Los pictogramas, iconos e ilustraciones ayudan a sintetizar una imagen, una idea, un concepto, una acción: captan la atención y complementan el diseño de cualquier proyecto

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

19

5_ CLAVES PARA DISEÑAR INFOGRAFÍAS, PASO A PASO Son un elemento muy visual, ayudan a representar de forma gráfica datos complejos y representan un valor añadido al contenido: las infografías cobran cada vez más protagonismo en blogs y webs informativas.

Hasta hace unos años, para desarrollar una infografía era preciso trabajar con programas de diseño específicos. Ahora, existen diversas herramientas web, incluso gratuitas, que facilitan la tarea. Ahora bien, antes de empezar a plantear una infografía, conviene tener en cuenta sus características específicas. qDiseñar una buena infografía no es sencillo. No basta con usar una herramienta de diseño: hay que saber sintetizar y conceptualizar la información, para facilitar su visualización. El objetivo de una infografía es transmitir de forma sencilla datos complejos. qUna infografía no es (o no debería ser solo) un conjunto de frases con diferentes tipografías, sobre un fondo de color. Eso no es más que adornar un texto. qSelecciona bien los datos que vas a mostrar. Mejor pocos, pero de impacto, que muchos superfluos. qCompara datos entre sí. Facilitará la comprensión de la información. qCombina los tamaños de los iconos y los pictogramas para representar evolución, proporciones, etcétera. qLa infografía debe complementar el texto del post o artículo y aportar un valor añadido, no repetirlo acompañado de imágenes bonitas.

Elige: o texto, o infografía, no ambos.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

20

Tres herramientas gratuitas para elaborar infografías Cada una destaca por un aspecto concreto: sus gráficos, la variedad de tipografías, el catálogo de formas, las plantillas base que ofrece... Comprueba cuál se adapta mejor a tus necesidades ¡y a desarrollar la creatividad! piktochart ­— http://piktochart.com La versión gratuita sólo da acceso a siete modelos de plantillas. Se puede personalizar las medidas de la infografía, e ir añadiendo iconos de naturaleza, personas, educación, entretenimiento, mapas, deportes, transporte… También ofrece imágenes prediseñadas. La versión gratuita permite descargar la infografía, pero con marca de agua. Para eliminarla, hay que migrar a la opción Pro (a partir de 29 euros al mes). q Puntos fuertes: muy útil para el diseño de gráficos de barra, líneas, tartas, semicírculos, etcétera, con la opción de importar datos para elaborarlos. También pueden prepararse mapas prediseñados dinámicos, en los que configurar qué tipo de información debe aparecer al pasar el cursor del ratón sobre cada país, por ejemplo, y cambiar los colores al gusto. E incluso se puede insertar vídeo. Y previsualizar a medida que se avanza.

Piktochart es muy útil para el diseño de gráficos de barras, líneas, tartas, semicírculos, etcétera. Incluye la opción de importar datos para elaborarlos.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

21

easel.ly ­— www.easel.ly Proporciona 15 modelos diferentes de plantillas: con mapas, círculos, recorridos… Se pueden añadir iconos de personas, animales, elementos de la naturaleza, transporte, comida, música, geografía… También incluye la opción de subir imágenes de archivo. q

Puntos fuertes: herramienta muy intuitiva, con gran variedad de

tipografías y de formas. El archivo de la infografía se puede guardar como público o privado. La versión gratuita de Easel.ly permite descargar la infografía sin marca de agua.

En Easel.ly tienes 15 modelos diferentes de plantillas, y puedes añadir iconos de personas, animales, elementos de la naturaleza, transporte, comida, música, geografía...

infogr.am ­— http://infogr.am Sus modelos de plantillas para infografía son muy limitados… Pero para gráficos.. ¡oh, los gráficos! q Puntos fuertes: ofrece hasta 14 modelos distintos para realizar gráficos: de barra, de líneas, de tarta, financieros, con pictogramas, círculos, pirámides de progresión, nube de tags… Con la opción de importar datos. Eso sí, para descargarlos es preciso pasar a la versión Pro.

Infogr.am ofrece hasta 14 modelos distintos para realizar gráficos, de todos los tipos.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

22

6_ CÓMO ELABORAR NUBES DE PALABRAS SIN INSTALAR PROGRAMAS Las nubes de palabras o tags son un elemento gráfico muy versátil con diferentes aplicaciones. La representación visual de palabras sirve, entre otras opciones, para: qIlustrar una presentación, web o post de un blog con un elemento gráfico tipográfico atractivo. qIdentificar los términos más repetidos en un texto, discurso, noticia y cualquier otro tipo de documento, y conocer los conceptos que se han querido enfatizar. qAnalizar la densidad de palabras clave de una página web o blog (aunque ojo, para realizar un análisis SEO de densidad de keywords en una web, existen otras herramientas más adecuadas). qComparar el contenido más relevante de dos o más documentos.

A continuación tienes cuatro herramientas para generar nubes de palabras online, sin necesidad de instalar ningún programa.

Las nubes de palabras no son solo un elemento decorativo: ayudan a detectar los términos más relevantes de un documento, comparar contenidos y analizar densidad de palabras clave

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

23

Image Chef ­— www.imagechef.com/ic/word_mosaic Para generar elementos decorativos a partir de palabras seleccionadas. Basta con introducir la frase o palabras que se quieren reproducir, elegir el símbolo que ha de darles forma (hay más de 25 opciones: flechas, gotas, corazones e incluso letras) y marcar la tipografía y los colores. A continuación, se puede guardar, enviar por mail, compartir en redes sociales y obtener el código para embeber la imagen en una web.

Con Image Chef puedes generar elementos decorativos con forma de símbolo.

Wordle ­— www.wordle.net Para crear una nube de palabras a partir de un texto o una página web. Sólo hay que copiar y pegar el texto, o incluir la URL del blog o web. Eso sí, es necesario tener instalado un complemento de Java en el ordenador. No se puede guardar la imagen directamente como jpg, ni gif ni png: hay que realizar una captura de pantalla. Como contrapartida, sí ofrece un código para insertar la imagen en una web.

Wordle crea una nube de palabras con sólo copiar el texto de un documento o la URL de la página web en la que está publicado.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

24

TagCrowd ­— http://tagcrowd.com Genera una nube de palabras a partir de un texto, una dirección web o un archivo. No da opción de seleccionar colores ni tipografías, pero sí permite elegir el máximo de palabras a mostrar en la nube y descartar términos irrelevantes para el análisis, como las preposiciones y los artículos. A continuación, puede descargarse como pdf o código HTML.

TagCrowd genera una nube de palabras a partir de un texto, una dirección web o un archivo.

Tagxedo ­— www.tagxedo.com Se trata de una herramienta muy completa y versátil para crear nubes de tags del contenido de una página web o de un texto.

Y también, de los tuits de cualquier usuario de Twitter. Se pueden elegir los colores, la tipografía (entre más de 20 opciones) y la orientación de las palabras (cualquiera, horizontal, vertical y octogonal).

Además, facilita hasta más de 40 formas distintas para la nube de palabras, incluyendo ángeles, dinosaurios, guitarras, tazas, círculos, corazones, nubes, rostros, plantas… El resultado puede guardarse como imagen directamente.

Tagxedo facilita hasta 40 formas distintas para la nube de palabras.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

25

7_ CÓMO DESARROLLAR IMÁGENES CON FRASES EN UNOS MINUTOS Las imágenes con citas célebres y frases son uno de los recursos con mayor capacidad de viralización en redes sociales, una forma sencilla y atractiva de expresar pensamientos y reflexiones y un elemento creativo muy versátil. Bien. Pero, ¿cómo desarrollar una, sin echar mano de programas de diseño? Es más: ¿cómo hacerlo sin ser diseñador, y con herramientas totalmente gratuitas?

Aquí tienes tres herramientas para diseñar imágenes con frases en apenas unos minutos, y sin ningún coste.

Notegraphy ­— https://notegraphy.com Escribe tu frase y elige el estilo entre más de 50 opciones diferentes con tres posibilidades cromáticas para cada una de ellas. Notegraphy destacará la primera letra de la frase a modo de icono, y configurará automáticamente el diseño con sólo pulsar un clic: no tendrás que seleccionar tipografía, ni cuerpo de letra, ni motivo para la ilustración, bastará con que decidas qué diseño te encaja mejor.

No permite añadir imágenes, porque el resultado es una imagen en sí misma. Para acceder a la herramienta tendrás que registrarte con email, Facebook o Twitter.

Notegraphy crea un estilo para tu frase: no permite añadir imágenes, pero tampoco lo necesitas.

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

26

Quotes Cover ­— www.quotescover.com ¿Quieres crear una imagen con una frase para la cabecera de tu página de Facebook, Twitter o Google+? ¿O para el escritorio del ordenador, o la pantalla del móvil? Con Quotes Cover podrás hacerlo en dos minutos… incluso si no tienes frase, o prefieres que el tamaño de la imagen sea otro. Quotes Cover te proporciona un directorio de citas célebres organizadas por temas y categorías, aunque por supuesto, también puedes redactar tú mismo el texto. Una vez elegido el tamaño de la imagen, la herramienta te va ofreciendo las múltiples opciones de diseño, configuración, color, etcétera, a golpe de clic. Ideal si no quieres complicarte la vida (aunque no podrás añadir una foto propia). Desde Quotes Cover podrás también compartir la imagen directamente en Facebook o guardarla en formato jpg o png.

Con Quotes Cover puedes crear una imagen con frase para cabeceras en redes sociales, tu ordenador, el móvil... Incluye directorio de citas célebres y múltiples opciones de diseño.

Las imágenes con citas célebres y frases son uno de los recursos con mayor capacidad de viralización en redes sociales

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

27

Recite This ­— http://recitethis.com Herramienta muy sencilla, aunque con más limitaciones creativas que las anteriores: escribes la frase y vas rotando las opciones de previsualización hasta dar con la que más te guste. Incluye también un directorio de citas célebres en inglés, clasificadas por temas. La frase podrá aparecer en composición con una foto de fondo, o sólo con diseño tipográfico. Pero no puedes modificar colores, ni tamaños de letra. Al finalizar puedes descargar la imagen, compartirla directamente en tus redes sociales o enviársela a un amigo.

Recite This incluye un directorio de citas en inglés. Sólo hay que selecionar la plantilla de imagen que se deseea utilizar, rotando las opciones hasta dar con la preferida.

Elige si prefieres una composición tipográfica, o combinada con foto.

Si te falla la inspiración, tranquilo: algunas herramientas incluyen también directorio de citas célebres

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

28

8_ CÓMO OPTIMIZAR EL PESO DE LAS IMÁGENES Utilizar en tu blog o web fotos que pesen demasiado ralentiza el tiempo de carga y es contraproducente para el posicionamiento en buscadores. Pero al mismo tiempo, una web rica en imágenes y recursos gráficos es más atractiva, y si están adecuadamente orientadas a SEO, ofrece potencialmente más puntos de indexación.

Una forma rápida y sencilla de averiguar la velocidad de carga de una web y cómo influyen en ello las imágenes es acudir a PageSpeed (https://developers. google.com/speed/pagespeed/) de Google: basta con introducir la URL de la página web para que la herramienta online analice el contenido del sitio y asigne una puntuación de 1 a 100, valorando el tiempo de carga tanto para móvil como para ordenador, así como los aspectos que deben corregirse.

La clave: formatear y comprimir correctamente las imágenes para ahorrar bytes de datos. ¿Cómo optimizarlas entonces para reducir su tamaño sin renunciar a la calidad?

Lo habitual es recurrir a PhotoShop: en la opción “Guardar para web” tienes la posibilitad de reducir el peso de la foto y transformar el archivo en jpeg, gif o png. Importante en este caso es activar la opción de “progresivo” para el formato jpeg y “entralazado” para el png: facilitará que al cargarse en el servidor, la imagen aparezca primero en menor resolución y vaya mejorando su definición a medida que va cargando.

“Sí, sí, pero PhotoShop es un programa, hay que pagar licencia, y utilizarlo sólo para optimizar el peso de las fotos, no sé yo si me compensa”, puede que pienses. Cierto, duda razonable. Por eso a continuación tienes otras dos herramientas web gratuitas, que además no requieren instalar ningún programa ni aplicación (y son compatibles con cualquier sistema operativo).

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

29

Image Optimizer ­— www.imageoptimizer.net Muy útil sobre todo para trabajar con archivos en formato jpeg. Puedes subir la imagen seleccionada, elegir entre seis opciones de calidad y combinarlo con tamaño máximo y mínimo de la altura y anchura de la imagen. Tiene como inconveniente que no se puede exportar de un formato a otro.

En Image Optimizer sólo hay que subir la foto y elegir entre seis opciones de calidad.

Dinamyc Drive ­— http://tools.dynamicdrive.com/imageoptimizer Es la herramienta que mayor pérdida de calidad genera, en comparación con la anterior. Pero ofrece como ventaja que muestra hasta siete opciones de reducción, para elegir la que más guste. Trabaja con archivos de imagen o con su URL, y permite convertir a gif, png o jpeg. Eso sí, sólo admite archivos de

Dinamyc Drive trabajar con archivos de imagen o con su URL.

hasta un máximo de 2,86 MB.

Utilizar en tu blog o web fotos que pesen demasiado ralentiza el tiempo de carga y es contraproducente para el posicionamiento en buscadores: hay que optimizar los archivos

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

30

9_ SOBRE LA AUTORA María Lázaro Ávila es autora del blog “Hablando en corto” (www.hablandoencorto.com), incluida en el “Top 50 de los blogueros más influyentes del sector digital en español” en 2014. Su blog fue clasificado en los Premios Bitácoras 2013 en sexto lugar en la categoría de “Mejor Blog de Marketing y Comunicación”, y seleccionado en 2012 entre “Los 10 mejores Blogs de Marketing Digital” por Webempresa 2.0.

Durante 10 años, entre 1998 y 2008, trabajó en Reporter – MRM Worldwide (agencia de marketing relacional y digital del Grupo McCann), como directora de cuentas para clientes como Iberdrola, BBVA, Prosegur, Coca-Cola España, Leroy Merlin, Unicef y PricewaterhouseCoopers. Desde 2009 es jefa del Departamento de Marketing de ICEX España Exportación e Inversiones (ICEX).

Además, colabora como docente en diversas escuelas y programas, entre ellas: el Máster Social Media and Community Manager de la Universidad Complutense de Madrid, el Máster Social Media and Community Manager de la Universidad Nacional de Educación a Distancia (UNED), el Postgrado en Marketing y Digital Business de IGS La Salle, el Máster in Innovation Digital Marketing de Madrid School of Marketing y el Máster BrandOffOn. Dirección de Empresas y Marcas en la Era Digital de Esden Business School.

Licenciada en Periodismo por la Universidad Complutense de Madrid, es también Máster en Información Económica por la Universidad Complutense y Máster en Comunicación Corporativa e Institucional 2.0 por la Universidad de Alcalá. Ha estudiado Comunidades Europeas en la Escuela Diplomática de Madrid, y las especialidades de Marketing Directo & Integrado y Proximity & Mobile Marketing en ICEMD-ESIC. Twitter: @marialazaro LinkedIn: http://es.linkedin.com/in/marialazaroavila/ Google+: http://plus.google.com/+MariaLazaro Slideshare: http://www.slideshare.net/marialazaroavila

HERRAMIENTAS DE DISEÑO PARA NO DISEÑADORES — María Lázaro Ávila

31

¿QUIERES RECIBIR CONTENIDOS EXCLUSIVOS SOBRE MARKETING, COMUNICACIÓN Y SOCIAL MEDIA? APÚNTATE GRATIS A LA NEWSLETTER DE MI BLOG ‘HABLANDO EN CORTO’ EN: www.hablandoencorto.com/p/suscribete.html

HERRAMIENTAS PARA NO DISEÑADORES — María Lázaro ÁvilaÁvila — www.hablandoencorto.com HERRAMIENTASDE DEDISEÑO DISEÑO PARA NO DISEÑADORES — María Lázaro