MadeinMind

Esta vez toca poner los puntos sobre las íes. Como todo diseñador, me gusta tomar nota de las campañas de publicidad, los mensajes, la comunicación, el formato y en definitiva, valorar su eficacia.

Me fijé hace un tiempo en la campaña de Barcelona para el motocivisme, que se inicia en el marco de la “Setmana de la mobilitat sostenible i segura” y que tiene como protagonista la figura de un motorista ( a tamaño real) en un soporte rígido.

El mensaje invita a este colectivo a tomar conciencia de los riesgos de la circulación a través de mensajes como:
-En Barcelona, 21 motoristas resultan heridos cada dia
-Reduzcamos los accidentes de moto en Barcelona
-Encima de una moto, el riesgo de sufrir heridas graves se multiplica por 8.

...y algunas más por el estilo.

Lo que me gustaría destacar es que uno de los consejos que aparecen en la campaña:



¿No es un poco difícil aparcar correctamente la moto, cuando tienes una pieza de tamaño real ocupando una plaza de aparcamiento en el mismo centro de Barcelona?
Un punto menos para el alcade Hereu y el responsable de la campaña. Hay que pensar en ser creativos, pero también funcionales en los equipamientos de la ciudad. Bastante dificil es ya circular en Barcelona. O eso dice la campaña.

Ya hace algunos dias que camina por sí solo. Spenta ha lanzado Beezy, un producto que nos trae todas la funcionalidades de las redes sociales para favorecer la productividad de la empresa. ¿Cuantas veces hemos tenido que buscar el contacto de algun compañero? ¿Cómo podemos mantener informado a un equipo sin colapsar el buzon de correo? ¿Porqué no integrar una conversación a un proceso de trabajo?
Estas son algunas de las propuestas que nos trae Beezy entre muchas más. Su mayor ventaja es la agilidad para integrarse en los procesos de trabajo, con herramientas y recursos que forman parte de nuestro día a día en comunicación social: muro de eventos, meetings en grupo, lync, coauthoring, etc... y todo ello dentro del entorno colaborativo de Sharepoint.

En cuanto al diseño de producto, la propuesta es totalmente adaptable a una intranet en Sharepoint 2010 OOB sin modificar la estructura de masterpage ni layouts, puesto que Beezy corre igualmente on premise y in the cloud con Office 365. Para ello, el diseño debe cumplir con las restricciones del entorno y a la vez poder adaptarse al branding de un cliente, grupos de trabajo, tagging, y, en definitiva una buena personalización gráfica para cada cliente.
El equilibrio entre diseño y funcionalidad nos ha llevado varios retos gráficos, de interacción y también de maquetación en Office 365, usando los css-alternativos en Sharepoint que permitan identificar cada grupo con un color en su cabecera y colores en los tags.


Por otro lado me gustaria detacar el branding de Beezy, desde la concepción del nombre, en varias fases, el diseño de la marca corporativa, el lanzamiento en los social media y su aceptación entre el público:




• Naming: Beezy es un nombre que proviene de Bee (abeja) y biz (business), y que viene a representar la colaboración entre varios a la vez (empresa, grupo de trabajo).
• Diseño: En este sentido, nos hemos apoyado en el concepto de la colmena para representar el trabajo simultáneo y la participación de sus miembros en el desarrollo de un proyecto. Por eso, usamos la unión de hexágonos y colores diferenciados para representar el concepto.
• Puesta en marcha: Desde Spenta hemos presentado nuestro producto a través de la misma red social, para dar mayor visibilidad y abrir las puertas a la participación abierta en el proceso de naming y pre-lanzamiento. Hemos recibido muy buen feedback y una gran aceptación y espectativas por parte del público y usuarios potenciales.


www.gobeezy.com y Feliz Lunes!

 

”Si buscas resultados distintos, no hagas siempre lo mismo.”;
Gran frase donde las haya, y muy relevante para el diseño. Quien de nosotros no ha tirado de los recursos y plantillas para poder plantear algun diseño? Quien no ha optado alguna vez por homenajear alguna página web que “nos gusta” y conseguir un resultado fácil y rápido?

Soy partidaria de hacer un benchmark antes de abrir el photoshop/fireworks y comenzar a diseñar. Hay que investigar en el entorno para saber cómo vamos a plantear el diseño de nuestro proyecto. Pero eso no nos sirve para seleccionar algo y copiar sin ningún esmero y hacer algo que nos sea más cómodo, o nos ayude a “salir del paso”. Diseñar es buscar, pensar, y repensar; darle vueltas a lo que ya tenemos y hacer versiones en las que se aporte un paso más a una solución apropiada. Hacer algo nuevo significa no recurrir a lo que ya sabemos hacer.

Si es importante para el diseño, hay que dejar constancia de ello.

Lo que quiero decir es, que parte del trabajo de un diseñador, es dar a conocer las decisiones y los motivos que nos han hecho llegar al resultado final. El valor de nuestras propuestas no está solamente en el resultado sino en el argumento que hay detrás. Todas las decisiones que tomamos a medida que vamos trabajando se ponen en cuestión cuando presentamos la propuesta. En ese momento es cuando los demás, aportan su opinión o su punto de vista, y es entonces cuando debemos hacer  sobresalir todos los argumentos, y defender aquello que nos ha parecido relevante a lo largo del proceso. Si no se dice, nadie lo sabe y carece de valor. Debemos evitar que el diseño se convierta en una cuestión  de “gusto personal”.

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