I'm not a front-end developer and generally not a creative person. Currently learning Django framework and have a couple of simple web applications under my belt.
I'd like to develop expertise on the backend side of things, but it would really help to not create ugliest looking websites in the world. Just want to add enough oomph to have the customers use my webapps, without having to learn a full-fledged frontend framework (at least not yet).
I'm looking for some timeless, easy-to-apply and most prevalent techniques that will give me give me maximum benefit for time spent learning to use them. Basically how hanging fruits when it comes to frontend.
Forgive me for my limited experience and perhaps incorrect jargon, but I can think of these **few based on my observations**.
* Hover effects( with a decent pop-out) - commonly used on navbar links, images, cards etc.
* Section separators (mostly on landing pages)
* Using cartoon illustrations on your landing page(hero section)
* Creative backgrounds using patterns/gradients
* A good icon set(came to know about heroicons and noun projects recently. Loved it!)
**CSS/JS libraries with easy to use special effects/transitions/use-case
**
* animate.css (with jquery fade-in/fade-outs, slideup/down)
* wow.js (appear on scroll)
* dropzone.js
* jquery datepickers
* carousels, counters, modals
I hope you get the gist. What are similar omnipresent techniques/libraries/effects/transitions that will help me spruce up my websites? Bonus if you point me to some collection of such resources/references.
You could do worse than look into some of the front-end design libraries such as bootstrap or bulma. While they won’t help you with creativity, they should be a huge boost to your productivity – in the simplest case, just add some classes to your elements and you’re good to go.
If you are the one designing the user interface, then try wireframing your designs 1st using a tool like [excalidraw](https://excalidraw.com/) or [wireflow](https://wireflow.co/). Wireframing, or “low fidelity designs” are criminally underrated. They’re super easy to create and modify and will help you make the hard decisions on how to design your UI. Things like hover effects and transitions are just icing on the cake. I re-wrote a [website of mine](https://blogreader.com.au/reading/) last year and created some [wireframes](https://pbs.twimg.com/media/Elo2fOmU4AI_jwo?format=jpg&name=large) first before building the UI, and the process was so much easier and faster. Here’s another [example](https://i.imgur.com/ifrJuEK.png) for something I’m working on: a webpage for paralegals to manage legal cases.
In addition, mapping out a user journey before creating a set of wireframes is really helpful as well ([example](https://i.imgur.com/aHhJvqd.png)). The benefit is that once you’ve done that you have a clear idea of **what the user actually wants to do**, and once you know what they want to do and what the care about, designing the UI is much easier. Then decisions like “how big should this button be?” become obvious – if the user cares about it, make it big!
As for the detailed stuff, just use a library like bootstrap or semantic ui, or copy styles you like from other websites. No need to reinvent the wheel if frontend isn’t your main focus.
In general – keep it simple! Simple is good if you have the confidence that your designs do what the user wants. Imagine a blank page with a big red button that says “solve all my problems”: that’s a pretty well designed frontend, as long as it does what it says, right?
I wrote a [blog post](https://mattsegal.dev/django-survey-project.html) on my process for creating this kind of thing
“Good artists copy. Great artists steal.”
There is an immense amount of pre-made resources out there that are sure to fit your use cases. Repositories such as [this one](https://github.com/bradtraversy/design-resources-for-developers) are great for finding graphics and UI elements to spice up your frontend.
What worked well for me was picking a UI framework ([tailwindCSS](https://tailwindcss.com/)) and then finding assets others have already made to go with it. Tailwind, for example, has [HeroIcons](https://heroicons.com/) and [HeroPatterns](https://www.heropatterns.com/). Combine that with some sort of illustrations like [unDraw](https://undraw.co/) and you got pretty much everything you need.
Bootstrap is my best bang for the effort (very low, great docs). If you use django templates, you can make everything inherit from a base that adds it with script tags, then the js and css are on every page.
You could search for some free templates and use them. Lots of options out there and if you want to pay ~$50 you have way more options too.
I usually use VueJS + bootstrap. It basically took me a couple of weeks to get confortable with it, and using bootstrap properly avoid all the css pain.
Consistency
Pick one or two fonts and handful of font sizes and stick to them.
Use a tool like this [https://color.adobe.com/create/color-wheel](https://color.adobe.com/create/color-wheel) to come up with a color scheme put them in css variables and use only those colors. If you really must deviate then put the colors in HSL and do not change the H (hue).
As much as possible standardize your borders, margins and padding. (oh and do yourself a favor and turn on box-sizing: border-box everywhere)
Things should line up vertically and horizontally, imagine you get a ruler and extend the edges of stuff to the edge of the screen, you should never have two lines that are a handful of pixels off, they should either be really different or exactly the same.
Also whitespace is good, have some more of that.
I’m also a backend developer, and I am really happy with Angular and a simple http serving backend. It was definitely a learning curve, and there is more magic than I like, but it also let’s you do a lot quickly, and with a lot of premade UI elements (the Material Design components).
I’ll admit, I don’t think my web tool looks particularly great, but it does *work* quite well, and I don’t think the lack of beauty hurts that usability too much (I think in the abstract it actually can, but I don’t think it does in my case).
Also, as a person who really likes static typing, Typescript makes web dev seem slightly saner, although the extra compilation step is a bit annoying.
The two most important things for me where wireframing with Figma as you’ve already been told, and Svelte. For me, Svelte was great for bringing down to earth the frontend concepts without any hassle. It looks kinda like html with inlined scripts and styles, so no extra noise with JSX or multi file components. Now, after learning Svelte, I would feel confident to take on any other frontend framework, although i don’t want to because Svelte is enough for my needs
For appearance get a template. There are free through to $100 or so, for a bit more you get an exclusive.
Fiddle with color scheme, background graphics, it will look custom.
For UI/UX, there are lots of books and sites to learn from.
Over time you can probably get better.
The programming side, it’s practice. You have an advantage being able to do backends already.
I had this same question on a recent side project of mine. I ended up with a terrible Bootstrap layout that I just sort of hated every time I put a new page up.
I have recently spent some time converting that project over to Tailwind, and honestly it’s a world of difference. I still don’t consider myself a designer of any sort, but I feel a lot more confident messing with hover effects and transitions, or just copying components written by others and tweaking them.
With that, I would also recommend AlpineJS if you just need some simple interactions, or spend the time to dive into React (though start at the Django template level and don’t try building a full SPA right off the bat).
And ditch jQuery altogether, it’s just a crutch at this point.
Vue.js + Django = easy to get going not too bloated compared to react. This is great if you’re interacting with a db
I usually buy templates, even I don’t consider to be sucking at UI, I know it eats up a lot of my energy and time, and I prefer buying a template I already like.
Actually I’m working on a template write now that’s i’m going to be using on my indie projects. i’m tyring to make it customizable and open source it.
Here is a sneak peek:
It’s using TailWindow, Alpine.js for quick little interactions, and it’s all default Django template.
!\[\]([https://i.imgur.com/gxRcFdj.png\](https://i.imgur.com/gxRcFdj.png](https://i.imgur.com/gxRcFdj.png](https://i.imgur.com/gxRcFdj.png)))
If your working on a big website use vue. Makes front-end easy once you get the hang of it.
Just use css and js libraries like bootstrap and react. There are much much more I suggest you’ll do your own research
As I’ve learned the hard way over the years. Make your peace with one the Modern Javascript frameworks. React, Vue, Nuxt whatever it is.
Thanks everyone for some great suggestions! Especially I liked this in order of how I’d like to go.
Using quick n dirty wireframing
Look for premade themes
Learning enough tailwind as a bootstrap alternative
Lastly, picking up a frontend framework – most likely Vue for me