¿Por qué renderizar diseños?
¿Cómo usa maquetas, específicamente maquetas de alta calidad (no wireframes), en su proceso de diseño y por qué / las recomendaría?
Soy un desarrollador, en el pasado, mis propietarios de productos a veces daban requisitos en forma de maquetas, pero incluso entonces, en general, me di cuenta de que podría haberse comunicado sin todo el trabajo adicional (0 habilidad artística con un bolígrafo y un boceto en papel hubiera sido suficiente).
La semana pasada estaba viendo algunos videos de YouTube para inspirarme en el diseño de un proyecto secundario / de pasatiempo en el que estoy trabajando y me encontré emulando algo de lo que estaban haciendo, pero me detuve cuando me di cuenta de que el esfuerzo no se prolongó. La mayoría del software de diseño que he visto se parece más a Photoshop que a un navegador web, por lo que el trabajo normal de lienzo / paleta no se traduce fácilmente en (S) CSS: nunca (* no desde principios de la década de 2000) trabajado en un proyecto que utilizó una imagen de fondo, así que no estoy seguro de qué papel juega el boceto en un ciclo de vida de diseño / desarrollo.
No estoy criticando a los diseñadores ni al trabajo que haces; recuerdo Internet a finales de los 90 y no quiero volver atrás, solo estoy luchando por entender por qué las empresas gastan tanto tiempo / dinero generando arte digital de alta calidad - que luego debe traducirse en imágenes, HTML y CSS?
Respuestas
Creo que el escenario ideal es tener diseñadores que codifiquen el front-end. Pero la realidad es que la mayoría de los diseñadores no lo hacen. Sin embargo, hay cada vez más lugares donde esa es la norma.
Desde el punto de vista del diseñador, los diseños sirven principalmente a 3 objetivos principales:
- Crítica dentro del equipo
- Prueba con usuarios
- Discutir con los clientes
Los bocetos en papel no se pueden usar para ninguno de los anteriores, incluso los esquemas de alambre son difíciles de entender para los clientes y algunos usuarios. Dado que cada elemento tiene su propósito, dibujar en papel (como dibujar en una pizarra) es mejor para facilitar una discusión rápida sobre algo menor o una idea, no es posible representar cosas como la marca, la apariencia y la sensación.
Otro lugar donde brilla es retratar las ideas iniciales aproximadas para modificarlas rápidamente. Hay cosas llamadas prototipos de papel o modelos de productos de cartón, etc. A menudo se usan para recorrer un escenario y tener una idea de cómo se siente al usar el producto y si la visión tiene grandes agujeros. Es fácil pasar por alto cosas importantes cuando no se actúan.
Ahora, tanto los prototipos de alta fidelidad como el html / css directo satisfacen los puntos anteriores. Solo depende del diseñador y de los procesos internos de la empresa. No hay ninguna regla que indique que los prototipos de alta fidelidad son imprescindibles.
Lo que use depende de lo que necesite y de las limitaciones del proyecto. ¿Necesita comunicar algo que se pueda hacer dibujando en papel? Por favor hágalo, no pierda el tiempo. Hágalo en cualquier momento y en cualquier punto del proyecto. ¿Necesitas probar con los usuarios? los clientes solo entienden cosas de alta fidelidad? ¿Tienen diseñadores viviendo en html / css? Siéntase libre de omitir el photoshop / figma / sketch, etc. ¿Tiene un cliente que solicita explorar 2 vías muy diferentes? cuesta menos iterar en herramientas de creación de prototipos? Luego omita html / css por un momento.
En muchos sentidos, el flujo de código wireframe> photoshop> es heredado. Las herramientas ahora combinan wireframes y photoshop con reglas lógicas. Algunas de estas herramientas de creación de prototipos comienzan a complicarlo tanto (básicamente se convierten en representaciones visuales de código) que te hace preguntarte si es más rápido hacerlo directamente en javascript (lo cual es si eres técnico). Estoy seguro de que esta evolución continuará moviéndose cada vez más solo por código. El campo está evolucionando, hay mucha gente nueva entrando que no son técnicos. Y las herramientas que ves están dirigidas a ellos, no a los desarrolladores frontales.
También existe este concepto de fidelidad. Cuanto más se parece algo al producto final, más gente cree que no puede dar comentarios ni cambios. Se contendrán incluso si les dices que está bien dar. Por lo tanto, una estructura alámbrica invitará naturalmente a más que algo que se vea pulido y terminado. Mostrarle a un cliente un diseño refinado puede no brindarle la retroalimentación que busca. Pero de nuevo, podría codificar una estructura alámbrica en su lugar. Nadie dice que no puedas.
Porque los diseñadores no hacen eso exclusivamente para comunicarse con los desarrolladores, sino más bien para comunicarse con los usuarios y los amantes de la carne.
¿Cómo prueba una solución de diseño que garabateó con lápiz y papel? ¿Cómo averigua qué solución genera una mejor conversión? ¿Cómo saber si necesita adaptar su solución porque a los usuarios les resulta difícil de entender, etc.?
Los diseñadores hacen esto para poder trabajar en algo junto con los fileteros, que generalmente son personas de tipo visual y también para validar su trabajo probándolo con los usuarios.
Al final, la solución de diseño se transfiere a los desarrolladores y herramientas como sketch, adobe xd, etc. proporcionan una forma con un esfuerzo bastante pequeño de comunicar los atributos de estilo, etc. a los desarrolladores a partir del trabajo que ya hizo.
Renunciamos a los diseños renderizados reales en mi trabajo hace unos años. pasamos a prototipos rápidos usando proxy / mock json como backend. nuestras partes interesadas tienen la sensación de una aplicación real y pueden criticarla desde el principio sin un código de backend desarrollado. Sin embargo, todos somos diseñadores de interfaz de usuario decentes y usamos bootstrap como base. Una vez que nuestro prototipo está terminado / aprobado, comenzamos el backend porque el front-end literalmente ya está hecho. Usamos un marco javascript personalizado llamado pila atómica escrito por Tyree Jackson. ¡Echale un vistazo!