Developers August 31, 2020

I suck at frontend

iqbalcrat

Hello,
I'm a python developer with good knowledge on ML and DL...I create my webapps using flask but the problem is I'm very bad at frontend stuff....the apps that I make look very messy and amateur though the backend functionality is pretty amazing....so do you think I should really concentrate on design(I think I should) ...any ideas how to improve it would be really appreciated. Thank you.

  1. 7

    Partner w/ a front-end dev who has some design/marketing exp or consult to someone.

  2. 6

    Keep calm and use https://www.bytehub.dev
    We’ll keep replenishing New components ever week

    1. 2

      This looks promising! I use Vue, so hopefully you add support for that!

    2. 1

      This is only usable if you use React, which I would recommend against.

      1. 5

        Why do you recommend against React?

        What do you recommend instead?

        1. 2

          Because it's a big bloated framework which most people do not need. Use normal web components with vaadin-router or some other lightweight library if you want to make a SPA.

          The industry does the same crappy mistake all the time. People use a framework, let us say it's a couple of years ago and say angular because it's hip currently. Then they write all new applications there and migrate old stuff. Then something new comes out and suddently that new hip framework is legacy and you're stuck.

          Just look at all the old apps that were written in AngularJS. Now they're all stuck since migrating can be very expensive. If you instead would just use open web standards with small libraries it's a lot easier to migrate to new stuff in the future and the old stuff will continue to be supported anyway so the need isn't even as big.

          TLDR:
          Using react? Why?
          React router -> vaadin-router
          React components -> web components / lit-html (if you want react like rendering)
          redux state -> Just use localStorage or the good localForage library

          All this is only necessary if you make a Single Page Application, otherwise I would recommend simply using a server side rendered framework or library with any language you want.

      2. 3

        I would recommend for React. Just watch a Udemy course and you'll know enough to create simple apps. The rest comes with time.

      3. 3

        We’re coming up with pure tailwind components in next 10 days.

  3. 6

    Refactoringui.com

    Or hit me up on @twitter and I can have a look if you want to.

    @mike_andreuzza

    If not. I sell templates at wickedtemplates.com but you can also download the free ones and it should be good to go.

  4. 3

    I can relate to this , design isn't really my strong suit either also pixel pushing is rather frustrating for me too :D. Persoanally I try to use UI kits to save time, my current favorite is Tailwind UI. Also, have to agree with some of the comments mentioning Refactoring UI for me this is a handbook of design tips that can make you application look great. Like someone mentioned too if FE isn't really your thing consider teaming up with someone who really enjoys it, I am sure it will pay off.

    1. 1

      I came here to recommend Tailwind UI as well. I just picked it up for my current project. A little pricey, but I honestly feel like I’ll never need to come up with my own UI again.

  5. 3

    Refactoring UI is the shizz. I recommend you check it out

  6. 3

    Find a design you love that you can reuse (paid or free) and do the least work/mocking with it possible, just text and images
    If it needs to be a full system use a made system...

  7. 2

    I'm so glad you shared this! I have the exact same problem, and after reading through the responses you got, I have gotten un-stuck and found some good resources. Btw I found this whole community because of you, I googled literally "I suck at front end" lol and here I am! 😆

  8. 2

    Learn it , it's not hard. "Software from users' point of view is your Frontend not backend" you can't / shouldn't outsource it for long.

  9. 1

    Check out https://frontendor.com/preview, it's a library of reusable HTML blocks.
    Soon, we will expand it to include blocks for web apps, blogs, community sites and so much more.

  10. 1

    Team up with a designer or front-end developer if you can afford it. Otherwise use something like bootstrap and learn some design principles, CSS, html, JavaScript. That will make the results a little better. But don't expect to magically become a great designer or font-end developer in a few months.

  11. 1

    What about an api or data endpoint as a Service? And then hooking into a marketplace of some kind. You could create a headless machine learning API and then find a marketplace to commercialized it on.

  12. 1

    hey! I usually feel the same however there is an easy solution for that... buy a template, I think for a new product what matters the most is what it does and if it does it well... you will have time to build better experiences and more refined UIs later on.
    If you can make your project work and generate some revenue you will eventually be able to pay for a custom design that fits better.

  13. 1

    This is a really useful resource too - https://nodesign.dev/

  14. 1

    I had the same problem as you being a backend developer. I look at other websites for inspiration, use bootstrap templates that are freely available and try to make a decent looking website. Lately I have been using Tailwind. I have gotten better as compared to what I was a few months earlier. I have a friend who works on front end. I ask him a lot of things about CSS that I don't get.

    So I would suggest keep trying to build web apps, take inspiration from other websites, download already available components and tweak it your way. Learn the basics of CSS, I find Traversy Media really helpful for references.

  15. 1

    One thing I'd add to what others have said is that if you have the coding skills (HTML, CSS, JS) just not the design skills, then I'd go with using design templates. This gives you lots of flexibility since you can change things around however you want, still you don't need to worry about creating a whole new design from scratch which can be a daunting task for developers.

    My favorite site for design templates is https://ui8.net, I like this site because they have some really high quality stuff. It can be a bit pricey but what I did was I got the all access pass for 3 months and I just downloaded tons of UI Kits during that time. Now I have lots of design kits to choose from for my next web project.

  16. 1

    Buy a temlplate on Themeforest
    I do this all the time, pure HTML template preferably then add some "meat" on it
    You can also get a free template as well, one of my favorite is https://architectui.com/#/

  17. 1

    There are tons of good css frameworks like bulma, bootstrap, tailwind that will give you nice appearance out of the box. I picked bootstrap long time ago and never looked back. If you get used to one css framework you will quickly notice that you can customize it and make it more unique than the default "out of the box" style. Learn SASS or other pre-processor - it will make your life easier. By using a css framework you will get used to good practices and if needed you could build your own, trust me it's not that hard. Check dribbble or behance for design inspiration. Build several concept apps and you will see that you get better and better.

  18. 1

    Depends on your motivation for why you want to brush up on FE.. If it is simply to deliver your product I would say at most just worry about implementing the front-end, have an actual product designer put together the mockups (its a LOT to worry about design + FE & BE). If your using flask, take a look at something like Stimulus JS... its a lightweight library that helps with adding sprinkles of dynamic javascript into SSR app so you don't have to get all crazy with the frameworks like React, Vue etc. I would not recommend splitting your UI & Server into separate codebases at this point in time

  19. 1

    I disliked Front end frameworks until I discovered Vue. It is simple, easy to learn and you can build complex apps in no time. Give it a shot https://vuejs.org/

    1. 1

      Exactly same happened here :)
      I love how data flows within my backend and Vue, it is simple amazing

  20. 1

    Use a CSS Framework! TailwindCSS is hard at this time for you, I think. Use Bootstrap or others.
    Read some UI/UX short posts to know what is more important in design.
    It is good to start with a template.
    Or you can find a frontend developer to cooperate (still you should know about frontend). Here is IndieHacker and you can find the best tech friends.

    1. 0

      every single landing page today is graphics heavy
      all frameworks provide just basic elements like forms, buttons, menus, etc
      how can you do something pretty-looking using just a framework?

      1. 2

        I don't know why we need heavy graphical web pages?
        We should build what we need.
        If the page doesn't need a slider, don't add to it. if the page doesn't need a fancy mega menu, use a simple menu. use everything you need. be simple like most google products' web pages.
        IndieHacker is almost simple and still useful. But ProductHunt ain't.
        Medium is simpler than a WordPress blog.
        Keep Calm, Learn UX (I'm not a UX expert), and Build your website or application simpler.
        Your page is pretty when it is usable enough! Frameworks can make it enough pretty.

  21. 1

    There is a lot of good suggestions already. All I can add is:

    • start with a design framework like Bootstrap (getbootstrap.com). It will give you some guardrails while you get started.
    • draw out your design on a whiteboard or paper first. Focus on composing Bootstrap components into a design that looks good. Then try to build it in code when you get to something you like.
    • keep in mind that there are very few people that are good designers and developers. Unless you plan on building only solo projects, you only need to know enough about design to understand what makes a good designer and work with them (IMHO).
    1. 1

      any thoughts on Spectre (https://picturepan2.github.io/spectre/) ?
      trying to create simple prototype for my project using spectre but UI still looks terrible :)

      1. 1

        Exactly! There are plenty to choose from now.

        Send me a screenshot. Do you feel like you are having technical issues or trouble laying out the elements?

        1. 1

          I think my problem is that framework without custom graphics looks too boring and simple, doesn't attract peoples attention
          (even when I put all elements together as I want)
          hopefully I could deploy it somewhere soon, so I could share it with you

          1. 1

            Starting out, I would not focus on the design getting people's attention. Focus on making the design familiar. Let the content speak for itself.

  22. 1

    I think it depends a lot on what your product is, but having a simple-looking interface can even be a benefit these days. At the very least, having a simple looking frontend that doesn't look professional can set you apart.

  23. 1
    • Buy or find free html templates, since you are using Flask, it's easy to implement it into Jinja.
    • Checkout CSS frameworks, such as Tailwind, Bulma, Bootstrap. Learning one of them will solve your problem. And it will take no longer than 2 days.
  24. 1

    Thanks a lot guys.... I'll definitely follow these suggestions :-)

  25. 1

    I am having same problem and currently trying to somewhat workaround it by learning Flutter+Dart. My interest now is on mobile app frontend. Though flutter is for cross platform mobile app development, there is also web support (beta right now). Planning to take inspirations from dribbble and develop in Flutter.

  26. 1

    I'm not sure what you are using for your frontend, but making it look relatively okay is not too hard. Just find a site that looks similar to what you are envisioning, and try to copy their style. I don't recommend learning sketch or something and doing it from the scratch. There is a reason why designers exist, and doing everything from the scratch is harder than you think. Just same as you won't recommend a frontend engineer to build a ML model from the scratch.

  27. 1

    I suggest buying nicely designed themes. Don't spend so much time on doing something ur not strong at. Buying an HTML theme or bootstrap theme will make it look nice quickly and you can focus on actually building the business. Once ur Business is booming then hire someone to help with ur designs.

  28. 1

    I'm a front-end focused dev (I think I have the reverse problem). I'd say don't reinvent the wheel. Don't spend a bunch of time learning figma or design tools, even. Use a design system like https://ant.design/. Copy other good UX when you can.

  29. 1

    First, learn to create prototypes in Figma, XD, or Sketch. Get inspiration on https://dribbble.com/ to improve your designs.

    Second, learn how to implement these designs with pixel-perfect accuracy.

    Third, learn something like React or Vue, so you can improve the experience of your frontend.

    Optional: https://refactoringui.com/book/#get-refactoring-ui this is a really good book about UI targeted to developers.

  30. 1

    You should put some effort into design. Perhaps hire someone for creating mockups and implement it yourself. Or if you decide to try it yourself, share a link and ask for feedback. I’m sure you can get actionable design advice here or other places like reddit.

  31. 1

    You finish as much front end as you can and then you hire people to make it not suck - that's what Uclusion did. If you can't hire people, though its not that expensive, then you will have to partner with someone. Not sucking yourself is a long, long term strategy as we have to give front end its due - even after you learn to get things 95% of the way there its still going to suck to most over sensitive human eyes.

    Plus CSS is really awful! Its cripplingly ridiculous and unlike Python not so easy to Google or reason your way out of. We are using Material UI over React and lots of people lately are raving about https://tailwindui.com but I'm sure you've got plenty to do on the rest of your app plus marketing without taking on what amounts to a whole new career.

Recommended Posts