Back end developers can make good looking web apps too – FullyBearded

I'm not a designer and generally not a creative person, at least regarding UI but I still want to make my apps look good. If you are like me, you probably spend way too much time on the business logic of your shiny new project and not enough on the looks. Sadly, you know that looks matter the most, especially to attract your first users. So, what can we do to make it better?

In this article, I'll share my thoughts and resources about how I go about making good-looking apps.

Quick tips to get you started

Using pre-made CSS frameworks is not a guarantee that your project will look good, but being consistent and keeping it simple should help a lot.

Consistency is about picking something and sticking to it. Pick one or two fonts and stick to them. If you use a certain gray for a certain page, use the same for all the others pages (unless you have a good reason not to). The same goes for your borders, margins, and paddings, standardize as much as possible.

Also do not forget that keeping it simple is the easiest way not to mess things up. We've all see web apps with too many colors (use whites, grays, and some accent colors), too many fonts (use only 2!), or too many sizes (standardize!).

If you add too many lines or boxes, instead of having a page neatly organized, you'll have something feeling messy and cumbersome. Adding images and illustrations is an easy way to breathe life into your pages, but add too much and it will be distracting and your message will get lost. The same goes for the animations and crazy hover effects.

Regarding layouts, go for a one-column layout with navigation on top or a two columns layout with the main column for the content and a narrow column for the navigation. You can also mix the two: navigation on top and 2 columns, the main one for the content and the narrow one for extra stuff.

Also do not stack everything on top of everything. Add some white space, it will make things easier to read and understand. Your interface should be easy to look at but also easy to use!!

CSS Frameworks

Bootstrap

By now I do not think anyone needs an explanation about what is bootstrap. The most important thing to consider is that it is very easy to get started with it. Out of the box, you get CSS grid, basic typography, styled forms, a handful of components, and more. All this comes with great documentation.

Will low effort, this is a nice way to get started, but if you are worried that your project will look like so many others, look around and you'll find templates. You can get free templates but also paid ones and as such, less mainstream. Either way, with a bit more work to install the template you'll get something good-looking without writing a single line of CSS.

If you prefer not to apply a theme and prefer to customize everything yourself, an easy way to do so, it to compile bootstrap from sources with a build tool and customize the variables used to generate the UI. If you go this way, you can change almost everything, like the colors, or the font sizes or margins/paddings.

While writing this article, I stumbled upon this page. It's full of resources both simple and advanced to make your projects come to life so go and take a look.

If you don't like bootstrap, you can also look into semantic ui or bulma and if you look around, you'll find even more CSS frameworks.

Tailwind

Once you feel that you outgrew bootstrap and you want more control, my suggestion is for you to look into tailwind. The project tagline is "Rapidly build modern websites without ever leaving your HTML" and I can assure you it is true. Tailwind is a functional CSS framework: all it does is providing building blocks (CSS classes) that you can put together to build up the UI you are looking for and despite its simplicity, you can build amazingly good-looking stuff with it.

Despite being highly functional it is also important to note that it's possible to build tailwind from source to customize it the way you want. Using tailwind is the way I currently use to build UIs.

Resources/Ideas

To improve your projects, you can add:

Final notes

If you want more resources, I'll let you take a look at this one: design resources for developers. It should keep you occupied for a while. On the contrary, if all of this is not for you and you'd rather stick to the business logic and leave this to someone else, why not find someone to collaborate with?

from Hacker News https://ift.tt/32NMaYv