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

Rules for developers to design beautiful UIs without a designer

refactoringui.com

Post reply on HN
Print view View original

121–130 of 245 posts

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

#121

Post by epolanski »

lambdasquirrel wrote: post #118
Uehreka wrote: post #109

Earlier quoted context omitted.

> Design is how it works, not how it looks. After over a decade of people jumping into these discussions with this line, I’ve gotta push back: Design is also how things look, and how things look can be important. Consumers care about how things look. If we dismiss presentation and drive people towards UX stuff every time it comes up, then the people we talk to are going to end up having good ideas that no one buys be…

People tend to take care of things that are both well put together and beautiful.

I think this era of thinking is over.

People judge apps by how they look more than how they work.

If it looks professional and good looking they give it more credit and chances than it deserves. If UX is good but looks are not airbnb/apple wannabe they tend to distrust it.

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

#122

Post by gregbander »

Uehreka wrote: post #109
pazimzadeh wrote: post #49

Design is how it works, not how it looks. This article seems to mainly be talking about the "polish" of a design. There are more important principles which don't have anything to do with polish, such as not putting the Cancel button next to the Ok button. More like this: https://lawsofux.com https://asktog.com/atc/principles-of-interaction-design/ https://www.nngroup.com/articles I recommend prototyping the flow/feel…

> Design is how it works, not how it looks. After over a decade of people jumping into these discussions with this line, I’ve gotta push back: Design is also how things look, and how things look can be important. Consumers care about how things look. If we dismiss presentation and drive people towards UX stuff every time it comes up, then the people we talk to are going to end up having good ideas that no one buys be…

Design like most words has a definition that’s generic so it can be applied as needed. There is no immutable rule when to use it.

The cone of shame my dog has right now “looks cool”; very sleek and streamline for a disposable thing, the designer surely was paid a premium, but the fasteners mechanics were poorly designed; vet tech said even she struggles with them and she puts them on dogs all week.

Design is how it looks and works as “designers” come up with both. The whole idea we can just put our foot down regarding definitions is not at all how reality works since nothing works on divine mandate. It’s relative.

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

#123

Post by wruza »

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. Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.

Everything I hate in UI right from the start. To the point that I have to re-add #0004 borders in settings.json - workbenchColorCustomizations to make it look decently delineated instead of looking like one muddy blob. Most real world objects have distinguishable 3d borders and we are trained to detect and follow them. I know your designer soul doesn’t like it, but deal with it please. Use a normal amount of borders.

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

#124

Post by epolanski »

joebiden2 wrote: post #75

One of the rare moments I simply don't understand how something gets upvoted that much on HN. Edit: this is like "get rich by just following this". It's not wrong, but so much facepalm-inducing, and it's just 100 bucks. Sorry, but: WTF? In my mind there is a bot army upvoting this article at work right now.

Completely lost as well on how did it got so many votes so quickly.

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

#125

Post by adelowo »

hoofhearted wrote: post #110
xk_id wrote: post #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.

The code portion of the book can be found at Tailwind UI. I personally have the Application UI license, and I'm going to upgrade to full access soon. It's 100% worth the cost if you are building out component libraries and repeatable work. https://tailwindui.com/

Do you have experience with Flowbite? Do you think tailwindui is still better?

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

#126

Post by wruza »

ssgodderidge wrote: post #14
chillbill wrote: post #2

Looking at the first example given I think this book is the one missing the mark. I genuinely have trouble when things have less borders! I don’t care about things designed to seem nice, I want them to be usable!

I get where you're coming from, but I don't think they are saying to never use borders, but instead use them intentionally. They explain better than "Use less borders" below: > 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 The example screenshot on the page shows a use case where they want to highlight a single row from a…

They used the same type of border over the first example, of course it doesn’t work. It’s “our genius design vs average nonexistent nonsense” type of move. Make table/list grid less pronounced, make the selection hint more saturated than a field bg, and now it looks better than #2.

Their selection looks like a hover hint in both cases as if they were afraid to tell a user that a row may have a selection on it.

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

#127

Post by dan1234 »

joebiden2 wrote: post #75

One of the rare moments I simply don't understand how something gets upvoted that much on HN. Edit: this is like "get rich by just following this". It's not wrong, but so much facepalm-inducing, and it's just 100 bucks. Sorry, but: WTF? In my mind there is a bot army upvoting this article at work right now.

At 20,000 copies sold (according to the site), it seems you get rich by writing the book!

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

#128

Post by aeze »

When it comes to design, I find organizing and structuring content particularly challenging compared to things like font size, spacing and color choice.

eg. Given a list of items to display - should I create a grid of cards, a list, or a table? I feel like you could do any of them, but they have different trade-offs that I can't really articulate.

Does this book provide guidance on stuff like that? If not, are there other resources out there?

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

#130

Post by wruza »

waldothedog wrote: post #92
tmtvl wrote: post #79

Earlier quoted context omitted.

> You gotta admit that it looks good I don't have to, and I'm not going to because it looks like crap. Why is "Cancel" just a word instead of a button? And while "Invite" is marginally better, a rounded rectangle is not much of a button either and doesn't immediately signify "oh, I can click this". I know some people prefer flat and featureless design (and there are jokes we could make about that), but that is very p…

What would “immediately” signify the ability to be clicked? And to whom would this sign have such a meaning?

To anyone?

Everyone knows how a button looks, and in case you’re sure that that is a button, I invite you to explain every flat ui to my older relatives, using only words.

Post reply on HN