Se muestran los artículos pertenecientes al tema Prototipado.
30/06/2008
Prototipado en HTML
Comentaba el otro día el interesante post de jcorrea sobre el prototipado en papel aunque centrándome más en la parte del uso de Fireworks como herramienta de creación de wireframes. Pues hoy entro a valorar la parte del prototipado en HTML porque me ha tocado de lleno sufrir una de sus consecuencias.
Jorge hacía mención a un post de la gente de 37Signals, y está claro que aunque siempre tratemos de aprender de la experiencia de las grandes y más importantes empresas del mercado para mejorar profesionalemente, es mucho más importante ser capaces de sacar nuestras propias conclusiones a lo que leemos y aplicarlo a nuestro entorno profesional. Por eso la gente de 37Signals, quizás intentando conseguir cierta repercusión a través de la polémica, se hayan aventurado con este post del que nosotros tenemos que sacar algunas conclusiones. Aquí están las mías:
- Ellos no dicen que prescindan del prototipado en papel, sólo que pasan de este al HTML, saltando el paso del diseño en Photoshop. we usually go right from a quick paper sketch to HTML/CSS
- Esto no vale siempre, hay clientes que siguen prefiriendo el pantallazo de Photoshop, algo plano antes de pasar a algo más interactivo.
- Si no estamos seguros de acertar con la línea gráfica o el cliente no es de confianza, estamos obligados a no saltarnos ese paso. O tendremos mucho más trabajo.
- Una maqueta en HTML+CSS+Javascript es muy espectacular, al cliente le entra por los ojos rápidamente y nos puede ayudar a la hora de "vendérsela".
Como siempre que alguien me da a elegir entre más de dos opciones, la respuesta es "depende". No podemos aferrarnos siempre a lo mismo, en cada proyecto y con cada cliente deberemos ser capaces de dar solución a un problema de la manera más óptima. Tener el conocimiento de las diferentes formas de afrontar un proyecto nos proporcionará el estar preparados ante cualquier reto que se nos presente.
27/06/2008
Prototipos en papel de Vimeo, Twitter, Flickr,...
En el blog deeplinking publicaron hace ya algún tiempo bocetos/prototipos en papel de algunas de las nuevas aplicaciones más importantes de la web como Twitter, Flickr Places o Vimeo, destaca en especial la enorme galería que los chicos de Vimeo tienen colgada en Flickr, así como la versión original de Twitter (stat.us)
Prototipado en papel:
Los prototipos de papel son una forma de crear una imagen palpable de lo que será una futura aplicación o sitio web. Su creación y manipulación es rápida y elástica y permite a los usuarios imaginarse lo que será la futura aplicación en funcionamiento sin interferencias de tipo:
Técnico: plataformas, utilización de elementos multimedia como Flash...
Gráfico: colores, maquetación , tipografía que en muchas ocasiones desvían el centro de la discusión hacia asuntos cuya importancia es muy relativa en el proceso inicial. Según el conocimiento del interlocutor con el promotor del proyecto web, nos podemos encontrar debatiendo sobre el tono de verde de una pantalla, (secundario), frente a lo principal: secciones, datos necesarios, utilización futura del producto. Como símil con la "vida real", como discutir acerca de la pintura de un coche, cuando ni siquiera sabemos cómo va a ser.
(Alzado. Prototipos de papel. 14-01-2003)
24/06/2008
Fireworks como herramienta de prototipado
He leido en el blog de Jorge Correa su visión sobre el prototipado directamente en XHTML+CSS, pero sobre todo da una buena impresión sobre el prototipado en Fireworks y cómo es la herramienta perfecta para ello. Separando así Photoshop para retoque fotográfico, Illustrator/Freehand para vectores y Fireworks para todo lo demás. En su día además ya comenté que existen multitud de recursos disponibles para Fireworks, así que cada vez tenemos menos excusas para usarlo.
En mi caso no puedo ser muy objetivo respecto al uso de Fireworks porque para mí siempre ha sido la herramienta perfecta, me permite hacer todo lo que quiero sin las complejidades de otras herramientas de Adobe y con la sencillez que un "inculto" del diseño gráfico necesita.
Con Jorge comparto los miedos al prototipado en XHTML+CSS sobre todo porque lo estoy viviendo actualmente. Un cambio de requerimientos en papel puede suponer un par de minutos al igual que en Visio/Omnigraffle/Fireworks, pero en HTML puede suponer 2 minutos o 2 horas o 2 días, aunque este análisis requiere de más tiempo y de un post dedicado exclusivamente a ello
.
12/06/2008
Librería de Stencils Yahoo! (Visio, OmniGraffle, PNG,...)
Gracias al blog de Yusef Hassan, he llegado a este repositorio de stencils de Yahoo para prototipado. Muy completo, se puede descargar para varias aplicaciones y en distintos formatos: Visio, OmniGraffle, PDF, PNG y SVG.
Lo veo realmente útil ya que incluye elementos muy actuales como carruseles de imágenes, pantallas de móvil, elementos de interacción del iPhone, controles como sliders o sistemas de paginación.
Ya están los stencils puestos en mi Visio : )
14/05/2008
Paleta para prototipos en OmniGraffle
Ahora que en mi día a día laboral me peleo con Mac, estoy haciendo una pequeña recopilación de herramientas y utilidades que puedan ayudarme con mi trabajo. Sin duda alguna a la hora de prototipar me decanto por OmniGraffle y el nuevo Adobe FireWorks CS3. Para el primero acabo de encontrar una muy buena paleta con formas (shapes) para el prototipado de baja definición.
Además tiene paletas para el Visio y alguna plantilla para Photoshop ideal para aquellos que usan el framework Blueprint CSS.
17/04/2008
Cómo crear prototipos interactivos en PDF's desde Visio
Tirando de un post de Caitlin Gannon, hago una libre traducción de su artículo "How to create an interactive PDF prototype in Visio".
Si has tratado de explicar el diseño de un sitio mediante papel, sabes el valor de presentarlo en una versión interactiva con hipervínculos. Los usuarios de Visio saben que es muy sencillo crear un prototipo interactivo en HTML a partir de un set de wireframes (Archivo>Guardar como Página Web), pero para mí, el mayor inconveniente es que el prototipo no se puede transportar. Necesito una manera de comunicar los diseños por email, y no hay ninguna manera de que esté enviando un montón de archivos HTML y GIF a la gente (o un link a una página, dado que no todo el mundo tiene acceso a la red).
1. Crear hipervínculos en las páginas de primer plano, no en las de fondo - y usar los stencils del documento para gestionar las modificaciones
Es una practica habitual cuando se crean wireframes en Visio colocar los elementos standard de las páginas - cabecera, pie de página, navegación - en una página de fondo (background), así esos elementos se repetiran en cada página de primer plano (foreground). De cualquier manera, cuando publicas un PDF, Visio no crea hipervínculos de las capas de fondo. Para poder tener prototipos interactivos en PDF estos tienen que estar en las paginas de primer plano. Esto significa que para una distribución de página standard, todos los elementos de navegación tienen que estar en cada página del wireframe. Se podrían copiar y pegar los elementos de navegación en cada página, pero eso supondría un mantenimiento bestial. En vez de eso, usa los stencils del documento.
Funcionan así:
- Crea un panel de navegación, usando una forma distinta para cada link. Por ejemplo, para crear 5 pestañas en la parte superior de la página, construye cada pestaña en un bloque de texto separado.
- Para añadir hipervínculos, pulsa CTRL+K para abrir el cuadro de diálogo de hipervínculos. Después de la subdirección (no de la dirección), pincha Examinar y encuentra la página de tu wireframe sobre la que quieres hacer el vínculo. (O introduce la URL). Pincha OK.
- Repite 1 y 2 todo lo necesario. Una vez que esté hecha el área de navegación, agrúpala (selecciona todos los elementos, y presiona Shift+CTRL+G).
- Abre los Stencil del documento: Archivo>Formas>Mostrar lápices del Documento
- Arrastra los elementos agrupados de navegación al panel de Stencils.
- Haz clic derecho sobre el grupo de elementos y renómbralos (por ejemplo "NavBar")
- En cada una de las páginas de tu wireframe, arrastra este elemento sobre la página de primer plano y colócalo en su posición.
- Si necesitas hacer cambios al grupo de navegación, haz clic derecho sobre el stencil del documento y selecciona Edición maestra>Edición de forma maestra. Cualquier cambio que hagas se actualizará automáticamente en todas las páginas.
Para que los hipervínculos del PDF funcionen, usa el menú de PDF en Visio (Adobe PDF>Convertir a Adobe PDF). Por alguna razón, si usas Archivo>Imprimir y eliges Adobe PDF como impresora, los hipervínculos en el PDF no funcionan.
El resultado final tendrá hipervínculos funcionando en cada página. Para cambiar los estados de los botones o crear otros elementos interactivos, necesitarás editar el archivos en Acrobat (evita este paso hasta que estés seguro de que el archivo está acabado, porque si rehaces el PDF desde Visio los cambios en Acrobat se habrá perdido)
3. LLévalo al siguiente nivel
Y esto es todo. Espero que a alguien le sirva este artículo tanto como a mí.
16/04/2008
Recursos para prototipado
Una serie de muy buenos recursos para prototipado, incluyendo muchos pinceles, plantillas y ejemplos. Organizado en artículos a modo de pequeños tutoriales.
Todo ello en: GUUUI.com : The Interaction Designer’s CoffeBreak
Además viene aderezado con artículos semanales.
Prototipado ágil con Powerpoint 2007
Acabo de descubrir un toolkit de Microsoft para poder crear prototipos ágiles con PowerPoint 2007. Puede que sea una buena opción a la hora de crear con cierta rapidez e inmediatez estructuras y presentárselas al cliente.
Si consigo un Office 2007 lo probaré.
25/02/2008
Idealista.com, no me lo quito de la cabeza
Ando estos días en pleno proceso de creación de wireframes del sitio web de una nueva red inmobiliaria, y estoy teniendo un serio problema: no consigo quitarme a Idealista de la cabeza. Idealista es en estos momentos el mayor portal inmobiliario de España, con más de 230.000 anuncios (a 25 de Febrero) y más de 300.000 usuarios subscritos a su boletín de noticias. No tengo datos de sus visitas (1 millón mensuales según un artículo de ElPais.com 18/11/2007), pero viendo el número de anuncios, nos podemos hacer una idea aproximada de su tamaño. Por si esto no fuera suficiente, durante hace mucho tiempo sigo las andanzas de este portal a través del blog de su CEO, Jesús Encinar, en donde además de hablar del sector inmobiliario tiene la buena y sana costumbre de comentar los rediseños y mejoras del portal.
Supongo que todo ese material ha influido enormemente en mi subconsciente hasta el punto de considerar el buscador de inmuebles de Idealista como el mejor de su sector, ya que con únicamente dos clics (o tres) estaremos buscando un piso. Sin necesidad de rellenar ni un solo dato. A parte, las tres cajas seguidas, hacen muy pequeña la distancia entre los clics, mostrando todos los textos que el usuario desconoce, aumentando el área de clickado, y haciéndolo navegable mediante teclado; es un claro ejemplo de muy buen Diseño Centrado en el Usuario.
Durante estos días, me he centrado en crear un buscador, cuya interacción sea lo más intuitiva y simple posible. Que no requiera de casi ningún esfuerzo por parte del usuario para poder buscar el piso de sus sueños, y lo malo es que a pesar de luchar con todas mis fuerzas siempre termino en el mismo diseño. El diseño de Idealista. Intuyo que lo más fácil en este caso sería copiar el buscador. No reinventar la rueda. Ya lo dijo alguien: "Aplaudo que se rescate lo que funciona y comparto la idea de que no hay que reinventar la rueda; pero siento que tenemos la responsabilidad no de copiar lo bueno, sino de mejorarlo.".
Veo realmente complicado el poder mejorarlo, pero voy a seguir intentándolo, aunque tengo la extraña sensación de que terminaré usando el "copy&paste method" y escribiendo un mail de disculpa y agradecimiento al equipo de Idealista.
.