martes, 6 de noviembre de 2012


Creando páginas web

Existen varias herramientas que permiten diseñar sitios web exclusivamente para ser navegados en dispositivos móviles, una de ella es Onbile. La página cuenta con diferentes plantillas pensadas para ser claras, "amigables" y fáciles de editar.

En esta oportunidad, creamos una página web para una tienda de dulces: sweetcakes. Para el diseño, utilizamos colores pasteles que estuvieran a tono con las fotografías de los diferentes productos y que transmitiera la dulzura de nuestras creaciones. Buscamos un formato de menú que fuera claro y sencillo de manejar para los usuarios touch.

Entre las diferentes opciones están Productos, Pedidos, Happy Table y Cooking Tips, jerarquizadas por mayor importancia para el consumidor.

Creado junto con Andrea Fregosi y Fernanda Ramirez

lunes, 5 de noviembre de 2012

Web Móvil

Hoy en día es cada vez más común que las personas accedan a diversas páginas de internet mediante sus dispositivos móviles. Muchas instituciones como Amazon o las redes sociales ya se han adaptado a esta nueva tendencia construyendo páginas específicamente diseñadas para ser visualizadas de esa manera. A continuación analizamos las páginas de 3 bancos Uruguayos utilizando Gomometer, una herramienta que permite testear que tan "amistosas" son las versiones móvil de las páginas. 




La página de CityBank para móvil cumple con 3 de los seis parámetros básicos y necesarios para que una página vista desde un teléfono sea “amistosa”. En el balance general, los tres puntos negativos, son en áreas más trascendentes que donde Gomometer les da puntos positivos. 

Los puntos negativos refieren a la usabilidad de la página, lo cual es el principal factor para brindar comodidad. Las imágenes no aparecen de forma adecuada, se ven cortadas y demoran en cargar. El texto siempre necesita hacer scrol o zoom, lo cual dificulta y retrasa. En cuanto a su navegabilidad, los links y botones no están diseñados para el manejo de forma táctil. 

Los puntos positivos suman para el usuario nuevo, ya que la página resulta efectiva a simple vista. Esto es porque al ingresar, sólo tarda uno con diecinueve segundos en cargar, cuando el tiempo máximo de espera es cinco segundos. Por otra parta, las diferentes opciones de servicios están claramente jerarquizadas. Por último, la accesibilidad a áreas puntuales es muy buena, ya que tiene un buscador amistoso y simple de encontrar. 

Según Gomometer, la página del CityBank está en el medio entre, una página mal hecha, y una bien hecha.



En el mismo lugar podemos decir que se encuentra la página web para móviles de Santander. Similar al caso anterior, el sitio web tiene puntos a favor y en contra. El usuario puede navegar y entiende el modo de desplazarse por la web pero se le presentan algunas dificultades. 

A pesar de que se accede al sitio en menos de 4 segundos, el usuario debe hacer scrol o zoom para navegar por la página. Además aunque las imágenes pueden visualizarse, no se ven enteramente. Y los botones, aunque es comprensible la función de cada uno de ellos, el tamaño, en algunos casos, es muy pequeño. 

Aunque es posible navegar en el sitio, definitivamente la página web de Santander no está adaptada para móviles.


En comparación a los sitios anteriores, la página web visible en móviles del banco república, se encuentra en una mejor posición. Obtiene un 4 de 6 en la escala de Gomometer, la cual indica que tan amisotosos son los sitios cuando ingresamos desde un dispositivo móvil. 

Los aspectos negativos tienen que ver con el tamaño del texto y el hecho que se debe hacer zoom para poder leer o navegar correctamente. Un problema que parece repetirse frecuentemente. El segundo punto, tiene que ver también con la navegación y hace referencia a los links y botones. En este caso se repite un problema que al igual que el anterior es frecuente y es el hecho de que no están diseñados para los pulgares. 

Los puntos positivos tienen que ver con la velocidad de carga que es significativamente menor a la recomendada, con la jerarquía ya que los menús y botones son claros y fáciles de identificar. También puntúa de forma positiva el hecho de que las imágenes cargan con facilidad y siempre están visibles y el hecho de que la barra de búsqueda está en un lugar destacado. 

Si bien es una página que es bastante accesible para manejar, no esta diseñada específicamente para navegar en sitios móviles.




Trabajo realizado en conjunto con Angelo Bonavota y Fernanda Ramírez 

lunes, 29 de octubre de 2012

Video Tutorial

El siguiente video, es un tutorial de cómo hacer grullas de papel, utilizando la técnica japonesa del origami, la cual consiste en en el plegado de papel para obtener distintas figuras. 



Realizado con Gabriela Blanco y Fernanda Ramirez 

jueves, 18 de octubre de 2012

Vídeos Virales


El objetivo del trabajo era planificar la creación de un vídeo viral. La idea fue crear un vídeo, basado en ciertos eventos, como publicidad para una  marca pero sin decir que era publicidad. Osea, armar la historia como si fuera una historia real y difundirla como tal, teniendo como única alusión a la marca el logo de la misma al final del vídeo que esperamos se convierta en viral. 

El siguiente Prezi es la presentación del trabajo, hecho en conjunto con Andrea Fregosi




martes, 16 de octubre de 2012

Prueba de video

Una prueba de edición de vídeo muy muy básica en Windows Movie Maker, subida a YouTube y Vimeo. Dos redes sociales que permiten ver y compartir videos.




video prueba from Sofia Vanoli on Vimeo.

Un mapa para festejar



Si tenes un negocio y buscas una herramienta que te pueda ayudar, sin duda deberías recurrir a Google Maps.

Google Maps te da una opción que te permite crear tus propios mapas. El único requisito es previamente hay que crear una cuenta de Google, y a partir de ella, te da la posibilidad de ubicar todo lo que necesitas para llevar adelante un negocio.

En este caso se trata de una empresa de decoración de fiestas y eventos que buscaba saber dónde podría presentar sus servicios, ¿la solución? un mapa con los salones de fiestas que hay dentro de Montevideo y en los alrededores.



Ver Salones de fiestas en un mapa más grande

Trabajo realizado en conjunto con Gabriela Blanco y Fernanda Ramírez 

jueves, 11 de octubre de 2012

Probando listas de reproducción

YouTube es una herramienta que permite a los usuarios subir y compartir videos, pero también permite muchas funciones más. Una de ellas es lo que se conoce como lista de reproducción. Esta es la mia, en la que les doy una muestra de mis películas favoritas.


lunes, 8 de octubre de 2012

Viento y mar


Soundslide final del Puerto del Buceo en Montevideo mostrando una mirada distinta de uno de los lugares más comunes de la ciudad. 



Canción: 
Sultan & Ned Shepard - Walls (3LAU Vocal Edit)

jueves, 4 de octubre de 2012

La deuda de Pluna

Probando la herramienta Many Eyes que nos permite crear visualizaciones gráficas de cualquier tipo de información que tengamos, ya sean números o palabras, decidimos presentar la información de la deuda de Pluna de una manera diferente y más fácil de entender.


miércoles, 3 de octubre de 2012

Una nueva forma de navegar la web

La nueva tendencia a la hora de crear páginas web parece ser un diseño inspirado en la navegación mediante dispositivos móviles como son los smartphones o las tabletas. Este tipo de páginas tienen una estética mucho más limpia y un menú de navegación inusual si lo comparamos con con las páginas tradicionales. Ejemplos de esto son las páginas de Quartz, USA Today y Pepsi


Lo primero que llama la atención, en especial en los portales de noticia, es como ya mencioné, la estética diferente de los menú de navegación. En primer lugar se está ampliando el uso del menú lateral en el cual se encuentran los elementos imprescindibles del menú tradicional, y es el que más llama la atención porque se le da mucha importancia a la estética. Cada pestaña cuenta con imágenes o iconos que hacen que sea mucho más fácil la navegación. A parte de esto por lo general tienen una segunda columna en la que aparecen noticias destacadas. Es una manera sencilla de encontrar la información sin tener que perder tiempo explorando y es una manera clara que no marea al lector.

Una cosa que llama la atención, como se puede ver en la imagen superior es que además de este menú lateral sigue manteniendo la barra de navegación superior como en las páginas tradicionales, solo que a diferencia de estas se reemplazan las secciones usuales por secciones con nombres mucho más específicos que llaman la atención pero que categorizan la información de una manera clara y concisa que es más fácil de navegar.

La página de USA Today es similar en este sentido sólo que hay una presencia mucho más fuerte de gráficos, imágenes y links que conectan a diferentes noticias o secciones.  Y hay un número mucho más grande de menús para explorar y diferentes opciones de visualización que son inusuales. No muestra una noticia entera sino muchos encabezados de entre los cuales se puede elegir. Las páginas tradicionales que hemos visto hasta ahora dan un pequeño resumen de todas las noticias y por lo general no hay muchas fotos.


Lo que inmediatamente llama la atención son las flechas laterales que son típicas de la navegación en dispositivos móviles y que yo hasta ahora nunca vi en las páginas típicas de internet. Lo que hacen estas flechas es llevarte a las secciones que aparecen en el menú superior sin necesidad de hacer click en dicho menú. Es mucho más fácil, rápido y cómodo que la navegación tradicional.

Dos cosas interesantes que vale la pena mencionar son el uso de publicidad y las múltiples posibilidades de compartir. Con respecto a las posibilidades de compartir, en ambas páginas al final de cada artículo permite conectar a la mayoría de las redes sociales e indicar las preferencias. Cada una con un ícono amigable a la vista que permite su identificación de forma rápida.  Además en el caso de USA Today al abrir la noticia, la cual se abre por encima de la página principal, algo que también es nuevo y pocas veces visto, aparecen opciones específicas de la noticia.



El uso de publicidad es interesante porque no es el tradicional de un banner o un pop-up. En el caso de Quartz la publicidad está entre noticia y noticia. Esto es, una vez que comenzamos a leer y llegamos al final de una noticia, antes de pasar a la siguiente hay una publicidad. Pero no es cualquier publicidad, tiene una estética determinada que va de acuerdo con el diseño de la página y además se basa mas que nada en imágenes y gráficas. En USA Today parece no haber publicidad.

La página de Pepsi, si bien sigue dentro de la misma estética y se basa en principios similares, es un caso aparte. A lo que se le da principal importancia es a la parte gráfica, a las imágenes, y estas reemplazan el menú tradicional y al menú lateral ya que ellas son el menú. Haciendo click en ellas se pueden explorar las diferentes secciones. De todos modos hay un pequeño menú superior que permite ingresar a las secciones más tradicionales como quienes somos e información.


Además de esto la página está sincronizada a Twitter y se exponen los tweets relacionados con The X Factor, programa de televisión al cual patrocina. Y también tiene acceso a las demás redes sociales. Al ser un sitio de un producto comercial, la página es una publicidad del producto, y no hay ningún otro tipo de publicidad que no esté relacionada con Pepsi directamente.

Por lo que muestran estos sitios, al parecer, la nueva tendencia que se está expandiendo en la web es la de sitios diseñados con la mente en la navegación mediante dispositivos móviles que incorporan diseños y estéticas que estamos más acostumbrados a ver cuando visualizamos la versión para móvil de un sitio que cuando visualizamos el sitio desde una PC. 

martes, 2 de octubre de 2012

Una breve historia del Iphone

Con la herramienta Timetoast, que nos permite crear líneas de tiempo, realizamos una línea del tiempo que relatara de forma clara  sencilla la historia del Iphone.


Trabajo realizado en conjunto con Fiorella Canoniero, María Camussi y Angelo Bonavota


Las palabras importan

Tagxedo y Wordle son dos herramientas que permiten crear nubes de palabras. Una nube de palabras es una representación visual de las palabras que conforman un texto, en donde el tamaño es mayor para las palabras que aparecen con más frecuencia.

¿Alguna vez te preguntaste de qué habla Barack Obama en su cuenta de Twitter? Con Tagxedo es muy fácil de averiguar, simplemente ingresa su nombre de usuario y el programa automáticamente te genera una nube de texto.


¿Cuál fue el mensaje que quiso transmitir Steve Jobs en su discurso en la Universidad de Stanford en el año 2005? Basta con ingresar el texto en Wordle y ver el resultado. 


lunes, 1 de octubre de 2012

Cines Uruguayos

Este próximo trabajo es para todos los cinéfilos que hay por ahí. La consigna consistía en localizar o intentar localizar todos los cines de Montevideo y marcar su ubicación en Google Maps

Esta herramienta de Google es un servidor de aplicaciones de mapas en la web que ofrece imágenes de mapas desplazables, así como fotos satelitales del mundo e incluso la ruta entre diferentes ubicaciones o imágenes a pie de calle lo que es conocido como Google Street View. (Más)




Trabajo en conjunto con Gabriela Blanco
View Cines en Montevideo in a larger map

martes, 25 de septiembre de 2012

Usabilidad

La usabilidad es un concepto relativamente nuevo que se refiere a la facilidad con que las personas pueden utilizar una herramienta particular. En interacción entre las personas y la web la usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción, si es fácil navegar en ellas o si nos obliga a pensar.

Para trabajar mejor el tema analizamos dos páginas web exclusivamente desde el punto de vista de la usabilidad. La página del diario El Pais y la de El Espectador.

El Espectador



  • Los links de la secciones se entiende que son links. Pero tiene demasiadas secciones. 
  • Cantidad de noticias en la portada da una sensación abrumadora. 
  • No hay nada destacado. Los titulares de las noticias tienen todos el mismo tamaño. 
  • El nombre de la página (El espectador) se pierde en el sitio. Destaca más el anuncio que se encuentra en el banner central, debajo de las secciones. 
  • Muchos anuncios intercalados con las noticias. Molesta la lectura y ocupa espacio en la página. 
  • En la barra lateral está tirado todo: anuncios, cartelera de cine, cotización del dólar. No selecciona que información poner y en dónde ponerla. No parece tener en cuenta qué es lo que el lector prioriza.
  • La página principal es muy larga, por lo que hay que ir con el mouse muy para abajo. Da la sensación de que quisieron poner todo en la portada y eso saca las ganas de leer. 
  • Abajo del todo: contenido multimedia. Queda feo a la vista porque es una sopa de palabras y que los títulos son links pero no queda claro hasta que se pone el mouse sobre ellos. No hay necesidad de ponerlos ahí, puede haber una pestaña de navegación aparte.
  • Twitter de los políticos mezclados entre las noticias. Es demasiado. 
  • Estado del tiempo no se sabe si es un link, pero esta bien ubicado. 
  • No tiene etiquetas. 
  • No da espacio para comentarios. 
  • El buscador casi no se ve. 
  • Mi cuenta, para personalizar el contenido, tiene la misma relevancia de quiénes somos.
El País


  • Títulos más destacados que otros. Lector sabe lo más importante.
  • Cotización del dólar se le da más relevancia que en El Espectador. 
  • Da la opción a comentar y a leer comentarios, pero si se está en el portal de inicio y no en la noticia hay que buscarlos. No están muy claros. 
  • Hay contenido multimedia con el destaque adecuado y funciona sin problema.  
  • Te permite compartir y calificar. 
  • No hay sobrecarga de noticias, la página está limpia y da la impresión de que está lo más relevante. 
  • Linkea las noticias con otras relacionadas para que el usuario explore, pero no lo obliga a leerlas. 
  • Menos secciones y mejor distribuidas, dándole más importancia a unas sobre otras. 
  • Hacia el final de la página está una barra con los suplementos: lo principal de cada uno.
  • Parece más un sitio de noticias serio. Más amigable a la vista. 
  • Menos bombardeado de aviso, hay algunos pocos al costado y algunos intercalados en las noticias, pero son pocos y no molestan. 
  • Hay un buen uso de etiquetas 
  • Al Ampliar la noticia aparecen pestañas con la noticia, el audio, y las fotos, cada una debidamente identificada y da como resultado una lectura más limpia.

Trabajo realizado en conjunto con Andrea Fregosi y Margara Ferber

lunes, 24 de septiembre de 2012