¿Qué herramientas y procesos utiliza para preparar wireframes y otros documentos de diseño de interacción para aplicaciones de iPhone?

Hay dos aspectos de la pregunta: uno es sobre las herramientas (“¿qué herramienta usa / debe usar?”) Y la pregunta secundaria es sobre el proceso (“¿cómo hace para usar sus herramientas?”). segunda pregunta primero y luego la primera, segunda …

La clave para comenzar su proceso de diseño es simple: sepa lo que está diseñando. Sí, estoy seguro de que muchos de ustedes están diciendo: “¡Gracias, Capitán Obvio!” pero lo digo en serio … Ten una visión de lo que estás tratando de diseñar. ¿Qué problemas estás intentando resolver? ¿Y cuál sería la idea general detrás de su diseño?

El “asunto de la visión” es algo complicado, y a veces te topas con un tema sin darte cuenta. Como me encantan las películas, una de las cosas que uso para explicar esta idea es la idea principal de lo que se trata una película exitosa. ¿Cuál es la idea detrás de Star Wars? “El granjero local se convierte en héroe, destruye el imperio del mal”. ¿Titánico? “Romeo y Julieta en el Titanic”. ¿El caballero oscuro? “El anarquista lucha contra el guardián del orden para demostrar que tiene razón sobre las personas”. Una visión simple que es la “línea directa” que impulsó lo que el equipo creativo detrás de las películas trajo al público.

Defina su visión y manténgala simple: si desea tener éxito necesita algo que sea fácil de comunicar, comprender y recordar, especialmente para usted. Una entrada clave para esa visión es definir su problema. ¿Cuál es el diseño que proporciona al usuario? ¿Está solucionando un problema? ¿Proporciona una distracción atractiva de los problemas? ¿Cómo lo usará la gente?

Y dado que es móvil, debe tener en cuenta el contexto. Si se trata de una aplicación para tomar notas, no se centre en las herramientas de formateo; hágalo simple, rápido y sin distracciones. Tomar notas “sobre la marcha” significa que otros aspectos de las aplicaciones de procesador de texto simplemente no son necesarios. Etc … Observe (y, si es posible, investigue) cómo y cuándo las personas usan sus aplicaciones móviles para buscar oportunidades y posibles ideas.

Entonces, una vez que tenga su visión y comprenda el contexto móvil y los patrones de uso, apunte a su cliente. ¿Para quién es la aplicación? Esa es otra pregunta clave. Deje que esta comprensión enmarque su diseño, su palabrería y su enfoque. Cuanto más específico sea el objetivo que tenga, más claridad podrá trabajar. Sugiero usar / desarrollar personas para definir historias de usuarios sobre cómo usarían su aplicación.

Luego, bosqueja bosquejo bosquejo … Y bosqueja un poco más. Diseñe en papel y, si puede, obtenga un colaborador: el “diseño entre pares” es uno de los métodos que he utilizado para mejorar un buen diseño. Solo asegúrese de trabajar con alguien con quien pueda sentirse cómodo y con alguien maduro en su oficio para poder aceptar las críticas de su diseño con gracia y un espíritu de colaboración (y asegúrese de tener el mismo tipo de actitud, usted mismo) .

Iterar. Hacer pruebas de usabilidad de guerrilla. Y esté dispuesto a cuestionar sus suposiciones y cuando se trata de su diseño, esté listo para “matar a sus seres queridos”. No seas valioso con tus diseños.

Una vez más, declararé lo obvio: si está creando una aplicación para iPhone, tenga un iPhone. Úselo mucho. Conozca las convenciones de la interfaz y asegúrese de admitir esas convenciones. Rompe las reglas si es necesario, pero tienes una buena razón para hacerlo. Apoye las convenciones del dispositivo y las expectativas de los usuarios.

Entonces, usted ha hecho la “visión” del diseño de alto nivel, sabe lo que va a diseñar y para quién lo está haciendo … Ha “esbozado” y ahora quiere presentarlo al desarrollo y a las partes interesadas ( o, si es una tienda unipersonal, desea documentar para referencia futura). La respuesta que daré es una que puede ser inesperada:

La herramienta no importa.

Use lo que le resulte más cómodo para documentar el diseño. Puede utilizar un procesador de texto, una herramienta de diseño gráfico, un trozo de papel vitela, fotos de pizarras blancas … La clave es capturar quién, cuándo y por qué del diseño. Concéntrese en el diseño, no en el mecanismo de captura.

Para completar esta respuesta, le diré lo que uso y por qué: uso OmniOutliner y Simplenote para capturar ideas, MindNode para crear mapas mentales, Omnigraffle y Axure para documentar y crear diseños de prototipos, Microsoft Word para documentación y tomar notas, y Keynote y PowerPoint para presentar y comunicar ideas y diseños. Por supuesto, su conjunto de herramientas variará: este sistema funciona para mí, pero puede (y probablemente lo hará) cambiar si hay más y mejores herramientas disponibles.

Y recuerde, un trabajador pobre (y un diseñador inmaduro) culpa a sus herramientas. Las mejores herramientas de diseño apoyan el proceso de diseño y no se interponen en el camino. Es por eso que recomiendo dibujar: es una forma de diseño sin fricción que es el simple acto de poner papel a lápiz.

Flairbuilder.com es una de las mejores herramientas que existen para la estructura de alambre, incluidas las aplicaciones para iPhone.

Tiene interacciones y comportamientos que Balsamig no tiene (creo que solo Pencil también lo tiene). Eso significa que puede hacer clic en su maqueta como lo haría en una aplicación real. Sus proyectos se pueden compartir en línea y se pueden ver en el navegador en un instante. Si necesita más objetos que estén actualizados en la biblioteca, puede descargar más del servidor Flaibuilder, gratis. También puedes subir el tuyo.

Mire las características: http://www.flairbuilder.com/feat

Está construido en Adobe AIR y puede probarlo durante 15 días. El precio es razonable.
También es muy fácil de usar, me gusta mucho.

He probado la mayoría de las herramientas aquí y se trata de papel y OmniGraffle. En la etapa conceptual inicial, tengo un pequeño moleskine que es aproximadamente del mismo tamaño que una pantalla de iPhone, lo uso cuando hago bocetos preliminares cuando estoy trabajando solo. Con mi personal, usamos rotafolios y pegamos las hojas en la pared una vez que terminamos con cada una.

Una vez que se realiza la parte conceptual, me muevo a OmniGraffle (tengo Pro que tiene características útiles como capas compartidas y una mejor exportación). La plantilla principal que uso es la plantilla da5id para iOS que tiene casi todos los widgets de iPhone y iPad que necesito ( http://graffletopia.com/stencils …). Cambio el lienzo para usar píxeles como medida y hago que sea 320 × 480 y establezco la cuadrícula en 1 píxel, de esa manera obtengo diseños perfectos de píxeles.

Coloca las pantallas. Tiendo a usar los wireframes como los gráficos para las primeras compilaciones de la aplicación, por lo que es importante ser perfecto en píxeles. También dividí los elementos en dos capas: los widgets que se implementarán en el generador de interfaces van en uno, y luego los gráficos que estarán en segundo plano van en el otro. Entonces puedo exportar solo los gráficos bg a PNG e importarlos fácilmente a xcode, y listo, tengo mi interfaz de usuario.