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.
For a client? Paper > Figma > Code.
Side hussle? Code. Keyboard goes brrrrr.
Design Phase:
Implementation:
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.
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 :)
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.
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.
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
3a :)
This comment was deleted 4 years ago.