Live data from Hacker News

Rules for developers to design beautiful UIs without a designer

refactoringui.com

51–60 of 245 posts

Re: Rules for developers to design beautiful UIs without a designer

#51
post #13

> [design courses] focus so much on high level principles like color theory and typography which, while important, never helped me make instant improvements Strange, making the very low contrast text more visible on this site is an instant improvement, and it's right there in the "color theory"

The only UI/UX newsletter I subscribe to[0] also has a a similar problem, but the advice is usually solid. Maybe the first and/or last rule should be ‘seek feedback’.

[0] https://user-interface.io/

Re: Rules for developers to design beautiful UIs without a designer

#52

Often the bad designs come from the designers themselves. Just as software developers often fall prey to "NIH", many designers feel the established design systems like Material are insufficient for some reason. That is OK, if you know the rules you can break them, but often they don't know the rules either (grid system, typography, color for accessibility) and want to make "their own mark" with some new creation that…

Design is a field where there's no clear 'correct' answer, in a vast sea of opinions. Honestly UI design is surprsingly tame compared to other areas of design (interior, architecture, typography etc). If there's a uni near you, try go to a design critique where work is presented and discussed - it's intense. Debating work is a big part of being a designer. Strategies to deal with disagreements, frankly a big part of…

One of my pet peeves in software development is not doing enough upfront R&D into feature and product design. User feedback is often only collected after the feature has shipped, landed and users are forced to deal with the "upgrade."

It's hard to take subjective matters, such as UI preferences, and draw objective conclusions from them ... but it can at least be done in the aggregate. Before "SaaS" took over software (and made modern computing mostly unappealing to me as an end-user), companies would have to spend quite a bit of resources doing focus groups and "beta testing" before that big product release. End users could be divided into the "early adopters" and the "review watchers", the latter group choosing to wait and decide whether or not it's worth "upgrading."

There is no reason that feature and product design in software can't go through an R&D phase except for cost. It's often cheaper to do your R&D in-house even though it often misses the mark because "real" customers rarely use a product like those who are intimately familiar with all of its quirks and oddities.

So, while you're correct that accessibility, usability and aesthetics will often vary from individual to individual ... I still think that companies could arrive at an objectively "right", or at least "best" design if they bothered to do more upfront R&D; soliciting user feedback and data from "real" end users very early on in the design and development process. Doesn't mean you will please everyone, but you can at least maximize the number of end users who are satisfied.

Re: Rules for developers to design beautiful UIs without a designer

#53
Most products don't need a whole book:

1) Use a mature, well-designed GUI framework. Especially if you don't have a designer it's unlikely that novel interactions or an unusual visual design will be a key selling point for your product.

2) Find a half-dozen folks from your target user audience or proxies who are as similar as possible. Give them a task to do with your product/prototype while you watch. Let them talk aloud without interrupting. Do this early and often.

If you can do those two things you will be ahead of most consumer products and vastly ahead of most enterprise products.

Re: Rules for developers to design beautiful UIs without a designer

#54

Skeleton UI (Svelte + Tailwind) is how I go about it. The developer experience is very good. As for the UX, that's mostly just a matter of actually thinking about how people will use the app and taking the time to account for it. In my experience, bad UIs are a product of laziness more than know-how.

I’m not sure if you realized it or not, but Steve and Adam created this book and then went on to create Tailwind CSS shortly after.

Re: Rules for developers to design beautiful UIs without a designer

#55
> Use fewer borders.

> Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered

Of course. Who needs to know where a GUI element starts and where it ends ? Why not click everything until you discover that the label on the lower left has an action assigned to it. /s

A very long time ago there was something called "Style guide". But who needs such outdated staff anymore ?

Re: Rules for developers to design beautiful UIs without a designer

#56

Honestly their first concrete example, with fewer borders, is something that bothers me a lot on the internet today. Cool everything looks flat and like part of everything else. That's not hard to go down through a giant list of or anything... /s

The goal was beautiful design, not good usability. You gotta admit that it looks good, and eye candy is usually extremely effective for user retention, even if the alternative handles better, technically.

I have trouble distinguishing the two as an unusable design is usually automatically worse for me but you're not wrong in making the distinction that they specified beautiful. I guess I wish people would choose functional/usable over beautiful or merge them in a way that doesn't sacrifice the one I find more important!

To be fair, I also just generally don't like the look of it without borders and stuff.

Re: Rules for developers to design beautiful UIs without a designer

#57

Just read the Tufte books for guidelines as well as inspiration. https://www.edwardtufte.com/tufte/books_ei

Seconded the Tufte books, especially to learn about the principles of visual communication. Though as a fan who has all his books and attended multiple lectures, I have to admit that his forays into interaction design were... underwhelming.

Re: Rules for developers to design beautiful UIs without a designer

#58
post #13

> [design courses] focus so much on high level principles like color theory and typography which, while important, never helped me make instant improvements Strange, making the very low contrast text more visible on this site is an instant improvement, and it's right there in the "color theory"

The contrast ratio for the body text is 7.57:1 (or 7.25:1 if the text is on the light grey background), which meets AAA accessibility standards (which is 7:1).

Re: Rules for developers to design beautiful UIs without a designer

#59
This book has been posted on hn before and it’s worth reposting. Highly recommended as a pragmatic and comprehensive guide for principles of UI design. Note that it doesn’t contain any code; it’s purely focused on conceptualising the interface design process.

Re: Rules for developers to design beautiful UIs without a designer

#60

Often the bad designs come from the designers themselves. Just as software developers often fall prey to "NIH", many designers feel the established design systems like Material are insufficient for some reason. That is OK, if you know the rules you can break them, but often they don't know the rules either (grid system, typography, color for accessibility) and want to make "their own mark" with some new creation that…

> Just as software developers often fall prey to "NIH" What does NIH abbreviate?

https://en.wikipedia.org/wiki/Not_invented_here
Post reply on HN