Como crear wireframes como un Diseñador de Experiencia Web

Estarás preguntándote que puedes obtener de un artículo como este? Mi objetivo es profundizar en las plantillas web desde un punto de vista más práctico.

En este artículo vamos a responder a las siguientes preguntas básicas:

• Quien lo usa?
• Por qué deberías considerar usarlos?
• Como puedes crear increíbles diseños con o sin software?

Comencemos

Cuando se trata de hacer wireframes de página web, la mejor manera de describirlos es que se tratan de la piedra angular del diseño y desarrollo del producto. Sin importar el tipo de proyecto que tengas en mente, trabajarás con esta herramienta en los primeros pasos cuando desarrolles sitios web o aplicaciones móviles. El objetivo es que todos los involucrados del proyecto se encuentren en la misma página. Esto no solo involucra a los diseñadores del producto o a los programadores, sino a todo el equipo. Si miramos a las compañías que prefieren la metodología de desarrollo ágil, podemos notar que los esquemas web son implementados en una fase temprana de desarrollo y diseño. Y sí, hasta un simple borrador en papel es considerado un wireframe de página web, pero eso lo discutiremos más adelante en este mismo artículo.

Sketch, Esquema y Modelado

Ok, pero espera, el esquema y el modelado no son lo mismo?

Error.

El wireframe se trata sobre todo de hacer todo funcionar. Como se muestra en la imagen de arriba, su fidelidad fluctúa entre mediana a baja. En el caso de una app o un sitio web, digamos por ejemplo en la navegación, el acomodo de los botones, cajas y otros elementos. MIentras un prototipo está más cercano a un posible resultado final. Algunas veces al cambiar detalles que de otra manera ignorarías, como por ejemplo reposicionar el CTA-S puede hacer una grán diferencia en tus conversiones. Entender como es que los usuarios realmente interactúan con tu sitio web puede ayudarte mucho a encontrar el lugar perfecto para tu CTA.

El propósito es dar un vistazo al producto final. Puedes utilizar un software para gráficos o sumergirte en el código. Depende de tí. Si lo que intentas es mostrar el resultado final en toda su gloria con el mayor detalle posible entonces lo que estás haciendo es un prototipo. Llendo un poco mas alla y tomando la funcionalidad en cuenta entonces estaríamos hablando de prototipado, pero eso es otro tema. Si lo deseas, puedes leer más sobre las diferencias aquí.

Quien utiliza los Wireframes?

En pocas palabras, cualquier involucrado en el producto — en todos los niveles.

A pesar de que los diseñadores, desarrolladores, y gerentes de producto , típicamente desarrollan usando wireframes normalmente en su trabajo día a día, no son los únicos que pueden utilizarlos. Muchas más personas pueden beneficiarse de los Wireframes. Estos incluyen a analistas de negocios, arquitectos de información, diseñadores de interacción, diseñadores de experiencia de usuario, diseñadores gráficos, programadores, y gerentes de producto.

Por qué alguien utilizaría Wireframes?

Los Wireframes son los ˝Planos para el diseño

En otras palabras, ellos tienen el rol de conectar la arquitectura de la información y el diseño visual, con el objetivo de representar gráficamente una interfaz. La interfaz tiene 5 propósitos principales:

• Decir cómo es que un sitio o una app se formará
• Decir cómo es que será usado
• Decir cómo es que la información será presentada y organizada
• Decir que contenido deberá tener.

Por último pero no menos importante

• Decir cómo es que se interactuara con el usuario

Entonces cómo podemos crear Wireframes?

Anteriormente dije que los diseñadores, desarrolladores, y gerentes de producto hacen wireframes, pero eso no significa que sean lo mismo.

Fuente: Gustavo Zambelli

Los UX/ Diseñadores Gráficos consideran utilizar wireframes cuando desean crear modelados, prototipos o una nueva interfaz de usuario. Así que para ellos, este es un proceso preliminar al trabajo. Otra razón para usarlos es que es posible simular el flujo de los usuarios. Ellos crean los wireframes después de desarrollar una “Persona”, un user journey y un mapa de sitio con el cual trabajar. En otras palabras, después de identificar las actividades relacionadas con el descubrimiento.

Fuente: Vojtech Outulny

Para los desarrolladores de interfaz de usuario, los esquemas son como casas vacías y abandonadas, esperando a ser llenadas.

El diseñador decide qué cosa va en cada lugar, y como es que los usuarios navegan a través de la casa sin romperse el dedo pequeño con la mesa de la cocina. En otras palabras, el flujo de usuarios son básicamente una serie de interacciones entre el usuario y la interfaz, de manera que dé como resultado un camino suave y sedoso. Los cuadros de flujo, la historia y los esquemas trabajan juntos para alcanzar el objetivo.

Los desarrolladores utilizan los wireframes para tener un modelo más tangible de la funcionalidad del sitio.

Esto le da al desarrollador una imagen más clara de los elementos que necesitan codificar. Es importante destacar el tipo de desarrollo del que estemos hablando, en el caso del desarrollo back-end, los wireframes pueden ser de fidelidad baja, mientras que en el  desarrollo front end  se requiere de un wireframe de fidelidad alta.

Los gerentes de producto, requieren los wireframes más que nada con el propósito de inspeccionar el proyecto. De esta manera se aseguran que los requerimientos sean cumplidos durante el diseño del proyecto.

Los redactores también pueden utilizar los wireframes también! Por ejemplo, para poder visualizar sus copias hacia los clientes o ayudar a los diseñadores durante el proceso del diseño. Es importante mencionar que los wireframes no solo proveen fuertes cimientos pero también aceleran el trabajo.

Creando wireframes con cero inversión:

Bosquejo / Wireframe en Papel

Pros:

• Rápido: Simplemente toma una pluma y una pieza de papel y eso es todo, nada muy complicado. Comienza dibujando el producto a cualquier nivel, tu imaginación es el límite.
• Flexibilidad: Tienes la oportunidad de cambiar entre conceptos de alta y baja fidelidad. Así que sabes? Podrías empezar con un bosquejo y terminar con un prototipo en el camino.
• Sin distracciones: Te concentras en una pieza de papel en frente de tí. Sin colores, sin formas o templetes (especiales para gente flojita)

Los siguientes 2 puntos aplican cuando transformas tus bosquejos en prototipos:

• Fácil estandarización: Esto se refiere al aspecto flexible de fidelidad. Como estas creando múltiples patrones con el mismo diseño, puedes estandarizar los prototipos muy fácilmente.
• Interactivos y vivos: Son tan móviles como los bosquejos, y además tienen vida! Anda! Corre por toda la oficina y muestraselo a tus compañeros, pegalo en la pared.

Contras:

• Trabajo duplicado: Una vez que algo queda arruinado justo casi al final del proceso, puede ser frustrante rehacerlo, pero es posible deshacer algunas de las decisiones al borrar o encimar líneas, probablemente resultando en una gran bola de espagueti de tinta. Tampoco deberías al terminar el trabajo deshacerte de todo y perder tus templates. Si vamos un paso más allá y deseamos crear un prototipo de papel, debes de poner un poco de trabajo y tiempo extra.
• Cero nivel de interactividad: Olvídate de animar las cosas y ni pienses en hacer links entre tus sketches. Nada de opciones avanzadas aquí.
• Difícil de actualizar: Después de unos cuantos cientos de papeles regados en tu escritorio estas prácticamente desahuciado a la hora de querer actualizar tu trabajo. Especialmente si más de uno están trabajando en el mismo proyecto.
• Potencial inconsistencia: A menos que tengas mucho orden detrás tuyo, o un gran talento para dibujar, debes de tener mucho cuidado durante el proceso, o terminaras siendo inconsistente en los botones.

Pizarron Blanco y Negro

Pros: (ver los sketchs)

• Gran capacidad de escalado: Si deseas convertir toda tu oficina en un gran pizarrón blanco nadie te va a detener. De esa manera ya no estarás limitado al tamaño de tu pantalla, y tendrás la oportunidad de ver a escala e inspeccionar desde la distancia, incluso mientras caminas.
• Transparencia: Además de verse cool, un edificio con oficinas y pasillos llenos de pizarrones blancos, en donde la gente puede trabajar  libremente en proyectos, se da la sensación de que la compañía es abierta y transparente.

Cons: (ver sketch)

• Falta de movilidad: Si tienes un pizarrón grande, estas básicamente confinado a un espacio fijo. Especialmente si este está montado en la pared. Si está ubicado en un stand, te veras estupido yendo con él a todos lados con el fin de mostrar tu pieza maestra.

• Bajo nivel de detalle: No puedes ir realmente a detalle,  a menos que tengas marcadores que puedan dibujar líneas muy finas (y vale la pena aclarar que a la distancia se perdera la imagen)

Plantillas

Esta es mi forma favorita de crear wireframes en una forma tradicional y no digital. Es básicamente bosquejar pero con un giro interesante. Recuerdas cuando te dije que una de las desventajas de hacer bosquejos es la falta de plantillas? Pues con las plantillas físicas se resuelve esto de una manera fácil y elegante. Puedes encontrar una tonelada de templetes en línea que puedes imprimir, ó inclusive conseguir algunas de ellas que vienen listas para usarse. Puedes hacer los tuyos propios y tendrás consistencia inmediatamente, pudiendo enfocar en el proyecto mismo y no en duplicar botones y elementos de la UI.

Ahora para la armadura digital:

Wirify

Cuando comencé a usar wireframes estaba sobrecogida por la cantidad de software disponible. Es muy difícil decir cual es mejor que otro y en cual deberíamos gastar nuestro dinero. Para ser honesta todavía no se cual es el mejor, pero les puedo decir cuales son los que funcionan mejor para mi. Primero me gustaría hablar de uno llamado Wirify, este en realidad no es algo con lo que haces wireframes, pero la idea detrás de él es brillante. Escoge un sitio web  que te guste y la podrás ver desnuda hasta los huesos. Demos un vistazo al NY Times por ejemplo.

O CNN.

Así que en caso de que se te acaben las ideas, ahora puedes inspeccionar los sitios que realmente funcionan, genial cierto?!

Wireframe.cc

Es una de las mejores herramientas online, cuando lo que quieres es diseñar rápidamente.

UX pin

Fuente: Constructive.co

Si lo que deseas es adentrarte más en las profundidades de un software  y no te da miedo aprender nuevas habilidades, te recomiendo UXPin. Fue desarrollado por diseñadores UX  para diseñadores UX. Tiene un bonito estilo de drag and drop, y una biblioteca llena de grandiosas características. Además de eso, tiene incluido soporte a Photoshop. Las cosas que me desagradan de esta herramienta es el precio y su soporte para dispositivos móviles, ya que a pesar de que de alguna manera esta “ok” pero le faltan algunos gestos.

Balsamiq

Esta es definitivamente mi herramienta favorita cuando se trata de wireframes! Es fácil de aprender y super conveniente de usar. También te ofrece las mismas funcionalidades de arrastrar y soltar como UXPin. Se la recomiendo ampliamente que apenas esté comenzando o tenga planeado hacerlo pronto. Puedes crear wireframes profesionales y con calidad de Marketing. Disponible para Mac y Windows. Aquí hay un ejemplo de proyecto en el que actualmente estoy trabajando. Es una tienda en linea todavia en desarrollo para la venta de electrónica y muebles de casa usados.

Proyecto Balsamiq en progreso

Conclusión:

Hay algunos malentendidos cuando nos referimos a los wireframes. Los wireframes sirven para generar proyectos centrando la atención en la  funcionalidad. Es por eso que la fidelidad va de baja a media. Puedes crear wireframes y utilizarlos, seas un diseñador UX o no. Sin embargo, si tu objetivo es crear wireframes y mejorar la experiencia de usuario, concéntrate en un flujo constante de usuarios.

Hay diferentes caminos para crear los wireframes, por ejemplo, puedes tomar la vía tradicional e ir por papel y pluma, o utilizar algún software dedicado para ello. Personalmente, me gusta comenzar con plumones, y avanzar poco a poco a lo digital, utilizando software como Balsamiciq o UXpin. Si no tienes ideas puedes siempre inspirarte usando otros sitios cool utilizando herramientas como Wirify o recurrir a una agencia diseño web en Madrid.

Don't forget, sharing is caring! :)