Archivo de la etiqueta: Diseño

Yahoo! y NYTimes presentan nuevo diseño

Para los más despabilados, The New York Times presentó nuevo diseño (el primero desde ¡abril de 2006!). Un cambio de cara en portada muy sutil, pero mejora mucho en la navegación de los artículos: más limpio y legible. También modificaron la presentación fotográfica. Algunos detalles interiores me hace acordar a USA Today, muy a tono con la usabilidad desde móviles. Acá un ejemplo de nota.

Yahoo! también está en proceso de cambio visual y editorial. La sección de tecnología incorporó a la estrella David Pogue, columnista de NYTimes, y ahora presentó el nuevo diseño igual que en la sección Food. Muy visual y también con artículos limpios y fáciles para navegar. La versión móvil es muy buena también!

Pasen, recorran y me cuentan!

Actualización:

Sobre el rediseño de The New York Times agrego dos enlaces interesantes:

  • The technology behind the NYTimes.com redesign (en inglés). Porque están comentados algunos detalles por parte del manager a cargo de la ejecución del proyecto y porque se explicitan algunas tomas de decisiones.
  • Behind the scenes on the NYTimes redesign (en inglés). Una entrevista a la líder de proyecto de diseño porque explica cuáles fueron los objetivos, lenguajes utilizados (el artículo sobre desarrollo que menciono antes también lo hace). En fin, la explicación oficial sobre el nuevo diseño.

Sobre la experiencia de lectura en medios

barrilete

Las técnicas de diseño y desarrollo incorporadas en los especiales hechos para sitios de noticias en los últimos tiempos -en gran parte gracias a los avances que primero vimos en webs de campañas publicitarias hechos por agencias-, tienen como objetivo fundamental la modificación de la experiencia de lectura de los usuarios.

Hablo de los especiales que vimos en NYTimes, como Snow Fall, o el de La Voz: todos tienen la intención de sumergir al lector en una experiencia narrativa que los contenga. De ahí que algunos describan esa experiencia como “inmersiva”.

Los elementos que componen las piezas son varios. Tienen una producción cuidada de fotografía y video. Los textos son largos, con profundidad y publicidad acotada (si es que la hay). No hay banners, ni pop-ups. Pueden existir composiciones visuales como infografías o gráficos interactivos. Por supuesto, hay tiempo, recursos humanos y económicos invertidos. En cuanto al desarrollo podríamos sintetizar esas líneas de código de javascript, html y CSS, en el paraguas del Parallax o el Scrolling.

No solo hay especiales

Sería injusto acotar a estos especiales periodísticos el empeño general que existe en modificar y, por qué no, mejorar la experiencia de lectura/visualización. Vox Media viene proponiendo otras formas de contar historias desde que nació como agencia de medios. Aplicaciones de lectura para “leer luego”, como Instapaper o Pocket, tienen un formato propio que elimina todo el ruido existente alrededor del contenido que nos importa. También hay productos o aplicaciones desarrolladas para realizar este tipo de narrativas. Exposure es un ejemplo, Scroll Kit otro. Pero hay mucho más.

Más cercano en el tiempo está la propuesta de Medium

Con el último rediseño (la implementación de fotografías a pantalla completa y un cuidado degradado de los títulos hasta desaparecer completamente) hicieron de Medium un lugar mejor para leer. No hay dudas de eso. La prueba que hizo MG Siegler publicando el mismo post en Medium y en Techcrunch (sitio para el cual trabaja) es suficiente.

Sigue leyendo

Cómo fue el proceso de diseño de Polygon

polygon

Uno de los aspectos que siempre destaco en este blog sobre medios es el diseño en medios digitales. Además de que me interesa el tema en particular, creo que es muy poco atendido por periodistas. Hace tiempo se convirtió en herramienta fundamental, junto con el desarrollador, en el proceso de creación y visualización de una pieza periodística.

Vean el artículo “Ted Irvine of The Verge, Polygon & SB Nation” porque van a entender a qué apunto. Irvine es el director de diseño de Vox Media (ya conocen mi opinión sobre ellos) y cuenta cómo fue el proceso de diseño para Polygon (quienes ganaron un premio al mejor diseño de sitio web de noticias del mundo).

Además del detalle de cómo eligieron las tipografías tal o cual, o la manera de leer de corrido la portada; les recomiendo la parte donde cuentan cómo es el trabajo diario con los editores. Porque en eso es donde el periodista está involucrado directamente con sus notas. La decisión de diseñar crónicas o notas específicas por semana y tener predeterminadas algunos formatos según lo que se quiera contar.

15 millones de dólares para el rediseño de CNN

cnn-nuevo

Okey, es un poco tramposo el título porque además es un cambio de toda su infraestructura. De manera que es un poco más que el diseño.

Sin embargo no deja de sorprender tamaña cifra. Según explicó su presidente, Jeff Zucker, apuntan todo hacia los usuarios “móviles” porque el tráfico proveniente de las computadoras de escritorio está estancado y envejecido, dijo.

Será un poco más oscuro el diseño, con relevancia del video (claro está) y con una gran historia destacada en portada, como The HuffPo.

Dato: el mes pasado CNN.com tuvo 42 millones de usuarios únicos en Estados Unidos.

Un experimento de Chicago Tribune: hacer una portada para aumentar la participación de los usuarios

chicago-tribune-home-page

Repensar la portada o “Home Page” de su propio medio. Eso es lo que hizo Chicago Tribune.

Parte del equipo del medio participó de un hackathon y en dos días tenían que resolver el siguiente interrogante: ¿Cómo rediseñar la portada de su sitio de noticias para aumentar la participación de los usuarios?

El resultado lo pueden navegar ustedes mismos. Como ellos dicen, es una mezcla entre Reddit y Hacker News. Falta mejorar la experiencia, aclaran, tal vez con más pestañas. Pero el concepto es tal cual se ve en la captura. Votos a un click de las noticias que aparecen enlistadas y navegación vertical.

Dejar anotaciones en imágenes

Captura de pantalla 2013-05-18 a la(s) 17.55.43

Lifehackers vuelve a ser uno de mis blogs preferidos. Siempre fue bueno, pero por alguna razón lo había dejado de leer. Hace unos meses volví y me di cuenta que estaba dejando de lado una de las mejores publicaciones tecno/geek/nerd (como quieran llamarle). Al menos así la considero hoy.

Pero además de hablar bien de LH y su contenido, quería marcar un detalle que está desde su rediseño. Ellos lo llaman “annotation images” y me resulta un recurso muy sencillo de estimulación para la participación del usuario en algunas imágenes. La captura es de este artículo. Es simple: click en la imagen y luego dejar la anotación. Luego se visualizarán con pequeños globitos de diálogo. Poco intrusivo y, en algunos casos, puede resultar muy útil.

Bocetos webs: Nuevo diseño de Digg

A este blog le gusta mucho publicar bocetos de sitios webs. Porque nos gusta conocer el proceso de creación de las páginas, los criterios elegidos, cómo deciden las prioridades de los elementos. Por eso festejamos cuando publican esos detalles de un proyecto, cualquiera sea. Hoy tenemos el caso de Digg. Ya en manos de sus nuevos dueños, el histórico sitio de contenido agregado va por una actualización importante.

En su blog explican que están trabajando en el nuevo diseño que busca llegar a todos los usuarios desde distintas vías, con diferentes formatos de contenido. Y tienen planeado salir con el nuevo sitio en los próximos días.

Estas son las primeras maquetas que hicieron del sitio:

Digg Boceto

Sigue leyendo

Ideas de portada: opción de esconder contenido

Hoy comienzan los Juegos Olímpicos. Es obvio que los medios publicarán muchísima información sobre el tema. Más si es británico. Pero miren que buena manera encontraron tanto en The Times como en Guardian para no saturar al lector.

Ofrecen la opción: “Hide Olympics” en portada. Si querés, como usuario, podés esconder la información:

Guardian

wireframe

Bocetos de sitios webs

Hay diferentes técnicas, costumbres y manías en los creadores de sitios webs. En mi caso, cuando tuve que sentarme a pensar cómo quería un sitio (en su mayoría fueron de noticias), primero recurrí al lápiz y papel. Después lo pasé en digital con alguna herramienta de mockups. Pero el inicio, el punto cero, fue en un cuaderno.

Es conocido el primer boceto de Twitter. Cuando el sitio ni siquiera tenía todas las funcionalidades que tiene hoy:

Twitter Wireframe

Hay muchas instancias antes de que esas líneas que simulan una web se transformen en un código accesible para todos. Wireframes, Mockups, son algunos de los nombre que suelen recibir. Y hay de varios tipo: aquellas que están en una instancia de pruebas y se puede acceder desde una navegador (prototipo navegable) o están digitalizadas pero sin posiblidad de navegación, como un dibujo pero hecho con software.

Vuelvo al punto cero. Ese instante en que la idea que nos moviliza tiene la primera prueba empírica de realización. Es un momento clave aunque existan altísimas chances de que el sitio final no se le parezca en nada.

Por eso me resulta llamativo ver los bocetos de otros sitios, sean masivos o no, porque allí está el inicio de la idea, su escencia.

Les dejo algunas imágnes de bocetos que estuve mirando. Hay varios blogs que armaron listas y listas de estos dibujos. Les paso 2: uno en DesignBeep, otro en Webdesignledger.

The Washington Post – Post Points Website Sketch (fuente):

Bermuda Triangle Site (fuente):

Vimeo profile page idea (fuente):

Vimeo conversations page ideas (fuente):

¡Si ven más ejemplos no dejen de avisarme!