I’m a developer, not a designer.
Don’t worry! You don’t have to be a designer to make your Django app nice and usable.
You don’t need to come up with a design, and you don’t need to learn CSS in-depth.
Here are a few things you can do right now, to fix the visuals of your beloved Django project.
The basics you should know
Before starting, take a really quick look at what a little CSS can do for a site.
Your result will look better than this, but it’s a nice thing to check out. This site looks readable with only a few CSS rules, and contains useful information of what to watch out for when styling a website:
http://bettermotherfuckingwebsite.com/
Have you read through it? Good! Keep the rules in mind, but don’t get nervous - you won’t have to start from scratch.
Instead, you’ll use a beautiful, well-tested CSS framework which will make it easy to get all of those rules right. 80% of the effect for 20% of the effort!
Bootstrap? Yes Bootstrap.
Bootstrap was really popular once. So popular, that people overused it, everybody got used to the look and now it looks like “another Bootstrap site” - rather poor.
Still, it can be a huge step up, from a non-styled HTML template! If you’re not using Bootstrap, read on - there are other modern CSS frameworks you should use instead.
If you’re already using Bootstrap, but are unhappy with the way classical Bootstrap looks, check out Material Design for Bootstrap.
With it, you can give your bootstrap templates a slick, material UI look without having to change up everything. The best of both worlds.
Materialize UI
So you’re not using Bootstrap, and are free to choose? Materialize UI if my tool of choice at the moment.
If you haven’t decided for a CSS framework yet, give it a quick try. It’s super awesome!
For example, here is how tables look like with a minimal amount of markup.
All you have to do, is include it in a link tag, adjust your HTML markup a little and look up the elements you want to use from time to time. Don’t forget to put everything into a grid!
Bulma
Another option to make your site look good, is the fresh and beautiful Bulma CSS framework.
I haven’t used it much yet, but there are a lot of people who are very excited about it. The examples look very neat, and I will be sure to use it in one of my future projects once I’ll get mored of the Materialize CSS look.
You don’t have to be an artist to copy and adjust
Don’t be afraid to get your ideas from somewhere else!
Check out HTML5 UP for example. All designs there are free to use, and you can view the source code for each.
Feel free to replicate elements, or use whole layouts as a starting point for your project if you like it!
However, I’d strongly suggest to use a simple CSS framework instead, as it’s much easier to get started and harder to get stuck trying to understand the inherited HTML/CSS setup.
In Conclusion
That’s it! You can get a lot of value out of a simple CSS framework. Use either Materialize CSS or Bulma for your Django project to make it look nice without much hassle.
You don’t have to be a designer, nor do you have to spend a lot of time on it. You can integrate on of those frameworks, get a quick win and move on to go back to improving your app where it matters, without being ashamed of the way it looks.
If you’re fond of Bootstrap, or are already using it, take a look at “Material Design for Bootstrap” to make it look fresh and new.
I hope you can make use of this small overview to fix your Django project’s design and make progress!
Looking for a future next-step?
Let’s think about the future: Your site has a smooth, clean look. What now?
Once you are happy with the design, you can think about making the user experience better in other ways. No you still won’t need to make it complicated. There’s a few easy things you can do to get some more quick wins!
Does the interaction with some parts of your Django project feels like it’s suffering from lots of page reloads? Then you can consider to sprinkle in some interactivity into places where it matters.
No, you don’t have to split your frontend and backend. Nor do you have to start using React. Check out this article for an easy way to add Vue into your Django templates - without having to touch Webpack or build dozens of REST API endpoints.