Una sección muy importante de Wwwhatsnew es la que dedicamos a publicar herramientas para diseñadores y desarrolladores del mundo web, como fue el caso de esta fantástica compilación que compartimos con vosotros hace un par de meses en la que incluimos plantillas, mockups, fondos de pantalla con desenfoque, interfaces y distintas galerías de iconos temáticos.
En esta última área queremos añadir hoy un recurso más que no sólo nos permitirá tener acceso a una galería de miles de iconos descargables y utilizables, sino también modificarlos al gusto y personalizarlos. Se trata del sitio web Free Flat Icons, una página que hará más fácil la vida de cualquier diseñador web o gráfico.
En él encontraremos miles de packs y galerías de iconos clasificados por temáticas (generales, banca, comida, médicos, seguridad, gente, ciencia, tecnología…) y el gran punto a favor del sitio web respecto a otras galerías es que no sólo nos permitirá buscar iconos que podamos utilizar, sino también a cambiarlos directamente desde la plataforma. Para esto último solamente tendremos que apretar al icono que nos interese modificar y accederemos a un panel de diseño en el que podremos modificar el fondo, el tamaño de los elementos, la forma y el color introduciendo el código HTML correspondiente. Al acabar, podremos descargar el icono en PNG y utilizarlo libremente y sin restricciones.
Oozled nació de la iniciativa de Dan Edwards al compartir una colección personal de recursos sobre diseño web con sus alumnos de la Universidad.
Pero la lista se hizo tan popular que dio lugar a un espacio colaborativo para compartir recursos gratuitos y de pago, organizados en diferentes colecciones.
Por ejemplo, podemos encontrar pack de iconos, recomendaciones de diseños para inspirarnos, recursos para encontrar la tipografía perfecta para nuestro proyecto, colecciones de archivos PSD, pinceles para Photoshop, entre otros.
También encontraremos guías, libros, videos, así como referencias a comunidades online para desarrollar nuevas habilidades y explorar nuevas ideas. Hay una sección dedicada a bolsas de trabajo donde encontraremos sugerencias de portales con noticias y oportunidades laborales para diseñadores freelance.
Son 42 las categoría que podemos recorrer y descubrir recursos que se ajusten a nuestras necesidades. Al crearnos una cuenta, nos permite crearnos un feed de las categorías que nos resultan interesantes para no perdernos ninguna actualización.
Y por supuesto, también podemos participar sugiriendo nuevos recursos y contribuir con la comunidad de Oozle.
Captain Icon es un interesante opción que no puede faltar en el kit de recursos de todo buen diseñador.
Es una colección de más de 350 iconos gratis para utilizar en diferentes proyectos, ya sea pensando en la web o en aplicaciones móviles. Además de cubrir una variedad de temáticas, tienen un diseño muy divertido y con varias características que permiten personalizarlos a nuestro criterio.
Al descargar este set de iconos nos encontramos que está disponible en una variedad de formatos como PNG, PSD, EPS, SVG y Web Font. El creador de esta colección no solo ha hecho un trabajo espectacular con su diseño, sino además ha abierto una página explicando de forma muy amena cada detalle los iconos y su potencial para utilizarlo en diferentes diseños.
Podemos descargarlo de forma gratuita y utilizarlo en nuestros proyectos teniendo en cuenta el tipo de licencia, y si deseamos, dejar una pequeña donación en agradecimiento y apoyo a la creación de esta clase de recursos.
Y si buscamos más opciones en iconos para utilizarlos en nuestros proyectos comerciales, podemos tener en cuenta el set de iconshock que compartimos en un artículo anterior.
Desde iconshock.com nos presentan una nueva colección de iconos gratuitos cuya licencia nos permite usarlos incluso para proyectos comerciales, siendo así ideal para incluirlos en páginas web corporativas, artículos en blogs, aplicaciones móviles, etc.
En formato Psd (photoshop) y png (con fondo transparente), son más de 10.000 iconos clasificados, con varios formatos y colores, siendo posible descargarlos después de indicar el email o compartir la colección en las redes sociales.
iconshock es un conocido buscador de iconos que vende packs de diversas categorías, ofreciendo con bastante frecuencia algunos sets gratuitos para que podamos usarlo tanto con licencia comercial como con licencia de uso particular.
Sin duda, un gran recurso para guardar en nuestra carpeta de «utilidades para diseño».
Con el reciente auge de las impresoras 3D, es de esperar que progresivamente vayamos viendo más utilidades relacionadas con esta nueva tecnología. Hoy destacamos Modio, una aplicación para iPad creada por Himlar Gunnarsson, un emprendedor de Islandia, que te permitirá construir monstruos uniendo diferentes piezas hasta lograr el acabado deseado. Todo ello desde la comodidad de tu iPad, para posteriormente imprimirlas en 3D a través de una impresora apta para esa tarea. Gracias a su facilidad de uso, la aplicación te permitirá cambiar sin mayores complicaciones el tamaño de las piezas, sus texturas, sus colores… y todo ello a tiempo real.
Modio, que apenas cuenta con un par de semanas de vida, pretende ganar dinero ofreciendo contenido descargable extra de pago, como por ejemplo, nuevos diseños de monstruos, piezas extra, o incluso ofreciendo la posibilidad de que los usuarios puedan vender sus propios diseños a través de la aplicación para que otras personas puedan imprimirlos. Hasta el momento, la aplicación ha recibido una gran acogida en públicos de todas las edades, y esto puede estar debido al objetivo que siempre han tenido en mente a la hora de desarrollar Modio: la sencillez. La aplicación ofrece un manejo realmente sencillo, con el fin de que incluso los niños más pequeños puedan diseñar sus propios monstruos, pero a la vez, permitiendo que un adulto pueda crear complejos diseños gracias a la potencia que ofrece este software. Para empezar a crear un diseño, es tan sencillo como tocar la pieza que deseemos utilizar y arrastrala hasta la posición deseada.
Esta aplicación viene con el objetivo de resolver el actual problema que existe con las impresoras 3D, y es que cada vez encontramos más modelos en las grandes superficies y cualquiera podría adquirir una unidad si así lo desease, pero el problema reside en la falta de conocimientos acerca de diseño en 3D en la gran mayoría de usuarios de a pie. Gracias a esta aplicación, cualquiera podrá crear infinidad de diseños en un abrir y cerrar de ojos para posteriormente poder imprimirlos, por lo que podría ser una forma de acercar esta tecnología al gran público.
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
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
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.
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. 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. 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.
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.
[…] 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.
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.
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.
Otro buen ejemplo es Starbucks ¡Cuenta con más de 2.300.000 seguidores!
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.
¿Y lo mejor? Ellos se aseguran de conectarse con sus seguidores por medio de 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.
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.
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:
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 deHindsite Interactive, una empresa galardonada de diseño y desarrollo web que crea webs personalizadas y sitios móviles y aplicaciones para empresas y organizaciones.
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.
