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 programación es una herramienta mágica para los diseñadores.
Figma, Adobe XD, Photoshop, tableta Wacom, cuaderno de bocetos… todas herramientas de interfaz y diseño web, ¿verdad? Tómese 2 minutos e intente recordar por qué quiere ser diseñador y por qué le gusta diseñar.
Lo más probable es que disfrutes creando; Eres una persona creativa. Tal vez cuando era niño comenzó con una experiencia artística y luego canalizó esa energía creativa hacia la resolución de problemas mientras continuaba expresándola visualmente: se convirtió en diseñador, en un solucionador creativo de problemas.
Hoy intentaré mostrarte que la programación es una herramienta subestimada para expresar tu creatividad en la resolución de problemas mediante la construcción de un generador SVG real desde cero. ¡Entonces empecemos!
Contenido del Articulo
Paso 1: No lo inventes; resolver un problema
No hemos entrado en las consideraciones comerciales profundas aquí, pero ver los problemas que enfrenta y resolverlos usted mismo es una excelente manera de comenzar.
Mientras trabajaba con un cliente, necesitaba ondas SVG para ilustraciones. Así que estaba buscando un generador de ondas: había muchos generadores de ondas de colores ondulados con entradas paramétricas, pero no un generador de ondas sinusoidales simple y perfecto. 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 construimos el generador de onda sinusoidal 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 área. Siempre muestran un problema profundo, doloroso y conocido.
Paso 2. Diseña la solución lo más simple posible
Dos reglas básicas: primera regla, considera quién la usará; la segunda regla es predecir lo que esperan de cómo funciona. ¿Entonces quién? Desarrolladores front-end. ¿Qué están esperando? Curva que se puede editar con comentarios directos y un botón de exportación.
Diseño de marco
diseño de alta calidad
Un consejo: puede consultar el diseño de la aplicación Figma para obtener más consejos de diseño técnico.
Paso 3: Créalo de verdad
Es bastante normal que un diseñador se detenga en el segundo paso. ¡Pero imagina si pudieras construir lo que diseñas! Ya sabes que puedes crear lo que quieras.
Puede pensar en la codificación como una forma de traducir su interfaz de usuario que seguramente terminará con una aplicación .com que todos usarán. Por eso no importan los “mejores idiomas”; la codificación es solo una herramienta para expresar tu creatividad y crear cosas para los demás. Y como diseñador, como persona creativa, esto puede parecer… interesante.
Interfaz de usuario para una aplicación funcional
La interfaz de cualquier aplicación web se puede convertir de diseño de interfaz de usuario a código usando HTML/CSS/JS. Así es como podemos ver el papel de cada uno de estos tres “lenguajes”:
HTML: Quiero un botón.
CSS: Quiero que mi botón se vea redondeado.
JS: Quiero que suceda algo cuando hago clic en un botón.
Para crear nuestra aplicación, usaré Svelte. Svelte es un compilador de JavaScript que nos permite usar estos tres “lenguajes” en un solo lugar. Entonces, veamos cómo el código puede transformar nuestra interfaz de usuario en cosas funcionales.
Código HTML del botón
“Hola navegador web, quiero un botón llamado ‘exportButton’ y todo en una función llamada ‘downloadSVGpath’ para ejecutar 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 bonita esquina redondeada de 16 px, pasa el mouse sobre ella, no quiero ningún borde, pero quiero un degradado de color genial como color de fondo . Luego quiero que la fuente dentro del botón tenga el color #fcfcfc y use la fuente Inter (negrita, por favor). Al igual que en mi diseño de Figma, también quiero centrar los elementos en el botón y agregar algo de relleno. Ah, y agrega un poco de sombra 🙂 Gracias”.
Función de curva de dibujo SVG
“Hola, navegador web, cada vez que nuestro control deslizante se mueva, quiero ejecutar esta función: quiero que dibujes una curva dentro del cuadro que definí en mi código HTML. También quiero que mi curva de trazo se vea redondeada en cada tapa y tenga el color y el 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, hasta que su variable x haya alcanzado el ancho x total de nuestro marco, resolverá la posición del punto en el eje y de la ecuación del seno y dibujará la curva 🙂 Gracias”.
Consejos rápidos: puede obtener los archivos de código fuente de la aplicación para estudiarlos.
Resumen
- La programación es solo una herramienta que nos permite traducir nuestras metáforas muy visuales en algo que cualquiera puede usar. ¡¿Cuan genial es eso?!
- La codificación nos ayuda a presentar nuestros objetivos de diseño y nos obliga a ver más allá del alcance visual: ¿cómo debería funcionar mi botón? ¿Cómo se ve al pasar el mouse? ¿Cómo se puede diseñar mi ventana emergente para dispositivos móviles?
- La codificación nos permite crear una idea extraña que desarrollamos “solo por diversión” en lugar de poner un estudio de caso de diseño en nuestro portafolio bajo la etiqueta “proyecto personal”.
- La codificación nos muestra cuánto trabajo se requiere para lograr lo que hemos diseñado. De esta manera, podemos comprender mejor las necesidades, los desafíos y la gestión de recursos de nuestros clientes diseñadores.
- La codificación es flexible. Puede reproducir perfectamente el píxel del sitio web de Netflix con HTML/CSS puro, Vue Framework o cualquier otro marco web.
