5
8 Comments

What's your UI coding process ?

In a effort to understand how various devs go from a requirements doc to an implemented UI, I would like you to pick the options that describe your process the most. If none apply, tell us your process.
The UI can be for any type of product (landing page, mobile app, saas, etc)

Design phase
1- I (or a designer) create the high fidelity design in Figma-like software
2- I (or a designer) create wireframes in Figma-like software , then I go straight to coding
3- I skip this phase

Implementation
a- I use a third party UI components lib made for the UI framework (react, vue, etc) I use
b- I use my own components lib
c- If possible, I look for pre-designed and pre-implemented templates (whole screens) that fits my project then I modify according to my needs

If you happen to fall under all the cases, which one is more prevalent ?

Thanks a lot.

  1. 7

    For a client? Paper > Figma > Code.

    Side hussle? Code. Keyboard goes brrrrr.

  2. 3

    Design Phase:

    • Pen and Paper work best for me. I've done some Figma but I ended up moving px around rather than focusing on the UX, which is what matters at this stage. Making it nice comes at the end.

    Implementation:

    • A combination of a and b. I use Angular Material and a components lib partially built on top of its components
  3. 2

    I would love to learn design on Figma as I tend to spend so long on my own projects designing in code, and then refactoring.

    For React Native Club, I went straight to dev and used Ant Design. As you can see, it looks nothing like Ant Design, so you can tell I spent a long long time altering it into something I like.

    For my next project I am going to use TailwindCSS. Personally, I don't really like utility-first UI libraries, but you can't fault the way Tailwind looks, and I want to spend less time tweaking the UI library. It was either that or hire a designer.

  4. 2

    Interesting. Personally I have a three iteration rule, which essentially means that I need to do three iterations before I get something of reasonable quality.

    During these iterations I combine design and code in the same work flow, and do both as I go. I find it too difficult to design just the right amount of functionality in a way that I have the technical capability of coding these features in a timely manner. Besides that I will always find things I'd rather approach differently when implementing. These iterations are more of a creative mind mapping process rather than a straightforward feature implementation.

    Interestingly enough I see the same results evolve through iterations. The first round is about establishing the original idea. The second one is where I improve upon the first one, while I throw everything out in the third round and start all over again, sometimes reusing the qualitative bits from previous rounds. This third iteration always yields the most impressive results.

    Much heard critique about this work flow has to do with the amount of time "thrown away". Contrary I feel like I'm working rather effectively, am able to pivot quickly, and build the third iteration quicker than the improvements applied in the 2nd round.

    As with all advice; your mileage may vary. However, it's how I'm building https://skyhop.org, so feel free to judge yourself on the quality of this work :)

  5. 2

    Most of the time, I try to create my own design by using Adobe XD and convert it to HTML & CSS. Then I need to fix it for responsiveness by using bootstrap. Wireframes are also helpful for me but I do not usually focus on wireframes during front-end development.

    Sometimes, when budget is low then I look for pre-designed templates and change them according to the needs.

  6. 2

    At Donux, we usually start by gathering similar designs, then doing a high fidelity prototype.

    Then we discuss the design, trying to move pieces (often together with the client), finding good assets, trying to fill the copy in a few pages, just to get the sense of what's the mood of the whole project.

    Then when we're happy with the result, we switch to development, where we build our own components.

  7. 2

    Most of the times I make a few high fidelity sketches in Figma, to set the general look and feel of the page or app.

    Then I leave Figma and design the rest in the browser. Currently I'm using Tailwind CSS for all my projects

  8. 2

    This comment was deleted 4 years ago.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 16 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments