Un desglose de una aplicación simple, desde el diseño de la interfaz de usuario hasta la implementación, que muestra por qué la codificación es una herramienta mágica para los diseñadores.
Figma, Adobe XD, Photoshop, Wacom Tablet, sketchbook… todas herramientas para interfaces y diseñadores web, ¿sí? Tómese 2 minutos e intente recordar por qué quiere convertirse en diseñador y por qué le gusta diseñar cosas.
Lo más probable es que sea porque te gusta crear; eres una persona creativa. Tal vez comenzó con experiencias artísticas cuando era niño, luego convirtió esa energía creativa en la resolución de problemas mientras continúa expresándola visualmente: se convirtió en diseñador, en un solucionador creativo de problemas.
Hoy intentaré mostrarte cómo la codificación es una herramienta subestimada para expresar tu mentalidad creativa de resolución de problemas mediante la creación de un verdadero generador de SVG desde cero ¡Así que entremos en ello!
Paso 1: No te hagas una idea; resolver un problema
No entramos en consideraciones comerciales profundas aquí, pero ver los problemas que enfrenta y decidir resolverlos usted mismo es una excelente manera de comenzar.
Durante el trabajo con el cliente, necesitaba algunas ondas SVG para las ilustraciones. Así que busqué un generador de ondas: había un montón de generadores de ondas de colores ondulados con entradas paramétricas, pero no un generador de ondas sinusoidales perfecto y simple. Decidí dibujarlo en mi herramienta matemática. geogebra y luego exportarlo a SVG.
Está bien, pero no rápido. Y nos gusta hacer nuestro trabajo rápidamente. Pero espera… ¿Por qué no creamos un generador de ondas sinusoidales perfecto? Sin ecuaciones ni software matemático aburrido para abrir, solo una curva y un botón de exportación. Lo tienes, ahora vamos a diseñarlo.
Consejos rápidos: si está buscando un problema, busque memes en su campo. Siempre muestran un problema profundo, doloroso y conocido.
Paso 2: Diseñe la solución lo más simple posible
Dos reglas principales: Primera regla, piensa en quién la usará; la segunda regla, predecir lo que esperan de cómo funciona. ¿Entonces quién? Desarrolladores front-end. ¿Qué están esperando? Una curva que se puede editar con comentarios directos y un botón de exportación.
Diseño de estructura alámbrica
Diseño de alta fidelidad
Un consejo rápido: puede agarrar el diseño de figuras de la aplicación para obtener más consejos técnicos sobre el diseño.
Paso 3: Constrúyelo de verdad
Como diseñador, detenerse en el paso dos está perfectamente bien. ¡Pero imagina si pudieras construir lo que diseñas! Ya sabes que puedes crear todo lo que quieras.
Puede ver la codificación como una forma de traducir su interfaz de usuario que seguramente terminará con una aplicación .com que todos pueden usar. Es por eso que los «mejores idiomas» no importan; la codificación es solo una herramienta para expresar tu creatividad y crear cosas para otros. Y como diseñador, como persona creativa, esto puede sonar… interesante.
Interfaz de usuario a aplicación funcional
Cada interfaz de la aplicación web se puede traducir del diseño de la interfaz de usuario al código con HTML/CSS/JS. Así es como podemos ver el papel de cada uno de esos 3 “lenguajes”:
HTML: Quiero un botón.
CSS: Quiero que mi botón se vea redondeado.
JS: Quiero que suceda algo cuando haga clic en mi botón.
Para construir nuestra aplicación, usaré Svelte. Svelte es un compilador de JavaScript que nos permite usar esos tres «lenguajes» en un solo lugar. Entonces, veamos cómo el código puede traducir nuestra interfaz de usuario a cosas funcionales.
código de botón HTML
«Hola navegador web, quiero un botón llamado «exportButton» y todo en una función llamada «downloadSVGpath» que se llevará a cabo cuando alguien haga clic en el botón 🙂 Gracias»
Código de botón de estilo CSS
“Oye, navegador web, quiero que apliques estas reglas de estilo a mi botón HTML básico: quiero una hermosa esquina redondeada a 16 px, un puntero del mouse cuando lo pasamos, no quiero bordes, pero quiero un color genial degradado como color de fondo. Luego, quiero que la fuente dentro del botón tenga el color #fcfcfc y use el tipo de letra Inter (negrita, por favor). Al igual que mi diseño de Figma, también quiero centrar cosas en el botón y agregar relleno. Ah, y agrega una sombra sutil 🙂 Gracias”.
Dibujar la función de curva SVG
“Oye, navegador web, cada vez que nuestro control deslizante se mueva, quiero ejecutar esta función: quiero que dibujes una curva dentro de un marco que he definido dentro de mi código HTML. También quiero que mi trazo de curva se vea redondeado en cada tapa y tenga un color y ancho que he definido dentro de las variables. Tomará los parámetros de la función seno de los valores almacenados de los controles deslizantes. Finalmente, aunque su variable x no haya alcanzado el ancho total en el eje x de nuestro cuadro, resolverá la posición del punto del eje y de la ecuación del seno y dibujará la curva 🙂 Gracias”.
Consejos rápidos: puede agarrar el código fuente archivos de la aplicación para explorarlos.
Resumen
- La codificación es solo una herramienta que nos permite traducir nuestras metáforas muy visuales en algo que todos puedan usar. ¡¿Cuan genial es eso?!
- La codificación nos ayuda a visualizar nuestros objetivos de diseño y nos obliga a ver más allá del rango visual: ¿cómo se supone que funcionará mi botón? ¿Cómo se ve cuando flota? ¿Cómo se puede diseñar mi modal emergente para dispositivos móviles?
- La codificación nos permite crear la extraña idea que diseñamos «solo por diversión» en lugar de incluir el estudio de caso de diseño en nuestro portafolio bajo la etiqueta de «proyecto personal».
- La codificación nos muestra cuánto trabajo se requiere para lograr lo que diseñamos. Para que podamos comprender mejor las necesidades, los desafíos y la gestión de recursos de nuestros clientes de diseño.
- La codificación es flexible. Puede replicar el píxel perfecto del sitio web de Netflix con HTML/CSS puro, Vue Framework o cualquier otro marco web.