MadeinMind

StreetCare

Hoy, de la mano de todos los spenteros, StreetCare ha visto la luz, y con su propia página oficial. Asi que aprovecho para inaugurar el blog con algo interesante:

1.- La idea:

StreetCare es una aplicación online que permite a los ciudadanos enviar incidencias urbanas para que los ayuntamientos puedan solucionarlas y hacer el seguimiento a través de la aplicación.

Como todo nacimiento, StreetCare necesitaba un logotipo y una intefaz:

* El logotipo: StreetCare nace con el motivo de establecer un nuevo canal de comunicación entre ayuntamientos y ciudadanos y facilitar la transparencia en la gestión y resolución de incidencias. Por tanto trabajé su diseño pensado en el concepto de solucion, encaje, resolver, y a la vez, de le participación y comunidad. En estas direcciones, surgió la idea de ‘pieza de puzle’.
Sí, algunos direis que es un recurso bastante usado en diseño web y software, pero en este caso, no funciona como un icono informativo (img icon) o una imágen de negocio. Es más bien el nuevo contexto y su significado, que le aporta el valor de logotipo.

* La interfaz: Se presentaba como un espacio a medio camino estre una aplicación (programa) y un website. Este concepto, que ha permitido a muchos diseñadores romper la barrera de la lectura vertical de una web, (como muchas aplicaciones en Flash) funciona bien si usamos siempre el 100% de la pantalla disponible evitando el scroll. Por tanto: Debe ser “elástica” y adaptarse a la pantalla (alias diseño líquido, jelly, etc..). La pantalla se convierte en un escenario donde los elementos se desplazan y cambian a nuestra voluntad pero nunca les debe faltar espacio.

2.- La tecnología: Silverlight
Las decisiones de interfaz tomadas y la tecnología que usamos (Blend, VS, Azure) permite más integración en el aspecto visual, pero también exige más dedicación. Al ser elástica no podemos jugar con iconografia en imagen (gif, jpg), ya que no se adapta a los cambios de pantalla (son medidas fijas) y es .... algo tosco por no decir feo.
Por tanto, opté por una iconografía vectorial trazada con Expression Design y Expression Blend. Un icono debe ser autodescriptivo y dar a entender su significado a la primera: Haz tú mismo la prueba: observa los iconos diseñados y piensa su significado. Luego pasa por encima de cada uso y aparecerá su referencia. Funciona?



3.- El diseño:
Por otro lado, el diseño de StreetCare se basa en la diferenciación de 2 zonas: mapa / navegación = zona clara / zona oscura. Aprovechando esta distinción, en el diseño de las opciones, se potenció el uso del fondo oscuro para destacar los colores y los iconos, así como el uso de sobras y reflejos que le dan más profundidad y riqueza gráfica.
Además se personalizaron las ventanas emergentes con colores afines al logotipo para dar más coherencia visual al entorno y establecer el “libro estilo de la aplicación”.
Pushpins y uso del color
Con un icono, a veces no basta: para distinguir las diferentes incidencias que se pueden reportar en StreetCare, escogimos un icono representativo, como es el coche (abandoned vehicle) o la silla (abandoned furniture). Debido a que son elementos gráficos poco estandarizados, y me refiero a: todos conocemos icono ‘carrito de la compra’ (tan popular en el diseño web) pero nadie conoce un icono de mueble abandonado; recurrí al color como ayuda visual:



Con esta correspondencia, el usuario, se acostumbra con facilidad a identificar cada tipo de incidencia, y no robar su atención con códigos complejos.
Todo esto seria sólamente un aburrido post más, sino fuese porque mis compañeros han hecho posible que funcione de verdad y se convierta en una aplicación. De momento en fase beta, pero que podeis ver aqui y ha sido seleccionada en los premios de Windows Azure Apps Contest

By Unknown | miércoles, 24 de noviembre de 2010 | Silverlight | 3 Comments »