Los datos fueron tomados durante 4 semanas. En total se registraron un millon de clicks aleatorios en unos 18.000 banners de la red. A partir de estos datos se generó el siguiente mapa de calor:

Los resultados del mapa de calor indican que los usuarios suelen pinchar con mayor frecuencia en la zona superior derecha del banner. En general, la zona inferior del banner casi no registra actividad.

Con estos resultados podemos extrapolar que los usuarios prestan mayor interés a la zona superior derecha del banner. Algo que se debería tener en cuenta al diseñar este tipo de banners y aumentar así el CTR y ROI de una campaña.

Para encontrar la mejor fotografía y al mejor precio existen varios buscadores y extensiones para navegadores.

SpiderPic

Es uno de los buscadores más completos. Los resultados pueden filtrarse por el origen, licencia y ordenar los resultados (por novedad, descargas y relevancia). Además, es posible comparar los precios de la misma imagen en las diferentes comunidades, como se puede ver en esta página de ejemplo o en la siguiente imagen:

Además, SpiderPic dispone de una extensión para Firefox e Internet Explorer y hay una extensión en desarrollo para Chrome.

StockBlend

Este buscador, creado por Anders Peter Amsnæs, permite configurar la busqueda de imagenes, videos e ilustraciones en múltiples webs. Además de las más conocidas, es posible buscar en comunidades más especializadas (Artic Stock Images, Retrostock y Medstock) e imágenes en Flickr.

Cyclops

Cyclo.ps difiere de los anteriores al exponer los resultados de búsqueda en diferentes pestañas. Por ello es más complicado comparar los precios e imagenes de las diferentes fuentes.

ImageTrail

Es uno de los buscadores, de este tipo, más antiguos. No es muy configurable y los resultados no parecen ser los más actualizados.

Picniche

Es una extensión para Firefox que permite buscar las imágenes al mejor precio en Fotolia, Shutterstock, iStockphoto, Dreamstime, BigStockPhoto, StockXpert, 123 Royalty Free, CreStock, Cutcaster, CanStockPhoto, Deposit Photos y Panther Media.

Para ver cual es el mejor uso para cada plantilla puedes el artículo completo en UX Magazine o ver la presentación con 80 ejemplos más abajo.

1. Master/Detalle

2. Columnas

3. Paleta/canvas

4. Dashboard

5. Spreadsheet

6. Interactivo

7. Busqueda/Resultado

8. Filtrado datos

9. Paneles paralelos

10. Asistente

11. Preguntas y respuestas

12. Formularios

13. Portal

14. Pestañas

15. Explorador

80 ejemplos reales de las plantillas

La web ha sido realizada por la agencia inglesa Poke.

Actualmente la agencia está realizando una campaña de social media marketing en Twitter -en la que buscan los nombres para los monoplazas de la escuderia.

Personalmente me gusta el diseño y programación de la web (aunque no valida en el W3C). Siendo Virgin Racing el equipo con menos presupuesto de la Formula 1, la imagen web que promocionan es, a mi parecer, la mejor de los nuevos equipos de Formula. Por supuesto, esto es un aspecto estratégico del equipo ya que detrás está Richard Branson y Virgin, quizás una de las 20 marcas con más nombre.

Tecnologia

Además de una imagen moderna, la web  de Virgin Racing tiene características técnicas interesantes:

• Servidor nginx 0.7.62
• doctype XHTML 1.0 Strict (aunque no validado)
• jQuery 1.3
• Liberia Cufon para las tipografías
• Cloudfront como CDN

Otros videoclips de Röyksopp

Por último, Röyksopp tiene otros videoclips bastante buenos, por ejemplo el siguiente gano el 2002 MTV Europe Music Award al mejor videoclip. Puedes ver todos los videoclips del duo en su canal de Vimeo o página web.

Diseño y conceptualización

Otros vídeos:

• Pantalla y Framework 3D
• Pruebas
• Fabricación

Yahoo!’s Design Pattern Library

Yahoo!’s Design Pattern Library, es una librería de patrones de diseño. Actualmente dispone de 56 diseños que pueden ayudar mucho a los desarrolladores y diseñadores al diseñar el interfaz y aumentar la usabilidad.

Excepcional Performance

Excepcional Performance, es una sección dedicada a la optimización del rendimiento de webs. Además de consejos, dispone de vídeos e información sobre la extensión Yslow! para Firebug, la cual permite analizar el rendimiento de una web desde el navegador Firefox.

YUI Library

YUI Library, es una librería de utilidades escritas en javascript y css para construir aplicaciones interactivas (RIA). Personalmente prefiero jquery como javascript framework, pero como en las diferentes distribuciones de Linux, cada una tiene sus pros y contras, y YUI es una biblioteca estable y potente – algo que queda demostrado gracias a que Yahoo! la usa en todas sus webs.

Astra

Astra, es una librería de componentes para Adobe Flash y Flex pensado para los desarrolladores Flash & Actionscript que permite construir aplicaciones interactivas (RIA).

Lenguajes de programación

En los centros de lenguajes de programación encontrarás tutoriales, articulos, foros y ejemplos de código de los siguientes lenguajes de programación: Flash, Java, JavaScript, .NET, PHP, Python, Ruby y Silverlight.

API y servicios web

Por último recordar que en este portal encontraremos toda la información y ejemplos relacionados con las más de 35 APIs y servicios web de Yahoo!, como por ejemplo Flickr, Yahoo! Maps. De todos ellos me gustaría destacar dos:

1. Pipes, una aplicación web que permite crear mashups de datos a través de un interfaz gráfico y diversas fuentes y formatos (rss, json, …)
2. Yahoo! Connected TV Platform, una plataforma para poder crear widgets para televisores Sony®, VIZIO®, Samsung®, LG®. Inicialmente solo estaba disponible para EE.UU, pero desde principios de este año el servicio está disponible para 16 paises, entre los que está España.

Por medio de técnicas de desenfoque en la toma y retoque digital, logra que los espacios urbanos se conviertan en maquetas, produciendo imágenes atractivas y desconcertantes.

Ben está rediseñando su web Cityshrinker, pero es posible admirar sus fotografías en la versión anterior.

¿Cómo conseguir el mismo efecto?

Si quieres conseguir efectos parecidos en tus fotos visita los siguientes tutoriales/webs:

• tutorial para Gimp
• tutorial para Adobe Photoshop
• teoria en la wikipedia
• aplicación web para conseguir este tipo de efectos
• aplicación para iphone
• 9 ejemplos de otros fotógrafos

Varias fotografías de Cityshrinker

Aunque estas practicas no están extendidas lo que deberían, existen múltiples herramientas que permiten crear wireframes de una manera rápida e intuitiva (tanto versiones Cloud Computing & Saas. como programas para diferentes plataformas):

1. Mockingbird (Online/Saas)

Es una herramienta online de creación de wireframes (Wireframing-Tool). Al estar programada sobre el Framework “Cappuccino” la interacción es como en un programa de escritorio. Los wireframes se crean de una manera sencilla mediante Drag & Drop de elementos comunes en el diseño de páginas web. El resultado puede descargarse o enviarse por email.

2. Firefox Pencil (Mac/Windows)

Esta herramienta está basada en el Geckoengine del navegador Firefox, y se instala como un complemento (plugin). Por lo tanto es una buena solución para esquemas rapidos e independientes de la plataforma. Los wireframes se pueden exportar en formato png. En su contra, el uso es, a veces, un poco más lento debido a que no dispone de atajos de teclado. Pero su escaso tamaño (< 450 KB) y ser una herramienta gratuita la hacen una muy buena elección.

3. Iplotz (Online/Saas)

Es una herramienta online que permite crear wireframes clickables. Además incluye funcionalidades básicas de gestión de proyectos, como por ejemplo asignar tareas, por lo que es posible colaborar con otros usuarios en la creación de los wireframes. Aunque sea un servicio Saas, existe una versión descargable programada en AIR. Finalmente, hay múltiples planes que se adaptan a diversos usuarios, desde una versión gratuita (1 proyecto limitado a 5 pantallas) a versiones corporativas (múltiples usuarios y proyectos ilimitados)

4. Balsamiq (Mac/Windows)

Balsamiq es una herramienta programada en Flex y la creación de wireframes es muy intuitiva y permite crearlos de una manera rápida. Las plantillas, con un estilo pintado a mano, facilitan que al presentar los prototipos no se malinterpreten con versiones finales. En la web de balsamiq se puede probar la herramienta de manera gratuita y exportar los wireframes a png (con marca de agua). Y en el caso de utilizar la herramienta habitualmente existe una versión de pago, además de una versión onlines/saas en el futuro. Por ultimo al basarse en archivos xml, es posible integrar la herramienta con otros programas como por ejemplo gestores de proyectos.

5. Omnigraffle Pro (Mac)

Esta herramienta permite crear rápidamente wireframes, diagramas de proceso y sitemaps. Las características más interesantes de Omnigraffle es que permite crear capas como en Photoshop y usar plantillas predefinidas, que pueden descargarse de internet – por ejemplo de Graffletopia. Estas plantillas permite crear fácilmente wireframes de aplicaciones de Facebook y Iphone, Elementos Ajax, Formatos publicitarios o elementos de Social Media Webs. También es posible crear prototipos clickables al poder definir zonas interactivas que al exportarse a pdf clickables dan cierta interacción (aunque no pueden sustituir a prototipos en html)

6. Axure (Windows)

En comparación con otras herramientas Axure permite crear prototipos interactivos en html/javascript. La creación de prototipos interactivos es muy util tanto para presentaciones como para pruebas de usuarios y poder hacerse una idea de la futura web. Otra funcionalidad interesante es la posibilidad de crear comentarios en los documentos que luego pueden exportarse a formato Word, para crear la documentación conceptual de un proyecto. Como en otras herramientas es posible cargar plantillas para agilizar la creación de los wireframes.

7. Adobe FlashCatalyst (Mac/Windows)

Este programa desarrollado por Adobe aun se encuentra en su fase de desarrollo. Aunque solo este disponible una versión beta, la herramienta es muy solida. Al ser un producto Adobe permite cargar archivos de otras herramientas Adobe como por ejemplo Photoshop o Illustrator. Lo más destacable de FlashCatalyst es que permite añadir interacción a los elementos de diseño hasta el punto de crear animaciones avanzadas como por ejemplo scroll, fundidos, etc. Por ello FlashCatalyst es, seguramente, la herramienta ideal para la creación de prototipos con animaciones complejas, ya que es algo limitada para wireframes estáticos.

Otras referencias

En resumen, actualmente existen múltiples herramientas para crear wireframes estáticos y prototipos clickables. Puedes encontrar una amplia tabla resumen en en este articulo de Dan Harrelson.