How do you make apps look polished with no design background?

Check this

https://twitter.com/i/moments/880688233641848832

and this

https://www.goodui.org/

Tell me if you find those useful!

I don’t know how ethical this is, but I pretty much find an open source template or something on sketchappresources and copy it, designers have a great sense for colors, typography, and the like, every time I try to do something on my own, it never quite gets there

Maybe the design fundamentals course from Laura Elizabeth can help you. I recently bought it but didn't found time to start it yet.

https://designacademy.io/design-fundamentals/

I'm going to be really honest and I apologize in advance if you don't approve that:

What I used to do (and you might say it's unethical) is find a well polished website, open my chrome inspector tool and copy...

That's it. I'd suggest you get design specs for all your visual components from multiple websites. This way, you'll end up with a nice looking hybrid that does not look like an exact clone.

Don't waste too much time and resources when you don't have any clue about what is good design. Be pragmatic, copy things that have already been proven and tested : land-book.com

I find the blog (and newsletter) of Erik D. Kennedy very useful to learn some design/UI basics: https://learnui.design/blog/

Especially interesting blog posts:

• The Reframe Technique (https://learnui.design/blog/the-reframe--technique.html)

• Color in UI design (https://learnui.design/blog/color-in-ui-design-a-practical-framework.html)

I'm a Product Designer – my advice is to use the latest version of Bootstrap, and then don't write any CSS – just tweak variables. Tweak brand colours and typography. Copy them from somewhere you like. You're not going to build something best-in-class, but it'll be clean, solid and subtly distinctive.

For my food site, I hired the main developer for bourbon.io he was not cheap but he produced exactly what I wanted.

If you want to minimize cost, I would recommend finding a template in a framework you have a familiarity with. If you are not great at searching, you can actually hire someone on fiverr to do this for you. I did this once and asked for 2-3 options and specified the constraints I needed.

If you have a framework that has enough components your comfortable using, I would recommend a few medium articles

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

https://medium.com/@jsaito/how-to-design-words-63d6965051e9

I find a getting a 2nd pair of eyes to look at the product and extensive testing is a good way to refactor the design to make an aesthetically pleasing website. In terms of polish, always remember you should be shipping things you're slightly embarrassed to see in the wild. As long as you're solving a pain-point for your customers and they aren't complaining, it's okay to have a less than perfect website or app until you have $$$ to hire a professional designer. Focus on shipping something that solves a problem and is painless to use, polishing can come later.

What you need is a UI Framework. I'm not sure what you're trying to build, but you'll be far ahead of the game if you take a design system that someone else built and create your app interfaces from that.

Ideally, you want one purpose-built visual UI framework that has plenty of examples for how the individual components work together to create coherent views.

http://photonkit.com/

https://xel-toolkit.org/

http://reactdesktop.js.org/

https://github.com/atom/atom-ui

https://webix.com/demos/

As Kyle suggested, if you're comfortable, share your projects and you can get advice on what makes good design.

If you want to instead invest time in upskilling yourself, I'd recommend playing around with existing websites. Find ones you like and think about what makes them so good. You'd surprised at how many websites actually share common styles and layouts. Just look at all of the Stripe looking websites out there (I'm definitely guilty of that with mine :P).

There are also a few easy wins that will help you stand out nowadays:

• colours: flat is best and you can find nice palettes at flatuicolors.com.

• layout: make use of spaces and rounded edges. NomadList does this nicely.

• fonts: sans serif is still in now, particularly bolder fonts. You won't go wrong with something default like Helvetica, but stand out with Roboto or Open Sans (Google Fonts have you covered).

• content: believe it or not but the text on your page can be as important as how the site looks. Large blocks of incoherent text will ruin any good design. Go for simple and short sentences with plenty of breaks/padding in sections.

• lastly, images! Good design makes use of crisp imagery, although you don't have to. Don't forget a shadow effect though ;)

Good luck and do share if you want specific feedback!

I started off with no design background and the first few apps I made were really ugly, even with Bootstrap.

If you're technically skilled, my advice would be to build more. If your skills are mainly in a back end language such as PHP or Python, try learning more front end technologies. This will enable you to get the UX closer and closer to the vision of your ideal product. Having more things to build will push you to apply new design principles and make app design easier on subsequent projects.

I'm not sure if this is repeatable or if it's just my nerdiness, but the thing that worked for me was cultivating a genuine interest in product design and UX. This is what got me into learning more front-end stuff and putting more focus on design and UX in my apps.

Post what you're working with and let us help you.

I have been wondering about that myself. Good question!

In my opinion, the best thing to do for non-designers is to follow a few simple rules:

• use fewer fonts and fewer font size variations

• use fewer colors

• use more whitespace (a lot more)

• use soft shadows instead of hard shadows

https://designacademy.io

Learned about this free email course on design for developers from Startup for the Rest of Us podcast, episode 371.

A) framework

B) keep the design simple. The more stuff there is, the more can go wrong

"Polish" is the result of a lot of subtle things done right. Here are some small wins that can help get you started:

1. When users can interact with something, give it a subtle hover effect with a transition attached. Here's a simple example of a button that does this: https://codepen.io/zvphy/pen/VXeyqV

2. Use the system font stack if you want apps to feel native (https://css-tricks.com/snippets/css/system-font-stack/). If you're building a website, it might be worth investing in a Typekit subscription to use Proxima Nova.

3. If your app uses a light background and your fonts look clunky, incorporate antialiasing. This smooths the text. https://devhints.io/css-antialias

4. Keep spacing and sizing consistent among all elements of your app. I think it's easiest to use rem, which is the font-size property of the HTML element. I explained it in Tip #5 here: https://zeph.co/cleaner-css

5. For Electron, incorporate "Showing window gracefully" from their docs: https://github.com/electron/electron/blob/master/docs/api/browser-window.md#showing-window-gracefully

6. Look at Dribbble app redesigns for inspiration. Notice how simple a lot of the designs are: https://dribbble.com/search?q=app+redesign

7. Give websites a max-width, like how Indie Hackers and Nomad List don't stretch from edge-to-edge. You can do this with something like: body { max-width: 1200px; margin: auto; }

And you are always welcome to post your designs and ask for feedback. :)

Thanks for the input guys.

It's post like this, that remind me why I love indiehackers.