Ya hemos compartido diferentes opciones que nos permiten crear o descubrir paletas de colores para implementar en nuestro trabajo o proyecto. Ampliamos la lista con dos nuevas sugerencias.
Con una dinámica interesante, el recurso creado por Hailpixel nos permite buscar el color que deseamos o crear una paleta a través de los movimientos del puntero del mouse. Con solo desplazarnos por la pantalla, respetando las instrucciones (darle intensidad, brillo, etc) podremos llegar al tono que buscamos.
Para guardar el color que hemos escogido solo tenemos hacer un clic con el mouse, y podremos seguir buscando más tonos para formar nuestra paleta. Si deseamos ser más precisos y ajustar algunos detalles, podemos ir a la configuración que se encuentra debajo de cada color.
Otra alternativa es ColourCode, que sigue la misma dinámica pero con muchas más opciones. Por ejemplo, podemos seleccionar solo colores análogos, monocromáticos, entre otros.
También cuenta con opciones para personalizar en detalles los tonos teniendo en cuenta sus valores. Y para evitar contratiempos nos permite bloquear el esquema que hemos diseñado para no alterar los colores.
Podemos descargar a nuestro equipo la paleta que hemos creado o un color individual, en diferentes formatos. O podemos optar por crear una URL para compartir nuestra opción por correo electrónico o las redes sociales.
Con bastante frecuencia recomendamos sitios web que ofrecen iconos con licencia Creative commons, iconos que podemos usar para crear sitios web o aplicaciones, estando muchas veces en formato vectorial para que podamos utilizarlos en diversos tamaños sin perder calidad.
Hoy os mostramos coucouicons.com, una colección de 64 iconos de excelente calidad, en blanco y negro, que podemos usar siempre y cuando hagamos referencia a la fuente, con licencia Creative Commons 3.0 impidiendo su uso para fines comerciales.
Recordad que siempre es importante revisar la licencia de cada icono y, en caso de duda (algo muy común cuando no se permite usar en proyectos comerciales, ya que con frecuencia se refieren a que no pueden venderse, no a que no pueden usarse en apps de pago), entrad en contacto con sus creadores.
Big Data ha sido un importante tema en el 2013, y se plantea la pregunta amenazante de cómo se pueden interpretar todos los datos disponibles.
Como consumidores de datos, estamos constantemente decidiendo si debemos marcar como «Favorito» un archivo particularmente interesante, o hacer una entrada en Evernote para volver a leerlo más tarde. Hay tantos datos que se generan cada minuto en Internet que se hace cada vez más difícil tomar decisiones tales como: ¿Debo leerlo ahora? ¿Debo hacer una nota en mi libreta Moleskine? ¿Debo enviarme el enlace por correo electrónico a mí mismo? En resumen, pasamos más tiempo clasificando y organizando datos que ya existen. Al hacerlo, ¡creamos más datos sobre los datos!
Del mismo modo, como «proveedor» de información, tanto si es un reclutador buscando candidatos perfectos para un trabajo, un diseñador mostrando sus habilidades en un solo lugar, o un educador hablando de un tema interesante, se enfrenta también a un desafío: ¿Cómo recojo la enorme cantidad de datos a mi disposición de forma clara y convincente para mi lector sin perder el eje?
Introduzca el marketing con contenido visual
Al reconocer este dilema, algunos estudiosos de la red crearon una mezcla única de fotografías y datos brutos: la infografía.
¿Qué es una Infografía?
La infografía es la presentación visual de la información que comprime las ideas complejas y las presenta a los televidentes en una forma fácil de asimilar. Estas le permiten comunicar datos difíciles de captar de forma rápida y clara.
Una infografía puede ser una imagen suplementaria para su entrada en el blog o página web, o podría ser una pieza independiente de información con poco texto de apoyo. Eso significa que usted puede basar todo un blog en una infografía.
Un estudio realizado por Jakob Neilson concluye algunos hallazgos interesantes. Para empezar, la gente pasará más tiempo en su página si incluye más palabras; sin embargo, sólo gastan 4,4 segundos para cada 100 palabras adicionales. Más importante aún, la gente va a pasar el tiempo en su página analizando el diseño y mirando las imágenes en su página, por lo que realmente terminan por leer sólo el 20% del texto.
Parecía lógico que incluyéramos esto: una infografía para explicar una infografía (Fuente)
¿Por qué utilizar infografías?
Un estudio realizado por la Escuela de Negocios de Wharton descubrió que el 50% de la audiencia fue persuadido por una presentación puramente verbal, mientras que el 67% por la presentación verbal que tenía imágenes adjuntas. Otro estudio encontró que las imágenes en color de la infografía aumentan la voluntad de leer en un increíble 80%.
Aquí hay 6 razones sobre por qué las infografías son tan eficaces para la comercialización de contenidos:
1. Los seres humanos están programados para procesar el contenido visual. Piense en esto: ¿las señales de tránsito serían tan eficaces si se presentaran en forma de texto puro? ¡La mayoría de la gente ni siquiera tendría la oportunidad de leerlas mientras conduce!
2. Los seres humanos están cansados ”‹”‹de la sobrecarga de información. Según Mihaly Csikszentmihalyi, estamos bombardeados con aproximadamente 2 millones de bits de información por segundo, mientras que sólo podemos procesar 134 bits de estos 2 millones por segundo. Simplemente no podemos procesar el exceso en el ingreso de datos.
3. Los seres humanos pueden recordar el contenido visual más rápido que cualquier otra forma. Vamos a recordar el 80% de lo que vimos e hicimos, el 20% de lo que leímos y el 10% de lo que escuchamos.
4. La adición de imágenes cuidadosamente elaboradas hacen que lo que estamos leyendo sea más creíble.
5. Dado que las infografías son fáciles de digerir, atractivas y divertidas, más personas están dispuestas a compartirlas con otros.
6. El primer paso para convertir una perspectiva en un visitante a largo plazo y en un futuro comprador es mantener su atención. Las infografías son muy atractivas por sí mismas y hacen que esto sea más fácil de lograr. Si usted tiene un sitio web o un blog, ya no puede conformarse con el texto llano, aburrido. Para empezar, nadie “lee» un texto en línea. La mayoría de la gente va a rozar su página sin leer la información. Pero con la infografía, tiene un método organizado para hacer que se queden más tiempo y quieran más.
Cómo utilizar las infografías
Los investigadores Barbara M. Miller y Brooke Barnett explican:
Por sí solos, el texto y los gráficos son a la vez métodos de comunicación útiles e imperfectos. El lenguaje escrito permite un número casi infinito de combinaciones de palabras que permiten un análisis profundo de los conceptos pero depende en gran medida de la habilidad del lector para procesar dicha información. Los gráficos pueden ser más fáciles de comprender para el lector, pero son menos eficaces en la comunicación de lo abstracto y los conceptos complicados…. Este estudio mostró que para la presentación de información científica, la combinación de texto y gráficos permite a los comunicadores aprovechar las fortalezas de cada medio y disminuir las debilidades de los mismos. (P. 63, » “Understanding of Health Risks Aided by Graphics with Text”)
Esto significa que lo mejor es utilizar una infografía con el soporte de una pieza de texto. Esto le permite a una infografía convertirse en instructiva de una manera convincente y atractiva.
Por ejemplo, en su sitio web o blog, puede pegar infografías coloridas y atractivas que pueden actuar como una herramienta de reclutamiento, presentar datos de encuestas, explicar cómo funcionan las cosas y comparar conceptos. Desde los superhéroes hasta las ideas más complicadas, las infografías han encontrado su lugar en todas partes. Demos un vistazo a algunas de las más eficaces a continuación:
Cómo ser un superhéroe: Una guía ilustrada (enlace) 13 razones por las que al cerebro humano le encantan las infografías (enlace) Cómo quieres tu diseño (enlace)
Cómo crear infografías impresionantes en menos de una hora
Bien, está convencido de la eficacia del contenido visual en línea. Al ser una organización o una pequeña empresa, desea darle a esto un buen andar. Naturalmente surge la siguiente pregunta, ¿cómo puedo crear una infografía de impresionante aspecto para mi sitio web?
La manera más obvia para algunas personas es contratar a un diseñador freelance. Pero dependiendo de a quién contrate, usted puede terminar pagando cientos de dólares y no conseguir finalmente lo que quiere. Si usted es del tipo “hágalo usted mismo” y le gusta aprender y aplicar nuevas habilidades para la vida sin gastar dinero, eche un vistazo en EWC Presenter. Todo lo que tiene que hacer es crear una cuenta gratuita en www.ewcpresenter.com y elegir Infografía ”“ allí puede crear presentaciones, anuncios publicitarios, demostraciones de productos e infografías.
No necesita instalar ningún software adicional ya que la aplicación está basada en la nube y trabaja en HTML5, con temas atractivos y la posibilidad de personalizar bastante el resultado.
Artículo escrito por ewcpresenter para WWWhatsnew
Project Siena es el nombre de la aplicación que hace aplicaciones, disponible ya en apps.microsoft.com de forma gratuita.
La idea es que podamos crear aplicaciones sin necesidad de saber programar, apps que podrán estar disponibles para que cualquiera pueda instalar en su Windows 8. Solo tenemos que arrastrar componentes, definir aspectos estéticos, establecer origen de datos (como canales RSS), configurar acciones, subir fotos y/o vídeos.. hay decenas de elementos que pueden combinarse de mil formas diferentes, permitiendo guardar el resultado y compartirlo para que otras personas puedan instalar lo que hemos creado.
Como podéis ver en la imagen, en WWwhatsnew ya hemos empezado a jugar con el tema, creando una aplicación que podrá usarse para leer las noticias desde Windows 8/8.1 de forma sencilla.
Podéis obtener más ejemplos y algunos consejos en technet.microsoft.com/en-us/ProjectSiena. Los que ya habéis programado en entornos visuales (Delphi, Visual Basic, etc.) veréis que no es muy diferente: eventos, componentes y mucha imaginación.
El resultado, en nuestro caso, lo hemos guardado en forma de .exe dentro de Skydrive, siendo necesario obtener la licencia de desarrollador para poder instalarlo (algo que se hace automáticamente desde Project Siena).
Una gran idea que permitirá ampliar la lista de aplicaciones disponibles para este Sistema Operativo.
Independientemente del navegador o sistema operativo que estemos usando, podemos acceder a modern.ie para verificar la commpatibilidad con Internet explorer de nuestros proyectos web, y ahora han lanzado una nueva versión que incluye Internet Explorer 11 tanto para Windows 7 como para Windows 8.
El objetivo de modern.ie no es solo ofrecer máquinas virtuales para verificar la compatibilidad de páginas en el navegador de Microsoft, también podemos acceder a herramientas pensadas para que los programadores puedan pasar más tiempo creando y menos realizando pruebas (palabras literales del blog de Microsoft).
Desde la página principal de modern.ie podemos informar la url de nuestro sitio y esperar a que se generen los informes, con errores de codificación, aspecto en diferentes dispositivos con diversos tamaños de pantalla (usa BrowserStack para ellos) y recomendaciones para solucionar los problemas que va encontrando. Por otro lado, también usa le motor de saucelabs.com para detectar problemas de compatibilidad con navegadores modernos.
Una plataforma obligatoria dentro de la sección de favoritos de todo webdesigner y programador web, junto a pagespeed insights, de google y la de tests W3C.
Si queréis ver cómo se ve vuestro sitio web en diferentes navegadores podéis usar browserstack, una de las mejores opciones en dicha categoría, pero si lo que queréis es hacer una captura de una página web completa, os recomiendo snapito.com, una solución sencilla, rápida y con excelentes resultados.
Sin necesidad de registro solo tenéis que indicar la url y esperar a que se genere la imagen, que podrá bajarse al ordenador y compartirse de forma sencilla. El modelo de negocio de Snapito es atractivo: ofrecen un servicio que realiza capturas y miniaturas para cualquier web, con un precio gratuito para menos de 50.000 impresiones mensuales. Si tenéis un directorio de sitios web, por ejemplo, podéis usar su servicio para capturar las páginas, o si tenéis una aplicación para móviles, podéis optar por algún plano para este tipo de dispositivo.
Personalmente uso Snapito para verificar el aspecto de cualquier web teniendo la garantía de que no tiene en cuenta los archivos guardados en mi ordenador (archivos css en caché, por ejemplo, u otros temporales del navegador). Aunque browserstack es más eficiente para ese tipo de trabajo (prueba con varios navegadores), Snapito es más rápido, y a veces es exactamente eso lo que se necesita: agilidad.
A veces las soluciones más sencillas acaban siendo las más prácticas. Ese es el caso de webprojector (webprojector.org), una web en la que los diseñadores pueden subir sus trabajos para mostrarlos a los clientes sin necesidad de enviar pesados emails.
El objetivo es compartir imágenes desde el propio navegador, siendo posible definir el fondo, el título del proyecto y otras variables estéticas. Una vez en la página en la que se muestra en trabajo, podremos comentar y verificar el aspecto de dicho diseño en otras pantallas, permitiendo especificar si queremos simular un teléfono, un PC o una tableta.
Webprojector puede usarse sin necesidad de registro, aunque para guardar nuestros proyectos será necesario tener una cuenta. De momento podemos usarlo para subir una imagen, copiar la url única generada y empezar a interactuar con nuestros clientes, algo parecido a lo que conseguimos hacer con estas otras soluciones.
Destacan en webresourcesdepot.com la posibilidad de ver estadísticas con datos como «número de veces que han abierto nuestra imagen», algo que puede ayudar bastante para saber si, efectivamente, han consultado nuestro mensaje.
Ya hemos hablado de varias herramientas que podemos usar para crear infografías, aunque está claro que infogr.am continúa siendo la preferida por miles de usuarios en todo el mundo.
La idea de esta plataforma es que podamos construir infografías sin necesidad de tener grandes conocimientos de diseño. Hay varios modelos diferentes que tienen la opción de cargar los datos para que se adapten a lo que queremos mostrar al mundo. Es posible ir incluyendo mapas, gráficos, cuadros, textos y demás elementos para construir la infografía adecuada.
Infogr.am participa de decenas de eventos relacionados con la información visual, divulga buenos libros sobre este tema en su blog, actualiza su aplicación con bastante frecuencia y, ahora, permite que las infografías creadas se adapten automáticamente a las pequeñas pantallas.
Así es, después de publicar nuestro trabajo podemos obtener el código necesario para incrustarlo en nuestro sitio web. Si copiamos el script adecuado (responsive, en la captura inferior), veremos como el diseño se adapta a los móviles perfectamente.
Crear infografías con infogr.am es gratuito. Podemos publicarlas en su web, en la nuestra, aunque para exportar el resultado en PDF o PNG es necesario ser usuario Pro. Este tipo de usuario también puede compartir el trabajo desde una url no pública, proteger las infografías con contraseña y acceder a más diseños de los disponibles en la opción gratuita.
Los diseñadores y programadores siempre estamos en constante búsqueda de recursos de todo tipo que nos faciliten la vida. Sabemos que tal búsqueda puede ser tediosa, pues nos distrae de las tareas realmente creativas que nos gusta realizar, por eso, hoy te traemos muchísimos recursos recientes que puedes utilizar en todo tipo de proyectos. Diviértete y comparte estos recursos que incluyen sets gráficos, Interfaces gráficas de usuario, iconos, plantillas y temas en HTML y PSD, y experimentos de código.
Gráficos de excelente calidad y detalle para todo tipo de proyectos
En esta sección encontraras gráficos de todo tipo para darle un impulso a tus proyectos, desde botones hasta tarjetas de presentación el diseño presta un gran servicio a todas las áreas. tómate un tiempo para revisar estos diseños y descárgalos
Ya que una aplicación o sitio Web no es nada sin un buen diseño, en esta sección podrás encontrar diferentes tipos de interfaces gráficas, con estilos modernos y minimalistas. Variando desde coloridas hasta muy sobrias, seguro te serán de mucha utilidad en tus próximos proyectos.
Espectaculares colecciones de íconos para dar vida a tus proyectos
Hemos seleccionado geniales iconos sociales, animados, lineares, tipo fuente, en formato SVG. Lo mejor de todo, puedes aprender con los tutoriales que vienen incluidos.
Hermosas y sofisticadas plantillas en HTML, PSD y WordPress
Aquí encontrarás diferentes temas y plantillas en formatos PSDs y HTML para implementar en tu sitio Web. Dale a tu sitio una apariencia renovada y fresca con temas planos, minimalistas y llenos de fotografías de excelente calidad.
Mejora tu sitio web con los mas geniales experimentos de codigo
Esta sección contiene varios experimentos de código para mejorar tu sitio Web. Incluye librerías de audio, características para Chat, tablas dinámicas, código para mapas y mas.
Cuando el tiempo juega al otro lado del tablero y necesitamos entregar una idea rápida a un cliente, nada mejor que una plataforma como canva.com, herramienta que abrió en modo privado hace unos meses y que ya ha empezado a entregar invitaciones.
Hemos probado su sistema de creación de diseños y podemos afirmar que han acertado. Tenemos layouts de todo tipo con posibilidad de personalizarlos, más de un millón de imágenes disponibles para arrastrarlas y posicionarlas correctamente en el diseño, opción de incluir textos con varios tipos de fuente, capacidad de subir fotos desde nuestro ordenador para incluirlas en el trabajo, alterar colores… todo sin necesidad de instalar nada.
Aunque no estamos hablando de una herramienta tan potente como Corel o Photoshop, si es ideal para hacer maquetas, para crear layouts de forma rápida y tantear antes de comenzar un trabajo más específico, aunque permiten exportar contenido tanto en imagen como en PDF, listo para imprimirlo en forma de folletos, por ejemplo.
En la enorme base de datos de imágenes existente, encontramos algunas gratuitas, aunque la mayoría cuestan 1 dólar, con la licencia adecuada para su uso comercial.
Como ejemplo hemos realizado este pequeño folleto con algunas capturas de canva.com (pulsad en la imagen inferior para ampliar). Todas las secciones aparecían con el botón «upload your image», de hecho hemos dejado el círculo central sin contenido, aunque podríamos haber arrastrado cualquier componente, tanto del propio sistema como de nuestro ordenador. Podéis reservar ya vuestro nombre de usuario en su página principal.
