Visme, herramienta para crear gratis presentaciones, infografías, banners y más

Revisamos a fondo una interesante herramienta online para profesionales, académicos, emprendedores y cualquier otra persona que requiera valerse del contenido visual para expresar sus ideas en formatos gráficos de alta calidad y con apenas hacer uso de su navegador. Su nombre es Visme (antes EWC Presenter), un producto de una startup de Washington, DC (USA) llamada Easy WebContent.

Qué es Visme

infografias visme
Es una aplicación online para crear presentaciones profesionales, infografías, animaciones, demostraciones de productos, banners publicitarios, etc. Es una alternativa a Microsoft PowerPoint y a Apple Keynote, pero a la vez permite realizar sin mayores conocimientos, con una intuitiva interfaz y con plantillas para no iniciar desde cero, obras gráficas que sólo alguien con un buen manejo de Adobe Photoshop e Illustrator podría conseguir.

Por todo esto es que se le conoce como la “navaja suiza” para las necesidades en contenidos visuales, más aún si se tienen en cuenta las posibilidades que le brinda su naturaleza en la nube (mayor espacio, disponibilidad en cualquier lugar mediante cualquier navegador actual, incrustación en sitios web, etc.) y el estar construida en HTML5 y no en Flash, lo que le permite verse bien tanto en la web como en dispositivos móviles.

Características

visme caracteristicas
Características para su versión gratuita

– Miles de elementos predeterminados para agregar al instante.
– 100 MB de almacenamiento gratuito.
– Elementos interactivos como los de las infografías que cambian según los valores numéricos ingresados.
– Inserción de elementos externos mediante fuentes como YouTube y Vimeo.
– Modificación de contenidos a través del siempre útil arrastrar y soltar.
– Interfaz con diseño plano, minimalista, con líneas guía y ayuda instantánea en cada sección.
– Modo para insertar texto animado y con disposiciones predeterminadas por columnas.
– Animación de elementos por separado con una timeline avanzada en la parte superior.
– Panel de slides a la derecha y barra de inserción de contenidos a la izquierda.
– Acceso a millones de imágenes gratuitas (propias o mediante Flickr) e íconos en formato vectorial.
– Exportación de contenido a formato de imágenes JPG.
– Publicación instantánea en la web (compatible con móviles) mediante SlideShare, un sitio web o blog propio a través de la incrustación, o usando el enlace generado a un espacio de visualización en Visme.
– Compartición de los resultados en las redes sociales con un clic o simplemente descargándolos.

Características adicionales en su versión Premium

– Más elementos disponibles, especialmente contenido para infografías
– Exportación de los resultados a HTML -claro, HTML5- y PDF
– Mayor almacenamiento y con menor lìmite en el número de proyectos
– Proyectos públicos y privados

Cómo funciona Visme

Después de crear una cuenta aparecerá una pequeña ventana para darle título a un “Nuevo proyecto”. El tipo de proyecto se decide enseguida en una pantalla con los disponibles: Custom (personalizado), Presentation, Banner Ads (banners publicitarios), Infographics (infografías) y Product Demo.

tipos de proyectos

Custom: Para iniciar en un lienzo “en blanco”, entre comillas ya que se puede partir de un fondo con colores fijos, degradados, un fractal, una foto o una textura. Desde allí es posible crear animaciones personalizadas.
Presentation: Para crear presentaciones a lo PowerPoint sólo que con más contenido multimedia de alta calidad en una omnipotente barra lateral que permite insertarlos con un par de clics o arrastrando y soltando, eso y 7 plantillas profesionales para escoger. En el lado opuesto está el botón Slides que permite gestionar las diapositivas.
Banner Ads: Para crear banners publicitarios animados o sin movimiento. Por supuesto, también hay múltiples plantillas para los formatos más conocidos en este tipo de anuncios: 728×90, 468×60, 336×280, 125×125 y 120×600, entre otros. Igualmente se puede partir de un tamaño personalizado.
banner ads (2)
Infographics: Quizá el apartado más “explotable” de Visme por las facilidades que brinda para crear infografías en una interfaz muy familiar, con reglas guía, cientos de elementos para escoger (algunos interactivos), temas predeterminados, fondos a un clic y montones de funciones para compartir los resultados.
templates infografias
Product Demo: Lastimosamente este modo no está disponible, pero por lo comentado, contará con templates para crear la promoción de un nuevo producto.

Panel principal (Dashboard)
La próxima vez que se acceda a Visme aparecerá el panel principal que alberga un par de pestañas My websites y Visme. En Visme se mostrarán todos los proyectos previamente realizados y listos para previsualizar, editar o eliminar. Igualmente, en la parte superior derecha, se mostrarán un par de enlaces de gran utilidad: Examples, con ejemplos realizados por la comunidad, y Tutorials, para visitar un completo espacio de ayuda con guías en video, tutoriales, preguntas resueltas y soporte tècnico.

Cómo crear una cuenta

Visme se puede usar de forma completa en su versión gratuita la cual admite el registro con apenas un nombre y un email, ni siquiera hace falta confirmar el email, o ingresar una contraseña, aunque esta última sí se genera aleatoriamente y es enviada al email para un futuro acceso. También es posible darle uso iniciando a través de una cuenta de Facebook. Sin embargo, para acceder a las características extra antes mencionadas, se puede optar por los planes premium que inician en US$ 4.50 por mes.

constructor de sitios web
Captura del Creador de Sitios web de Easy WebContent, independiente a Visme

Por si fuera poco, al crear una cuenta se habilitará instantáneamente una herramienta para crear sitios web a partir de plantillas predeterminadas y totalmente modificables a través de su constructor visual (con reglas y funciones de arrastrar y soltar elementos para reorganizarlos) o bien, mediante el clásico editor de HTML.

Enlace: Visme.co

calltoidea, una web con diseños de formularios, calendarios, logins, galerías…

[…] una página donde poder inspirarme, tener una referencia como dribbble, behance, estaba bien pero necesitaba cosas mucho más concretas, como por ejemplo logins, registros, popups, estados de error (404), tabs, ejemplos de mails, etc…

Así nos presenta Alexis Hill su proyecto, una página en la que se recopilan diseños de componentes usados por diferentes sitios web con el objetivo de inspirar a todos los programadores y diseñadores que lo deseen.

Se trata de calltoidea.com, un sitio web sencillo con una excelente colección de formularios, páginas de login, páginas 404, formas de mostrar pestañas, galerías de fotos, ventanas emergentes y muchas otras categorías enlas que podemos encontrar capturas obtenidas de diversos proyectos web.

Incluye también una sección en la que se muestran los colores utilizados por proyectos web específicos (linkedin, google, spotify…), no tan sofisticada como las mostradas en el artículo Sitios web para quien trabaja con colores, pero en contante crecimiento, según nos comenta Alexis por email.

¿Sitios web con paralaje sin saber programar? Webydo invita a lectores de WWWhatsnew a su solución por invitación

Webydo (webydo.com), la plataforma que permite a los profesionales del diseño crear y gestionar sitios web sin necesidad de programar, está invitando a la comunidad de lectores de WWwhatsnew.com a probar su solución de creación de animaciones con paralaje en una campaña a la que solo se puede acceder con invitación.

La función Parallax Scrolling Animator, en estado beta, ya ha sido probada por más de 2.000 usuarios que han tenido acceso a la misma (se acabaron los 2.000 accesos en 1,5 horas) y ahora están ofreciendo 8.000 más. Puedes solicitar tu invitación en este enlace. Date prisa, ya que se entregarán las invitaciones a medida que se reciban y se cerrará el acceso dentro de siete días.

Paralaje (parallax, en inglés) es el efecto que permite que objetos lejanos parezcan moverse más lento que los objetos cercanos, un efecto que se está utilizando últimamente mucho en el diseño de sitios web.

Generalmente es necesario conocer bastante sobre programación web para obtener este tipo de efectos, pero desde Webydo han creado un sistema que permite diseñar este tipo de webs sin necesidad de programar. Los sitios que usan paralaje necesitan una programación en la que se define el movimiento de cada elemento pixel por pixel, con trabajos que a veces tardan meses en completarse, por lo que disponer de un sistema que agilice este proceso es sin duda una buena noticia.

Lo que nos permite es crear animaciones con ilusión de profundidad, permitiendo que los elementos se muevan de forma individual a medida que el usuario baja por la página, podremos definir eventos a medida que se realiza scroll, así como definir caminos, opacidad, rotaciones y velocidad y será posible diseñarlo todo desde una interfaz visual bastante intuitiva, generando caminos de movimiento para cada elemento sin necesidad de programar nada.

webydo

Existen joyas como discover.store.sony.com, maxbrenner.com, ok-studios.de, shibui.me o titanic.q-music.be que demuestran las maravillas que pueden hacerse con programación, talento e imaginación.
Continúa leyendo…

Cómo hacer que su contenido visual se destaque de los demás

visual content stand out 3

Ya lo habrá oído: lo social está yendo hacia lo visual-social y es hora de que empiece a crear y compartir algunas imágenes atractivas para su marca o clientes.

Es natural que los seres humanos presten atención inmediata a las imágenes. Cuando los blogs se hicieron populares, la gente publicaba mensajes bastante largos, de cerca de 1000 palabras. Luego Twitter revolucionó el intercambio de contenidos y vimos entonces mensajes en 140 caracteres dando vueltas por la red.

Hace unos años, las infografías hicieron su primera aparición pública. Los comerciantes perspicaces observaron las tendencias y fueron los primeros en abandonar el barco.

Con el auge de Pinterest e Instagram, los contenidos visuales no van hacia ninguna parte en el corto plazo. Los mensajes largos en un blog todavía tienen su lugar, pero combinados con imágenes atractivas funcionan de maravilla porque las imágenes visuales instantáneamente captan la atención de sus lectores y su blog se encarga de conservarla.

Pero, como era de imaginar, la mayoría de los bloggers ya lo saben y combinan estrategias visuales con sus contenidos de marketing.

Así que es obvio que con el fin de destacarse, tendrá que hacer algo diferente. Pero no se preocupe -usted no tiene que ser súper creativo ni ser especialista en diseño para publicar contenido visualmente atractivo. El paso más sencillo es en realidad crear su contenido.

Hay muchas herramientas gratuitas que no requieren que usted tenga habilidades tipo Photoshop. Visme, por ejemplo, le permite crear de todo, desde cautivantes infografías hasta banners con llamados a la acción.

Cómo hacer que su contenido visual se destaque en el Top 4 de los medios sociales visuales

1. Instagram

Instagram tiene 150 millones de usuarios activos y es, obviamente, uno de los principales sitios de redes sociales en la actualidad.

Pero si pensaba que Instagram sólo se puede utilizar para poner imágenes nítidas y filtradas de su picnic dominguero, se equivoca.

Las marcas exitosas ya están utilizando Instagram de forma creativa. Generic Electric, por ejemplo, tiene 166.318 seguidores la última vez que lo comprobé.

Si una empresa que no tiene casi ningún componente “creativo” y podría ser interpretada como “aburrida” puede presumir de miles de seguidores, seguramente su marca puede tener algo bueno para Instagram.

general electric instagram

Otro buen ejemplo es Starbucks ¡Cuenta con más de 2.300.000 seguidores!

starbucks instagram

starbucks instagram 2

Estas empresas entienden la regla de oro de los medios sociales: a la gente le encanta conectar con la gente. Están usando Instagram para humanizar sus propias marcas.

Así que es una buena idea compartir fotos de su personal, usar capturas y responder a los comentarios de las fotos usando etiquetas (@nombredeusuario) de las personas que comentan. También asegúrese de usar hashtags (#) como lo hace Starbucks en su post anterior (#WhereInTheWorld) para ser encontrado cuando la gente está buscando cosas importantes, o puede aparecer con un hashtag propio de su empresa para involucrar a la gente en las conversaciones sobre su marca.

2. Pinterest

Pinterest es un gran muro de anuncios virtuales donde sus imágenes se convierten en pins y la gente puede darle “Me gusta” o compartirlos a través del botón “Pin it”.

Aunque el 80% de la audiencia de Pinterest es femenina, también maneja más tráfico de referencia hacia sitios web que Twitter, Reddit, LinkedIn y Google juntos.

Real Simple, una revista de Nueva York que da consejos creativos, prácticos e inspiradores para hacer la vida más fácil, es uno de los piners más seguidos en Pinterest.

Con más de 130 muros, su contenido está organizado y los usuarios pueden elegir los temas que les interesa seguir. Tienen muros desde peinados fáciles, comidas de entre semana hasta ideas de decoración.

realsimple pinterest

¿Y lo mejor? Ellos se aseguran de conectarse con sus seguidores por medio de comentarios

realsimple pinterest comentarios

Está de más decir que en Pinterest, utilice únicamente fotos de alta calidad. Un buen tamaño para empezar es 736 x 1128 píxeles porque es lo suficientemente grande como para los usuarios no la pierdan y se destaca muy bien. También funciona muy bien en los teléfonos inteligentes.

Este muro le muestra cómo salen los diferentes tamaños cuando se publican.

Otro consejo interesante es añadir un botón ” Pin It ” a las imágenes si quiere que sean compartidas en Pinterest. De todas formas, trate de publicarlas una vez para ver si su tamaño es adecuado y no se pierde en el mar de pines.

3. Vine

Vine es relativamente nuevo en la red. Le permite crear vídeos de 6 segundos para publicar su mensaje. Fue lanzado en enero de 2013 y ya ha embolsado 13 millones de usuarios, convirtiéndose en la aplicación de iOS más descargada en junio del año pasado.

La belleza de esta aplicación para compartir videos es que optimiza el período de baja atención en línea. Los vídeos tienen un máximo de 6 segundos, pero usted no tiene que lanzar todo el contenido de una vez. Puede crear un montaje y una serie de piezas no consecutivas juntas.

La marca de mejoras para el hogar Lowes ha comprendido esto muy bien. Su página de Vine utiliza un hashtag #LowesFixInSix donde muestran consejos de 6 segundos sobre mejoras para el hogar usando videos cortos y entretenidos.

lowes mejores

4. Twitter

¿Sorpendido de ver a Twitter en esta lista? Bueno, Twitter está continuamente haciendo nuevos retoques a sus diseños y el último es bastante similar a Facebook.

De todas formas, esto significa que se están subiendo al auto de lo visual con una foto de perfil mucho más grande.

twitter michelle obama

Las nuevas características, con los “mejores tweets” más grandes, los mensajes de twitter pineables y la capacidad de elegir qué tipo de tweets le gustaría ver, están llegando.

Jamie Riddell, creador de BirdSong, piensa que “visualmente, esta última actualización es un paso firme fuera de los 140 caracteres hacia una experiencia “multimedia” más atractiva que alienta al usuario a vivir más tiempo en Twitter.”

Y estamos totalmente de acuerdo con Jamie. El micro-blog es escuchar a su audiencia y saber muy bien que las imágenes son el factor más atractivo en Facebook.

Entonces, ¿qué significa esto para usted? Bueno, podría hacer que sus tweets se destaquen de esta manera:

twitter 2

Para lograr el efecto anterior, usted tiene que utilizar una aplicación externa, como Twitrpix

Usar Twitrpix es súper sencillo con estos 3 pasos:

1. Vaya al sitio web de Twitrpix y haga clic en el botón “Sign in with Twitter”.

2. Haga clic en el ícono “Upload a photo > or take photo with Webcam”.

3. Suba una imagen desde su ordenador, agregue un título y una etiqueta.

Voila! Su pic para Twitter está lista. Agregar una imagen de vista previa es muy bueno porque sus tweets saltarán a la vista de todos entre la corriente de sus seguidores.

Hay muchas más maneras de captar la atención utilizando elementos visuales, pero voy a detenerme en estos y a pasarle el megáfono a usted ¿Qué otras formas creativas ha utilizado para que su contenido se destaque en los medios sociales visuales?

______________
Payman Taei es el fundador de Hindsite Interactive, una empresa galardonada de diseño y desarrollo web que crea webs personalizadas y sitios móviles y aplicaciones para empresas y organizaciones.

Concept inbox, nueva versión de esta plataforma para obtener feedback de nuestros clientes

Os hablamos de conceptinbox.com en 2013 y lo hacemos ahora al comprobar que la nueva versión es bastante más útil y flexible.

Se trata de una herramienta creada para facilitar el envío de diseños a nuestros clientes, plataforma que ayuda a centralizar el feedback de los mismos, teniendo así más control sobre los proyectos aprobados y los que necesitan alterarse para poder ponerse en producción.

Ofrece un sistema integrado de comunicación con los clientes para no depender del email, permite construir prototipos interactivos sin necesidad de programar (ideal para que el cliente entienda la “vida” del proyecto antes de que empecemos a realizarlo), genera listas de proyectos pendientes de revisión y aprobador, ofrece la posibilidad de crear notas sobre los dibujos, ayudando a determinar los puntos que deben ser alterados… todo desde la web, con extensión para Chrome disponible en chrome store, integrando nuestros trabajos con la cuenta de Google Drive.

La última versión fue lanzada en abril y anunciada en su blog destacando la posibilidad de hacer prototipos de aplicaciones de forma sencilla: solo tenemos que subir los diseños y seleccionar las areas en las que será posible interaccionar, permitiendo simular links entre un diseño y otro.

La versión gratuita está limitada en espacio y número de proyectos, aunque podemos contratar planes premium a partir de 14 dólares al mes.

lenslider, una extensión gratuita de WordPress para crear Sliders

Desde eleganthemes llega ahora una buena lista de plugins de WordPress que permiten mostrar imágenes en forma de presentación o contenido que se desliza horizontalmente (sliders), muchos de ellos de pago, todos ellos elegantes y sencillos de utilizar.

Llama particular atención el primero de ellos: lenslider.com.

Gratuito y bastante completo, con plantillas prediseñadas para que sea posible elegir el formato de cada slider individual, usa css3 y jQuery para realizar efectos de todo tipo.

No tiene límite de sliders, podemos poner tantas diapositivas como queramos dentro de nuestra presentación, ajustando tanto el tiempo que pasa entre una y otra como el margen o las opciones de reproducción automática. Permite también mostrar miniaturas de las imágenes que incluye el artículo al que enlaza, recortándola o cambiando su tamaño sin problemas.

En lo que a seguridad y velocidad se refiere, también comentan que se han concentrado en el tema, tanto realizando controles estrictos para evitar agujeros de seguridad como aprovechando la caché para que sea posible cargar todo el contenido con una sola consulta.

Podemos usarlo tanto para crear una área de contenido destacado en nuestro sitio web como una galería de imágenes dentro de un artículo, aunque para éste último caso puede resultar más atractivo el uso de Easyrotator, también gratuito.

Una cascada de excelentes recursos para desarrolladores y diseñadores

Continuamos con nuestra serie mensual de recursos gráficos y de desarrollo trayendo 50 nuevos recursos variados para salvar el preciado tiempo de diseñadores y desarrolladores. Toma asiento y disfruta de esta lista que te inspirará y te dará útiles ayudas para tus próximos proyectos.

Gráficos

En esta sección se encuentran trabajos de diseño que pueden ser usados en todo tipo de ambientes, web e impresos.

Maqueta Volante A4

maqueta volante  A4

Mockuuups: 4 mockups en alta resolución del iPhone 5

mockuuups

Plantilla iOS 7: una bella plantilla del menu inicial del iPhone

plantilla iOS 7

Fondos de pantalla: 20 fondos con efecto de desenfoque

Fondos de pantalla con desenfoque

HTC one: una maqueta realista del HTC one M8

Mockup HTC one

Plantilla curriculum: un curriculum de negocios creado en InDesign

Plantilla curriculum

Maqueta hoja doblada: una maqueta realista para presentar diseños de manera elegante

maqueta Hoja doblada

Maqueta para tarjetas de presentación

maqueta para tarjetas de presentación

Grilla iPhone 5: una grilla para crear y organizar apliaciones para iPhone 5

Grilla iphone 5

Cintas minimalistas: mas de 80 vectores de cintas en estilo plano

Cintas minimalistas

GUIs

En esta sección se pueden encontrar como es usual, las mas recientes interfaces gráficas de usuario que sirven de inspiración en la creación de páginas y aplicaciones móviles.

Plantilla instagram: un rediseño conceptual en PSD

Plantilla instagram

Interfaz ewebdesign: una interfaz en estilo iOS 7 para portafolios en línea

interfaz ewebdesign

iBeacon: una interfaz ideal para aplicaciones de restaurantes

interfaz iBeacon

Flat box UI: un set de coloridos botones y tooltips planos

Flat Box UI

GUI kit: una interfaz sobria y simple para iOS

GUI kit

ewebdesign UI kit: Una interfaz en estilo plano para móviles

ewebdesign kit

Interfaz para escritorio: un set de elementos para crear escritorios y paneles de control

interfaz para escritorio

Kita3: un set de elementos de trazado para crear páginas

Kita 3 UI

Paquete para infografías: un set de elementos en estilo plano para crear gráficos, mapas, tablas y más

Paquete para infografias

Interfaz para portafolio: una interfaz pensada para portafolios sociales

Interfaz para portafolio

iconos

Esta sección trae colecciones de íconos cuidadosamente creados y perfectos para ser agregados a aplicaciones de escritorio y páginas web

Iconos redondeados: un hermoso set de íconos en un moderno estilo

iconos redondeados

Set de oficina: un set sólido de elementos de oficina

Office Icons set

Set de hotel: un set de íconos minimalistas en mosaicos de colores

Hotel Icon set

Inkalligraphic: un paquete de íconos con estilo de pictogramas orientales

iconos Inkalligraphic

Iconos de ciencia: un set de íconos lineares para proyectos enfocados en ciencia

Iconos de ciencia

Gestos de manos: un archivo en AI con 13 gestos de manos

Gestos de manos

Set de avatares: un archivo de illustrator con elementos para crear mas de 1000 combinaciones

Set de avatares

LineArt: 100 iconos esenciales en estilo linear

Iconos LineArt

Iconos de cocina: 55 íconos vectoriales creados a mano

Iconos de cocina

Gap icons: un asombroso set de íconos con aberturas

Gap Icons

Temas y plantillas

En esta sección hay una lista con frescos temas de WordPress para usar directamente en tu sitio, y plantillas HTML y PSD para inspiración y desarrollo.

Quarantie: Plantilla en PSD ideal para agencias

Quarantie Plantilla PSD

Lucky Store: un PSD en estilo semi plano para tiendas online

Lucky Store plantilla PSD

Corporate: elegante tema de WordPress para empresas

Corporate tema WP

Nova: plantilla HTML con diseño corporativo

Nova Plantilla HTML

Concepto comedy central: una plantilla conceptual en PSD

Concepto Comedy central

Sneak Lite: tema hijo para Sueva

Sneak Lite tema WP

Plantilla corporativa: una plantilla corporativa con un diseño mas lustroso que plano

Plantilla corporativa PSD

Story: un bello tema de WordPress para blogs personales

Story tema WP

Super duper: una asombrosa plantilla con diseño plano

Super Duper plantilla PSD

Militone: Tema de WordPress para magazines

Militone tema WP

experimentos de codigo y plugins

Por último, en esta sección se pueden encontrar algunos experimentos de código y plugins de jQuery para los desarrolladores en busca de novedosas caracteristicas para mejorar sus proyectos.

Grilla Flexbox: un sistema de grilla basado en la propiedad flex

Grilla flexbox

Olly.js: una libreria para transformar una URL en HTML embebible

Olly.js

Pulso multijugador: un divertido experimento para probar tu velocidad para pulsar teclas con tus amigos

Pulso multijugador

Powerange: un slider de control de rango inspirado en la serie Power Rangers

Powerange plugin

Gridlover: CSS ajustable para tamaños de fuentes

Gridlover tool

PNotify: Notificaciones con JavaScript

PNotify plugin

Pictaculous: aplicacion en línea para obtener paletas de colores basadas en imágenes

Herramienta web Pictaculous

Vertical News Slider: un slider de navegación vertical en jQuery y CSS3

Vertical news slider

Isotope: un plugin jQuery de filtrado y organización

Isotope jquery plugin

Elastic columns: una alternativa a la librería Isotope

Elastic columns