A simple app breakdown, from UI design to deployment, showing why coding is a magic tool for designers.
Figma, Adobe XD, Photoshop, Wacom Tablet, sketchbook… all the tools for interfaces and web designers, yes? Take 2 minutes, and try to remember why you want to be a designer and why you enjoy designing things.
It may be as you like to create; you are a creative person. You may have started with artistic experiences as a child, and then turned that creative energy into a problem-solver while continuing to express it visually: You became a designer, a solution creative problems.
Today, I will try to show you how coding is a rare rate tool to express your creative mind to solve problems by building a real SVG generator from scratch. So let ‘s get into it!
Step 1: Don’t get an idea; solve a problem
We haven’t gone into deep business here, but it’s a great way to start seeing problems you face and deciding to solve them for yourself.
During client work, I needed some SVG waves for illustrations. So I looked for a wave generator: There were tons of colorful wavy wave generators with parametric inputs but no simple extended wave generator was perfect. I decided to draw it on my GeoGebra math tool and then export it to SVG.
Okay, but not fast. And we like to do our jobs fast. But wait … Why not create a perfect extended wave generator? Without boring equations & math software to open, all you have to do is curve and export button. You got it, now let’s design it.
Quick Tips: If you are looking for a problem, look for memes in your area. They always represent a deep, painful, well – known problem.
Step 2: Design the simplest possible solution
Two main rules: First, think about who will use it; in the second rule, predict what they expect from how it works. So who? Front end developers. What are they waiting for? Curve that can be edited with direct feedback and export button.
Wire frame design
High-Fi design
Quick tip: You can get the app’s Figma design for more technical design tips.
Step 3: Take it for real
As a designer, stopping at step two is a wonderful thing. But imagine if you could build what you designed! You already know that you can create everything you want.
You can see coding as a way to move your UI which will definitely end with a .com application that is usable by everyone. That’s why “best languages” are irrelevant; coding is just a tool to express your creativity and build things for others. And as a designer, creative person, this could be interesting …
Interface with functional application
All web application interfaces can be transitioned from UI design to code with HTML / CSS / JS. The role of each of these 3 “languages” can be seen:
HTML: I want a button.
CSS: I want to look at my exact button.
JS: I want something to happen when I click my button.
To build our app, I will use Svelte. Svelte is a JavaScript compiler that allows us to use all three of these “languages” in one place. So let’s see how code can translate our UI into functional things.
HTML code code
Hey web browser, I want to execute a button named “exportButton” and everything in a function named “downloadSVGpath” when someone clicks the button 🙂 Thanks “
CSS style codes
“Hey web browser, I want you to apply these style rules to my basic HTML button: I want a beautiful round corner at 16px, mouse pointer when we maneuver it, I have no limits, but I want color cool. gradient as background color. Then I want the font inside the button to be set to #fcfcfc color and use the Inter font (bold, please). Like my Figma design, I also want to center things in the button and add padding. Oh, and add a subtle shade 🙂 Thank you. ”
Draw SVG curve function
“Hey, web browser, every time our slider moves, I want to run this function: I want you to draw a curve inside a frame that I have defined inside my HTML code. I also want my cap to look like a curve stroke and have a defined color and width inside variables. You will take the parameters of the nipple function from the stored values of the slides. Finally, even though your variable x does not reach the full width in the x-axis of our frame, you will solve the point-axis position of the Chinese equation and draw the curve 🙂 Thank you. ”
Quick Tips: You can grab the source code files of the app to explore them.
Summary
- Coding is just a tool that allows us to translate our visual metaphors into something that everyone can use. How cool is that ?!
- The coding helps us visualize our design goals and forces us to look beyond the visual range: how is my button supposed to work? What does it look like when you are hovering? How can I design my popup modules for mobile devices?
- Coding allows us to create the weird idea we designed “just for fun” instead of pushing the design case study into our portfolio under the “personal project” tag.
- The coding indicates the amount of work required to achieve what we have designed. So we can better understand the needs, challenges and resource management of our design clients.
- The coding is flexible. You can perfectly replicate the pixel of a Netflix website with pure HTML / CSS, the Vue Framework, or any other Web framework.
