Antes de lanzar cualquier sitio web, necesitarás crear un prototipo. Un sitio interactivo y funcional mostrará mucho más de lo que jamás podrías explicar con palabras. Aquí tienes algunos consejos para hacerlo bien.
Pero primero, aclaremos algunos términos que usaremos a lo largo del camino
Wireframes, mockups y prototipos: etapas de un proceso
El mapa no es el territorio
–Alfred Korzybski
Antes de empezar con las mejores prácticas para la creación de prototipos, debemos definir qué es un prototipo. Un prototipo no es un wireframe ni un mockup, aunque es posible que crees uno o ambos durante el proceso.
Los wireframes, mockups y prototipos pueden verse como etapas en el proceso de diseño, donde cada paso se acerca un poco más a la representación del sitio web final y funcional. Por lo tanto, puedes referirte a cada uno según su nivel de "fidelidad" respecto al producto final.
Wireframes: baja fidelidad
Los wireframes comunican la estructura mediante elementos gráficos abstractos como líneas y cajas, de forma similar a un esquema electrónico. Puedes ver dónde están todos los circuitos y cómo se relaciona cada elemento con los demás, pero no ves el producto final: una radio que pronto reproducirá tus canciones favoritas.
Mockups: fidelidad media
Los mockups son similares a los wireframes, pero su estructura básica ya ha sido vestida con estilo. En lugar de cajas grises que representan imágenes, ves gráficos reales, fuentes y colores coherentes con la identidad de marca del cliente.
Los mockups son excelentes para mostrar cómo un sitio web capturará la esencia de una marca.
Los wireframes pueden ayudar en las etapas iniciales del desarrollo. Facilitan el comienzo del diseño de un prototipo y no tienen por qué ser demasiado sofisticados. Los mockups pueden ser útiles para obtener la aprobación de un cliente sobre el aspecto del sitio web (aunque los moodboards y los style tiles pueden ser mejores herramientas para esto).
Solo evita atascarte revisando mockups cuando podrías estar haciendo esos cambios directamente en un prototipo real.
¿Qué es un prototipo?
Un prototipo es una representación interactiva de un sitio web. No es necesario que todas las interacciones y animaciones estén terminadas, pero sí debes tener los elementos clave presentes para mostrar cómo va a funcionar. Obsesionarse con cada detalle solo causará frustración cuando tengas que revisarlos o deshacerlos durante el proceso de evaluación. En este sentido, un prototipo es una versión de alta fidelidad del sitio web final: la mayoría de los componentes, aunque no necesariamente todos, están en su lugar.
En "Elige siempre prototipos en lugar de mockups," Neal O’Grady señala que, gracias a su interactividad, los prototipos son mucho mejores que los mockups para demostrar cómo funciona un sitio web. Por eso decimos: olvida los mockups y pasa directamente al prototipo.
Cuando hablas de un sitio web —algo dinámico e interactivo—, las explicaciones largas no sirven de mucho. En cambio, mostrar a tus clientes exactamente cómo funciona tu genial diseño es la forma más directa de dejarlos boquiabiertos y ganártelos. Por eso los prototipos son la herramienta perfecta para presentar un concepto de diseño a los clientes.
Lecturas relacionadas: Las mejores herramientas de prototipado para diseñadores
Conoce a tu(s) audiencia(s)
Audiencia 1: Tus clientes, compañeros de trabajo y otras partes interesadas
El proceso de diseño y desarrollo puede involucrar a muchas personas diferentes, desde redactores de contenido hasta directores ejecutivos. Lo que le muestras a un departamento de marketing puede ser muy distinto a lo que le presentas a un grupo de desarrolladores backend.
Así que, sea cual sea la etapa en la que te encuentres, asegúrate de que tu prototipo incluya las funciones relevantes para tu audiencia. Por muy espectaculares que sean esas transiciones animadas, a un redactor probablemente le interese más cómo encaja su contenido en el diseño (tanto metafórica como literalmente).
Al igual que en el marketing, no se trata tanto de no añadir las funciones que quieres, sino de cómo hablas de los distintos elementos del sitio. Céntrate en lo que tu audiencia quiere ver y necesita saber, y habrás avanzado mucho en la venta de tu diseño. Y en la mejora del proceso de colaboración.
Audiencia 2: La audiencia final del sitio web
Una cosa es mostrar tu prototipo a personas que llevan meses reuniéndose para hablar de él y que pueden recitar cada uno de sus objetivos de memoria.
Y otra muy distinta es obtener la perspectiva externa de alguien que realmente va a utilizar el sitio web.
Tienes que hacer lo siguiente:
- Saber quiénes serán tus usuarios finales
- Entender sus expectativas para este tipo de sitio
- Realizar pruebas de usabilidad con ellos usando un prototipo
Recuerda que la mayoría de la gente no está familiarizada con el lenguaje del diseño y el desarrollo. Tendrás que hacer preguntas directas y sin tecnicismos para obtener comentarios valiosos.
¡No hay nada como ver a alguien esforzarse por completar una tarea que tú consideras "fácil" para ajustar tu forma de pensar sobre un problema de diseño!
Descubre qué sitios web visitan habitualmente y qué les hace volver. ¿Qué características y funciones hacen que estos sitios sean una experiencia agradable? Por otro lado, ¿cómo creen que podrían ser más fáciles de usar?
Una vez que conozcas sus hábitos y particularidades en la web, puedes preguntarles cuáles son sus expectativas para tu prototipo. ¿Qué esperan aprender? ¿Qué tareas quieren realizar? ¿Y qué funciones esperan que tenga?
También querrás asignar a tus usuarios de prueba tareas comunes para completar. Por ejemplo, si estás creando el sitio web de un restaurante, podrías pedirles que:
- Averigüen cuál es el plato especial de esta noche
- Hacer una reserva
- Ver opiniones
Poner un prototipo frente a un usuario ajeno al proyecto es fundamental para probar su funcionalidad, arquitectura de información y usabilidad general. Durante este proceso, descubrirás problemas de diseño que solo unos ojos frescos pueden detectar. Los fallos en la navegación, la funcionalidad de los elementos y los callejones sin salida en los que un usuario puede quedar atrapado pueden salir a la luz en esta etapa.
Estos problemas pueden solucionarse desde el principio, ahorrando tiempo, dinero y dolores de cabeza antes de que el código y el diseño hayan avanzado demasiado.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Preparados, listos… ¡a prototipar!
Ya hemos hablado de cómo los wireframes ayudan en las etapas iniciales. Pero no tienes que lanzarte de inmediato a traducir tus ideas a un formato digital. Está bien empezar de forma analógica.
En su artículo "Cómo prototipo sitios web rápidamente", Nick Pettit elogia el poder del lápiz y el papel. Estamos de acuerdo en que el nivel de compromiso es mínimo, y una goma de borrar es una interfaz bastante sencilla para hacer cambios. Hacer bocetos rápidos con tan poco compromiso te libera para identificar soluciones creativas, ahorra tiempo (en comparación con el uso de una herramienta de diseño) y te ayuda a visualizar la estructura básica de tu sitio antes de pasar a los píxeles.
Sabemos que a veces necesitas preparar algo rápidamente. Keynote y PowerPoint son dos programas de presentación que pueden hacer un buen trabajo comunicando una versión simplificada de cómo se verá tu sitio. Estos programas tienen limitaciones en cuanto a elementos e interacciones, pero si tienes prisa por montar un prototipo, pueden funcionar en las etapas iniciales del desarrollo.
Por otro lado, una vez que le cojas el truco a diseñar con Webflow, verás que es rápido y fácil crear un prototipo mucho más sólido, ¡sin todas las limitaciones que plantean las herramientas más rudimentarias!
Aprovecha el poder de HTML y CSS
En la entrada del blog de Webflow de Neal O’Grady “Elige siempre prototipos en lugar de maquetas”, señala que, debido a su interactividad y elementos visuales, un prototipo programado es la mejor forma de demostrar cómo se verá y funcionará un sitio web. Un prototipo funcional construido con HTML y CSS listos para la web es lo ideal.
Presentar un prototipo basado en código ahorra tiempo y complicaciones. Con la multitud de pantallas que existen, un prototipo en HTML y CSS ofrece la forma más sencilla de demostrar cómo se verá y funcionará tu sitio en diferentes dispositivos. Esto simplifica el proceso de diseño, aunque solo sea porque puedes enviar un único enlace a todos los implicados, en lugar de múltiples archivos de Photoshop.
Un prototipo programado muestra exactamente cómo se visualizará en diferentes navegadores y dispositivos. Y si es necesario realizar cambios, puedes hacerlos directamente en el modelo funcional. Esto acelera el proceso de desarrollo y te permite lanzar el proyecto antes que si hubieras prototipado de formas más tradicionales.
Además, no hay mejor forma de impresionar a una sala llena de interesados que demostrando realmente todas las animaciones e interacciones geniales que has creado, en lugar de limitarte a explicarlas.
En el proceso de desarrollo, surgirán errores e incongruencias. Los prototipos programados revelan estos problemas desde el principio. Esto te permite solucionarlos en las etapas preliminares en lugar de tener que resolverlos a toda prisa antes del lanzamiento.
Estarás pensando: "Eso está muy bien, pero no sé programar". Antes de que abandones este artículo para ponerte a ver vídeos de animales haciendo cosas raras, aquí tienes un secreto (a voces):
No necesitas saber programar.
Webflow te permite crear sitios web mediante una interfaz gráfica intuitiva. Mientras diseñas, genera código HTML, CSS y JavaScript limpio para ti. Puedes crear una amplia gama de interacciones y animaciones modernas que harán que tus diseños sean más atractivos, y ni siquiera tendrás que mirar el código.
Y tu prototipo será adaptable. Tu diseño, contenido y gráficos se ajustarán al dispositivo, por lo que tú, tus clientes y el resto de los interesados verán exactamente lo que obtendrán.
Diseña con contenido real
Como hemos comentado, un prototipo es mucho más que un esquema o una maqueta. También hemos mencionado que no necesita ser una versión completa.
Es necesario utilizar contenido real en el proceso de diseño. No hace falta que esté totalmente desarrollado, pero deberías tener los encabezados y una aproximación del contenido que vendrá después. Usar texto de relleno para ocupar espacios vacíos está bien, pero es mejor usar el texto definitivo, aunque sea un borrador inicial. Debe haber suficiente contenido para que alguien se haga una idea de qué trata la página y cómo fluye la información.
Para saber más sobre esto, echa un vistazo al artículo de John Moore Williams, “Por qué tu proceso de diseño debería empezar por el contenido.”
Ten en cuenta los dispositivos móviles
Con cualquier diseño, debes tener presentes dos cosas:
- La idea que se quiere comunicar
- La acción que quieres que la gente realice a continuación
Así que pregúntate: ¿cuál es el propósito de cada página? Encontrar el enfoque es esencial para los dispositivos móviles, donde las pantallas más pequeñas exigen brevedad.
Elimina los elementos que distraigan o sean repetitivos (excepto quizás tu llamada a la acción). Mantén tu diseño limpio y el texto conciso. Incluye solo el contenido y los gráficos imprescindibles. Piensa en el diseño como un bonsái que vas podando para crear una obra de belleza sencilla y duradera.
Dado que la gente usará tu diseño en una pantalla más pequeña y solo con un dedo para interactuar, simplifica la navegación. Permite que los usuarios logren lo que buscas en el menor número de pasos posible. Esto es vital para cualquier buen diseño.
Las microinteracciones, animaciones y otros elementos dinámicos hacen que la experiencia móvil sea divertida e interactiva. Un prototipo debe mostrar cómo se integrarán estos elementos para mejorar la experiencia del usuario.
Pero no te limites a pensar en el móvil: pruébalo en el móvil. Si estás creando prototipos con Webflow, simplemente abre el sitio en todos los dispositivos móviles a los que tengas acceso. Luego, envíaselo a algunos amigos que tengan dispositivos diferentes y reserva tiempo para revisar el prototipo con ellos. Si trabajas en una empresa, averigua si tienen un laboratorio de dispositivos: si es así, aprovéchalo. Si no, ¡es hora de empezar a hablar sobre cómo montar uno!
Empieza con un prototipo, termina con un producto final mejor
No te fijes en la belleza de un edificio; fíjate en la construcción de los cimientos, que son los que resistirán el paso del tiempo.
–David Allan Coe
Crear un sitio web sin un prototipo es como intentar construir una casa sin planos. Claro, puedes juntar los materiales básicos para que se parezca a un edificio, pero lo más probable es que acabes quitando clavos, derribando secciones y, probablemente, soltando algún que otro taco por el camino.
Un prototipo funcional diseñado para cubrir necesidades y expectativas claras te permitirá lanzar tu sitio web más rápido y con menos complicaciones. Y, con suerte, evitará que tengas que soltar más de un taco por el camino.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
