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

Rules for creating good-looking user interfaces

weberdominik.com

Post reply on HN
Print view View original

151–160 of 183 posts

Re: Rules for creating good-looking user interfaces

#151

Post by naasking »

wpm wrote: post #112
Valk3_ wrote: post #90

Earlier quoted context omitted.

How do you become good at this? Is it simply practising doing UI/UX interfaces over and over and over and over until you get it? Do you have some specific advice on how to get "there" faster? I recently stumbled across this Refactoring UI book[1], heard it's sort of popular, know if it's any good? [1] https://www.refactoringui.com/

Personally, I immediately don’t trust this book because the example on the page of the list UI puts a big red X over the version I prefer and find easier to read.

Half agree. The left version I feel has too many sharp lines and bold distinguishing features, so you don't know where to look, where the version on the right has too few so you don't know where to look.

Re: Rules for creating good-looking user interfaces

#152

Post by KronisLV »

amonith wrote: post #117
whstl wrote: post #74

Earlier quoted context omitted.

Companies are definitely not saving money here. They're actually spending a shit-ton of money on designer-hours and developer-hours in order to have everything custom, but still with a subpar experience. It's similar to accessibility: a huge chunk of free off-the-shelf options are more accessible compared to the non-accessible chimeric design system of most modern web apps and sites.

Here's the funny thing though (as a developer which worked for various companies that didn't have designers): It looks custom designed because... it's not designed at all :D At this point I'm not even sure if what you said is an insult or a compliment. Almost all projects I worked in looked more or less like the following: - a BA meets with the client and creates unstyled wireframes with all of the requested features…

I second this, it’s like people live in completely different worlds when it comes to getting stuff out the door.

Of course, that’s still better than a 1 pizza team of full stack devs attempting to create their custom UI component library from scratch, now that’s a total mess.

Re: Rules for creating good-looking user interfaces

#153

Post by naasking »

superice wrote: post #85
tkzed49 wrote: post #39

Earlier quoted context omitted.

I don't understand when people see Tailwind as anything other than a syntax for CSS. > forget all about the relations of styling rules to eachother This is a hot take, but the more cascading your styles are, the harder they are to read and debug. I've never been upset to find classes that just correspond 1:1 with DOM elements. And that's what Tailwind is doing.

I'm not necessarily arguing in favor of deep cascading, but I don't see how something like this: .form-element, .button { height: 32px; } Is something that can be easily achieved with Tailwind without either using @apply all over the place, effectively now doing regular old CSS but with Tailwind syntax, or by using JS/TS variables extensively making the styling pretty hard to read. Either way, I'm not saying Tailwind…

> Is something that can be easily achieved with Tailwind without either using @apply all over the place, effectively now doing regular old CSS but with Tailwind syntax, or by using JS/TS variables extensively making the styling pretty hard to read.

Define an html component, say MyButton:

    {MyButtonText}
And use that component everywhere and the styles carry through:
People worry about regurgitating the same CSS with Tailwind, while continuing to regurgitate the same HTML structures all over the place. Encouraging inline styling encourages you to stop repeating your HTML, which is a better approach, even for a design system.

Re: Rules for creating good-looking user interfaces

#154

Post by vaylian »

bluGill wrote: post #137
whitepoplar wrote: post #126

Earlier quoted context omitted.

Can you recommend some good books on how to learn these things?

He did - "the design of everyday things" is a book that has been around for decades and is still the best introduction to these. The book doesn't cover computers at all. Though I warn you, I read it 30 years ago and I still cannot enter a kitchen without cursing how bad the stove is.

From reading the original comment, it is not apparent that "the design of everyday things" refers to a book with that title. When I read the comment the first time, I didn't understand it.

Communicating through writing is hard. Just as designing something that can be easily understood is hard.

Re: Rules for creating good-looking user interfaces

#156

Post by groby_b »

It is absolutely funny that he's talking about alignment, and then you see the chevron in the "better" example :)

But, kidding aside, it's a mechanistic view patterned on avoiding egregious missteps. It's rules for creating not-bad-looking user interfaces.

And... I take that. It's better than a lot of what's built. But I encourage every developer to ask "why" when looking at these rules, or when looking at components in a component library. It's a valuable exploration. It will also teach you the most important thing - and understanding when you can break the rules.

Because without an occasionally broken rule, the design will be lifeless and flat.

Re: Rules for creating good-looking user interfaces

#157

Post by VerifiedReports »

card_zero wrote: post #66
VerifiedReports wrote: post #5

Saw a lot of words here. Not a lot of examples. "Dark mode was one of the most requested features for Lighthouse. I refrained a long time from adding it because it adds additional work to every UI task." This reveals a lot about the regression in OSes. Way back in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and…

Most of the world consists of dark objects against a light field. Written letters made with a pen were dark on light for a couple of thousand years. Your scheme is the inverse one.

[dead]

Re: Rules for creating good-looking user interfaces

#158

Post by whstl »

KronisLV wrote: post #152
amonith wrote: post #117

Earlier quoted context omitted.

Here's the funny thing though (as a developer which worked for various companies that didn't have designers): It looks custom designed because... it's not designed at all :D At this point I'm not even sure if what you said is an insult or a compliment. Almost all projects I worked in looked more or less like the following: - a BA meets with the client and creates unstyled wireframes with all of the requested features…

I second this, it’s like people live in completely different worlds when it comes to getting stuff out the door. Of course, that’s still better than a 1 pizza team of full stack devs attempting to create their custom UI component library from scratch, now that’s a total mess.

Grandparent here. Alright, I totally believe you and everyone else, and would probably also be much happier in a less wasteful environment that you mention.

In which industry/company size are you? Maybe I’m looking in the wrong places.

Re: Rules for creating good-looking user interfaces

#159

Post by codr7 »

amonith wrote: post #117
whstl wrote: post #74

Earlier quoted context omitted.

Companies are definitely not saving money here. They're actually spending a shit-ton of money on designer-hours and developer-hours in order to have everything custom, but still with a subpar experience. It's similar to accessibility: a huge chunk of free off-the-shelf options are more accessible compared to the non-accessible chimeric design system of most modern web apps and sites.

Here's the funny thing though (as a developer which worked for various companies that didn't have designers): It looks custom designed because... it's not designed at all :D At this point I'm not even sure if what you said is an insult or a compliment. Almost all projects I worked in looked more or less like the following: - a BA meets with the client and creates unstyled wireframes with all of the requested features…

And on the rare occasions where there is a designer on the team, they just throw their fantasy user interfaces over the fence to be interpreted by developers as well as blamed for any complaints.

What we really need is developers with solid design skills, that should have been part of fullstack from the start.

Re: Rules for creating good-looking user interfaces

#160

Post by RHSeeger »

mtVessel wrote: post #135
fifticon wrote: post #71

Earlier quoted context omitted.

I mourn that the scrollbar has been hunted to extinction, even on windows 11 desktop. Windows explorer slowly starts to behave like a web page app. If you enable many columns in the explorer file view, this design is bonkers: To navigate those columns, you need the horisontal scrollbar. But modern design lunacy dictates that this scrollbar must be INVISIBLE. So you have to guess where it should be, and wave your mous…

At least there's a way out of scrollbar madness (at least, for now): Settings -> Accessibility -> Visual effects -> Always show scrollbars No such luck for title bars, though, or the general Fisher-Price-ification of Windows overall.

Omg, thank you. Just getting my scrollbar back on the browser makes me so happy!
Post reply on HN