UI resources for developers who feel - 'I am bad at designing'

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

There has been a situation in every developer’s life where he/she feels like I am not good at designing when a task of developing a nice-looking (if not the best-looking) user interface for a website.

image.png

Whether you are a Backend dev or a Full-Stack dev (lets omit a Front-end dev for their sake , lol), things will be fine until you create backend services/api’s for an application. But the real difficulty comes when there is no separate team to handle UI part of it, or lets say it might be your personal side project. You might have to get your hands dirty and let that creative you come out to represent the data in a proper way (or appealing way) in UI. After some time (may be more time), playing around with some html and CSS, you might end up giving up on yourself and self-declaring that I am not at all good at UI designing.

Well, if you have faced this kind of situation ever before, its perfectly alright and this article might help you in finding yourself a way into boost our confidence in designing UI.

Let me introduce some of my curated list of free and open-source resources that will definitely help you.

CSS Frameworks

1. Bootstrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit.

image.png

2. Tailwind CSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any hassle.

image.png

3. Creative Tim’s BLK

An user-friendly, open source and beautiful design system based on Bootstrap 4 and Angular.

image.png

4. Materialize CSS

Materialize is a modern responsive CSS framework based on Material Design by Google.

image.png

5. Foundation

The most advanced responsive front-end framework in the world.

image.png

6. Free Frontend

Free hand-picked HTML, CSS and JavaScript code examples, tutorials and articles.

image.png


Above list can be added with more content in future as I go on finding any in my journey. And you can add your own in the comments below.

Geeda Prabhakar Reddy's photo

Good work bro. Very informative for all folks.

mourya chakravarthy's photo

Good work sai, really good info for the one's who were facing tuff challenges in the styling part

Devalla Sai Charan's photo

Yeah, glad you liked it!

Victor Adeshile's photo

I love the Creative Tim BLK design components. Really Awesome! Thanks for the write-up.