Benaiah's blog

Prototype first, Code later

Benaiah Barango's photo
Benaiah Barango
·

2 min read

In my early coding days, I was advised to always draw out a sketch of what I intended to create and also work out a pseudo-code before jumping to my dark-themed VSCode editor. One major thing that was missing from this very useful piece of advice was what to use to "sketch" out my idea. So, like most people I saw, I pulled out a pen and a pad to try and replicate my mental pictures of this great web app I had brewing.

While hand-drawing is better than not sketching at all, it had a few hindrances for me. Simply put, I am not a very talented doodler. So, once I drew out boxes for where what component should go, and the relative sizes, I was done sketching.

This resulted in something I call "Designing on-the-go" (using CSS to try to decide what a page should look like by trial-and-error).

Now, this doesn't sound like much of a problem, considering that I made two nice apps this way. But here's how it can be an issue:

  • I found that writing CSS to create a component/page that I only had a mental image of is more tasking. It was easier to get frustrated because of the trial-and-error method I used

  • Secondly, it’d be nice to play around easily with colours, gradients, font sizes, alignment etc., without having to tweak your CSS styles a 1000 times (I can't be the only one)

Having a design prototype trained me to replicate designs with code. It doesn't get simpler than "Here is what I want my app to look like... write some code to bring it to life". Moreso, when you have a nice-looking design, you'd WANT to replicate it!!

My recommendation? - Figma

Figma is a free OS-agnostic design tool to easily visualize or iterate on an idea. I'm more fond of Figma because of its VERY gentle learning curve. They provide a great beginner’s tutorial on Youtube.

There are a few other well-known design options out there like Adobe Photoshop, Sketch, etc.

CONCLUSION: Regardless of which platform you are more comfortable with, I highly recommend taking some time to create a quick prototype before you jump to your preferred code editor.

figmafrontendDesign