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

81–90 of 183 posts

Re: Rules for creating good-looking user interfaces

#81

Post by stavros »

VerifiedReports wrote: post #8
ghssds wrote: post #6

Earlier quoted context omitted.

>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 work fine. It was barely usable. Many developers used the colors of the default theme no matter what. Others used the Windows-supplied colors for the background color and maybe the main foreground color, then used fixed, non-customizable colors for eve…

"Barely usable?" WHAT was? The scheme editor was perfectly usable, for well over a decade. "Many developers used the colors of the default theme no matter what" Which is what they were supposed to do, resulting in usable software that honored the user's preferences. And developers didn't have to dick around with color palettes. Win/win. "Others used the Windows-supplied colors for the background color and maybe the m…

Exactly this. Everyone used the default, we never thought about it, and all software looked the same. As a result, everything was consistent, you knew at a glance what everything was, and you could start using it right away. I miss that era, I feel like we've regressed, not least because we no longer have those underlined keyboard shortcuts on every single UI element.

Re: Rules for creating good-looking user interfaces

#82

Post by qzw »

whstl wrote: post #74
akoboldfrying wrote: post #69

Earlier quoted context omitted.

> blatant disrespect Let's stop pretending that "companies" could just do things better at no extra cost. I prefer a desktop UI on a desktop, but I also prefer paying less for software I use, and halving the UI development costs to enable that is a pretty sensible tradeoff.

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.

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

Are they though? My impression is that most companies are just using frameworks or sdks that promise some degree of cross platform uniformity, and that’s why they don’t use the native toolkits. The savings come from not having to develop UI for multiple OS targets.

Re: Rules for creating good-looking user interfaces

#83

Post by dimitrisnl »

keyle wrote: post #17

As a designer first turned developers in the early 2000, I beg of you to learn the gestalt. Frameworks, languages, computers, come and go, but the human body doesn't change and the knowledge I have in design, I carry every day and have barely changed over the years. Sure there are new patterns now... "hamburger buttons" and swiping, but the logic remains the same. Human's don't change quickly. They discover things th…

Any good book recommendations?

Re: Rules for creating good-looking user interfaces

#84

Post by bmacho »

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…

> 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 work fine.

Windows has a high-contrast settings, it turns applications and websites to black-on-white, it works reasonably well (I have it being turned on for some days now), although there are menu items and switch states that are not visible :/

Also the default themes all use black text on bright background for selection which is bad. White text on a dark color is much better but you can change that.

Re: Rules for creating good-looking user interfaces

#85

Post by superice »

tkzed49 wrote: post #39
superice wrote: post #14

Starting from 'what looks good' is putting the cart before the horse. Making a UI usable and well laid out first is key. Practical UI and Refactoring UI are great resources, as long as you read them through a lens of 'what works well?' instead of 'what looks pretty?'. The author is absolutely right in that alignment and consistency are important, but that should really be your starting point. Building a good user int…

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 makes it impossible, but it sure doesn't make it easier. And while Tailwind has a bunch of benefits, especially where it becomes a design system rather than a syntax for CSS, you can achieve ~90% of that by just defining a bunch of color and size variables at the root of your CSS and using that.

I don't mind Tailwind too much for 1:1 mapping with DOM elements, but I also don't really see why inline styles for that case would be bad.

Re: Rules for creating good-looking user interfaces

#87

Post by brabel »

ghssds wrote: post #6
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…

>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 work fine. It was barely usable. Many developers used the colors of the default theme no matter what. Others used the Windows-supplied colors for the background color and maybe the main foreground color, then used fixed, non-customizable colors for eve…

I remember being able to change the color of every window frame, button, selector, scroll bars, and so on. For a time most people had their windows using bright colors with zero regards for good design, they just liked colors.

Re: Rules for creating good-looking user interfaces

#88

Post by superice »

WA wrote: post #80
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.

Tailwind's default sizes add constraints, which makes Tailwind a bit of a design system. Also, Tailwind's default colors are just very pleasant to work with. Even on projects where I don't use Tailwind, I look up the color table in the docs.

Same, I really have nothing bad to say about the Tailwind design system.

I suspect there is a lot of halo effect going on, where if people were asked to judge the pure code aspect of Tailwind vs the design system separately, they'd be much more negative on the code aspect of it, but because the two are conflated and one is very good, Tailwind as a whole is judged to be much better than I personally think it deserved to be. It doesn't help either that forming an opinion on an architecture of code is difficult, and forming an opinion on a designed web page in front of you is easy.

My personal poison is just defining the Tailwind color system and a very basic system of sizes in CSS variables and then using that all over the place. It leaves an escape hatch in place of just using 5px when you really need to, but most of the time we use var(--col-grey-200) and var(--u-4) or var(--u-8)

Re: Rules for creating good-looking user interfaces

#89

Post by KronisLV »

> Now I’m in a different camp. I use the components the library provides as much as possible, even if they don’t fit perfectly, even if I’d like to have something different. This makes the UI consistent across all pages and elements.

I've seen a lot of developers feel like they have to write their own components as much as necessary and the results are very, very often underwhelming, especially when they have a bunch of deadlines - underdocumented, not as good looking as something dozens of people have polished over months or years and more often than not buggy.

That's why I think that for most developers (myself included, I can describe myself as a full stack developer, but definitely not someone who specializes in UI design) grabbing something that can be used off the shelf will be the more sane thing to do, personally I quite like PrimeVue, PrimeReact and PrimeNG for this, alongside PrimeFlex and PrimeIcons, they all fit okay well enough. Maybe some of the others + Tailwind for the brave.

Here's a concrete example of why something like that is a decent example: https://primevue.org/datepicker/

Re: Rules for creating good-looking user interfaces

#90

Post by Valk3_ »

keyle wrote: post #17

As a designer first turned developers in the early 2000, I beg of you to learn the gestalt. Frameworks, languages, computers, come and go, but the human body doesn't change and the knowledge I have in design, I carry every day and have barely changed over the years. Sure there are new patterns now... "hamburger buttons" and swiping, but the logic remains the same. Human's don't change quickly. They discover things th…

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/

Post reply on HN