DEV Community

New Idea Blocked

fischgeek on September 14, 2020

What do you do when you have an idea in mind but no clue how to dev the front end? I can do the server and backend but zero knowledge on how to be...
Collapse
 
vtrpldn profile image
Vitor Paladini • Edited

Is there something similar to your idea online? Whenever I feel lost about UI/UX I start searching for inspiration around the internet.

If that doesn't help it means that my idea is not as mature as I assume, so I go back to planning, draw some mindmaps, and try to reframe some of my assumptions.

One thing that also helps is to doodle a basic wireframe of it with pen and paper, it doesn't take much effort and can help you visualize some problems with your initial view of the project. 🙂

Collapse
 
fischgeek profile image
fischgeek

Definitely understand that. I have wire framed it a few times over. I have a test implementation of the raw functionality working but no clue how to make it work the way I want. Another problem is I'm afraid I might need to know some trig. This is laughable if you knew me. lol.

Collapse
 
fischgeek profile image
fischgeek

There are some applications I've seen that have little bits of beautiful UI transitions and animations that I'd like to use. I have a browser plugin that shows me what they are using but it would be like trying to understand someone else's mind on how the implemented it. It's one thing to learn the technology it's a whole different story using it.

Collapse
 
vtrpldn profile image
Vitor Paladini

It's one thing to learn the technology it's a whole different story using it.

Agreed, I wish I could help you further but the only context that I have about it is that trigonometry might be a problem, haha 😄

Are you dealing with canvas or anything 3D like? There might be an open repo or a codesandbox example that can help you with it

Thread Thread
 
fischgeek profile image
fischgeek • Edited

Not necessarily 3D, but definitely some fluid UI animation/transitions. Basically, I need to dynamically plot points in variably sized circles that can change with the scroll of the mouse.

Thread Thread
 
vtrpldn profile image
Vitor Paladini

I see, something like PixiJS might shed some light on it.

Collapse
 
pentacular profile image
pentacular
  1. Look for something that looks vaguely like what you want.
  2. Make a terrible version of it.
  3. Learn from your mistakes.
  4. Make a less terrible version of it.
  5. Stop if it is good enough, else go to 3.
Collapse
 
fischgeek profile image
fischgeek

I think I may have mislead everyone. There’s not only the matter of how but the design aspect is what I’m most concerned with. I’m not a designer nor a UX monger. I believe if I sat down and grinded on it I could achieve an elementary school drawing equivalent.

Collapse
 
pentacular profile image
pentacular

Well, if you're not competent at something and do not want to learn, the traditional approach is to employ someone competent to do it for you. :)

Thread Thread
 
fischgeek profile image
fischgeek

Can’t learn creativity. I’ll out source I suppose.

Thread Thread
 
pentacular profile image
pentacular

Hmm, the evidence doesn't support that conclusion as far as I am aware.

There aren't many studies that I am aware of for creativity, but George Land's paper strongly indicates that rather than learning creativity, we instead learn non-creativity.

Which means that we can work toward unlearning non-creativity.

Here's an article that might give more background.

psychologytoday.com/us/blog/creati...

Thread Thread
 
fischgeek profile image
fischgeek

The article seems to be aimed at parents with kids at home and their creative play. While I don't disagree with this (being a parent myself) there is a clear distinction between someone who practices and works really hard at learning a new skill and then there are those that have a natural, God-given talent for creativity.

My brother-in-law is an amazing painter. He didn't learn how, he doesn't follow a template or a Bob Ross video, he just does. It's in his head and out on canvas (or in some cases old windows).

I have never been able to draw or do anything creative without a very very clear picture and step by step instructions on how to get there. I just don't have a creative bone in my body.

I will read through the whole article today though. It does seem interesting. Are you a creative person?

Collapse
 
amilcarcalles profile image
Amilcar Calles

"What do you do when you have an idea in mind but no clue how to dev the front end?"

What I do is to draw on paper the "path of screens" of the experience that as a user I want to have (not as developer), that always help when the project is complex or very specific, it helps you to "feel" the product before writing a single line of code. Remember that almost every existing UI can be drawn, and is easier to adjust the UX on plain paper than after writing lots and lots of code. If you want after that draft you can use UX/UI software tools and finally code your app.

When I have decided how I want to show my product in the frontend, then I decide the framework and after that I decide the specific language or transpiler (css, scss, angular, react, plain js, etc).

As a hardcore user of C#, using angular w/ typescript has been the best choice for me so far (this choices are different for everyone) because of the semantics (similar) and the strictly typed, use of modules, reuse code, etc, etc.

Wish you the best in this project.

Collapse
 
fischgeek profile image
fischgeek

Very good advice, sir. Thank you. I will deliberate!

Collapse
 
jrbrtsn profile image
John Robertson • Edited

Lean how to do it yourself, then implement your idea. I am a hardcore C and C++ guy, but I write full-blown complex web apps too. My tools of choice for this purpose are C++, Postgres, and Wt. If you use these tools, your app will be blazing fast too!

Collapse
 
fischgeek profile image
fischgeek

Thanks. Appreciate your input. Though postgres is cool, it's not the problematic area. Wt is interesting, though I'm a C#/F# dev and like do web apps with those and sometimes just raw html/jquery/css/(pick-a-framework).