Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

news.ycombinator.com

Post reply on HN
Print view View original

51–60 of 203 posts

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

#51

Post by d0m »

A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling".

I'll prob. be downvoted but here's my honest opinion: I think you'll gain a lot career-wise to learn about UX and UI. You'll be able to understand products in a deeper level from the customer's side and will then be able to make better decisions as an engineer. You'll also have a much easier time working with designers and PMs. And, of course, your projects will feel and look great.

IMHO, the biggest bang for the buck you could learn is:

  - Visual hierarchy (I.e. the same way you divide your code in modules and functions, you need to divide the visual space in a clear hierarchy).

  - Basic on typography (It makes a big difference even if most people don't notice it)

  - Understanding what's UX (I.e. reading "Don't make me think"). Just "caring" and "thinking" about UX will improve designs, even if you don't have much experience.

  - Basic of color theory; How different colors mean different things (Branding-wise or for alerts/errors/warning).
Reading material design from Google https://material.io is a great start. You may not like the UI of it, but the UX and explanations of why things are this way are really interesting.

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

#52

Post by sudhirj »

spunker540 wrote: post #34
maceurt wrote: post #26

Earlier 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.

Try Tachyons. I’m playing with it for a new project and liking it a lot so far.

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

#53

Post by noahprince8 »

I highly recommend using semantic-ui, which has a fantastic react port https://react.semantic-ui.com/

I used to use bootstrap, or download themes on themeforest. But since discovering Semantic, I've had a much easier time building front ends. It also serves as a guideline -- when I can't find something I want in Semantic, I have to ask myself "Is there a better way to do what I'm trying to do that _is_ in semantic?"

Also, with anything, it's a matter of putting time into the frontend. If you spent as much time on the frontend as you do on the backend, it would likely look better. It's easy to rapidly prototype a frontend just to make your idea work. Once it works, you move on.

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

#54

Post by codingdave »

Keep the UI simple. Find a free/cheap template, throw it up, and add your code. But then... use the app. Be aware of when you are clicking multiple times to finish a task, when you have a small hesitation to parse your own icons and menus, when you jump all over the app to get something done, etc. Those are small inefficiencies to you, but broken UX to someone else. Over time, you'll have your own annoyances with the app. Fix those. And when you get real users giving you nitpicky complaints about the UX, treat them as serious breakages of your app.

Over time, you'll have a simple, usable app. And that is far preferable than a beautiful, shiny, but unusable app.

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

#55

Post by stevenkovar »

Visit a site like http://behance.net and find layouts that inspire you. Spend part of your side project time replicating those styles and understanding/learning why the design decisions were made for that project.

Remember, design is problem solving. Art is expression.

Good design doesn't have to be pretty, and prettiness doesn't mean a design is good.

My assumption is your side project is for learning or enjoyment's sake. Learning design is a great way to spend that time. If the side project is purely for economic gain, instead spend your time refining your taste for design, learning how to articulate your taste, and recruiting designers who share a similar taste.

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

#56

Post by tneely »

spunker540 wrote: post #34
maceurt wrote: post #26

Earlier 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.

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.

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

#57

Post by ohkaiby »

d0m wrote: post #51

A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". I'll prob. be downvoted but here's my honest opinion: I think you'll gain a lot career-wise to learn about UX and UI. You'll be able to understand products in a deeper level from the customer's side and will then be able to make better decisions as an engineer. You'll also have a much easier ti…

I actually took a 3-month crash course on Visual Design because I was weak in that area (as a front-end developer). Probably one of the best professional investments I have made. The course taught me basically the above list.

I would add knowledge about grids and negative spacing to the above list.

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

#58

Post by ai_ia »

noahprince8 wrote: post #53

I highly recommend using semantic-ui, which has a fantastic react port https://react.semantic-ui.com/ I used to use bootstrap, or download themes on themeforest. But since discovering Semantic, I've had a much easier time building front ends. It also serves as a guideline -- when I can't find something I want in Semantic, I have to ask myself "Is there a better way to do what I'm trying to do that _is_ in semantic?"…

Came to say this. Semantic UI react has almost everything you require to build good looking UI for non designers.

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

#59

Post by ohkaiby »

ohkaiby wrote: post #57
d0m wrote: post #51

A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". I'll prob. be downvoted but here's my honest opinion: I think you'll gain a lot career-wise to learn about UX and UI. You'll be able to understand products in a deeper level from the customer's side and will then be able to make better decisions as an engineer. You'll also have a much easier ti…

I actually took a 3-month crash course on Visual Design because I was weak in that area (as a front-end developer). Probably one of the best professional investments I have made. The course taught me basically the above list. I would add knowledge about grids and negative spacing to the above list.

One other thing to add is that you can't make a good design without content. Unless you have all of your content ready to visually position/style, don't bother designing yet. I used to try to make the visual layout first without really thinking about content, and it was always a struggle.

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

#60

Post by jookyboi »

I learned design + frontend engineering together. My side project turned into my full-time startup: https://www.cacher.io

The best advice I can give in terms of managing UX:

0. Get Sketch (https://www.sketchapp.com) and use one of its UI kits (https://www.sketchappsources.com) to lay out your designs. While you should pay attention to visual details, you won't need to lay out every state since you won't be showing these to anyone else.

1. Build your project with one of the established frameworks (Material is pretty good). This will give you a sense of visual hierarchy and force you to think about why elements are placed where they are.

2. Introduce your own modifications and controls as needed. Even with a framework, you'll eventually come across a use-case that isn't readily handled.

3. Keep your modified framework in its own folder/repo. Continually update it as visual standards/technologies change. Doing this will cut down on the amount of re-work necessary when you're starting new projects.

Post reply on HN