Ernesto
Filmmaker, typographer, illustrator and web designer. Me gusta el ruido y las nueces http://about.me/dithern
Etapa analítica
Análisis de contenidos, formatos y
procesos establecidos.
Todo está inventado ya, tenemos que buscar la mejor solución a los problemas.
pttrns, pinterest, inspired-ui
Estudio del perfil de los Usuarios
(receptores), caracterizarlos en función de su tipología, roles, etc.).
Definir los escenarios y sus necesidades.
Arquitectura de la Información
Es la disciplina que analiza, comprende y estructura
Planificación
Perspectiva
Diseño estructural
Diseño del árbol de contenidos y relaciones estructurales.
Definir las pantallas del producto.
Las herramientas para definir el aplicativo final serán nuestras propias estructuras mentales.
CONCEPTOS
Sketchs, Wireframes, Mock-ups, Prototipos
Sketch (Idea)
Boceto a mano alzada, prototipo de alambre,
lo más conceptual posible.
Wireframe (Layout)
Función y maqueta de la arquitectura de la información. No contiene diseño. Se realizan grupos de contenido y se define la estructura del producto (diagramas de organización).
Mock-up (Estático)
Forma y diseño visual. Se identifica con la representación más cercana de
los componentes gráficos finales.
Prototipo (Funcional)
Se definen las funciones de los elementos que
se desarrollarán en base al framework.
Axure RP
La herramienta más completa e intuitiva para crear #IA y testear nuestros prototipos interactivos.
Exporta en formatos accesibles: Word, Html o imágenes.
Barra principal y barra de herramientas
Área de trabajo o Wireframe
Panel del mapa web
Panel de widgets
(librería de componentes)
Panel de master
(relación directa con el Wireframe)
Notas,
interacciones
y formato de la página
Panel de propiedades del widget
Gestor de paneles dinámicos
XV Mandamientos Axurianos
Para trabajar de forma más eficiente con Axure
vamos a ver una serie de técnicas que nos ayudarán
a ahorrar tiempo a largo plazo.
I. No utilizarás nunca dos Widgets cuando sea posible utilizar solo uno
Un comportamiento erróneo generalizado es la utilización de widgets innecesarios.
Cada widget que se agrega a un proyecto va a requerir un poco más de trabajo cuando sea necesario un cambio en el futuro. Todos estos pequeños cambios comienzan a ser muy duros después de las 10 repeticiones.
II. Evitarás duplicar componentes ante todas las cosas
Si estamos en una etapa tardía del proyecto y tenemos que cambiar un conjunto de componentes que afectan a todas las páginas; tendremos que repetir el proceso de cambio en cada página o componente a no ser que hayamos creado un master previamente.
El uso de masters en la navegación principal parece ser bastante obvio, pero vale la pena utilizarlos ante cualquier tipo de repetición que detectemos.
III. Utilizarás los Estilos cuando se trate de continuar con la guía de estilos corporativa
Los masters son ideales para crear agrupaciones reutilizables, pero ellos no permiten variaciones entre hijos.
Para ello crearemos nuestros propios estilos exportables a todos nuestros documentos de Axure.
Utilizaremos los estilos alternativos de cada elemento: Rollover, Mouse Down, Selected y Disabled Style.
IV. Amarás la librería de estilos como Juan ama los dispositivos de Apple
Cuidaremos nuestra galería de componentes mejorando cada elemento que pase por nuestras manos.
Para ello identificaremos los errores, las posibles mejoras y aplicaremos los cambios.
Teniendo siempre en cuenta futuros proyectos.
V. Conservarás el proyecto organizado y nombrarás los elementos de forma intuitiva
Cada elemento que se coloca en una página puede tener un nombre único. Las páginas pueden ser nombradas y organizadas en una estructura de árbol. Los masters, los paneles dinámicos y los elementos se pueden ordenar con una terminología establecida previamente por el equipo.
Será más sencillo encontrar los elementos en los paneles interactivos si nos hemos tomado la molestia previa de nombrarlos correctamente a la hora de crearlos.
VI. Crearás una página de aterrizaje
"Landing page"
En Axure podemos configurar la página de inicio del prototipo así como las páginas de inicio que expliquen la utilización del mockup y el comportamiento del mismo.
Además, podemos proporcionar la información de contacto o el equipo y enlaces al diagrama de flujo.
VII. Nombrarás las páginas con una terminología sencilla y evitarás ambiguedades
El prototipo será más fácil de entender si los nombres de las páginas son claros y se explican por si mismos. Los desarrolladores también utilizarán estos nombres en las comunicaciones futuras.
En Axure:PD_Body_Table_Header_Searcherpd_ Body_Table_Header_Searcher_icon
VIII. Crearás un organigrama con los flujos navegables del proyecto
La mayoría de las personas no piensan en un diseño con forma de árbol para entender la estructura de un dominio, sino que se piensa en términos de flujo de actividad.
Se pueden crear diagramas de flujo en Axure y vincular sus nodos a las páginas correspondientes. De esta forma conseguimos navegar por los prototipos de forma accesible si nos perdemos en la navegación.
IX. Utilizarás guías locales, globales y una rejilla base para prototipar los diseños.
Axure permite crear dos tipos de guías: locales, que sólo existirán en una página y globales, que serán visibles en todas las páginas. Las guías se pueden configurar utilizando el cuadro de diálogo "Crear guías".
La rejilla base se puede configurar en guía o en intersección.
X. Guardarás versiones anteriores
Es conveniente crear un backup de nuestro trabajo por si en el futuro necesitamos recuperar un proyecto.
Guardar un documento cada cierto tiempo -o a cada cambio significativo que hagamos- significa crear una carpeta con documentos muy grandes, desperdiciando tiempo y espacio.
Historia del proyecto: duplicando páginas (BIN).
Luego exportaremos sólo las páginas útiles
XI No pecarás creando interacciones innecesarias
Cuando creamos nuevos diseños nos vemos en la tesitura de aplicar en ellos la mayor cantidad de efectos posibles para impresionar por nuestro trabajo y Axure es una herramienta de comunicación que nos permite esta disciplina.
Pero en la mayoría de los casos podemos expresar claramente los conceptos del proyecto sin ninguna interactividad.
XII. Apliquemos interactividad si la respuesta a las siguientes preguntas es SÍ
-
¿Necesito interactividad para comunicar mi diseño sin ambigüedades?
-
¿A largo plazo ahorraré tiempo presentando esta interactividad?
-
¿Hay que convencer a alguien de un concepto interactivo para vender la idea?
XIII. Utiliza iconos en lugar de imágenes
Reducir el número de imágenes en nuestros proyectos de Axure es una práctica muy aconsejable.
Realizar un cambio mínimo implica tal cantidad de pasos que lo evitaremos por todos los medios posibles ya que demoraría nuestra fecha de entrega.
Pero a largo plazo cuando tengamos que modificar lo que el programador ha maquetado el esfuerzo que realicemos se triplicará.
XIV. Revisa el prototipo en diferentes navegadores y dispositivos
Es muy frustrante ver como se rompen nuestros diseños cuando los abrimos en un navegador diferente al nuestro.
A pesar de que es imposible eliminar todas las diferencias entre Axure y el navegador hay maneras de limitar los errores.
Ajustar el espacio vertical del texto en Axure se puede convertir en una tarea muy compleja.
Espacio horizontal: Dejar el máximo espacio posible en la caja para evitar que el texto se ajuste a la siguiente línea.
Espacio Vertical: Podemos ajustar el texto en Axure hasta que se vea bien en el navegador (no es muy aconsejable), podemos convertir el texto en imagen o bien separar el texto de los widgets lo cual rompe nuestro primer mandamiento.
XV. No olvidarás utilizar la herramienta de importación de gran alcance
En vez de reinventar la rueda en cada proyecto, reutilizaremos las cosas que han funcionado en el pasado. Muchos de los conceptos básicos seguirán siendo el mismo en todos los proyectos, tales como estilos, guías y algunos masters.
Aunque es posible copiar y pegar objetos de un archivo .rp a otro, no toda la información se trasladará. Al pegar un botón que tiene un estilo particular, el estilo no se pegará con el.
La mejor manera de reutilizar elementos es mediante el uso de la importación de gran alcance.
Importación de gran alcance: Nos permite importar páginas, masters, estilos y guías.
GUI
Guía de interfaz de usuario.
Unificación de criterios
NEG > CORE PI > DEV CAP > UX
Documento padre .rp en red donde alojaremos nuestra librería documentada, los estilos dentro de una terminología exacta, masters y páginas frecuentes.
The End
Localizar el conflicto es la mejor forma de solucionarlo
Axure Intro
By Ernesto
Axure Intro
Intruducción a la herramienta de prototipado Axure RP Pro 6.5
- 1,554
