Ask HN: How do you manage UI/UX for your side projects? • Hacker News Board

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

#61

Post by quakenul » Fri, Dec 07, 2018, 4:16 PM UTC

Something that I feel a lot of coders grapple with is that these 3 tasks are highly disconnected from each other. It is absolutely common to have someone who is incredibly proficient with CSS (maybe more and more so in tandem with some front-end JS skills) to have absolutely no concept of how to come up with a strong design in any reproducible, timely fashion.

Unless you feel tackling three very, very different problems at once I recommend you treat them separately.

* Functional Design: Think of the right things to do at the right point in your app in a way that engages and works for the user

* Aesthetic Design: Pick the right colors, sizes, margins, fonts, icons to support the functional design aspect (keep it simple, skip illustrations)

* Web Design: Get it to CSS/HTML/JS

It is very simple to get a random aesthetically pleasing thing going (there's a ton of theme resources out there) but for obvious reasons those do not include any consideration to your projects functional design needs, which then trickles down to the lack of strong aesthetic elements and an app identity.

My recommendation depends on the type of person you are and what you are looking for. Do you wanna do self-reliant and do everything by yourself? Think of it as another never ending journey (just like the coding one) and enjoy the ride.

I think tailwindcss is one of the best tools to guide you towards making a lot of right decisions quickly when it comes to aesthetic and web design. Starting keeping bookmarks of whenever you stumble across a page and think "this feels/looks good". Review whenever you wanna build something. Make it easier on you: Skip graphic heavy stuff, pay extra attention that work through great typography, borders, use of colors.

Functional design, well, is super fucking hard and I don't know of any great online resources that teach it on a high level (anyone?). It depends so heavily on the individual problem you are trying to solve and has so much to do with critical thinking, understanding the entire problem space (including user motivation, where they might struggle) and intuition.

To make this part not completely overwhelming definitely work on a problem that you personally have (or at least can heavily relate to), think about that problem as much as you can and figure the simplest possible steps to get you there.

The alternative route would be to work on finding a co-creator, someone who fills in the gaps. Since we are talking about side projects you can absolutely live a little dangerous here and start connecting with people over indie hackers, hacker news or whatever but if you know someone you have worked with before, and feel like you might enjoy working with on a side project go to them first.

good luck :)

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

#62

Post by elorant » Fri, Dec 07, 2018, 4:19 PM UTC

If it's a small project I'll use bootstrap which then I customize. For anything larger I just pay a web designer. He/she might also use bootstrap but their customization techniques far exceed my capabilities.

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

#63

Post by leandot » Fri, Dec 07, 2018, 4:19 PM UTC

mmmeff wrote: post #36

leandot wrote: post #21

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.

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.

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.

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

#64

Post by PublicStudent » Fri, Dec 07, 2018, 4:21 PM UTC

Read Jeff Gothelf's Lean UX. Shows a product mindset and how to use that mindset to create great software products.

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

#65

Post by mettamage » Fri, Dec 07, 2018, 4:22 PM UTC

For getting some UI drawing skills go to:

https://bezier.method.ac/

Then buy a copy of Sketch and draw a couple of phone screens (by hand) [1, 2]. The idea is to do it by eye, so no cheating by using color pickers or measuring the pixels, do it by eye. Draw all the icons. In actual projects you can use icons but now you have the power to create your own.

Then do this one (the image)[3]. Now you should be on the level that you could draw any figure well enough as long as you have a reference image for it.

In my opinion regarding UI design there's no need to go further than this if it is purely for your own projects. The idea is to create a nice looking UI, not photo realistic images by hand ;)

[1]: https://www.invisionapp.com/inside-design/design-resources/d...

[2]: Sketch quick start: press A (for artboard) to plop down a screen. With R (rectangle) and O (oval) you can create simple figures. With V (vector) you can do the pen tool thingy that you've trained at bezier.method.ac. The rest should make sense on its own.

[3]: https://www.invisionapp.com/inside-design/design-systems-val...

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

#66

Post by IronCoderXYZ » Fri, Dec 07, 2018, 4:22 PM UTC

Here is what I typically do:

- Draw out a design using Sketch, draw.io or any other similar tool.

- Find a color scheme, I typically google for "flat UI colors" since I like them most. Adobe color wheel is also a great tool for finding complementary / shades of colors: https://color.adobe.com/create/color-wheel/

- Then I start prototyping my ideas, typically in react, using a CSS-in-JS lib such as styled-components, this allows for quick iteration.

- I do research. For example, I look at how other websites or UI component libraries do things. Examples are material UI, ant design, semantic UI.

The most important thing is refinement. You start with a rough sketch, prototype in react or HTML and then start playing around with the CSS. Learning all the css attributes definitely helps. Don't try and learn them all from a list, but just google them as appropriate and you'll start picking them up. For example, you might think: "How do I center the children elements both vertically and horizontally on different screen sizes?". A quick google search will suggest to use display: flex, justify-content: center, and align-items: center.

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

#67

Post by PublicStudent » Fri, Dec 07, 2018, 4:24 PM UTC

Read Jeff Gothelf's Lean UX. It illustrates product mindset, shows the survey and analysis work that goes into creating a new product and where creating custom software fits into the whole process. Given this reference by a UX designer. Great read.

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

#68

Post by PaulHoule » Fri, Dec 07, 2018, 4:27 PM UTC

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 am a physics PhD turned application programmer who got into systems programming the hard way.

My design skills are such that i can make something good probably half the time on my own.

You're right that a small investment in learning will get you some big gains.

One thing that helps is sticking to some standards. I worked at web dev shop that had a standard for forms that we called "Spider Forms" that might not have been genius but it is better than what you'd get without a plan and cheaper (and still better) than what you would get bikeshedding it with a client.

I like anime art because it designed to be easily reproducible by many people. I got good at drawing these guys

http://hyperdimensionneptunia.wikia.com/wiki/Dogoo

It's the only character I can draw but I can draw them quickly on blackboards, whiteboards, etc. My son lately has learned how to draw characters from Starfox and Sonic.

I used to think about color theory but these days I just find a picture that has a color scheme I like and copy the color swatches.

I think many people would be better off if they stuck to a small set of fonts and did not think about typography. If people put a lot of effort into it they often end up doing worse than if they took the defaults. For me the really interesting aspects of typography are the "less travelled" paths such as "what do you do if the text is too big to fit in the space?" and then shoehorning it in by changing the letter spacing and squeezing the letters.

Then there is the rule of thirds. Learning that didn't make me into Ansel Adams but it vastly improved my photography overnight.

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

#69

Post by diek00 » Fri, Dec 07, 2018, 4:28 PM UTC

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.

I need to take this course

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

#70

Post by H1Supreme » Fri, Dec 07, 2018, 4:34 PM UTC

maceurt wrote: post #26

InGodsName wrote: post #3

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 som…

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.

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.