I am a backend dev with little/none design experience. How do I make my side project stand out in terms of design.
I am a primarily backend dev, working on my side project, which ideally I'd like to monetize. But I have no design experience. Little artistic skill/talent.
How can I make a beautiful website with great UI/UX that people want to use?
Take a course? Which one?
Contract that out?
Find a partner to split equity?
Something else?
Thanks for advice!
I was in a similar boat. I have tried to purchase pre-build themes, but pre-buid themes are rarely 100% match for the project. As you start tweaking to fit your needs - they lose their appeal. The more 'customizable' options theme builder provides more issues you will face.
I went with "read up and build your skill-set" route. If you follow a few basic rules, you can improve your page significantly. The pages still will not match professional quality- but close enough to get by.
Here is a Youtube channel I found useful
https://www.youtube.com/watch?v=_J1Le-4aXhE&t=368s
You will need to know these design fundamental principles -
Understand these fundamental principles and your designs will improve.
All the best!
Another option that I didn't see mentioned here is Cruip.com. I believe they have some free themes and you can get access to all their premium ones for just $49. I've used their themes on projects for and always get complimented on them. They're easy to extend and as an added bonus, they are also on IndieHackers: https://www.indiehackers.com/product/cruip.
Great templates! I've been using them myself and I totally recommend!
Fear not. https://www.bytehub.dev brings amazingly designed components to react and tailwind. Check it out and let me know if you need any access to pro components.
I guess it depends on your interest in wanting to sharpen UI/UX skills. If you find it a chore , then I would probably suggest somehow offloading that work onto someone else. If it is a skill you are wanting to hone, then I highly recommend this resource by Steve Schoger. I would also push you in the direction of learning tailwind if you haven't seen it already and finally take a look at Tailwind UI.
My advice to you would be to treat the Frontend similar to Backend. Define the workflow, create mockups on paper or online tools. Split the UI into components to keep it DRY. Once you have clear picture on how the users will navigate on your website and what type of components you will need only then start looking online for inspiration. I would personally not overcomplicate things and just go with Metro-Ui or Bootstrap/Foundation UI frameworks.
I buy a themes on themeforest.net and modify them. Try to get as close match as possible. Generally for SaaS websites there are more than enough options and you can use these themes for multiple projects.
For example if I need any sort of dashboard or backend interface I always use metronic, I don't even need to think about it. Just choose a theme for a landing page.
I use Webflow for just this reason 🤓
This is what I did - Purchase a premium theme, preferably Bootstrap based and slightly customize as per your needs. Select a theme that offers components that can be placed anywhere in the webpage. I also recommend you to scroll through https://dribbble.com/ everyday to get inspired and learn.
You can also try a no-code tool that fits the type of your projects. Many are tailored to abstract you from a particular expertise you dont have. Webflow, for example, can help you with website design, Adalo or Thunkable - with mobile app.
We built kelp.app for data-driven apps like dashboards and analytical/oprational tools. If you have API to your backend - you can quickly build a functional UI.
Invest in your own custom redesign when you have resources for that and validation.
Design takes time, but here's a secret: it's not hard. Well, it's hard to be original, but that's not something you have to do. Look at products that do something similar to yours and emulate it. Users expect a universal experience across all software. Everyone knows blue text is a link. So, start paying attention to things like this and recreate it for yourself. Also, don't treat it as some small thing you need to finish off before you're done. It's a process and it requires attention to detail. That's about it.
I'm also really bad in Design and more a backend Person. My solution Was to learn the basics of boostrap (boostrap.com) and then get a suitabke Theme on www.wrapboostrap.com sometimes the themes have pretty complex components and when you just copy+paste the sample Code it's not that hard to get it running.
I am surprised no one mentioned https://refactoringui.com/book/ , a book with practical design tips written specifically for devs.
First tip would be keep things as simple as possible (least amount of elements on screen).
The more elements you have, the more styling you need to do, and the more complexity you need to think about in terms of layouts etc. Simplicity can look beautiful in its own right.
Second tip... find a front-end UI framework like Materialize. This will help you out with a pre prepared component kit that looks good.
Third tip... Find examples of apps that are similar to yours. Look at their colour scheme. Define those colours in a palette of maybe 3 or four colour variables, and try to stick to just those throughout the site.
There are also some basic principles which make things automatically look good. Give things space to breathe, i.e. padding around almost everything especially text blocks.
The easiest way you can make something look good is to find a design that already looks good and copy it.
I found it super difficult (and still do) to design good looking pages. Especially when i was focused more on the functionality. I sort of thought that if it works people won't care! Turns out that's really only how engineers think lol. My suggestion would be to keep things lean on the design side. Yes it's needed and valuable, but I think bringing on someone just for that is a bit excessive. My suggestion would be to find a contractor somewhere to give you ideas. I think you'll find that after a while you can actually just use some of their broad ideas and then quickly implement them yourself for pretty cheap. I use one for my site and it helps a lot I think. I still have a long way to go but you should've seen it before! I've update the blog look - cost to wrap a car - and added a landing page that looks more like what normal SaaS platforms look like - virtual car shows.
Would enjoy hearing how you get on and what path you choose. The design side definitely takes a lot of energy for me lol
Hey, just wanted to chime in to say that design can break or make your business just like how functional the app is can.
OP could bring someone in and have them give him/her ideas, but implementing these ideas for someone who isn't aware of design concepts isn't going to turn out good.
I thought I'd do a quick re-design of your Topmarq landing page since I had nothing to do.
Here are some pointers in case you want to know what changed:
1- Avoid using icons without context. Sure, you have aria-labels, but that's meant for accessibility, what about people who can read just fine? Icons without labels are often confusing.
2- Use consistent icon sizes and thickness. Some are bold, some are thin, and some are stretched out. Try to keep them the same thickness and size.
3- Check your contrast when typing out text or buttons. The 'Host Your Event' button for example is probably going to be hard for some people to read, white on orange don't work that well together, so black is a much better option if you need to stick to this color. Otherwise, darken the orange a bit.
4- Add visual interest wherever possible. Try to add some abstract shapes behind images if you feel like they're too plain. It'll add some visual interest and it helps out a ton.
5- Stick to the grid, some of your text is not aligned properly to a grid and it just breaks the chemistry of the entire website.
Anyway, I know you haven't really asked for any pointers or redesigns but I thought I'd do it for fun, good luck!
Thanks @muchkler! I'll take free advice anywhere I can get it! I especially like the #4. I have been thinking that some of the images are looking plain and couldn't figure out how to do anything about it. I'll have to see what I can add there to change it up.
Appreciate the pointers!
Is your product a reflection of what the back-end is doing? UI/UX is really just something that makes it easier for people who don't understand what's going on inside the black box, to use the black box from the outside. Imagine extracting the most logical variables/functions from your code and making those available in a simple/minimal UI. Then it's just a matter of sprinkling some CSS on top.
If you know code, stay away from no code, haha.
Design is tricky to learn for everyone. I think if you're looking for the quickest/cheapest way to get a nice design, purchasing a template might be the way to go.
For landing pages I personally like Webflow's Templates (~$30 - $130)
https://webflow.com/templates
The free ones are great too
https://webflow.com/templates/free-website-templates
If the goal of your landing page is to get users to sign up for your app, you can have Webflow connected to your main domain (www.example.com) and your app could be on a subdomain or subdirectory (www.app.example.com)
Or if you don't want to do that, you can download the code from Webflow as HTML and then manage the hosting yourself
Best of luck!
If you want to try and do it yourself I'd highly recommend the book "Design for Hackers." It will help teach you the basics of design and you'll start to train your design eye.
I'd say, contract out. You can definitely take the course online and read some articles and it will help you communicate with the UI/UX person, but to do it yourself and have a beautiful design - that takes years of practice.
There are tons of free designs on the internet, so you can also survive for quite some time without outside help. Depends on you project. If you have a website - there are tons of free templates that are good looking and it actually does not make sense to reinvent the wheel.
So, if your project is in the early stage - use free templates. If you firmly believe that design is what your project desperately needs to get more traction - find somebody good to help you.
This comment was deleted 5 years ago