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, so you'll still need to know CSS but all it does is providing building blocks (CSS classes) that you can put together to build up the UI you are looking for. Despite its simplicity, with Tailwind, you can build amazingly good-looking stuff with it. This website is actually based on 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, and by the way, its documentation is also great!
Resources/Ideas
To improve your projects, you can add:
- illustrations from undraw
- icons from hero icons or font awesome. You can always download svg and use them directly too.
- background patterns from hero patterns or css gradient background from css gradient
- fonts from google fonts
- images from unsplash
- hover effects (not too much!!)
- carousels
- better file upload with dropzonejs
- better date pickers
Final notes
If you want more resources, I'll let you take a look at this one: design resources for developers. If instead of resources you'd really like to learn more about this, then take a look at refactoringUI or the book Design for Hackers: Reverse Engineering Beauty. 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?
Related posts
If you liked this post and want to read more, take a loot at these: