Bootstrap. I just went for the most popular because i m more likely to find googable answers to my needs.
Ask HN: How do you manage UI/UX for your side projects?
41–50 of 203 posts
Re: Ask HN: How do you manage UI/UX for your side projects?
#42I'm not too bad at front-end development (especially if someone else does the design and mockups), but I don't have great design or UX skills.
I really like starting with balsamiq for mockups, because I can figure out the functionality and don't have to think too much about the design. And then I like to use a UI framework with a set of pre-built components, and maybe a theme. Bootstrap is great for that, and you can get some great themes so that it doesn't look like a "bootstrap" site.
My favorite UI framework is Ant Design [1], because they have an amazing set of React components that are really nice to work with. I was blown away when I discovered Ant Design Pro [2] (which is free!). It's an "out-of-box UI solution for enterprise applications". Basically a fully featured dashboard built with Ant Design, including things like authentication pages, charts, etc. Everything you need for a side project, and it's easy to strip away all the stuff you don't want.
Re: Ask HN: How do you manage UI/UX for your side projects?
#43I stick with a few basic guidelines: * Sketch out the idea on literal paper before committing it to working code. Paper is so much easier to get 'working'. * Borrow visually from other sites that I like and have similar intent. I don't have the time on side projects to go crazy breaking new UX ground. (And users probably don't want that anyway.) * Keep the idea simple and uncluttered. Maybe a specialist could get awa…
Several of these resonate with me and align with my past experiences.
* Create a paper/whiteboard design first.
* Borrower from other sites/past projects.
* KISS / minimize technical complexity.
Some might say Vue.js is technical complexity but after investing time to learn the basics I would say that I'm reaping productivity gains. Honestly it's great to work with and making UI's that have some degree of a pleasant user experience.
Here are two projects I've worked on recently where I've used Vue.js. The first is via Vue-Cli and a true SPA app that is hosted through Amazon S3 and CloudFront. The second an ASP.NET Core app hosted on Heroku as a container. In both cases, Bootstrap has integrated very well with the Vue.js app.
A driving factor for creating these has been to share my Vue.js knowledge with others.
* https://github.com/ryanrodemoyer/ParlayTools - available @ https://d3itp7yns2kqcy.cloudfront.net
* https://github.com/ryanrodemoyer/AccrualCalculator available @ https://accrual-calculator-prod.herokuapp.com
Good luck!
Re: Ask HN: How do you manage UI/UX for your side projects?
#44Disclaimer: I'm a frontend/fullstack dev.
One of the methods I use is browsing other sites and taking inspiration. You can even inspect their elements if you'd like to see how they the style (don't copy paste!).
Other suggestions: - Team up with someone with some ui skills
- Use a css framework: https://github.com/troxler/awesome-css-frameworks
- Choose a color scheme and add some margin and padding to everything and stick to the scheme.
- React component libraries are becoming much more general purpose and easier to use. If you're up to sinking a few hours into it, try create-react-app (https://github.com/facebook/create-react-app) and then use a react component library like material ui (https://github.com/mui-org/material-ui)
Re: Ask HN: How do you manage UI/UX for your side projects?
#45My side project launched on HN about 4-5 weeks ago:
It's basically an Electron-based document manager with annotation and Anki flashcard support.
My background is cloud infrastructure so I'm really not an expert on UI / UX.
What I've been doing is that I use off the shelf UI toolkits that happen to look good aesthetically and have decent UI / UX already.
I also just try to do things that are 'standard' and not argue or have too much of my own opinion. I'm not a UI expert so I just do what the UI experts do...
Right now I'm using React and Reactstrap but Material UI also looks decent.
I also have a whole directory of screenshots I've been saving with really rich a and nice UIs that I can borrow ideas from.
Background colors. Layout designs, etc.
Re: Ask HN: How do you manage UI/UX for your side projects?
#46Earlier quoted context omitted.
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.
Speed? Do it yourself, you only add what you need, no need to bloat the styles with anything you're not going to use.
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?
Re: Ask HN: How do you manage UI/UX for your side projects?
#47I use a framework - I like Semantic UI a lot, although I'm not sure it's being maintained. When selecting a framework, I like to resize the browser to see how responsive it is, and look for text overlap defects at different sizes as a sign of library quality.
Adobe XD is also a free prototyping tool - I would go through a tutorial or watch a few youtube videos of people working to get a feel for it.
Re: Ask HN: How do you manage UI/UX for your side projects?
#48Observe what you like and dislike about the existing interfaces you use. Try to emulate the former and avoid the latter.
UX/UI is HARD, it takes many iterations to get it right. So, don't get disheartened if the first several dozen attempts fall flat. Just keep on.
It' more efficient to do the visual design on paper, or some mockup tool. Forget whatever framework they're peddling at the moment, technology choice comes after you've decided what you're going to do.
Re: Ask HN: How do you manage UI/UX for your side projects?
#49I started with C++ and Arduino, then learned all the way through the basics of design. Including UI, and now I'm learning/improving User Testing (UX) since I have learned the more technical parts of UX long time ago. Graphic design is still out of reach for me though, since I know I'd have to spend hundreds of hours learning all about design to use a small part in web (which is not a high enough ROI for me). I have a very good friend that is very awesome at it, so in case of need I can always go to him.
It's been a great ride, and unfortunately impostor syndrome hits from time to time both on the front-end and the back-end (quite ironic). Though it's been fairly mild/easy to handle, I've had a lot of external validation through the years.
If you decide to learn it as your main learning focus (let's say, 15-20h/week), you could become fairly decent in 6 months-1 year. Then you can become quite good within 3-4 years. There are quite a few branches and ways to go about learning though, so if you want to learn I'd recommend searching and getting informed, but I deeply believe in the quantity above quality: https://blog.codinghorror.com/quantity-always-trumps-quality...
Alternatively, hire me :) https://francisco.io/ | https://picnicss.com/
Re: Ask HN: How do you manage UI/UX for your side projects?
#50Earlier quoted context omitted.
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.
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.
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.