Mejore su flujo de trabajo con herramientas de creación de prototipos para diseñadores

No sé ustedes, pero yo siempre estoy buscando la herramienta de creación de prototipos perfecta para mi flujo de trabajo de diseño web. Existen muchas opciones, pero una cosa es segura: puede trabajar de manera más eficiente en sus proyectos con la creación rápida de prototipos.

¿Algún fanático de HTML, CSS o Javascript por ahí? Si estas son tecnologías que disfruta, es posible que sea un Prototipador Rápido. Como diseñadores web, un número cada vez mayor de nosotros hemos cerrado la brecha y hacemos algún trabajo de desarrollo front-end. Además de ser creativos visuales superestrellas, también somos creadores de códigos expertos.

Al tener un prototipo codificado y en funcionamiento, puede estar listo y funcionando rápidamente, con la capacidad de compartir su sitio con los clientes y obtener comentarios al principio del proceso. Si la codificación no es lo tuyo, pero aún deseas crear prototipos a un ritmo rápido, existen varias herramientas para brindarles a tus clientes un prototipo de calidad.

¿Por qué prototipos rápidos?

La creación rápida de prototipos suele ser un componente clave en un proceso ágil. Se diseña y desarrolla un ejemplo vivo y funcional de su sitio y, a menudo, el código del prototipo se puede reutilizar más adelante para el proceso de desarrollo real. Se buscan y se brindan comentarios al principio del proceso, lo que ayuda a reducir la cantidad de cambios durante la fase de desarrollo. Los diseñadores a menudo están de acuerdo en que mejora el diseño final porque se prueban diferentes variaciones en el camino. Al crear un prototipo, es importante elegir una herramienta que le permita trabajar de manera rápida y eficiente, ya sea que haya código involucrado o no.

Los prototipos rápidos aportan valor a cada proyecto y, sin duda, a los clientes les encanta ver un ejemplo funcional. La mayoría de las personas son visuales y, si tienen disponible un prototipo, les resulta beneficioso ver el diseño en el navegador, preferiblemente en varios dispositivos.

Prototipos estáticos y de trabajo.

Tradicionalmente, los diseñadores crearían una maqueta estática para prototipos, a menudo en Photoshop o Illustrator. Estas maquetas estáticas brindan un valor tremendo, pero los prototipos de trabajo son una excelente opción porque los diseños se pueden probar instantáneamente en el navegador a medida que se desarrollan. Muchos diseñadores descubren que a medida que sus habilidades de codificación se fortalecen, codifican más rápido y el diseño en el navegador se convierte en la norma para ellos. Si lo desea, no tiene que depender tanto de una maqueta estática de Photoshop/Illustrator como antes.

¿Qué tan detallados deben ser los prototipos?

No hay una respuesta correcta o incorrecta para la cantidad de detalles de diseño que debe proporcionar, solo depende del cliente y el proyecto. Es posible que esté familiarizado con el término "fidelidad" en el mundo del diseño. Esto se refiere a la cantidad de detalles e interacción incluidos en un diseño. La baja fidelidad es muy básica, a menudo como un "boceto", y no permite que el usuario interactúe con el diseño. Se proporciona muy poco detalle de diseño y la baja fidelidad incluye solo la información básica para la ubicación de los componentes en el prototipo. Los prototipos de alta fidelidad a menudo permiten interacciones con los usuarios y se acercan a una representación real del sitio web. Los elementos de diseño a menudo contienen muchos detalles y son muy refinados.

Prototipo de baja fidelidad.

Prototipo de alta fidelidad.

Las herramientas que elija para su prototipo dependerán de los requisitos de fidelidad. Uno no es necesariamente mejor que el otro, solo depende del alcance del proyecto.

Excelentes herramientas de creación de prototipos

Ahora que hemos repasado los conceptos básicos de creación de prototipos, echemos un vistazo a algunas de las herramientas disponibles. Las herramientas de creación de prototipos tienen diferentes niveles de fidelidad y limitaciones. Si la codificación está en su timonera, ¡increíble! Pero también echaremos un vistazo rápido a algunas opciones que no requieren ningún conocimiento de código.

Herramientas de creación de prototipos para una codificación rápida

Los frameworks son herramientas que proporcionan un punto de partida de código estandarizado que se compone de HTML, CSS, JS, etc. En el caso de un prototipo, un framework es una gran opción para crear un proyecto web rápidamente. También puede ser de gran ayuda crear un tema inicial que pueda reutilizar para su próximo prototipo.

Hay dos grandes marcos que pueden permitir una construcción rápida. Incluso al codificar, tiene la opción de elegir una fidelidad más baja o más alta. Puede obtener todo lo detallado o básico que desee cuando se acerque a la creación rápida de prototipos. Una vez que aprenda los matices de estas herramientas, se sorprenderá de lo rápido que van las cosas.

Prototipo rápido opción uno: Twitter Bootstrap

Actualmente, Twitter Bootstrap está en su tercera versión, por lo que se ha perfeccionado en el camino. Este es un gran marco para crear un prototipo de trabajo si desea crear algún código. Es excelente porque responde, es fácil de aprender y tiene muchos componentes de diseño como botones, modelos, iconos, etc. Con estos elementos, puede poner en marcha un proyecto web de forma rápida y sencilla. Muchos sitios web se construyen con Bootstrap, por lo que el código prototipo también se puede usar más adelante.

Prototipo rápido opción dos – Fundación

Al igual que Twitter Bootstrap, Foundation es una excelente opción para crear un prototipo rápidamente. Este marco es más básico que Bootstrap y requiere más estilo CSS por adelantado porque no hay tantos valores predeterminados. También es una excelente opción porque puede estar en funcionamiento rápidamente y al mismo tiempo desarrollar código reutilizable. Puede usar esta herramienta para crear un prototipo que podría ser de baja o muy alta fidelidad, según sus preferencias.

Opciones de prototipo que no requieren codificación

Como se prometió, aquí hay algunas opciones de creación de prototipos que no requieren ninguna codificación. Hay muchas opciones para alta y baja fidelidad, o algo intermedio.

Prototipo rápido opción tres: buen papel y lápiz viejos

Este prototipo estático se puede crear muy rápidamente. ¡Este método es fácil de usar y ya debería estar familiarizado con la funcionalidad! Si bien se considera de baja fidelidad, el boceto puede aliviar la presión del proyecto y permitir que las ideas fluyan libremente. Lo crea o no, esto a veces puede ser todo lo que necesita para un prototipo. Depende del proyecto y del cliente.

Prototipo rápido opción cuatro: mosaicos de estilo

Los mosaicos de estilo son una excelente opción si prefiere el enfoque estático de creación de prototipos y también desea algo que sea de alta fidelidad. Las maquetas de diseño tienen un lugar importante en el diseño web (después de todo, los elementos de diseño son lo que necesitamos para construir la página). Pero antes de invertir el tiempo para crear una maqueta de página completa, los mosaicos de estilo son una gran solución. Estos sirven como un paso vital antes de invertir tiempo en un prototipo completo detallado. Las tesis contienen toda la información visual que tendría una maqueta estática. Se incluyen colores, imágenes, estilos de botones, etc. para dar a los clientes una idea de cómo se verán los elementos de diseño.

Prototipo rápido opción cinco: Omnigraffle

OmniGraffle es una excelente opción que le permite crear rápidamente una estructura alámbrica de sitio web, que sirve como un prototipo de fidelidad baja a media. Puede agregar enlaces, elegir entre estilos y objetos preestablecidos, y más. Es una excelente manera de mapear su prototipo y luego crear algo con lo que sus clientes puedan interactuar.

Prototipo rápido opción seis: Invision Ap

InVision es una opción única porque puede cargar un prototipo estático existente y hacerlo interactivo, sin necesidad de código. Es una excelente manera de utilizar un prototipo estático, compartirlo con sus clientes y realizar un seguimiento de los comentarios. Además, puede realizar pruebas de usuario y comunicar cualquier otro comentario con esta herramienta.

Prototipo rápido opción siete Axure

Axure te permite crear un prototipo interactivo. Además, hay varios elementos de la interfaz de usuario que se pueden usar para que pueda desarrollar y compartir sus ideas. Desde wireframes rápidos hasta un diseño pulido con colores, degradados, imágenes, etc., esta herramienta ofrece una amplia variedad de opciones de fidelidad. También viene con una práctica opción para compartir para que sus usuarios puedan hacer clic y ver cómo funcionará su proyecto.

Prototipo rápido opción ocho - Lucidchart

Lucidchart está basado en la nube y funciona en varios dispositivos. La colaboración también se facilita si varias personas trabajan en el proyecto. Permite chatear en tiempo real con tu equipo y también puedes dejar comentarios directamente en el prototipo. Se crean prototipos de sitios web dinámicos y de fidelidad media con los muchos elementos de interfaz de usuario que se ofrecen.

¿Que sigue?

Hay mucho que considerar al encontrar la herramienta de creación de prototipos de su elección. Ya sea que prefiera el código en vivo o no, existen herramientas que ofrecen varias opciones de fidelidad. Si trabaja solo o depende en gran medida de la comunicación del equipo, encontrará el perfecto que se adapte a sus necesidades.

Ahora que está armado con las herramientas de creación de prototipos perfectas, puede lucir con orgullo la insignia de Rapid Prototyper.