Do you Prototype before coding?

What tool do you use? Figma, XD, a pen and paper?

Comments

[Tracy Gilmore]

I have found that before tackling a significant piece of work it can be useful to identify areas that poss a particular challenge and prototype them in isolation (away from the rest of the code base). I have done this recently, captured the code and shared my thoughts with my colleagues. The result is, more often than not, a much better solution

[Efraim Jerszurki]

Yes, same here, when I started to "draw" first than code, even if it is a CRUD, it make things easier to solve later, and to pass to my colleagues

[Iheb khalifa]

@tracygjg good point, I agree with you prioritizing tasks before tackling them into coding is an excellent way to identify challenges and also help you with the amount of time needed for each part.

[Ben Halpern]

When solo problem-solving — I "prototype" with a pen and paper, but half the time it's gobbledygook.

[tq-bit]

I started to use Obsidian and its Excalidraw plugin to write specifications and UI ideas. Then, I start building a basic idea with Tailwind + Vue. More often than not, I copy/paste a lot of stuff right into the page-level of the app. When the customer (or I) like what I see, I refactor everything into components.

[Efraim Jerszurki]

Nice, I've heard about Obsidian before but i wasn't aware of this feature, I will dig into this later, Thank You

[JoelBonetR 🥇]

This is a question on the lifecycle for designers not for developers.

To become an expert UI designer (at least through the traditional way) you'll need a college degree plus a master.
That's an entire different career.

If you -like myself- like the design world there are tones of stuff to learn as well. i.e. Color theory, shape and composition...

When working on a personal project I usually use excalidraw.com to perform low quality wireframes and that's all. Sometimes I use Adobe XD to add detail to the wireframe and design something cool on it but almost never prototype on it, just because to me is like a waste of time.
I can expend this time applying the functional in the code instead because I already know which functional do I expect it to have and how I expect it to behave.

When on a larger project within a team I expect prototypes along with the designs from the designers.

[Eric Donovan]

UX/UI wise the design is already provided where I work currently, so there is not much need for the devs to prototype (the designers do it though). If I do it for my own projects I prototype in paper, I draw around a credit card with a pencil for my "phone screen" (I'm an android dev)

I prototype new tech or integrations though. The current app I work on is so insanely large, over complicated, slow and flaky that when adding any significant new piece of tech, it can be hard to tell if the problems are due to the new tech, or due the legacy code that's broken for an unrelated reason.

So I've found myself doing more and more standalone prototype POC style apps to quickly settle on an optimum implementation of the new tech without being bogged down in all the cruft and 20 minute build times. It's worked really well - at the end we can almost copy and paste the implementation in to the main app, and then spend time polishing the UI instead of fixing crashes and weird bugs.

For a more reasonable app, I might do this kind of thing in a branch, but the advantage of having it separate is clarity - especially if you need to explain the implementation to someone else (or explain it to yourself ;))

[Jubril Abdulsalam]

I start with pen and paper, and then move onto Adobe Photoshop. I plan to learn Adobe Xd in the nearest future

[Efraim Jerszurki]

YEES, it seems that you always have pen and paper by the hand!

[Jon Randy 🎖️]

That sounds like "wireframing" - a prototype would usually involve coding. If I'm sketching out UI ideas though, I use pen and paper (a reMarkable tablet)

[Efraim Jerszurki]

After all Pen and Paper wins lol

[Max Webb]

Yeah for sure. Something at school that has been installed in us ever since I started. Definitely is something I've learnt to do in my own projects. I am a big Adobe XD fan just because I have CC, but you can never beat the simplistic pen and paper approach!

[Potpot]

When the image is clear, I will code it first. If everything is a barebone, I will sketch first (in Figma) and play a bit to fill in more details.

[Efraim Jerszurki]

Nice

[mrjohnsonit]

For C# architecture, and code reviews, I like to prototype with LinqPad.