April 23, 2019

Most beautifully designed web apps?

I understand that a good design is a useful one. But the reason I ask for "beautiful" design is that I have a web app that I believe has a pretty good functional design, but it is relatively ugly. No customer is enchanted by it, making it harder to make them use it long enough to realize that the design is functional.

I am no designer. I was only capable of making it functional because I use the app myself and I listen to customers that validate that my design is more practical than competitors.

I am a solo founder, and I have no money to hire a good designer to make it beautiful and keep it functional. So I want some references to serve as inspiration so I can create a beautiful design myself. Thanks! :)

  1. 7

    I'd suggest doing what I did: use a complete UI framework and stick to its defaults, possibly pick a different theme. I used Semantic UI, but one could also go with Bootstrap (if what's included in there covers your needs). "Complete" is important, though: you don't want a "CSS grid", you want a complete set of consistently styled UI widgets. Semantic gets this right.

    As a side note, I'd ignore much of the advice found on the net. Online forums like IH or HN rarely represent your real users. Real users won't care if your site is "yet another bootstrap site". They won't care that you used a default theme. They won't care if you used the latest-and-greatest CSS technique that is in vogue, or the latest-and-greatest Super Clean Design With No Buttons Whatsoever. They will care about a fast, easy to use, aesthetically pleasing app that does what they need it to do.

    1. 2

      THIS! That's been my experience too. I had a few negative comments about my landing page here on IH but I still have people signing up for the early access and I'm getting hit with tons of nice messages about my app. Users don't care about what your tech stack is (nor would they know what JavaScript or HTML is). From my experience, they want something that looks decent and that saves them time/money. Many people don't even care about the fancy bells and whistles.

      IH and HN definitely doesn't represent most users

  2. 5

    Hey man! As rlfrahm already said, https://refactoringui.com/ is great!

    And they have a book that is very useful for me as a designer.

    https://refactoringui.com/book/

    It is focused on creating UI for web apps, and it is extremely practical and actionable. I totally recommend it ;D

    1. 2

      As a product designer, I heavily suggest every solo dev founder to look at this website

    2. 2

      Great resource, thanks!

  3. 2

    I always look to https://dribbble.com/ for inspiration on UI design. Not all screenshots there have good "UX design" but they're pretty up to date with trends in the design world

  4. 2

    Hi Rodrigo, I second the refactoringUI recommendation. Also check out this post with a longer list of resources: https://www.indiehackers.com/forum/resources-to-help-you-improve-your-ui-design-134dbd3367

    If you wan't to show me your app I can also give you some pointers.

    1. 1

      Thanks Felix!

      It would be great to have a pro opinion on this.

      I am in the middle of a complete redesign now, so just let me finish it (a few weeks) then I will indeed ask your points.

      Anyway, if you want to look at it now: www.oneononemeeting.com

      PS: Sorry for the late response, didn't realize my post got more comments one day after I posted it

  5. 2

    As an engineer type person, not a designer... This is also my long time struggle.

    Some of my inspirations right now that I use are:

    Stripe.com

    https://preview.tabler.io/

    https://refactoringui.com/

    These meet my "feel good" test and I usually reference them when theming my app.

  6. 2

    I think Dribbble is a great place for inspiration. https://dribbble.com

    1. 1

      Thanks for collectui, it's a real gem!

  7. 1

    Using free UI design system (some provided by Invision are great > https://www.invisionapp.com/inside-design/design-resources/) could help you out a lot:

    • it will help you keep consistency across what you are currently building

    • use the artboard they provide as a base

    Also

    You could use the material UI from Google they also provide with Ui kit which can be easily set up and customized to build a decent experience. (I am using this for our back-office, this helps my devs co-founders to integrate faster using React)

    The only throwback is that you need to use SketchApp (which does not comes for free, but it is not that expensive either)

    1. 1

      I've never tried actually, but I'm pretty sure Figma can import sketch files. And figma is free =D

      1. 2

        You can import sketch file, so it would probably work with invision UI kit, but the whole Google Material UI kit is tied to a Sketch plugin ;)