Maqueta frente a prototipo: elige siempre prototipos en lugar de maquetas

Las maquetas no son la mejor solución

Antes de contarte cuál es la solución ideal, déjame explicarte el problema, que no es nada divertido.

Por lo general, los diseñadores crean los diseños de los sitios web usando Photoshop o Illustrator, empleando múltiples capas y archivos para mostrar diferentes páginas, estados de interacción y tamaños de pantalla. Luego, tras repetidas discusiones entre las partes interesadas (y a la espera de su aprobación), los diseños son implementados por el propio diseñador o entregados a un desarrollador externo.

El ir y venir es inevitable cuando piden aclaraciones sobre los detalles del diseño, cuando señalan limitaciones técnicas o simplemente cuando se desvían de lo que se había acordado. Dependiendo de la magnitud de los cambios, es posible que el cliente tenga que intervenir de nuevo, lo que deriva en un tira y afloja a tres bandas que puede resultar bastante molesto.

Esto es ineficiente. Las idas y venidas repetitivas pueden multiplicar fácilmente el tiempo de desarrollo. El remedio, como habrás imaginado, es sustituir las maquetas por un prototipo totalmente funcional; en este caso, un sitio web interactivo real. Esto es tremendamente potente porque los prototipos funcionales son:

• Más cercanos al producto final, por lo que es más rápido pasar del diseño aprobado al sitio definitivo.
• Están en el mismo medio que el producto final. Así, todo lo que construyas en tu prototipo se puede lograr con HTML y CSS, a diferencia de lo que ocurre con Photoshop.
• Visuales e interactivos. A los clientes, y a la gente en general, les cuesta visualizar un producto final basándose solo en imágenes estáticas.
• Mejores para implementar la adaptabilidad. Puedes abrir el prototipo en varios dispositivos y probarlos directamente sin asumir a ciegas que tus puntos de ruptura de diseño son razonables en entornos reales.
• Más interesantes y emocionantes para el cliente. Puedes añadir animaciones atractivas y detalles de interfaz (UI) para darle vida al diseño. Gracias a las potentes funciones de Interacciones de Webflow, esto suele ser un añadido divertido y muy sencillo.

Vamos a profundizar en estas ventajas y a explicar por qué son tan valiosas para ti, para tu cliente y para tu salud mental como diseñador. Cuanto más aprecies los prototipos en vivo, más te acostumbrarás a usarlos de forma eficiente y más felices estarán tus clientes.

Lecturas relacionadas: Las mejores alternativas a Photoshop (gratuitas y de pago)

Los prototipos están más cerca del producto final

Cuando el cliente aprueba un prototipo, es increíblemente rápido finalizar el sitio y obtener el producto entregable, ya que el prototipo estaba casi listo desde el principio. Esto es mucho más rápido que tener que contratar a un desarrollador para que implemente tus diseños o hacerlo tú mismo. Evita tener que hacer el sitio dos veces: una en Photoshop y otra en código.

Ten en cuenta que, al usar Photoshop, puedes crear elementos de diseño que no son viables con HTML y CSS, lo que podría obligarte a rediseñarlos cuando empieces a construir el sitio real. Dependiendo de la magnitud del cambio, esto podría requerir una nueva aprobación del cliente, lo que no solo aumentaría el tiempo de desarrollo, sino que también podría hacer que pierdan la confianza en ti. Usar HTML y CSS para crear un prototipo garantiza que todo lo que diseñes sea posible en el producto final.

Tampoco habrá sorpresas para el cliente cuando el producto final y el prototipo se vean casi idénticos, algo que no suele ocurrir al pasar maquetas estáticas a sitios web. Las fuentes son especialmente famosas por renderizarse de forma distinta en Photoshop y en la web, lo que a menudo lleva a cambios de última hora que pueden no "sentirse bien" para el cliente. Esto nos lleva a:

Los prototipos son más fáciles de visualizar

Visualizar un producto final puede ser extremadamente difícil. Claro, los diseñadores pueden imaginar el resultado final a partir de una maqueta, pero a la persona promedio le cuesta ver más allá de una simple representación para apreciar el potencial de belleza y funcionalidad.

Aquí es donde los prototipos funcionales realmente brillan. En lugar de entregar a tus clientes una serie de archivos PSD, imágenes o dibujos —donde todo es estático y sin vida—, dales un ejemplo vivo con el que puedan interactuar.

Es importante que tus clientes puedan hacer clic en botones y enlaces para ver cómo cambian y a dónde llevan, en lugar de entregarles una carpeta llena de archivos PSD que deben abrir para entender la historia completa. Cuanto más fácil les resulte apreciar tu trabajo de diseño, más felices estarán y más dispuestos a colaborar contigo.

Los prototipos facilitan el diseño adaptativo

Atrás quedaron los días en los que abríamos Netscape para ver páginas web de 990px de ancho y maquetábamos sitios usando tablas. Estamos en 2017 y la gente navega por la web en pantallas que van desde las 3 hasta las 100 pulgadas, con diversas relaciones de aspecto, orientaciones, densidades de píxeles y resoluciones. Solo echa un vistazo a algunos de los posibles dispositivos que podrían estar accediendo a tu sitio:

Como puedes ver, simplemente ya no podemos crear un diseño de ancho fijo y esperar que satisfaga las demandas de nuestros clientes. Sin adaptabilidad móvil, la experiencia de usuario se verá afectada para el 50% o más de los visitantes de tu sitio. De hecho, Google ahora penaliza a los sitios que no son aptos para móviles.

Pero eso ya lo sabes. Por eso creas al menos dos archivos PSD, uno para móvil y otro para escritorio, y quizás un par más para tabletas, considerando las orientaciones horizontal y vertical. Es una gran mejora, pero también implica mucho trabajo.

Por el contrario, crear un prototipo usando un marco de trabajo adaptativo como Bootstrap (una colección gratuita de herramientas de diseño front-end para la creación rápida de sitios web) hace que sea sencillo crear un sitio que sea responsivo desde el principio. Pero, como eres diseñador, puede que no te guste programar. No te preocupes, hablaremos de eso en un momento.

Cómo crear prototipos funcionales de alta fidelidad

Quizás no uses prototipos funcionales actualmente porque a) generalmente tardan más en hacerse, b) no tienes mucha experiencia o confianza con HTML y CSS, y c) te resulta más lento iterar sobre ellos. Desafortunadamente, cuanto más te cueste el punto b), más te costará el punto a).

Eres diseñador. Sabes cómo diseñar cosas usando herramientas como Photoshop, pero la codificación real de tus sitios web suele terminar en manos de un desarrollador. A simple vista, suena un poco loco. Y puede que sientas que tienes las manos atadas.

Pero en realidad no es así. No hay lógica compleja ni matemáticas involucradas en aprender HTML y CSS, como sí ocurre en la programación real con lenguajes como Javascript, C++ o Ruby. Los conceptos básicos de HTML y CSS se pueden aprender en un día. HTML es una forma sencilla de estructurar el contenido de una página y CSS es una serie de pares de propiedad-valor (color: red, display: none). No es demasiado complicado. Dominarlos, sin embargo, lleva algo de tiempo debido a algunas de sus peculiaridades. Pero, considerando los beneficios de un prototipo funcional, vale la pena el esfuerzo. Echa un vistazo al curso de HTML y CSS de Codecademy para aprender los conceptos básicos de forma gratuita.

Recuerda, solo tú aprecias los matices. Los pequeños detalles son los que hacen que un diseño pase de ser bueno a ser excelente. Nunca dejes que se pierdan en el camino.

La ruta sin código

Si no buscas programar (lo cual es comprensible) o simplemente quieres mejorar drásticamente el ida y vuelta entre cliente y diseñador, la mejor alternativa es un constructor de sitios WYSIWYG (lo que ves es lo que obtienes). Hay varios por ahí, como herramientas que convierten diseños de Photoshop a HTML y CSS (o al menos lo intentan) y la herramienta que me encanta usar para mi trabajo freelance, Webflow. Una herramienta profesional como Webflow te permite diseñar y distribuir un sitio web usando una interfaz gráfica, en lugar de líneas de código en un editor de texto; ¡una experiencia mucho más cercana a lo que ya estás acostumbrado en Photoshop!

Uso Webflow para diseñar y construir sitios web funcionales. Tiene una interfaz que me resulta fácil de dominar rápidamente: puedes arrastrar y soltar elementos en la página (incluidos widgets totalmente personalizables como formularios de contacto) y modificar el espaciado, los colores, las fuentes, el posicionamiento y más.

Webflow utiliza el marco de trabajo front-end adaptativo Bootstrap en su núcleo, lo que hace que la capacidad de respuesta básica sea casi automática para mí. Solo tengo que realizar una pequeña personalización visual. También puedo cambiar rápidamente entre cuatro tamaños estándar de dispositivos móviles para previsualizar, probar y personalizar la adaptabilidad mucho más allá de lo que ofrece la codificación con Bootstrap.

Las animaciones y transiciones que funcionan en todos los navegadores modernos y dispositivos móviles también son pan comido usando las interacciones de Webflow—lo que te permite darle vida a tu sitio en segundos. Sin necesidad de programar.

Cuando tengas listo tu prototipo funcional, puedes enviar fácilmente a tu cliente un enlace de vista previa para que interactúe en tiempo real. Esto no publica el sitio; solo tú y quienes tengan el enlace privado podrán acceder. Esto te permite trabajar con privacidad y recibir comentarios de los clientes que tú elijas.

Por último, cuando estés listo para publicar, puedes lanzar el sitio a través de nuestra plataforma de hosting o exportar un código HTML y CSS impecable para usarlo donde quieras. No te obligamos a usar nuestra plataforma si no quieres. Crea el diseño, exporta el código, modifícalo o personalízalo a tu gusto y aloja el sitio donde prefieras. Esto es diseño web profesional desde cero.

Conclusión

Los prototipos funcionales ofrecen enormes ventajas frente a las maquetas y pueden mejorar significativamente el flujo de trabajo del diseñador. Con diseños que funcionan desde el primer día, puedes reducir las idas y vueltas y recuperar lo que tanto te gusta del diseño.

Para crear estos prototipos, tendrás que aprender a hacer sitios web básicos y funcionales, lo que te deja dos opciones: aprender a programar o usar un creador de sitios visual. Programar ofrece una personalización total y no requiere más herramientas que un editor de texto, pero aprender lleva su tiempo.

Los creadores de sitios de calidad profesional, como Webflow, ofrecen una interfaz optimizada para diseñadores, similar a Photoshop. Webflow también cuenta con plantillas adaptables para móviles que puedes usar como base si quieres ganar ventaja en tus proyectos.

Cualquiera de los dos caminos te permitirá aprovechar las ventajas de los prototipos funcionales y eliminar en la medida de lo posible a los costosos desarrolladores (¡lo sentimos, desarrolladores! ¡seguimos queriéndoos!) de la ecuación, maximizando tus ingresos como freelance y asegurando que tus diseños sean exactamente como quieres.