En 2010 os hicimos una lista de plugins para chrome que pueden ayudar en el diseño web. Lo hicimos de nuevo en 2012, con las novedades del momento. Llegó el momento de hacer la lista de las mejores extensiones para diseñadores web en 2014.
– Dimensions: Empezamos la lista con un plugin ideal para medir distancias en la pantalla, siendo así útil para el diseño de borradores.
– Responsive Web design: Nos permite probar nuestros diseños web adaptables a la pantalla de cada dispositivo (responsives), permitiendo cambiar el tamaño de la pantalla seleccionando el dispositivo adecuado.
– PerfectPixel: Para poner sobre nuestra página html el diseño de lo que estamos construyendo. Podemos seleccionar una imagen y cambiar su transparencia para que al sobreponerse encima de la web que estamos desarrollando podamos verificar si lo que hemos mostrado al cliente es exactamente lo mismo que estamos programando. Se abre como una ventana emergente lateral desde donde podemos controlar posición y transparencia.
– Web Developer: Añade una barra con decenas de recursos útiles para quien programa páginas web.
– Ripple Emulator: Abre un simulador para programadores de aplicaciones móviles, permitiendo desarrollar sin salir del navegador.
– ColorZilla: No es nueva, pero es extremadamente útil. Nos permite, entre otras cosas, capturar el color de cualquier elemento que vemos en pantalla. Podemos también navegar por paletas, generar css, analizar los colores de una página… lleva 10 años en el mercado.
Y vosotros, ¿qué extensiones usáis en el desarrollo de páginas web?
Dibujar curvas con la herramienta existente en algunos editores de imágenes no es tarea fácil. Hay que añadir puntos de ancla donde la curva cambia de dirección y arrastrar las lineas que forman la curva. Es la longitud y la pendiente de dichas lineas las que determinan la forma final, y para ello requiere práctica.
Una vez creada la curva, puede modificarse de forma sencilla, con lo que la creación de los puntos de ancla acaba siendo la principal tarea. Usar muchos puntos puede generar protuberancias no deseadas en una curva, por lo que es mejor dibujar puntos de ancla bien espaciados y practivar la formación de la curva adjuntando la longitud y los ángulos de cada linea de dirección.
Para practicar tenemos un juego online en bezier.method.ac, donde después de algunos tutoriales podemos comenzar a desarrollar contornos complejos como el de la captura superior.
Es una de las actividades existentes en method.ac, donde podemos encontrar varios recursos tanto para programadores como para profesionales del diseño. Entre ellos tenemos también color.method.ac, una excelente herramienta que puede ayudarnos a mejorar nuestra puntería a la hora de encontrar el color adecuado para nuestros trabajos.
Si queréis realizar alguna animación que pueda verse perfectamente desde navegadores modernos o dispositivos móviles, Animatron (animatron.com) os puede ayudar. Se trata de una plataforma que permite crear animaciones atractivas tanto solo como en equipo, con una herramienta sencilla de usar y con un plan gratuito limitado a 20 proyectos.
El panel de trabajo permite usar varias formas, distribuirlas en varias escenas (como si estuviéramos creando un cómic), utilizar una linea de tiempo para gestionar las animaciones, importar audio desde nuestro ordenador, subir imágenes (dibujos hechos a mano, por ejemplo), utilizar librerías, definir movimientos independientes para cada elemento… una gran cantidad de recursos que ayudan a crear nuestra animación sin problemas.
En su página principal es posible ver algunos trabajos realizados por sus usuarios, y la plataforma está abierta en modo invitado, permitiendo su uso sin necesidad de registro (aunque de esa forma los trabajos no se guardan después de 15 días).
El resultado puede exportarse en HTML5, SVG, GIF o vídeo, listo para compartirse en la página web en la que estáis trabajando.
Cody es una iniciativa interesante que reúne una serie de pequeños tutoriales de HTML y CSS, a los que podemos acceder de manera gratuita.
Efectos, estilos, recursos y diferentes trucos encontraremos en esta biblioteca online que va sumando de a poco nuevos contenidos. Con una dinámica muy interesante, nos permite acceder a un tutorial explicado paso a paso, con referencias y un conjunto de archivos para descargar e implementarlo en nuestro trabajo.
Solo tenemos que escoger el tutorial que nos resulta de interés, visualizar el demo para corroborar que es lo que estamos buscando y tendremos toda la información a nuestra disposición. Además, podemos valernos de la opción de dejar comentarios si necesitamos resolver una duda o leer el aporte de otros usuarios.
Si buscamos un tema en especial, podemos valernos del buscador o simplemente recorrer todos los tutoriales que se han compartido hasta el momento. En la sección de FAQ veremos que los creadores de Cody nos permiten utilizar libremente todos los recursos que han compartido, respetando algunos términos.
Un recurso online gratuito interesante a tener en cuenta para complementar nuestro kit de herramientas de trabajo.
Raumrot se suma a la lista de recursos que nos permiten acceder a imágenes HD para uso personal o comercial.
Encontraremos una colección de fotografías sumamente creativas que combinan diferentes efectos y estilos. Es una iniciativa de Markus Spiske, que expone parte de su trabajo bajo licencia CC BY 2.0 para que cualquier pueda utilizar las imágenes en sus proyectos con solo dar la atribución correspondiente.
Para facilitar la búsqueda del estilo de fotografía que necesitamos, encontraremos 9 categorías dedicadas al deporte, los negocios, la naturaleza, entre otros. Al elegir una imagen veremos que tiene dos opciones que nos permiten tener una vista previa o proceder a su descarga.
Todas las fotografías están alojadas en Flickr, lo que nos brindará más opciones al momento de realizar la descarga, ya que tendremos diferentes tamaños para escoger. Además, podremos ver algunos detalles técnicos de la fotografía.
Por el momento, encontramos más de 200 fotografías pero podemos guardar Raumrot entre nuestros favoritos para seguir de cerca sus actualizaciones.
Mazwai ofrece una selección de videos HD que pueden utilizarse de manera gratuita tanto para uso personal como para proyectos comerciales.
No son los típicos videos que podemos encontrar en YouTube, sino que filmaciones y animaciones con diferentes técnicas que captan de manera impresionante determinados momentos o conceptos.
Hay casi 70 videos que cubren diferentes temáticas y estilos, por lo que encontraremos alguno que se ajuste a nuestro criterio para complementar nuestro diseño o trabajo. Aunque no están clasificados en categorías, ni tienen ningún sistema de filtros resulta simple recorrerlos.
Podemos tener una vista previa con solo posicionar el puntero del mouse sobre el video que capte nuestra atención. Y una vez que ingresamos al video, podemos vizualizarlo completo y acceder a la opción de descarga.
Además, nos indicará el nombre del autor del video y recordará que todos los videos compartidos en Mazwai están bajo licencia CC BY 3.0, permitiéndonos utilizarlo de manera gratuita en cualquier proyecto dando el debido reconocimiento.
No hay límites en la cantidad de videos que podemos descargar, ni tampoco nos pedirá ningún tipo de registro. Sin dudas, un interesante recurso que diseñadores y creativos pueden tener en cuenta para ilustrar sus proyectos.
Hace poco un invitado de Wwwhat’s new compartió un artículo titulado Infografías interactivas increíbles y por qué funcionan en el que se mencionaban las características esenciales que hacían tan virales a algunas infografías especialmente si se comparaban con las que prescindían considerablemente del material visual para concentrarse en el textual. Grave error, pero ¿por qué? ¿Por qué el contenido visual es considerado mejor que el textual por parte de los millones de usuarios en la web?
We live in a visual world («vivimos en un mundo visual») es la frase que encabeza la flamante y extensa infografía compartida en el blog de Bufferapp y que presentamos a continuación pues con su contenido busca dar respuesta a la anterior pregunta. Para ello nos da una vuelta por las estadísticas relevantes que rigen la red como que el contenido visual consigue casi el doble de cantidad de visualizaciones, es 40 veces más probable que sea compartido en redes sociales o que sus detalles son más fáciles de retener por parte de los usuarios que alcanzan a mantener en sus cerebros 80% de lo que ven frente al 10% de lo que escuchan -sin distinción por sexos.
Y eso es solo un abrebocas pues luego describe muy bien las bondades y otros datos de gran valor sobre tres canales visuales básicos: Presentaciones, Videos e Infografías. Para las presentaciones resalta cosas como que en el último año una tendencia eficiente ha sido incluir más imágenes en cada diapositiva, para los videos que el 90% de los compradores online los tienen en cuenta para sus decisiones de compra y finalmente para las infografías se ilustra el gusto por ellas hasta por el mismísimo Lincoln. En fin, aquí está la infografía en su tamaño completo:
Porque sin tráfico, su sitio web no cumple con su cometido.
Digamos que usted es un profesor de biología a quien también le encanta la tecnología. Usted está probando algunas herramientas nuevas online en clase y nota un aumento en el rendimiento de los estudiantes cuando combina la clase con estas herramientas.
Así que inicia un blog sólo para grabar y compartir sus emocionantes descubrimientos. Usted comenta sobre las toneladas de herramientas gratuitas que ha usado. Sin usted saberlo, este pequeño blog comienza a atraer lentamente un tráfico de 10.000 visitantes distintos por día. Pronto comienza a recibir “gracias” por correo electrónico, de otros profesores que buscan este tipo de recursos en línea.
También empieza a escuchar a otros desarrolladores de aplicaciones que le piden que pruebe sus aplicaciones pagas, de forma gratuita. Imagínese lo que eso podría significar para usted. Usted podría comenzar un servicio de testeo de aplicaciones patrocinado. Usted puede tomar su blog y venderlo como un informe a sus suscriptores. Incluso podría escribir un libro electrónico sobre cómo utilizar las 5 mejores herramientas en el mercado. O conseguir comisiones a través de enlaces de afiliados de una aplicación.
Las opciones son ilimitadas.
Ahora ¿qué pasaría si pudiera impulsar este tráfico a 20.000 visitantes por día, transformándolo en un recurso de autoridad para profesores de biología que buscan aplicaciones y software para utilizar en clase?
¡Eso sería increíble! Después de todo, su objetivo con el blog fue siempre que sus hallazgos fueran útiles. Cuanto más, mejor. La buena noticia es que usted no tiene que gastar una fortuna para hacerlo, además. He aquí cómo:
5 formas de incrementar el tráfico a su sitio web
1. Utilice infografías
Las infografías le permiten desmitificar los datos complejos y presentarlos en un formato fácil de entender y de asimilar.
Después de todo, los seres humanos están cableados para el procesamiento y el aprendizaje visual ¿Sabía usted que el 90% de los datos del mundo se ha creado en los últimos dos años?
Estos datos comprenden todo: los cambios estacionales, el uso de los medios de comunicación social, estadísticas deportivas, los patrones de compra en línea de todo el mundo, los días de enfermedad de los empleados, anuncios virales…, para nombrar unos pocos.
¡Acceda a las infografías para salvar el día! Las infografías no son una tecnología nueva. Google Insights muestra que la palabra ha sido buscada durante años, desde 2004. Aquí hay una creada en Visme que muestra los pasos para crear una infografía:
La mejor parte es que una infografía permite ver los datos de forma práctica y fácil. Y sí, usted no tiene que gastar nada para crear una con Visme.
2. Utilice imágenes
Trate de recordar una serie de 12 números. Es difícil de memorizar, ¿no es así? Trate de hacerlo con una ayuda mnemotécnica visual, y de repente no tiene problemas de memoria.
Las imágenes hablan con sus lectores individuales y cuentan una historia.
Las fotos generan 53% más “Me gusta” en su Facebook. Los canales como Google+ están conduciendo más tráfico de clientes a sitios web debido al impacto visual.
Y lo que es más, ¡sus artículos con imágenes tendrán un 94% más vistas que los que no tienen ninguna imagen! En la búsqueda local, la gente es 60% más propensa a comprarle a usted si aparece una imagen en el anuncio. He aquí una prueba más en forma de infografía.
Para ver la infografía en tamaño completo pulse aquí
También puede agregar citas sobre sus imágenes para lograr un efecto agregado. Quozio es un buen lugar para empezar a crear imágenes con superposiciones de texto y si quiere más control, puede utilizar Visme.
Una precaución: por todos los medios, manténgase alejado de las «fotos estándar» y antiguas con hombres de traje dándose la mano. O peor aún, la del típico jefe gritando a sus empleados con un megáfono ¿cuál es exactamente el punto de una foto así?
Convengamos que las fotografías estándar no motivarán una conversación -y algunas de ellas son horribles- ¡dígales adiós! Sin embargo, no todas las fotos de stock son malas. Las fotos de personas reales hacen un mejor trabajo transmitiendo significado:
HubSpot está regalando una colección de interesantes fotografías -incluyendo la anterior de la chica con gafas- de archivo de forma gratuita. Puede conseguirlas este listado. Éstas son algunas de ellas en el tema negocios.
3. Utilice fuertes llamados a la acción
Si usted está manejando un negocio en línea, la forma más segura y más rápida de aumentar las ventas es mediante el aumento de su tasa de conversión.
Una conversión ocurre cuando un visitante hace lo que usted quiere que haga en primer lugar. En el caso de nuestro profesor de biología, una acción deseada podría ser inscribirse a la lista de correo electrónico.
Para que estas acciones sucedan, es su labor facilitarles el trabajo tanto como pueda. Piense en ello como migas de pan: usted quiere marcar literalmente el camino correcto para que la gente «haga clic», «compre» o «se suscriba». Usted puede hacerlo con los botones de llamada a la acción (Call-To-Action) y con las imágenes ¿Puede adivinar la llamada a la acción deseada en nuestra página principal?
En la página de inicio, queremos que los nuevos visitantes hagan clic en el botón «Start Creating» (Comenzar a crear). No es casualidad que el color verde del botón se destaque -es deliberado porque queremos que el botón grite «¡Hey, por aquí!».
Usted quiere hacer lo mismo con sus botones de CTA. Vea aquí otro ejemplo. El botón CTA usa un claro enfoque hacia el beneficio: «Vea cómo Bob puede entrenar virtualmente a su equipo».
Cree sus nuevos CTA en forma gratuita ahora con Visme.
4. Crear contenido de valor masivo
Atrás han quedado los días en que «el contenido era el rey». Con millones de sitios web en línea, el buen contenido es el rey.
Construir y comprometer a una comunidad de seguidores para su negocio en línea requiere tiempo. El marketing de contenidos es una gran manera de acortar la distancia entre los dos. Con la comercialización de contenidos, usted crea entradas de blog estelares, escribe artículos como invitado en otros blogs influyentes y premia a sus lectores con contenido de valor masivo.
En primer lugar, sepa lo que está buscando. Encuentre su historia y su tono. Luego entienda lo que quieren sus lectores. Y deles eso:
• Escriba mensajes de lista útiles (como éste). • Dé un seminario en línea sobre su tema central (utilice Google Hangouts de forma gratuita). • Escriba un libro electrónico y regáleselo a su público. • Haga algo épico.
Cree algo genial y luego envíelo.
5. Utilice los colores correctos
Usted ya lo ha escuchado antes. Los colores participan en la atracción de los lectores a su blog.
Es por eso que se les da tanta importancia a los colores al hacer diseños. Aunque eso es cierto, no es la verdad.
Al considerar los colores, no se olvide de dónde se van a utilizar, es decir, el contexto. Un color que se ve bien para su competidor no necesariamente va a ser lo mismo para usted. Sus colores tienen que agrupar todo y presentarlo como un gran paquete que es inmediatamente agradable.
¿Suena como una tarea difícil? ¿Sería complicar aún más la cosa si le dijera que la elección del color también depende de la visión de la persona, sus antecedentes, su cultura, su género y más? Así, amarillo no significa siempre feliz y azul no significa necesariamente transmitir confianza.
Por ejemplo, el rojo podría significar valentía, pero a la hora de diseñar un formulario de registro, el rojo significa fracaso. El verde puede significar crecimiento en un contexto, pero significa éxito en el mismo formulario. Vea aquí un ejemplo de la página de registro de Twitter, donde el rojo significa éxito y el verde significa fracaso:
Como Twitter está utilizando los colores adecuados asociados en este contexto, le ahorra tiempo a la gente y esto se refleja positivamente en su aplicación.
La única manera de saber si usted está usando los colores «correctos» es haciendo pruebas A/B constantemente en su sitio web.
Su Turno
Por supuesto, hay muchas más maneras de aumentar el tráfico a su sitio web, y voy a hablar de ellas en futuros posts. Estoy curioso por saber de qué maneras ha intentado y qué ha funcionado mejor para usted. Déjemelo saber en los comentarios. ___ Artículo escrito por la gente de Visme para Wwwhatsnew
Una vez más traemos a ustedes una selección con 50 recursos de diseño gratuitos, frescos y de alta calidad. Como es costumbre, estos elementos están ordenados en 5 secciones para la conveniencia del lector: gráficos, interfaces de usuario, iconos, plantillas y experimentos de código. Esperamos que les agrade esta lista.
Gráficos
Esta sección incluye elementos para el uso en proyectos web pero tambien para impresión.
Adobe ha agregado un interesante módulo titulado «Market» dentro del menú principal de Creative Cloud, justo al lado de las pestañas Files y Fonts de la sección Assets, dentro de su versión para equipos de escritorio. Mockups, vectores, pinceles, patrones, UI Kits, gráficos, formas, iconos e imágenes de alta calidad hacen parte del contenido seleccionado y disponible para usuarios de pago de CC.
Y como no podía ser de otra manera, los contenidos son tomados directamente de los portafolios de profesionales que han publicado sus materiales en Behance, la comunidad de diseño que desde hace un par de años hace parte de Adobe. Claro, se ha trabajado en conjunto con dichos creativos para poner su material a disposición de los usuarios de Creative Cloud de tal manera que puedan darles uso en cualquier obra libremente, personal o comercial, sin pagar regalías.
Múltiples formatos disponibles para los contenidos (PSD, ABR, TPL, JPEG, PNG, SVG, etc.), un cajón de búsquedas facilitado por el etiquetado de los assets, descargas a un clic con la posibilidad de abrirse fácilmente con su respectiva aplicación dentro de la suite de Adobe y sincronización automática entre los archivos descargados con la respectiva carpeta de archivos de CC figuran en sus características.
Eso sí, cuenta con un par de limitaciones: Se pueden descargar no más de 500 ficheros al mes y el Market no estará disponible para usuarios del plan «Fotografía» de Photoshop ni el de Creative Cloud en general. En fin, para más información bastará consultar el artículo de lanzamiento en el blog de Behance y para verlo en acción, se le puede echar un vistazo al corto video que en VentureBeat han compartido:
Cody
