HN Explorer

Ask HN: How do you manage UI/UX for your side projects?

402 points by break_the_bank ↗ HN
Like a lot of you I have mostly worked in back-end or systems software. My CSS/UI/UX skills are very minimal. I get disheartened by how my project looks or don't start the project because I fear it would look crap or I despise doing the UI/UX work.

How do I solve this?

202 comments

[ 0.17 ms ] story [ 226 ms ] thread
projectramo
I am in the same boat. I try to use the same basic look and feel and interface everywhere. I just use whatever formatting the framework comes with and then I might ask someone else to step in and give me css and logos etc later.
InGodsName
I've multiple solutions:

0. Use a css framework like Bootstrap or Bulma, it's not difficult to put together a website/webapp with a bit of CSS skills (you don't need to know a lot of CSS to create a good experience)

1. Team up with the UI/UX designer who you've worked in past and offer them your backend expertise for their project.

Good ol barter has saved my ass multiple times by now.

2. If you don't want to get someone from your workplace, you can go on upwork etc...and hire a freelancer, it's a paid option.

maceurt
Bootstrap is so antiquated. It is also far from easy, and even if you learn a lot about bootstrap is will not make your project suddenly look good. Not to mention the container system is one of the most confusing things I have ever seen, but maybe that is just me.
spunker540
What would you recommend in its place? I’ve been using bootstrap for any web side projects of mine mostly for its ability to flex and handle multiple devices sizes and also because its defaults look passable out of the box.

I agree containers are confusing but honestly making a custom web app look good on all resolutions/aspect ratios is complicated in my opinion.

wartijn_
Not OP, but I recommend using plain css. With the grid layout and flexbox it has become pretty easy to create something decent and learning flexbox and grid isn't hard. Grid works basically the same as Bootstrap: split a page in parts and tell each element how many parts they can use. But with gird you don't to split your page in 12 part, but can choose for yourself how many you want. Flexbox is rid, but for things you want to arrange 1d instead of 2d.

However, if you know how to work with Bootstrap, I don't see a reason to learn something else for side projects, if you want to minimize the effort you put into front end stuff. It might not be ideal, but it's good enough imo.

bpicolo
Plain CSS is missing the main feature of these libs, which is simple-as-crud components that match visually and help you build out pages that have the UI patterns users expect.
maceurt
I second using vanilla css. Vanilla css is a lot easier to understand than bootstrap imo. Vanilla css + HTML5 is good enough for pretty much any web page.
megous
Yup. Learning basic web platform technologies is the best investment too. They're not going away, ever. (Comparend to the currently fancy libraries/frameworks). And it will help you understand all the things built on top of the web platform.
sudhirj
Try Tachyons. I’m playing with it for a new project and liking it a lot so far.
tneely
I like to start with Skeleton CSS or similar, strip out all the column stuff, and just rely on grid and flexbox to build the layout.
barbecue_sauce
At most use the Bootstrap grid system. Roll your own component styles, particularly if you're trying to sell whatever you're building as a product. Otherwise, your project will lack identity. I'm more sensitive to it than most because of my background, but if I see an app using Bootstrap defaults, it negatively affects my opinion.

That said, the Bootstrap 4 defaults are much more modern looking than Bootstrap 3's.

projectramo
What would you recommend instead?

Note the criterion here is speed, not modernity or aesthetics.

Edit: by speed, I mean speed of development, or ease of development.

Midnightas
Speed? Do it yourself, you only add what you need, no need to bloat the styles with anything you're not going to use.
ramraj07
I've been designing barely acceptable web UIs for my side projects for 17 years now and I think this is poor advice.

I've found that bootstrap remains the best option to create a reasonably responsive, simple layout that is still quite usable on mobile as much as on the desktop, with no more than an hours' worth of work. And you don't even need to know css really.

I've used vanilla CSS and HTML and even after hours of amateur effort the site always looks like it came from the 90s. I don't have the time to worry about what font family I want to use, is that too much to ask?

Heliosmaster
Bulma is easy to understand and very fast to start using.
H1Supreme
You can use Boostrap's "grid only" option. Which gives you a FlexBox based 12-column grid, and none of the styling. I think it's a pretty good option for people who want custom styling, but don't want to reinvent the wheel for a grid.
bredren
I disagree. Bootstrap is not that hard and the template wrappers make ui ux much easier for a backend person.
gkilmain
Bootstrapping a proof of concept, or a very early version of an app, definitely is still very much relevant. Bootstrap aids in this. And I think it is widely accepted that if you have an app that you'll eventually scale it needs to be refactored out. But for that initial POC, bootstrap away!
[dead] bloma
If you want to talk about it, feel free to contact me

Edit: I am a UI/UX designer, would like to talk to anyone on this matter. I would actually like to team up with someone to work on some project (but not necessarily). I'm kinda a perfectionist, I don't like WordPress or ready-to-use themes/CSS-frameworks and I like things original, optimized, useful and beautiful from both inside and outside

te_chris
For side projects, I always try and get as far as I can with a CSS UI framework, then ask friends for help. It's much easier to brief people if you have a woring prototype.
pharaohgeek
If we're talking webapps, I tend to go to https://themeforest.net and buy HTML themes developed by professional designers. The cost is MUCH cheaper than hiring someone to develop the UI for you, and a lot of them are extremely high quality.
jermaustin1
I will sometimes buy themes before I even have a project in mind. For $20-60 you can't beat something that just works and now you just need to inject your code into it.
conanthe
But if you get to charge someone it is not so cheap...
rbyrne
I second this - but just be aware of the regular license vs. extended license requirement (i.e $20 vs $800 for example). Although if you get the point where you are charging for a product and need an extended license - that may not be a high price to pay for a quality theme you would probably spend 10-100 fold paying someone to create something similar.
markessien
I know a bunch of UI/UX folk, and I tend to just ping them if I have anything to design. Works quite well - many people will do a lot of short term work in exchange for pay.
kowdermeister
For UI problems, grab or buy a UI toolkit, it's better than you trying to write one from scratch.

For UX, read about UX research and show your work to potential users, make them talk constantly and just listen, see them struggle. It's priceless.

jabart
Adobe XD is part of their creative cloud offering and they publish themes and videos about the design process. It is really easy to mockup a real looking web page in XD, then use a favorite CSS framework to create it.

Also themeforest.net is great too, pharaohgeek mentioned that already, but that is also a great starting point as good themes look more like bootstrap documentation to give you a huge head start versus from scratch.

dmortin
I try to use frameworks which contain building blocks, so I can just use existing functional elements (like Alert in Bootstrap, etc.) without having to come up with my own css rules.

Obviously, this works only if you don't need any custom elements, but I'm not a designer, so I just usually use what's available.

robbick
You are right to be concerned - so many side projects don't gain traction due to simple UI issues putting users off.

1. As other comments have mentioned - if you are willing to pay, a good designer will go a long way.

2. Use a common component library with a custom theme so it is good code but not 100% the same as elsewhere

3. Keep lots of whitespace between everything

4. Keep it simple - good UX is about so much more than UI and feature creep is so often the enemy of good UX

dvh
Sans serif font, dark gray text on light gray background, massive padding and you are in.
bgorman
I would use a "Component" front end framework like Material-UI or Blueprint, that way you can avoid spending your time on CSS/JS issues and spend most of your time building the application. The downside is that your application will look like the component framework you select.
Kagerjay
I've been exploring the world of UI/UX recently, and I enjoy it.

It would be helpful to pickup a design tool. I've used figma and sketch, but I'm finding figma to be really helpful.

------------------------------------------------------------------

How I think of things is like this:

1. Either my entire day is dedicated to design

2. Or its dedicated to programming

------------------------------------------------------------------

I find it difficult to swap between design / programming frequently. One requires creativity / looking at lots of things for inspiration. The other requires a more logical mindset.

I would go further with this analogy, there's (4) main roles in webapp development

(1) UI/UX/Design

(2) Frontend Frameworking (React,HTML/CSS/JS/mocking things up, etc)

(3) Backend development (Firebase, nodeJS, etc)

(4) Database development / sysadmin / everything else

Try and only focus on one or two or those things everyday. You can skip (1) if you are emulating a website or building something with a heavy backend MVP. (3) and (4) can be mostly skipped if making a small project in firebase. (2) can be skipped if you use a CSS framework, etc.

vthallam
This is definitely a problem for a lot of people. When I was in grad school, I used to go to Hackathons a lot, build a cool working backend, but a ugly front end which just does the job and I never won anything until I forced myself to learn Angular and used bootstrap themes to scaffold a basic UI/UX.

Unless you have a friend who happens to be a front end engineer and who wants to work on side projects along with you, the best solution is to learn just enough to get by. Learn react or angular and learn how to customize existing free themes available out there.

demarq
The mistake that a lot of people make is thinking that it's a code/framework/tech problem it isn't.

Start by putting the technology aside, it only serves to bring your idea to life. Which bring us to the ideas...

Ideas are never 100% original. I challenge you to imagine an object of a shape and color not made from anything you've ever seen... it's impossible. What I'm saying is that you need to take inspiration from various sources. From this you'll be able to bring these elements together in a new way.

So I'd suggest looking at http://collectui.com/ and https://colorhunt.co/ to start.

Come up with a design in Illustrator/Designer and pretend HTML CSS REACT etc don't exist (ignore them).

Finally look at what you have created and realise you can bring that to life using literally any technology you like.

Mock out your components in HTML CSS.

create react/vue/angular components and port your previous HTML/CSS into these.

And Voila!

rkangel
> The mistake that a lot of people make is thinking that it's a code/framework/tech problem it isn't.

A good framework and set of components can help a lot though. I'm building a mobile app at the moment using flutter, and the material components in that make it so much more efficient to build nice looking things that work well. Animated transitions between screens for instance can be really fiddly, but flutter has support for some useful ones out of the box using 'hero' widgets.

asien
>Like a lot of you I have mostly worked in back-end or systems software. My CSS/UI/UX skills are very minimal.

I never came up with a special talent for UI/UX. I remember I had a friend who was web developer he was insanely talented , could make a sexy landing page in just a few minutes.

For me this has always been impossible , I immediately start thinking about optimizations, legacy browser support , CI/CD etc... Typical issues of system driven person....

A few years ago I realized I wasn’t like him and it was « Okay ».

I found out I can’t do « many side projects » at once nor frequently.

Instead I only build one project at a time but I do it properly. I design things out in Photoshop or Adobe XD where I usually spend weeks before coding anything.

The goal is really to be working in pure V Cycle where you don’t start Prototype unless you are done with the design.

Been using this technique ever since and I haven’t been frustrated ever since. Would recommend to try it with any design software that you like to work with.

leandot
I've discovered that https://tailwindcss.com/docs/what-is-tailwind/ fits me best as a way to do UX/UI as a backend person. Feels like functional programming with well-defined, limited number of building blocks, whereas normal CSS styling always seemed like endless amount of options. Also the docs are really great with some ready-made patterns. No idea if it is for everyone but I enjoy it right now.
mmmeff
Frameworks like these are terrible for your document size and page load performance once your project scales.

Why would you write anything that can't scale if you can avoid it? Whether or not you're looking to turn your pet project into a SAAS business is a moot point when you can get scalability for free with other approaches.

brunoc
How? This is a tiny functional CSS library.
leandot
It seems verbose yes, but since everything gets minified + gzipped anyway and there is no additional js it is actually quite light in the end. If the parent has difficulties with UX/UI, it might help to look at it from a different angle.
sokoloff
Because the overwhelming majority of side projects will never need to scale.

Getting something shipped matters more.

richjdsmith
I mean, with something like PurifyCSS or some other 'css tree shaker', something like this is perfect.

On an (albeit fairly simple) app that I'm building, my CSS file, using Tailwind, is 6.1kb gziped. I think that's pretty reasonable.

chasd00
for UI, HTML5 Boilerplate will get you pretty far when it comes to organizing markup. Then you can start with something like Bootstrap and then build a theme when you're ready. There's some truly impressive pre-built bootstrap themes/templates out there too but they take a lot of work to integrate into your project.

As for UX, if you have a spouse/partner/SO ask them to use your project and take their feedback seriously. Getting actual people to use what you've built is the fastest way to a decent UX. You have to set aside your ego and let the users dictate how they want their experience to be. It's non-trivial.

arbie
Material Design standardizes visuals and mini-workflows that you can stitch together. The spec is easy to approach and every major JS framework has an implementation.
bryanrasmussen
Is it a project where one of the most important aspects of how it works will be the design, if so maybe you can trade with a designer or even pay one for some help. If it isn't the most important thing try to find a theme or example in a common framework that will be passable.

For example let's say you're making a project that will help companies manage real time logging of data more efficiently.

Once a basic level of design competence is reached pretty much nobody who is looking for something like that cares too much how your site looks. You could make a simple landing page with a bootstrap theme in a few hours.

austincheney
This used to be a pain in the ass for me, but the beginning of this I rewrote everything from scratch including the UI. Now I have everything automated behind a build. All of my options, their configuration, and all corresponding documentation is built from a single simple config.

* Here is the site - https://prettydiff.com

* Config - https://github.com/prettydiff/prettydiff/blob/master/api/opt...

To automate this properly so that user performance is fast and maintenance is simple you don't need any frameworks or tooling. You just need a good plan and a proper organization of things.

About 80% of the user interactions are built from automation. There is some manual wiring that has to occur for various things where interactions are unique to a given option. The manual interaction stuff wasn't too bad when I wrote the code this past spring and it requires almost no maintenance. All the stuff that would be a pain the ass to keep up with is fully automated.

shortoncash
I don't; my side projects have the shittiest UIs ever.

For things that make money, I just hire a professional. There have been times where I have put a lot of personal time into improving a UI. What ends up happening is that that time ends up being a total waste of time because the UI/UX professionals are able to do the same work in a fraction of the time. It's almost never a waste of money, either.