Smartsite » Diseño gráfico

Prototipos interactivos en la nube

Wila — Mon, 08 Aug 2011 06:23:24 +0000

Después de años de realizar prototipos/wireframes en Visio y Omnigraffle, estamos tanteando la posibilidad de trabajar ahora con herramientas de prototipado en la nube, ya que aportan algunas ventajas adicionales.

En Biko seguimos un proceso de trabajo para prototipar websites, portales, apps para móviles, etc. centrado en el usuario. Y vemos que este proceso puede mejorarse con el empleo de estas herramientas online.

Para el prototipado, solemos realizar previamente una identificación de personajes, escenarios y tareas más relevantes a realizar por el usuario en el site o app. Jerarquizamos dichas tareas para ver qué es lo prioritario en cada caso (personaje/escenario). Y teniendo en cuenta esta jerarquía, maquetamos las pantallas ubicando los elementos de interacción de forma óptima para favorecer la usabilidad y conversión en el producto final.

Aunque herramientas como Visio u Omnigraffle permiten montar enlaces entre pantallas y exportar el archivo como html para verlo en un navegador, lo habitual es que para la validación de estos prototipos por nuestros clientes, simplemente los revisen sobre el papel impreso o, en ocasiones, sobre la pantalla, pero sin interacción efectiva.

Buscando herramientas que sí permitan simular esta interacción (por ejemplo, completar los campos de un formulario), nos hemos encontrado con varias muy completas, pero de licencia y descarga (Axure, Flairbuilder, Justinmind) y otras alojadas en la nube y que también ofrecen esta posibilidad y además, ventajas adicionales según los casos:

al ser SAAS, la inversión en licencias no existe (la mayoría ofrecen una versión de prueba por tiempo limitado antes de contratar el servicio de pago)
generan los prototipos en html + CSS de forma que pueden verse en cualquier navegador, lo que facilita revisiones por el cliente o hacer tests de usuarios sobre los propios prototipos
se guarda el historial de todos los cambios realizados
facilitan el trabajo en colaboración con páginas de discusión y sistemas de usuarios que editan, revisan, sugieren comentarios…
facilitan la gestión de proyectos con la creación de tareas y asignaciones
permiten asociar los elementos de un diagrama de flujo a cada una de las pantallas prototipadas
permiten cambiar el aspecto del prototipo ya creado seleccionando entre el estilo “normal” y el estilo “scratch”

En definitiva, vemos que estas herramientas aportan funcionalidades adicionales a las que ya veníamos utilizando y nos estamos planteando el cambio de herramienta para algún proyecto concreto.

Os dejamos aquí la lista de las que hemos tanteado. Si las habéis probado, estaremos encantados de que nos contéis vuestra experiencia. Y también de nos sugiráis algunas más.

inVision – más centrada en la parte de compartir/colaborar
iPlotz – incluye gestión de proyectos y tareas
Jumpchart – énfasis en la arquitectura del site
Pidoco – tiene una versión “lite” más económica
Protoshare – parece una de los más completas

Cómo han usado los Social Media los responsables de marketing en 2010

maiteraki — Fri, 12 Nov 2010 12:11:43 +0000

Esta infografía ha sido creada a partir de los datos del Social Media Marketing Informe de la Industria para el año 2010, y nos muestra el gran crecimiento de la esfera social y las herramientas específicas de marketing que se están empleando para difundir su voz en todo el sector social.

La reina de las herramientas empleadas es Twitter seguida de Facebook. En un año el uso de los Social Media por parte de los responsables de marketing han aumentado un 8%.
Entre los principales motivos del empleo del social marketing se encuentra dar más notoriedad y reconocimiento al negocio y aumentar el tráfico.
[Fuente flowtown]

Everybody's doing it. How marketers are utilizing social media in 2010

Utilizar Google Drawings para prototipar

yoi — Fri, 18 Jun 2010 09:39:00 +0000

Hola, me llamo Yoana, y soy nueva en el prototipado.

En uno de los últimos proyectos que nos hemos embarcado en Biko, y dentro de consultoría, me ha tocado empezar con la tarea de prototipado; y como soy nueva en esto y me iba a resultar igual de difícil trabajar con Omnigraffle (más o menos estándar en Biko) que con cualquier otra herramienta del mercado, decidimos probar a hacerlo con Google Drawings, ya que nos permite tener los documentos compartidos fácilmente y que todos pudiésemos ajustarlos con sólo tener acceso a un navegador.
Teniendo en cuenta que en el equipo somos 3, yo trabajo en remoto y además cada uno tiene un equipo con una batería de programas diferente, este punto era importante para que todos les pudiésemos meter mano.

Para empezar Sonesu me lo puso fácil, me pasó los Stencils de Morten Just para prototipar con Google Drawings. ¿Qué más se podía pedir? gracias Su!

Las formas que venían con los Stencils me vinieron de maravilla, luego solo era cuestión de adaptarlas a lo que íbamos pensando para la aplicación concreta.

El primer prototipo fue el más sencillo y complicado a la vez. ¿Cómo se mueven las cosas? ¿el alt funciona? ¿cómo selecciono varias formas a la vez para mover en bloque?, supongo que todo esto para alguien acostumbrado serán chorradas, para mí entonces era todo un mundo por explorar.

Tucos para utilizar Google Drawings para prototipar:

1. Seleccionar varias formas a la vez

Para seleccionar varias formas a la vez tenemos dos maneras:

manteniendo la tecla alt pulsada
seleccionando un conjunto. Para hacerlo hay que posicionarse fuera del lienzo y crear un cuadrado de selección.

Sobre esta última opción, un apunte importante: al contrario que en otros programas, los elementos seleccionados no son aquellos que quedan completamente dentro del cuadrado de selección, sino todos aquellos que toca dicho cuadrado, por lo que cada vez que quieres seleccionar varias cosas del centro hay que ir eliminando de la selección todas las formas que los contienen.

Ejemplo, en esta pantalla para seleccionar el buscador, al principio nos selecciona también el cuadrado grande que lo contiene:

Así que manteniendo “alt” pulsado deberemos quitar el cuadrado grande y otros elementos que no queramos agrupar:

Una buena práctica es ir agrupando cosas que tengan sentido como un todo, porque luego seleccionar un conjunto de elementos puede ser tarea difícil, sobre todo cuando se prototipan objetos encima de otros objetos que no están relacionados (ej. popups sobre fondos semitransparentes, simulando el efecto lightbox).

En este caso es bueno agrupar los objetos inferiores (el fondo semitransparente y resto de objetos por debajo de él), para luego poder trabajar fácilmente con los objetos superiores (el popup).

2. Mantener proporciones

En Google Drawings mantendremos pulsada la tecla alt para mover las formas con un ajuste más preciso, y de igual modo, la utilizaremos también, al redimensionar, para no perder la proporción inicial de la forma.

3. Copiar formas entre prototipos en diferentes documentos o archivos

Algo tan sencillo como copiar una forma o un conjunto de formas entre dos prototipos de diferentes documentos se convirtió en una auténtica odisea, hasta que descubrí que la única forma de hacerlo es a través del “web clipboard”.
Esto me ahorró mucho tiempo: ¡ahora era mucho más fácil cambiar en todos un fallo detectado en el prototipo número 5!.

4. Nunca eliminar la cuenta google a pesar de tener los prototipos compartidos

Queda ya para la historia que, después de tener todos los prototipos maqueados y entregados, se nos ocurrió borrar la cuenta google porque nos estaba dando problemas de compatibilidad.

No nos fijamos que esa cuenta era propietaria de los prototipos y que, por mucho que los documentos estuvieran compartidos, si el propietario desaparece… los documentos también. Como de todo se aprende, esto no nos volverá a pasar .

Al finalizar, esta vez sí, hicimos una copia de los documentos exportándolos a PDF para poder enviarlos al cliente, sin darle acceso a los prototipos online.

Como conclusión final puedo decir que el trabajo ha resultado ser entretenido y gratificante, y el poso que me ha quedado es que, en general, Google Drawings es una buena herramienta para prototipar. Para los eruditos seguro que se queda algo corta, pero para hacer cosas básicas a mí me ha parecido suficiente y además te aporta la gran ventaja de poder hacerlo todo online y en tiempo real a través sólo de un navegador, de forma que todos los miembros del equipo puedan ver y modificar, si es el caso, el trabajo que se va haciendo.

Nuevas tendencias de diseño web para 2009

manolera — Mon, 02 Mar 2009 07:33:00 +0000

A veces los diseñadores estamos tan inmersos en las tareas diarias – con las prisas, con los trabajos de hoy para ayer – que no podemos volcar toda nuestra creatividad como quisiéramos.
La premura de una fecha o la carga de trabajo en un momento dado hacen que sea una tarea pendiente.

Pero también a veces, si vas sacando pequeños momentos donde te dediques a navegar, a investigar y a ver qué se está haciendo consigues nutrirte y abrir tu mente. Esto es lo que vamos haciendo también desde Biko. Unas veces unos, otras veces otros… vamos siguiendo la pista de las novedades y lo ponemos en común, mediante reuniones, para el beneficio de nuestros proyectos.

Los días 23 y 24 de febrero tuvimos dos jornadas internas en las que presentamos los temas que habíamos propuesto, compartiendo el conocimiento de cursos a los que habíamos asistido desde Biko o con charlas internas como la de “las nuevas tendencias de diseño web para 2009″.
Son jornadas muy enriquecedoras en las que cada uno da y recoge con el fin de realizar proyectos cada vez mejores.

En las nuevas tendencias de diseño vemos una evolución reciente con nuevos elementos de diseño, nuevos enfoques gráficos, donde estamos notando el paso al medio online de técnicas que se usaban normalmente para el medio impreso.

Letras en relieve (letterpress), tipografía enorme, ilustraciones, interfaces de usuario cada vez más atractivas y más usables… son algunas de las tendencias que se están llevando a cabo.

Se tiende a cuidar mucho la presentación del contenido, el blanco está teniendo un papel fundamental y se está aumentando el padding y el espacio entre los elementos de diseño (domestika.com)

AJAX y Flash se usan ampliamente para ofrecer a los usuarios la interacción dinámica que ellos han estado esperando en cuanto a soluciones avanzadas, sofisticadas y profesionales.

Se le guía al usuario con pistas visuales que le ofrezcan fácilmente la información y las acciones que realiza con el interfaz.

Otra de las características interesantes para este 2009 es la adaptación de las interfaces de usuario; el usuario tendrá la posibilidad de personalizar más y más servicios.

Nos fijamos en cómo se dan las funcionalidades para mejorar la experiencia de usuario con soluciones más interactivas y receptivas.

Los diseños son más arriesgados, utilizando transparencias o gráficos e ilustraciones mucho más potentes y llamativas…

Añadimos una serie de enlaces interesantes de SMASHING magazine, de los cuales hemos sacado información, que pueden servir de inspiración para vuestros futuros proyectos:

Ya lo publica Torres Burriel en un interesante post sobre el diseño o el poder de la conceptualización. Vuelve el Diseño… Vuelve a tenerse en cuenta como herramienta fundamental, porque nunca se había ido… [leer post completo]

Una campaña de Nintendo sacude Youtube

carm_gl — Thu, 25 Sep 2008 18:46:04 +0000

Youtube ha permitido a los creativos de la campaña de lanzamiento del juego para Wii Wario Land: Shake It destrozar -literalmente- Youtube.

Desde que se colgó el video el 19 de septiembre, ha sido visto más de un millón de veces. Muchos son ya los medios que están hablando de la campaña (y de rebote, del juego). Un buen ejemplo de marketing viral. Aquí dejo el enlace al video, porque hay que verlo en su contexto: http://es.youtube.com/experiencewii

También en el web han aprovechado el concepto Shake It para montar una navegación en la que accedes a las secciones ‘agitándolas’.

Diseño con rejilla

sonesu — Thu, 28 Aug 2008 12:18:46 +0000

El diseño con rejilla se ha vuelto algo indispensable para mí para trabajar. Si estás harto de tener 20 guías en photoshop que tienes que generar de nuevo o ajustar cada vez que creas un diseño, prueba estas utilidades:

ctrl+shift+g
Genera un sencillo código XHTML + JS para poder ver el grid de tu sitio web utilizando el comandoctrl+shift+g

960 Grid System
Distintas utilidades para facilitar tu trabajo con el diseño con rejilla. Se trata de un pack que contiene documentos psd con la rejilla, también para omnigrafle o visio… Está basado en el diseño de 960 pixels de ancho, con opciones a 12 y 16 columnas.

29digital.net/grid
Calcula la medida de rejilla según el font-size, el número de columnas…

Texturas

manolera — Thu, 24 Jul 2008 12:06:18 +0000

Un regalito para el jueves, hoy toca texturas:

http://www.cgtextures.com/ Tiene un gran banco de imágenes, algunas de ellas bastante espectaculares. De gran utilidad
http://createsk8.com/about/ Otra página que me encanta, donde podéis encontrar recursos gráficos para illustrator.

Ejemplos de Web 2.0

El administrador — Fri, 04 Jul 2008 10:04:15 +0000

Web2.0Slides es un directorio que ofrece acceso a más de 1.400 sitios que ejemplifican muy bien lo que es la Web 2.0

Los ejemplos están clasificados por categorías (mediante tags). Tiene la posibilidad de acceder directamente a ver los sitios web dentro de cada categoría (se muestran en el menú ordenados y alfabéticamente) o también, como un “pase de diapositivas”, en el cual te puedes parar cuando quieras, explorar la web que se está mostrando en ese momento, y luego continuar con el pase.

Otras referencias para los que esteis interesados en saber más sobre la Web 2.0:
- Qué es la Web 2.0, por Tim O’Reilly
- Inteligencia colectiva en la Web 2.0, por José Luis de Vicente
- Web 2.0: los nuevos desafíos de la interfaz de usuarios, en UsoLab (imprescindible para los equipos de diseño)