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 the same way.
Learn about visual hierarchy, visual rhythm, visual grouping, visual contrast, visual symmetry; the golden rule; the theory of colours etc. Think "subject" first, like in photography. Design for first glance & last glance.
Go beyond "do these align".
Think in the eyes of your user as if it's their first visit, there is no content yet, etc; as well as if it's their 1000th visit; cater for both cases; first and power users.
Understand the gestalt, understand the psychology behind design... Why does bright-red jumps at you, at a visceral level?
Feeling that something feels right is great, but understanding deeply why it feels right is a superpower.
Understand the human brain, its discovery process (how do babies discover the world), "why do westerners look top left first"? And you might innovate in design, instead of designing to not offend anyone; or worst, copying dribbble and other sources because "they spent the money".
Trust me if you can learn React or Kubernetes, you surely can learn the gestalt and understand "the design of everyday things"! That knowledge won't expire on you, you'll start seeing it everywhere and you'll carry it for the rest of your life.
Frieren 13 hours ago [-]
> "hamburger buttons"
I work on a desktop PC and "hamburger buttons" frustrate me beyond reason, in the same way that many other "modern" designs. I understand that cost benefit of having just one implementation for mobile and desktop. But it is still annoying.
> 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.
This is the part that adapting interfaces for the small tactile screen of a phone and then using them on big desktop screens seems so wrong. The design is probably fantastic but it is applied to the wrong interface. The people that designed the desktop interface were good at it and should not have changed. I wish UI designers went back to desktop interfaces for big screens. But mobile has economy of scale on its side so probably it is not going to happen.
> "the design of everyday things"
Great book.
fifticon 11 hours ago [-]
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 mouse around in that area, until the windows 11 geniuses decide to fade in and reveal that - oh My!, THERE WAS A SCROLL BAR THERE ALL ALONG.
So, now naive you might think "OK, we both agree there is a scrollbar there now, so maybe we can keep it in view?"
NOOOOHHH! as soon as you have used it to find your new columns, it must of course disappear again, so you must once again wave around your mouse in its general direction, next time you need it :-(.
A similar insanity happens with window borders in general, because heyaah, wow, minimalism is cool. So when you need to resize a window or, god forbid, drag it by its title bar(), that too is minimized into unrecognisability.
To be clear, the problem here is, that you can't tell where window A ends and window B begins, because of design minimalism, so it is simply hard to discern where the drag-border is.
() which leads me to window title-bar anorexia: It has also become oh so popular to minimize and compact the windows title bar, so that there is no area left where your mouse can grab the window to drag it. Web browsers, among many other apps, are guilty of this. The intent behind is to avoid the "double windows top", where you have first the title bar, then the menu below that (they have been collapsed into one);
but apparently no one thought about "but how can users then drag their windows?"..
I guess we are not supposed to, because the app is supposed to be full-screen maxxed, on the tablet we are drooling on. Or if there is another way, I, director Skinner and Homer's dad did not get the memo.
mtVessel 7 hours ago [-]
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.
RHSeeger 3 hours ago [-]
Omg, thank you. Just getting my scrollbar back on the browser makes me so happy!
eviks 9 hours ago [-]
> Or if there is another way
Of course there is a much better way for all your troubles!
Window move: hold a modifier and click&drag anywhere in the window area instead of wasting time precision hunting the titlebar.
Window resize: same, use a big 30%-window-width area close to the border instead of hunting for those few pixels of an actual resizable border
Horizontal scroll (though strange, Win 11 explorer has horizontal scrollbar immediately visible, though maybe that's a config?): hold a modifier and use the more convenient mouse wheel
(or use a window manager with shortcuts or visual grid)
None of that, of course, is part of your unhelpful OS
> But modern design lunacy dictates that this scrollbar must be INVISIBLE.
In a real modern design there is no lunacy as wide/tall scrollbar is mostly a space waste as you have better control options, and narrow/short ones are still that, but also unergonomic to use. So you'd have a wide/tall invisible one, which in those smaller % of cases you need them would become visible, but still wide/tall ones
> I, director Skinner and Homer's dad did not get the memo.
That's unfortunate indeed that the bad old ways of window management and scrolling persist for so long and the better ways aren't integrated in the OS
lsaferite 8 hours ago [-]
Your suggestions highlight what I hate about the new Android gestures interface. You have to know those patterns in advance and remember them. They aren't visually apparent like scroll bars, drag handles, titles bars, and window frames. I am quite versed in keyboard shortcuts, but keeping *all* of them in my head gets a bit much sometimes. When I forget one, rediscovering it is a serious PITA. The rediscovery (or initial discovery) is orders of magnitude harder for things like the Android gesture interface.
Couple this with App and OS designers feeling a *constant* need to change things and make them "better" and you have a disaster in the works. I've been grousing about Android changing things just to change them as I get older. The other day even my 12 y/o daughter was complaining about them changing how things worked.
Anyway, my point is simply two-fold. First, any UI that requires knowing and remembering interactions that aren't easily discovered *is a problem*. Second, constantly changing UI interaction patterns, even when they are discoverable, *is also a problem*.
eviks 8 hours ago [-]
Oh, sure, those are indeed major fails in all of the OSes - no guides and no easy way to find anything about fundamental operations (it should be easier than googling).
But these are separate issues. For example, even with the scrollbars there can be a change between two behaviors: click on the empty bar jumps to that % or jumps by 1 page. And one can be a click and another a Shift-Click - where in the OS would you discover that??? And the scrollbar width - can only find a registry hack to restore that from some tech article/blog post/ etc, nothing in that waste of the Win 11 Settings app.
bigstrat2003 13 hours ago [-]
> I understand that cost benefit of having just one implementation for mobile and desktop. But it is still annoying.
Of course it's annoying. When desktop software is using mobile UI, that's the result of a deliberate choice to make the software worse (something you care very much about as it affects you) in order to save the company money (something you don't care about). It would be weird if you weren't annoyed by such blatant disrespect for their customers.
akoboldfrying 12 hours ago [-]
> 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.
whstl 11 hours ago [-]
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.
amonith 8 hours ago [-]
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. (BA doesn't really think about UX here, more or less applies some generic patterns).
- the development team grabs the wireframes, uses a generic preexisting "design system" which is the cheapest for the chosen technology (can be whatever: Bootstrap, Tailwind, Material Design) and max. adjusts colors a bit to match the client's brand
That's it. There is no design.
codr7 3 hours ago [-]
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.
whstl 7 hours ago [-]
Doesn't match my experience as a developer.
I haven't worked in a place that doesn't use Figma, since Figma was released.
And haven't worked in a place that didn't get a dedicated designer before the company was 6 months old.
However: I must have worked with 30 different designers in 10 years and TWO of them actually knew how to properly use components and Figma. The rest just copy pasted shit around.
KronisLV 5 hours ago [-]
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.
whstl 3 hours ago [-]
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.
qzw 11 hours ago [-]
> 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.
whstl 6 hours ago [-]
Pretty sure there's places doing it, but I haven't really worked anywhere that used a Vanilla framework, except for the first few months, or have used an app that just uses something off the shelf.
I'm in the YC startup space, though, but have seen this also in enterprise.
eviks 8 hours ago [-]
Yes they can (tm)!
Consider the latest UI disaster - Apple with liquid glass making stuff worse in the most fundamental way - decreasing readability. Doing worse was extra cost, so yeah, in many cases companies can just do things better by not wasting the design money and spending part of it on actual design improvements.
No need to bring up the myth of the huge 50% savings when using a single menu everywhere, there is no way it costs that much (neither does having different padding values per platform)!
jkestner 9 hours ago [-]
They don’t have to do things better. They just need to stop changing things. Computer UIs used to be designed by HCI people. There were volumes of books explaining best practices. Then companies prioritized curb appeal and forgot their own heuristics that were backed by actual research.
bigstrat2003 5 hours ago [-]
I too prefer to get things cheaper (all else being equal). But in this case they aren't equal, which is kind of the rub. I would much rather have desktop software which doesn't suck, even if I had to pay more for it. And of course don't forget that just because the company is saving money, doesn't mean you the customer do. Companies are very happy to cut their own costs and pocket the extra profit, so it's difficult to say whether this reduction in software quality is actually benefiting us by making things cheaper.
mixedbit 14 hours ago [-]
I love "The Design Of Everyday Things", the book doesn't talk much about computer UI, yet the 7 design principles it introduces allow to make much more informed design decisions, where design is not just the matter of taste and aesthetic, but of achieving well-specified goals. For example, if the user has no way to figure out what a button in the UI does, and needs to click the button to check it, and even then can't figure out what has happened, it is a more prominent design failure than misalignment of the button.
andreareina 13 hours ago [-]
Norman doors are still the bane of me.
Lu2025 1 hours ago [-]
Most doors in public places need to open to the outside for ease of evacuation in case of an emergency.
LandR 12 hours ago [-]
My local co-op for about the last 10 years had a norman door, and multiple times a week I would pull rather than push or vice-versa. Then finally a couple of weeks ago they've sellotaped a handwritten push / pull on both sides.
So it mustn't have just been me getting it wrong every time!
oneeyedpigeon 11 hours ago [-]
More doors should take a leaf out of USB-C's book...
bluGill 7 hours ago [-]
Unfortunately either direction doors are harder to weather seal and energy efficiency matters a lot. Just give me a clear handle that indicates which push/pull and I'll do the right thing every time - this is cheaper as well (but it might not fit with your senses)
mattmanser 8 hours ago [-]
One that drives me crazy is copying text from messages. So many apps fall foul of the button problem you describe above.
Even chat apps. In Whatsapp every time I want to copy some message text I have to hunt for where the copy icon is, it appears far away from the message at the top of the screen with 5 other icons, none of which it's clear what they do.
Slack is at least a little better than this, when you highlight a message it offers similar functionality but with a modal where it's easier to find the "copy text" option as it's labelled.
Worse are the apps that try and make it hard to copy text because they want to force you to share via their app to drive engagement.
mtillman 7 hours ago [-]
Designers who remove scroll bars and window borders so you can’t click and drag are computing’s version of a terrorist. It’s an active assault on performance.
CrulesAll 14 hours ago [-]
Really true. If you could recommend three books/papers that go down this path, it would be appreciated. Norman's book is a great start!
stefs 6 hours ago [-]
regarding "go beyond 'do these align'":
> This system is about achieving the best possible design with the least amount of effort. There’s no need to know about the psychological impact of colors, which fonts are best for which purpose, golden ratios, etc. This is expert-level design knowledge that is just distracting if you’re not on that level. The key is to focus on the few important aspects, and not try to optimize every tiny detail.
MarcelOlsz 12 hours ago [-]
The problem with designers is I have to google words like "gestalt" and perform some sort of sacred incantation to "learn" it, all while forcing my eyes to roll back forward.
Who can afford to think like this though? FAANGS? Every designer I've worked with loosely knows some design theory that is impossible to question beyond a quick "hmm maybe a few more pixels on the padding?" and is largely a pixel pusher due to pressure. If I started to talk about visual grouping and the golden rule my boss would have blown a gasket.
I can't name a single well-designed app off the top of my head. I can name a million good-looking ones though. The problem with design is people have to eat. The UI reaches an ideal point but is never frozen, it lasts a limited amount of time before they start shaping the hedge down to a stump. Linear comes to mind. Spotify too. How are you going to reach a good design for a music player when there's 7000 people that need to put in 40 hours a week?
A little lighter on the "gestalt" and a bit heavier on the "will this design murder the weekends of my dev team and scramble the brains of my users" please.
keyle 12 hours ago [-]
I feel the world "gestalt" has been thrown around in your circles a little too heavy handed.
Who can afford to think like this? Anyone curious about the human brain.
If you're concerned about the time to design something well, I would take just as long designing a terrible solution to a problem!
Explaining with words why your design is the way it is isn't a waste of anyone's time, it's having a degree of confidence moving forward. It's having a healthy conversation about the said product.
If anything, knowing what you're doing and being able to justify decisions, leads to a quicker decision making and therefore more time for implementation.
A good design is thoughtful precisely to prevent re-work in the future. That's the point: understand, analyse, solve & apply.
Don't get me started on large companies and their design teams... Going from one design system to another, redesigning every 6 months, and never quite finishing... I've seen those and I'm too old for that.
I'd never imply that good design should be a road block or causing a late Friday evening of work; it takes just as long to implement a terrible design than a good one!
I am merely encouraging everyone to stay curious, and look into building some skills in a field that is timeless, unlike most software engineering fields, and henceforth worthy of your time.
sfn42 9 hours ago [-]
I read your comments and I think you come across as intelligent, thoughtful, knowledgeable and as someone who cares about doing a good job.
Most people aren't those things, certainly not all at once. Most people seem to me like they mostly care about collecting a paycheck. That was their motivation for their studies and it's their motivation for their employment. You see people talking about writing obscure code so others can't replace them, you see this guy above talking about redesigning an app to justify their work week.
I think these people who don't care are the same ones who make up all these excuses - we didn't do a good job because we didn't have time. We didnt do a good job because the client asked for a bad job. We didnt do a good job because if we do a bad job we have more job security.
Any time I see these types of excuses I judge the person making them to be someone I don't want to work with. I don't make these excuses. I always strive to write good and maintainable code. I take the time I need to do things right and if someone pushes me to take shortcuts I push back if I can or I find a compromise like fixing it later(and then actually do so). If a client asks me to build something I know will be bad I tell them and suggest a better approach.
In short, I take responsibility for my own work and I do not allow others to compromise the quality of my work. I do not respect people who blame others for their own shortcomings. Quality is less about constraints and more about having the ability and caring about it. Doing bad work generally isn't faster, if anything it's usually slower at least after a while. It's just that the people who do bad work needs an excuse to explain why their work is bad.
keyle 8 hours ago [-]
Yeah I'm with you on this.
When I contracted (for many years) I always told my employers at the time "my job is to return the value I cost, or more" and that if somehow I couldn't, I'd quit. I never had to quit. Sometimes I'd pivot internally as "it's what the company needs".
It was always a healthy relationship with my customers/employers.
I learnt early on that work is such a big part of life; why suck, or barely scrape the bottom of the barrel 40+ hours a week? Isn't that a complete waste of a life?
You might as well strive at being in the top 5% of "your people".
My business motto has always been "Find good people and do good work" - note that I don't say "the best people" or "amazing work". With age comes pragmatism; life isn't a self-help book. Having good people means that no matter the work, how terrible of a slog it is, you still wake up to work and look forward to the next week; even if this one stank! Surround yourself with people that care, that take it upon themselves to improve and that have your back (no genius psychopaths).
Sure I've come across a plethora of oxygen stealers and time robbers, and I could count on my right hand the people I'd chase up to work with again...
The key is to not let the bad apples ruin your experience (and sometimes, they're overwhelming all over, at every level, and you have no choice but to move on). Take pride in your work and ignore the bad apples. If the business is any good, they'll get weeded out. Constructive honesty works. And if you talk yourself out of job, it wasn't the one. A good dose of daily humour certainly helps.
Jobs in our industry, we change like we change cars. Often we get more jobs than cars actually. So don't get too precious about your first scratch...
Many CEO, CTO, manager, whatever, will recognise quality in their people if they see it. Weasels have a limited shelf time. No matter how good they're at lying, they're scared of people who confidently do a good job quietly. Eventually they'll stand naked in the spotlight without any excuses.
Any job worth doing, is worth doing well - my father said, he was always inspired by the Japanese culture.
When I found myself in a daily slog, I found that routine was extremely important. That walk to coffee. That walk at lunch time. That little detour during commute. Whatever could be small wins throughout the day, I'd take it. It helped the drudged work where I was stuck in for a while, because having nothing to look forward to, is depression.
Work is a marathon, not a race; even if the industry wants you to believe that you're missing out, you're too slow, etc. As long as you can sleep with yourself at night, and it brings the pay check, strive to do your best in any condition and accept the things you cannot change. But don't let bad people define your work.
guappa 12 hours ago [-]
Yeah most designers are bad at their job. Doesn't mean design can't be done properly.
MarcelOlsz 12 hours ago [-]
Maybe before I die I will catch a glimpse of this mythical creature.
leakycap 9 hours ago [-]
If you haven't met a good designer and have been working in any industry more than a few years, maybe you don't know what you're looking for.
Design is everywhere in your life & career & and you'd be lost without it.
Perhaps you need to learn what design is, so you can start to notice it around you. Then, you'll be able to put that knowledge to work yourself and might become the mythical creature you desire to see in the world.
Look up the Joshua Tree principle - I recommend Robyn Williams book series "for Non-Designers" get one that interests you and open your world up!
danaris 9 hours ago [-]
I mean, for a start, literally every human-made object is designed. It may be designed poorly, or designed purely for function, but every one is designed. The pen you use to write notes with, the sticky notes you write on, the traffic cones blocking off the open manhole on the way to work, the manhole cover lying nearby...all of those are designed.
Design isn't just "making things look nice". It's every thought that goes into the structure, function, and aesthetic of an object, whether physical or digital.
stavros 11 hours ago [-]
Citymapper is very well-designed, for example. Just does what you want, when you want it, and gets out of your way otherwise.
Gravityloss 12 hours ago [-]
There's a difference between design and styling. I'm a visual person rather than a verbal thinker, but more like a graphs / topolological kind of visual person, not about alignment, size or colors of things so much at all.
I wish I could specify the content and topology and the computer would do the styling. I don't want to select fonts, font sizes, align boxes etc.
Currently I think the best a computer can do is bullet points. Anything beyond that and you have to become a manual stylizer, which is what I specifically want to avoid.
When using tables, you already you have to start manually adjusting column widths or they become very often very wasteful and hard to read.
carlosjobim 8 hours ago [-]
> I can't name a single well-designed app off the top of my head.
When it's well designed you don't notice it. Surely you've encountered badly designed apps and interfaces in your life. Now think of the apps that don't make those same mistakes.
The purpose of digital technology is so that people who are not developers should be able to use them and be productive with them. Just like cars are designed so that people who are not mechanics or engineers can also drive them.
balamatom 12 hours ago [-]
That's a problem with your bosses, not with your designers.
cheshire_cat 12 hours ago [-]
I assume you're referencing "The Design of Everyday Things" by Donald Norman?
Is this the book you recommend people read to learn about "the gestalt"?
Are there any other resources/books/courses you can recommend?
Valk3_ 10 hours ago [-]
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?
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.
naasking 5 hours ago [-]
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.
xandrius 9 hours ago [-]
Doing more certainly help, especially doing it more but deliberately. Trying new ways, getting feedback and repeat.
bluerooibos 8 hours ago [-]
Yet another $149 course. The best online resources are free.
whitepoplar 8 hours ago [-]
Can you recommend some good books on how to learn these things?
bluGill 7 hours ago [-]
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.
vaylian 4 hours ago [-]
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.
bluGill 3 hours ago [-]
If you don't know the book it wasn't clear. Anyone who knows the book would catch the reference.
lainzhow 8 hours ago [-]
Sure, any good learning sources?
KolibriFly 8 hours ago [-]
Might be time for me to finally re-read The Design of Everyday Things
kannanvijayan 9 hours ago [-]
There's a risk of misaligned perspectives here.
What you've called out is meaningful, but it includes an implied requirement that you're not spelling out: the time and effort and attention to detail, along with the history of experience, to really apply the principles you are talking about to a project.
When I read the main article, I interpreted it from my perspective. I'm mostly a systems person. I can appreciate the points you mentioned, but I don't have those other implied things that are prerequisites for applying those concepts effectively.
Without rules of thumb like these, the UIs I design end up looking like grade school collages. Building UIs that make people _feel good_ when using them is not my core competency. I'm just looking for a baseline level of quality.
I believe there are two cohorts here: the people who want to make UIs that are beautiful, and the people who need to make UIs that are not hot garbage.. and we're reading the article from our respective perspectives.
3abiton 9 hours ago [-]
What are some of your favorite book recommendation on this?
card_zero 12 hours ago [-]
Which golden rule do you have in mind? The rule of thirds?
balamatom 12 hours ago [-]
The Categorical Imperative would be a good start.
card_zero 12 hours ago [-]
In graphic design!? Actually in UX design, yes, maybe.
64d032fe 8 hours ago [-]
"This system is about achieving the best possible design with the least amount of effort. There’s no need to know about the psychological impact of colors, which fonts are best for which purpose, golden ratios, etc."
Translation: I don't need to know why I am doing anything but hey, it looks okay to my eye, and I didn't spend a lot of effort on it. Now I have more time to write a blog post about it that mostly advertises my app.
dimitrisnl 10 hours ago [-]
Any good book recommendations?
leakycap 9 hours ago [-]
Robin Williams - any of her books with "For non-Designers" in the title, even if it is old, it is gold
balamatom 12 hours ago [-]
>Trust me if you can learn React or Kubernetes, you surely can learn the gestalt and understand "the design of everyday things"!
I understand and share the underlying sentiment, but it seems to me like quite a lot of people are suspiciously satisfied with how learning React or Kubernetes has entirely blinded them to the fact that the everyday things do indeed have a design.
amonith 12 hours ago [-]
Everyone wants developers to learn everything all the time...
Software development, infrastructure management, testing, business analysis, design, even marketing and communication sometimes.
We have to pick our battles. Guess what employers ask for from developers during interviews and 90% of the work. Plot twist: not design.
balamatom 5 hours ago [-]
Nor anything else that's as much as intended to be based on taste and good sense, really.
fedeb95 11 hours ago [-]
do you have any pointers on where to start? Books maybe. Thanks
VerifiedReports 17 hours ago [-]
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 work fine.
I think the major Unix GUIs offered something similar. Meanwhile, Apple's vaunted UI was crippled by hard-coded colors everywhere.
Fast-forward what, 20 years? Everyone finally realizes that inverse color schemes (black text on a white background) SUCK. But what does Microsoft do? REMOVE the color-scheme editor from Windows.
We're still running around trying to deal with a "problem" that was solved 25 years ago. And, as a developer, I can tell you it has been pretty shambolic on Apple platforms. I guess you can say they never understood proper color management, but... damn. So many broken controls in iOS after "dark mode" was first added. A massive design and QA failure.
thw_9a83c 14 hours ago [-]
> ...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.
The color scheme editor actually worked quite nicely up until the release of Windows 2000 [0]. After that, Windows XP introduced the "Luna" visual style (Uxtheme.dll) with inflexible, hard-coded colors. Most software developers stopped caring about color palettes, and almost all applications started using hard-coded colors in their GUIs. They tested their apps with the few skins preinstalled with Windows XP: Blue, Olive Green, and Silver.
The thing is, one of the most long-lived built-in schemes in Windows was "high-contrast black," which revealed most color-palette errors in applications.
ghssds 16 hours ago [-]
>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 everything else, making everything invisible or hard to see if you used anything but a white-ish background. Trying to use what we now call dark mode was a big no. At best you could replace the wallpaper by an all-black screen so you feel a little less irradiated by your crt.
defanor 15 hours ago [-]
It is quite similar on the Web still: web browsers (at least Firefox) allow to set user CSS or change default colors, but some websites (the percentage would vary defending on the method used) do not play nicely with that.
Likewise on Unix-like systems: most things can be covered with GTK and Qt themes, but some GUI programs would use a different GUI toolkit, and occasional developers would assume a dark-on-light theme, setting fixed colors accordingly.
Even TUI color interfaces suffer from that: when programs use colors outside of the 16 (that are rather practical to configure) or tweak (e.g., dim, reverse/invert) those for a particular kind of theme.
An annoying thing is that in most those cases things would have been fine if the developers simply did not touch colors. Even the linked article would have been more legible if it had no CSS, with either the usual defaults or a sensibly configured web browser: now it has a text-to-background contrast ratio slightly below the minimum of 7 recommended by WCAG.
ryandrake 14 hours ago [-]
I’ve always firmly believed that the user should have ultimate control over the color, fonts, and overall design of the applications on his system. Not the developer. The developer should just be able to say “this is text” and the OS should respect the user’s chosen text color. The developer should be able to say “this is a window” and the system decides how it’s styled. Every new OS release and every new browser release, we drift farther away from that ideal. If we respected the user’s preferences, we’d have a consistently styled workspace, and all our tools would look and feel like they belonged together.
Handing all of this control over look and feel to developers was a major mistake, and we pay for it over and over by having tools we keep having to re-learn, that look and function slightly differently from each other.
skydhash 8 hours ago [-]
A nice example are epub files. I've basically disable all publisher styles from my reader, especially for novels. Then you have that one file where it's all `div` in the html.
VerifiedReports 12 hours ago [-]
Exactly. That's what made the Windows scheme editor so great.
I never had a problem building my applications in Visual Studio to respect the system color scheme.
VerifiedReports 12 hours ago [-]
Yeah it's baffling that people see fit to override the user's text color, but then leave the background color up to chance; or vice versa. The result? Occasionally invisible text.
If you're going to set the colors of some elements, you have to set them all. It's not that hard a concept.
elevation 13 hours ago [-]
> Others used the Windows-supplied colors for the background color and maybe the main foreground color, then used fixed, non-customizable colors for everything else, making everything invisible or hard to see if you used anything but a white-ish background.
I blame the Developer UX.
In Visual Studio, objects might have defaulted to the system color scheme, but if you ever selected colors for your controls, the palette was a collection of hard-coded colors, not system color classes. The IDE gave no indication that by selecting a new color you were forgoing an accessible, system-derived hue, and the documentation I had at the time (Sam's teach yourself ____ in 24 hours) didn't give the kind of cookbook examples I would have needed to keep my own GUIs system-controlled.
brabel 10 hours ago [-]
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.
SoftTalker 6 hours ago [-]
The same people still send emails and write documents with half a dozen differnet random font faces, colors, and sizes.
VerifiedReports 16 hours ago [-]
"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 main foreground color, then used fixed, non-customizable colors for everything else, making everything invisible or hard to see if you used anything but a white-ish background"
Yep, some did. And? If developers issue defective software, the OS should be degraded? What's your point here? Let's say developers somehow mess up sound reproduction: Should the OS no longer support audio playback?
stavros 11 hours ago [-]
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.
balamatom 12 hours ago [-]
PulseAudio sez hi
mixmastamyk 16 hours ago [-]
It worked quite well until skinz came in fashion, a self-inflicted issue.
moring 15 hours ago [-]
Self-inflicted by who?
mixmastamyk 6 hours ago [-]
In case you can’t see, VerifiedReports states:
“Developers who ignored proper color-palette practices.”
Agreed. Pls vouch for the comment.
VerifiedReports 12 hours ago [-]
Developers who ignored proper color-palette practices.
card_zero 12 hours ago [-]
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.
Lammy 3 hours ago [-]
It's different when it's on a backlit display. Real-world objects are lit with reflected light, not with projected light straight into your eyeballs.
FirmWords 2 hours ago [-]
No, it isn't. You need to go back and look at the history of modern computers, especially personal ones. The standard color scheme was light text on a dark background. Many used white text on a dark-blue background, because it was deemed the most legible. Even after Windows dominated, Word had a checkbox in its settings labeled simply, "Blue background, white text." That setting existed well into the 2000s, and it may still be buried somewhere. Edit: Looks like it was finally removed sometime around 2016; here's one of several posts I found complaining about its removal: https://eileenslounge.com/viewtopic.php?t=36503
Computer makers and users referred to black text on a white background as inverse video. The Atari 8-bits even had a key to toggle between normal and inverse characters when typing (the Atari-logo key). It's even described in the manual: https://www.atarimania.com/documents/atari-800-computer-owne...
To quote the manual: "Inverse video is text being shown in dark letters against a light background."
Then came the "desktop publishing" craze and some attempts to make video screens an analogy for a piece of paper. This fails because paper does not EMIT light. Nor is reading black text off the surface of a glaring light bulb all day a good way to work. Useful for previewing printed output? OK. For all work on a computer? Not so much.
And yet, perhaps in an effort to be "different" from character-based systems, GUIs migrated to inverse color schemes as their default (except for Apple's, which was always inverse and offered no color-scheme management... and still doesn't).
Throughout all of this and into the current day, applications that focus on art, photography, and video & visual effects have implemented a so-called "dark" UI. That's not coincidence.
bigstrat2003 5 hours ago [-]
Yeah the hate for light mode is very badly overstated. It's fine to prefer dark mode, but that doesn't mean light mode sucks in some kind of objective way.
VerifiedReports 3 hours ago [-]
[dead]
bmacho 10 hours ago [-]
> 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.
serial_dev 13 hours ago [-]
> it adds additional work to every UI task
It's not necessarily true, especially if you have a component library and "swappable" themes.
After an upfront investment of setting up the dark and light themes, you can just use your component library and rely on the themes. It's still an investment, but the investment is "constant" and doesn't scale with the number of UI tasks linearly, you don't need to reinvent the wheel, and come up with colors for every feature.
Of course it's a good idea to switch the themes every once in a while, to make sure you didn't miss something, but it's not a huge issue.
KolibriFly 7 hours ago [-]
Feels like we traded decades of OS-level consistency for a bunch of isolated design fiefdoms
FirmWords 2 hours ago [-]
Who must now run around and laboriously (and often erroneously) overhaul their applications when the environment changes.
unsupp0rted 5 hours ago [-]
> properly-written apps would inherit it and work fine
It's nice when there's only a handful of UI controls and they're all system-native. Visual Basic was a godsend.
Want a custom control? Draw one using the shape tool, but then you're in for a world of pain maintaining it and handling edge cases.
Want a shadow around it? Draw a second shape and offset it a bit below and a bit to the right of your first shape. Just don't forget when the window gets resized to move/resize not only the first shape but also its shadow separately.
guappa 12 hours ago [-]
It's still there on KDE
renerick 9 hours ago [-]
I would argue that the second screenshot with redesigned Lighthouse is slightly worse that the "old" design
- the vertical ruler between the sidebar and the content is gone, making page structure less pronounced
- the redesigned dropdown menu has no borders or shadows and blends with the primary background
- the redesigned dropdown menu lost the little dot which highlighted currently selected option, replacing it with a folder icon, but now it's not useful, because it's the same folder icon for each option
- the old design had really nice and noticeable "Add URL" button. I suppose, it was removed in favor of the "plus" button in the sidebar, but it's not nearly as noticeable and without the label it's not clear what it actually does
Sure, the issues in the old version are valid, but I think the redesign introduced more severe usability issues instead of mostly aesthetic issues
naich 9 hours ago [-]
It's also far more difficult to read the numbers relating to the items in the drop down menu. You have to make an effort to track to the right with your eyes to make sure you are in the same row, whereas before the number was right next to the item. There is no need to have the numbers aligned because they are not for comparison.
superice 15 hours ago [-]
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 interface is fundamentally an engineering challenge. I see roughly two camps in building UIs, one designing a pretty picture and then tweaking the CSS until it looks like the picture, the other treating the CSS as rules of how the UI should behave. A simple example would be using display: flex; gap: 32px; on a parent of two elements instead of margin-right: 32px; on the left-most element. While the end result is identical, specifying the gap on the parent is better, because it puts the responsibility for spacing in the correct place. This also goes for the way you define CSS classes and rules, if two values are linked, like the height of your buttons and the height of your input fields, then try and capture that in a single rule, or extract it out to a variable.
A lot of building good UIs becomes much easier once you adopt the engineering approach. Consistency is almost built-in at that point, and that automatically makes your UIs better and easier to understand. It keeps your CSS more maintainable too.
While I'm sure there are ways to achieve this with Tailwind, generally I tend to see developers do the exact opposite when they use tools like that: just define everything with atomic classes inline, and forget all about the relations of styling rules to eachother. Tailwind has some great concepts, like defining a limited set of values to choose from, but be careful to keep the engineering, rules based way of building UIs.
There are so many times we've gone a direction in our products only to figure out that while we could make the page look pretty, it never would work well. It always ends up being some version of 'if we go direction X, then features Y and Z will have to be shoe-horned in and it'll look ugly'. When you get that feeling, take a step back, come up with some different approaches, and go with a better one.
The "make it pretty"-step should really be the last thing you do. If you design your UI with heavily visually simplified components and in black and white, it should still work and feel right. Make it work right, and the pretty will come.
dzungfz 9 hours ago [-]
> The "make it pretty"-step should really be the last thing you do. If you design your UI with heavily visually simplified components and in black and white, it should still work and feel right. Make it work right, and the pretty will come.
Totally agree. I’ve fallen into the trap of chasing “cool” or fancy visuals first, but the most beautiful UI is the one that actually solves the user’s problem. A slick-looking interface that doesn’t work well isn’t really beautiful at all.
tkzed49 12 hours ago [-]
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.
superice 10 hours ago [-]
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.
cal85 5 hours ago [-]
The equivalent tailwind is to just put h-8 (or whatever it is) on whichever form elements and buttons you want to be that height. Tailwind recommends you never use `@apply` - it’s basically an escape hatch for weird, niche interop requirements if you’re not all-in on Tailwind.
What is it about your example that the tailwind approach (h-8) doesn’t achieve?
naasking 4 hours ago [-]
> 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.
And use that component everywhere and the styles carry through:
<MyButton MyButtonText="Click here!" />
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.
WA 11 hours ago [-]
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.
superice 10 hours ago [-]
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)
balamatom 12 hours ago [-]
>And that's what Tailwind is doing.
What DOM element does "shrink-0 w-6 h-6 mr-2 -ml-1" correspond to?
CrulesAll 14 hours ago [-]
"Starting from 'what looks good' is putting the cart before the horse. Making a UI usable and well laid out first is key." This is first principles yet is so often ignored.
watersb 2 hours ago [-]
The 20th Century versions of the Apple Human Interface Guidelines (HIG) were published by people who really cared about usability.
You can find PDF versions of the old Apple HIG online; I just found a GitHub repo that has them:
It was a design movement, with zealots and influencers.
Was comparable to Jeffrey Zeldman's "Design with Web Standards".
The books go into reasons for the design decisions they made.
As such, it's still worth reading, more concrete than Norman's "Design of Everyday Things".
kitd 13 hours ago [-]
I believe what OP refers to as design is largely styling. Design goes much deeper and starts from a position of close empathy with the user. As a dev working on a team that now has professional designers, the difference is night & day. UI design is the most underrated part of our industry IMO. Good design produces happy users far more often than the choice of framework or platform.
Terretta 1 days ago [-]
The notion that the sidebar icons should be aligned with the firm brand logo doesn't make sense to me, these things are not the same. On that point, the before looks better than the after, to me, as the difference is differentiated.
The "what good looks like" example provided, HeroUI, avoids aligning these:
I think the after looks better, it feels more in control, but at the same time, even the before was completely functional and users would be completely happy with it.
travem 17 hours ago [-]
I am not sure what is going on with that screen, but the whole page seems to be "vibrating" in a very distracting way, never encountered that on another site before!
It appears to be related to my display settings on Mac OS. When the text size for the display is set to the "Larger text" it shows this vibrating. When the text size is set to one of the smaller sizes the shaking/vibrating does not appear.
boxed 16 hours ago [-]
The top level icon misalignment is super small and looks like a mistake. The counts for the message list also renders partially renders outside the row for each message for me. So that's a bit of a fail.
blauditore 11 hours ago [-]
Note that good-looking doesn't necessarily translate into well-usable. The examples of alignment and icon weight are more on the side of aesthetics. If there's too much consistency, e.g. everything aligned in the same color with same weight and similar icons, it gets hard to quickly orient on the page and find things. This seems to be a common oversight, even by large companies.
Visual "breaks", such as color changes, spaces, or variation in contrast can help a lot (and still look good). A good example are paragraphs in text: A large chunk of text is more difficult to go through, or re-discover some section, than one divided into paragraphs.
beezlebroxxxxxx 9 hours ago [-]
This is true. Also, over time, well-usable but not exactly the best looking can become the "standard" for good-looking after a while because the design becomes so ubiquitous. You could easily make a beautiful or good looking suite of airplane controls (call it a "rebrand"), but most pilots would probably call it disgusting because it violates the common standards and aesthetics that they rely on.
scary-size 16 hours ago [-]
For engineers doing UIs once in a while, I can recommend Refactoring UI [1]. It has a bunch of practical tips for making your life easier: Picking a color palette, font sizes, margins/padding etc.
I came to suggest this (also mentioned in the article). Not just engineers, I would suggest this to designers and managers too. A few of the books I always suggest to people involved in Product (the manager, engineers, and designers) are “Good Enough Design” (List Apart), “Refactoring UI” (this is actually a pretty recent addition), and the classic “Don’t Make Me Think.”
For anyone in the trenches long enough will know that most of the facts, such as the ones from “Refactoring UI” are common sense. Unfortunately, I’ve realized that it is NOT, even for many designers.
Fraterkes 13 hours ago [-]
This stuff is of course subjective, but a lot of the "improvements" on that page involve adding a bunch of extra whitespace everywhere, the exact trend a lot of people are complaining about nowadays. I'm not saying it's bad per se, but I would not present the design choices on that site as broadly good either.
doright 10 hours ago [-]
It's fascinating, since I don't get the impression that UI elements needing room to "breathe" was an ironclad rule during for example the era of Windows 95. It sounds like folk wisdom for everyone on the same bandwagon of mobile-first. So much creative design potential (and admittedly some inaccessible ones) is lost when these opinions are passed down as the rule of law.
Another bugbear for me personally: rounded corners. Ask online and it feels like people just parrot the idea that rounding is "more friendly and pleasing" over and over, as if blind repetition of an ideal makes it true. But I've never looked at a picture of old webpages or UI frameworks with sharp corners from 20 years ago and go "that's unfriendly." It feels like with this one, a couple research papers came out a while back showing that rounding makes users spend less energy on element identification, and then used that outcome to conclude "well, I guess a huge swathe of UI design is now a solved problem."
Subjectivity died with the need to squeeze out every last drop of "efficiency" out of every UI design. And no, I don't think that rounded corners are friendlier and more pleasing than all alternatives. In fact, I believe they are a staple of the web and modern UI design in general homogenizing into a bland, unremarkable mess, and are thus irritating. I just border-radius: 0; everything globally and call it a day.
wackget 6 hours ago [-]
The first example on that page ("Contacts" box) looks way better in the "before" style. Turns me off their entire proposition because it's obviously incredibly subjective.
rishi_rt 13 hours ago [-]
This article presumes that the usage scenario has been defined already
(by a PM) and the designer is just creating visual representations to enact the said scenario. In that sense, the article seems to attempt to answer what should a developer do, in the absence of designer. In such situations(ideally you'd avoid them), it might be better to defer to the defaults of a framework such as Tailwind which has basic accessibility concerns addressed.
rishi_rt 14 hours ago [-]
Such checklist/rule based approaches do not help anyone. Trying to understand why the said rules work from the standpoint of visual perception is much more beneficial in the long run. Designing with the Mind in Mind by Jeff Johnson (of Xerox PARC) is an introductory book on the why behind UI design guidelines that I often recommend to entry level designers.
oleggromov 12 hours ago [-]
It's such an irony that for such a topic, website content is actually overflowing on a mobile safari and gets out of the container so the website appears broken.
saaaaaam 12 hours ago [-]
Exactly my thought! I didn’t even read the article because if you’re holding yourself out as an arbiter of good design but let something that basic slip through your net then in highly skeptical of your claimed authority.
wseqyrku 13 hours ago [-]
don't "design" user interfaces, visualize data structures and iterate to make it intuitive based on usage patterns.
gyomu 13 hours ago [-]
Underrated comment; way too many designers still approach software design as a visual exercise similar to designing a static composition that looks beautiful in marketing materials; but software is all about data structures and what operations people are going to want to do on them.
So much software these days doesn’t let me do things like “do Z on all Xs matching Y”, instead forcing me to repeat the same slow sequence of actions over and over (swipe, tap button; wait for animation to finish. Go back, swipe, tap button; wait for animation to finish. Go back, swipe, …)
lioeters 12 hours ago [-]
I also think "good-looking" user interface is of lesser priority than "good-functioning" UI. Form follows function. I'd much rather have boring or primitively designed UI that works well and intuitively - meaning, I can find the functions I need when I need it - than a beautiful or modern/trendy interface that I have to struggle with to get work done.
So much of modern UI seems to be created by people whose focus is on "looking good" and less about actually using it daily. For example, YouTube has awkward details that make certain common actions painful, or even impossible. Like a modal window that covers up part of the screen where selection is being made, and it can't be moved or closed without losing all selections. Whoever designed it clearly had not used it enough (or at all) because it's impractical and infuriating as a user. I don't care how good it looks if I can't get it to do what I need.
KolibriFly 8 hours ago [-]
The advice to embrace slight imperfections in favor of global consistency is something I learned the hard way
KronisLV 10 hours ago [-]
> 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.
That's what I do today for small apps. Grab bulma and add just a sprinkle of CSS on top, mostly page specific spacing. Bootstrap, Foundation,... would just work as well.
presentation 6 hours ago [-]
For what it's worth looking at the resulting UI, both the before and after screenshots do not look visually attractive. Whether or not that's a problem for this product, I don't know.
2d8a875f-39a2-4 10 hours ago [-]
>> ...summarize these rules into one sentence, it’d be:
>> Prefer global UI consistency over local optimizations.
I weep for our field, because this should be true beyond the confines of each app.
Instead even on the desktop we have hoards of local "optimisations" - one in each bloated Electron POS.
There's a place for novelty UI - entertainment.
Productivity should have no place for it.
skydhash 8 hours ago [-]
I think the only place left for consistency are Emacs, TUI (but 256 colors and 24 bit enthusiasts are encroaching that), desktop environments like GNOME and KDE.
The most sensible approach is one by mpv. Ship the core logic of your app in a bundle/library. And everyone can build the environment specific UI for that.
plonq 14 hours ago [-]
There’s horizontal scrolling on mobile, which is ironic.
photon_lines 10 hours ago [-]
I agree with the principles discussed here, but am not agreement with the rules based approach. Great looking design isn't about UI 'rules' - it's about making the users of your application love what you're presenting and the application users being able to easily use the features which you're providing without having to think. You can find out more about the principles I follow here: https://photonlines.substack.com/p/an-intuitive-guide-to-int...
userbinator 17 hours ago [-]
I honestly don't care at all about "good-looking"; I care more about "functional". Far too many apps seem to be aiming for the former instead of or at the expense of the latter.
giveita 12 hours ago [-]
Fast too. Do fast. It is so easy in 2025. You just dont do all the fancy shit and it'll be fast! Doesn't take genius like did 10 or 15 years ago.
guappa 11 hours ago [-]
Because they hire designers instead of hiring people who take a scientific approach and observe what real users actually do.
oneeyedpigeon 11 hours ago [-]
Someone needs to send a memo to Apple designers about alignment:
I think as long as <ui element> looks like and feels like what they should be, that’s fine. I absolutely hate designers who try to hide elements from the users or require a mouse swipe to reveal them. Mac and everything on Mac seem to be the worst offenders. ChatGPT website comes into mind too.
wdroz 12 hours ago [-]
> The logo is further on the left than the other icons.
But why the logo of the website/app should be aligned with the icon of the actions?
> The icons are thin, compared to the text, which is bold.
Why this is an issue?
I can somewhat agree with the other points, but I wouldn't call this "bad design." Just because the information can sometimes be presented better doesn't mean the previous way was bad.
Cordiali 11 hours ago [-]
Whenever I read some of these design articles, I usually see this same glaring issue. Without any distinction, they'll present together a grab bag of objective facts, best practices, and simple conventions.
There's nothing objective about using ctrl+s for save, but it's an obvious best practice. So not following can be considered bad design fairly uncontroversially.
The two you mentioned are obviously not in that category. I take issue with the logo one especially, because I find the style of the "bad design" better and more functional.
>[...] I’m probably the only one who noticed that it’s calmer.
Ugh.
benrutter 12 hours ago [-]
The books referenced in the article look great, but mostly seem to cost around $100 each which seems a lot to me compared to reference books in other areas (the O'Reilly one being the obvious exception since it just costs the same as other O'Reilly books)
Anyone have recommendations for UI/UX books for a more modest budget?
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.
Etheryte 7 hours ago [-]
Would be nice if the website talking about this worked well on mobile too.
zahlekhan 16 hours ago [-]
I was looking at the Lighthouse pricing page and got confused. Looks like the strike-through for 50% off doesn’t seem to render on my device.
precompute 10 hours ago [-]
That was an awesome article.
constantcrying 3 hours ago [-]
Here is a much better rule: Make it look like everything else.
E.g. making a bad looking Qt App takes a lot of effort. If you use the things everyone else is using, the same frameworks, the same layouts and standard components, then users will be immediately familiar and know how your interface works. No, you aren't special, no you do not need to reinvent UX with your SaaS product.
devops000 8 hours ago [-]
I recommend these booklets:
- Refactoring UI
- UI Pedia
And all video courses from Tailwind CSS team
tpoacher 12 hours ago [-]
Next at 11: Rules for creating secure apps, from a salesperson.
65 4 hours ago [-]
Not sure I should trust said developer if this page is overflowing on iOS.
mwkaufma 7 hours ago [-]
All aesthetics and no usability. How about: don't build the UI in a webview.
lloydatkinson 10 hours ago [-]
Ironic because this site is broken on mobile
amelius 12 hours ago [-]
My #1 rule:
Don't let your boss add features one at a time. It creates terrible UX.
pembrook 12 hours ago [-]
This blog post is about as insightful as what I'm guessing a blog post titled "Rules for backend development, from a graphic designer" would be.
npn 9 hours ago [-]
It still looks like crap though. Not very convincing, eh.
enraged_camel 8 hours ago [-]
>> It takes an immense amount of effort to implement the functionality of a component library and make sure all components work well together, from a design (colors, sizes, etc.) and behavior (animations, states like disabled, etc.) perspective.
>> It’s best to build on top of a good component library, and not develop your own.
This, so much this. Suffering greatly at work right now because my predecessor decided to go with ShadCN as opposed to using a full-blown, fully-featured component library. Their reasoning: it's better to have "lego blocks" with which we can build our own components because that would give us full control.
Yeah, no. In 99% of cases, you ain't gonna need that level of granularity. Just take something that exists and tweak it until it looks the way you want.
bbbbbenji 14 hours ago [-]
tl;dr: consistency is the key to good-looking user interfaces.
Klaster_1 12 hours ago [-]
As an FE dev, I despise the work "consistency". Consistency is in the eye of beholder, and when you have a designer, QA, product manager and other people who chip in, that quickly goes out of hand. Wherever you have to find a balance, that something becomes a point of contention.
wackget 6 hours ago [-]
Sorry but based on this person's website, they have no business giving UI advice to people.
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 the same way.
Learn about visual hierarchy, visual rhythm, visual grouping, visual contrast, visual symmetry; the golden rule; the theory of colours etc. Think "subject" first, like in photography. Design for first glance & last glance.
Go beyond "do these align".
Think in the eyes of your user as if it's their first visit, there is no content yet, etc; as well as if it's their 1000th visit; cater for both cases; first and power users.
Understand the gestalt, understand the psychology behind design... Why does bright-red jumps at you, at a visceral level?
Feeling that something feels right is great, but understanding deeply why it feels right is a superpower.
Understand the human brain, its discovery process (how do babies discover the world), "why do westerners look top left first"? And you might innovate in design, instead of designing to not offend anyone; or worst, copying dribbble and other sources because "they spent the money".
Trust me if you can learn React or Kubernetes, you surely can learn the gestalt and understand "the design of everyday things"! That knowledge won't expire on you, you'll start seeing it everywhere and you'll carry it for the rest of your life.
I work on a desktop PC and "hamburger buttons" frustrate me beyond reason, in the same way that many other "modern" designs. I understand that cost benefit of having just one implementation for mobile and desktop. But it is still annoying.
> 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.
This is the part that adapting interfaces for the small tactile screen of a phone and then using them on big desktop screens seems so wrong. The design is probably fantastic but it is applied to the wrong interface. The people that designed the desktop interface were good at it and should not have changed. I wish UI designers went back to desktop interfaces for big screens. But mobile has economy of scale on its side so probably it is not going to happen.
> "the design of everyday things"
Great book.
A similar insanity happens with window borders in general, because heyaah, wow, minimalism is cool. So when you need to resize a window or, god forbid, drag it by its title bar(), that too is minimized into unrecognisability. To be clear, the problem here is, that you can't tell where window A ends and window B begins, because of design minimalism, so it is simply hard to discern where the drag-border is.
() which leads me to window title-bar anorexia: It has also become oh so popular to minimize and compact the windows title bar, so that there is no area left where your mouse can grab the window to drag it. Web browsers, among many other apps, are guilty of this. The intent behind is to avoid the "double windows top", where you have first the title bar, then the menu below that (they have been collapsed into one); but apparently no one thought about "but how can users then drag their windows?".. I guess we are not supposed to, because the app is supposed to be full-screen maxxed, on the tablet we are drooling on. Or if there is another way, I, director Skinner and Homer's dad did not get the memo.
Settings -> Accessibility -> Visual effects -> Always show scrollbars
No such luck for title bars, though, or the general Fisher-Price-ification of Windows overall.
Of course there is a much better way for all your troubles! Window move: hold a modifier and click&drag anywhere in the window area instead of wasting time precision hunting the titlebar. Window resize: same, use a big 30%-window-width area close to the border instead of hunting for those few pixels of an actual resizable border Horizontal scroll (though strange, Win 11 explorer has horizontal scrollbar immediately visible, though maybe that's a config?): hold a modifier and use the more convenient mouse wheel (or use a window manager with shortcuts or visual grid) None of that, of course, is part of your unhelpful OS
> But modern design lunacy dictates that this scrollbar must be INVISIBLE.
In a real modern design there is no lunacy as wide/tall scrollbar is mostly a space waste as you have better control options, and narrow/short ones are still that, but also unergonomic to use. So you'd have a wide/tall invisible one, which in those smaller % of cases you need them would become visible, but still wide/tall ones
> I, director Skinner and Homer's dad did not get the memo.
That's unfortunate indeed that the bad old ways of window management and scrolling persist for so long and the better ways aren't integrated in the OS
Couple this with App and OS designers feeling a *constant* need to change things and make them "better" and you have a disaster in the works. I've been grousing about Android changing things just to change them as I get older. The other day even my 12 y/o daughter was complaining about them changing how things worked.
Anyway, my point is simply two-fold. First, any UI that requires knowing and remembering interactions that aren't easily discovered *is a problem*. Second, constantly changing UI interaction patterns, even when they are discoverable, *is also a problem*.
But these are separate issues. For example, even with the scrollbars there can be a change between two behaviors: click on the empty bar jumps to that % or jumps by 1 page. And one can be a click and another a Shift-Click - where in the OS would you discover that??? And the scrollbar width - can only find a registry hack to restore that from some tech article/blog post/ etc, nothing in that waste of the Win 11 Settings app.
Of course it's annoying. When desktop software is using mobile UI, that's the result of a deliberate choice to make the software worse (something you care very much about as it affects you) in order to save the company money (something you don't care about). It would be weird if you weren't annoyed by such blatant disrespect for their customers.
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.
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.
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. (BA doesn't really think about UX here, more or less applies some generic patterns).
- the development team grabs the wireframes, uses a generic preexisting "design system" which is the cheapest for the chosen technology (can be whatever: Bootstrap, Tailwind, Material Design) and max. adjusts colors a bit to match the client's brand
That's it. There is no design.
What we really need is developers with solid design skills, that should have been part of fullstack from the start.
I haven't worked in a place that doesn't use Figma, since Figma was released.
And haven't worked in a place that didn't get a dedicated designer before the company was 6 months old.
However: I must have worked with 30 different designers in 10 years and TWO of them actually knew how to properly use components and Figma. The rest just copy pasted shit around.
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.
In which industry/company size are you? Maybe I’m looking in the wrong places.
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.
I'm in the YC startup space, though, but have seen this also in enterprise.
Consider the latest UI disaster - Apple with liquid glass making stuff worse in the most fundamental way - decreasing readability. Doing worse was extra cost, so yeah, in many cases companies can just do things better by not wasting the design money and spending part of it on actual design improvements. No need to bring up the myth of the huge 50% savings when using a single menu everywhere, there is no way it costs that much (neither does having different padding values per platform)!
So it mustn't have just been me getting it wrong every time!
Even chat apps. In Whatsapp every time I want to copy some message text I have to hunt for where the copy icon is, it appears far away from the message at the top of the screen with 5 other icons, none of which it's clear what they do.
Slack is at least a little better than this, when you highlight a message it offers similar functionality but with a modal where it's easier to find the "copy text" option as it's labelled.
Worse are the apps that try and make it hard to copy text because they want to force you to share via their app to drive engagement.
> This system is about achieving the best possible design with the least amount of effort. There’s no need to know about the psychological impact of colors, which fonts are best for which purpose, golden ratios, etc. This is expert-level design knowledge that is just distracting if you’re not on that level. The key is to focus on the few important aspects, and not try to optimize every tiny detail.
Who can afford to think like this though? FAANGS? Every designer I've worked with loosely knows some design theory that is impossible to question beyond a quick "hmm maybe a few more pixels on the padding?" and is largely a pixel pusher due to pressure. If I started to talk about visual grouping and the golden rule my boss would have blown a gasket.
I can't name a single well-designed app off the top of my head. I can name a million good-looking ones though. The problem with design is people have to eat. The UI reaches an ideal point but is never frozen, it lasts a limited amount of time before they start shaping the hedge down to a stump. Linear comes to mind. Spotify too. How are you going to reach a good design for a music player when there's 7000 people that need to put in 40 hours a week?
A little lighter on the "gestalt" and a bit heavier on the "will this design murder the weekends of my dev team and scramble the brains of my users" please.
Who can afford to think like this? Anyone curious about the human brain.
If you're concerned about the time to design something well, I would take just as long designing a terrible solution to a problem!
Explaining with words why your design is the way it is isn't a waste of anyone's time, it's having a degree of confidence moving forward. It's having a healthy conversation about the said product.
If anything, knowing what you're doing and being able to justify decisions, leads to a quicker decision making and therefore more time for implementation.
A good design is thoughtful precisely to prevent re-work in the future. That's the point: understand, analyse, solve & apply.
Don't get me started on large companies and their design teams... Going from one design system to another, redesigning every 6 months, and never quite finishing... I've seen those and I'm too old for that.
I'd never imply that good design should be a road block or causing a late Friday evening of work; it takes just as long to implement a terrible design than a good one!
I am merely encouraging everyone to stay curious, and look into building some skills in a field that is timeless, unlike most software engineering fields, and henceforth worthy of your time.
Most people aren't those things, certainly not all at once. Most people seem to me like they mostly care about collecting a paycheck. That was their motivation for their studies and it's their motivation for their employment. You see people talking about writing obscure code so others can't replace them, you see this guy above talking about redesigning an app to justify their work week.
I think these people who don't care are the same ones who make up all these excuses - we didn't do a good job because we didn't have time. We didnt do a good job because the client asked for a bad job. We didnt do a good job because if we do a bad job we have more job security.
Any time I see these types of excuses I judge the person making them to be someone I don't want to work with. I don't make these excuses. I always strive to write good and maintainable code. I take the time I need to do things right and if someone pushes me to take shortcuts I push back if I can or I find a compromise like fixing it later(and then actually do so). If a client asks me to build something I know will be bad I tell them and suggest a better approach.
In short, I take responsibility for my own work and I do not allow others to compromise the quality of my work. I do not respect people who blame others for their own shortcomings. Quality is less about constraints and more about having the ability and caring about it. Doing bad work generally isn't faster, if anything it's usually slower at least after a while. It's just that the people who do bad work needs an excuse to explain why their work is bad.
When I contracted (for many years) I always told my employers at the time "my job is to return the value I cost, or more" and that if somehow I couldn't, I'd quit. I never had to quit. Sometimes I'd pivot internally as "it's what the company needs".
It was always a healthy relationship with my customers/employers.
I learnt early on that work is such a big part of life; why suck, or barely scrape the bottom of the barrel 40+ hours a week? Isn't that a complete waste of a life?
You might as well strive at being in the top 5% of "your people".
My business motto has always been "Find good people and do good work" - note that I don't say "the best people" or "amazing work". With age comes pragmatism; life isn't a self-help book. Having good people means that no matter the work, how terrible of a slog it is, you still wake up to work and look forward to the next week; even if this one stank! Surround yourself with people that care, that take it upon themselves to improve and that have your back (no genius psychopaths).
Sure I've come across a plethora of oxygen stealers and time robbers, and I could count on my right hand the people I'd chase up to work with again...
The key is to not let the bad apples ruin your experience (and sometimes, they're overwhelming all over, at every level, and you have no choice but to move on). Take pride in your work and ignore the bad apples. If the business is any good, they'll get weeded out. Constructive honesty works. And if you talk yourself out of job, it wasn't the one. A good dose of daily humour certainly helps.
Jobs in our industry, we change like we change cars. Often we get more jobs than cars actually. So don't get too precious about your first scratch...
Many CEO, CTO, manager, whatever, will recognise quality in their people if they see it. Weasels have a limited shelf time. No matter how good they're at lying, they're scared of people who confidently do a good job quietly. Eventually they'll stand naked in the spotlight without any excuses.
Any job worth doing, is worth doing well - my father said, he was always inspired by the Japanese culture.
When I found myself in a daily slog, I found that routine was extremely important. That walk to coffee. That walk at lunch time. That little detour during commute. Whatever could be small wins throughout the day, I'd take it. It helped the drudged work where I was stuck in for a while, because having nothing to look forward to, is depression.
Work is a marathon, not a race; even if the industry wants you to believe that you're missing out, you're too slow, etc. As long as you can sleep with yourself at night, and it brings the pay check, strive to do your best in any condition and accept the things you cannot change. But don't let bad people define your work.
Design is everywhere in your life & career & and you'd be lost without it.
Perhaps you need to learn what design is, so you can start to notice it around you. Then, you'll be able to put that knowledge to work yourself and might become the mythical creature you desire to see in the world.
Look up the Joshua Tree principle - I recommend Robyn Williams book series "for Non-Designers" get one that interests you and open your world up!
Design isn't just "making things look nice". It's every thought that goes into the structure, function, and aesthetic of an object, whether physical or digital.
I wish I could specify the content and topology and the computer would do the styling. I don't want to select fonts, font sizes, align boxes etc.
Currently I think the best a computer can do is bullet points. Anything beyond that and you have to become a manual stylizer, which is what I specifically want to avoid.
When using tables, you already you have to start manually adjusting column widths or they become very often very wasteful and hard to read.
When it's well designed you don't notice it. Surely you've encountered badly designed apps and interfaces in your life. Now think of the apps that don't make those same mistakes.
The purpose of digital technology is so that people who are not developers should be able to use them and be productive with them. Just like cars are designed so that people who are not mechanics or engineers can also drive them.
Is this the book you recommend people read to learn about "the gestalt"?
Are there any other resources/books/courses you can recommend?
[1] https://www.refactoringui.com/
Though I warn you, I read it 30 years ago and I still cannot enter a kitchen without cursing how bad the stove is.
Communicating through writing is hard. Just as designing something that can be easily understood is hard.
What you've called out is meaningful, but it includes an implied requirement that you're not spelling out: the time and effort and attention to detail, along with the history of experience, to really apply the principles you are talking about to a project.
When I read the main article, I interpreted it from my perspective. I'm mostly a systems person. I can appreciate the points you mentioned, but I don't have those other implied things that are prerequisites for applying those concepts effectively.
Without rules of thumb like these, the UIs I design end up looking like grade school collages. Building UIs that make people _feel good_ when using them is not my core competency. I'm just looking for a baseline level of quality.
I believe there are two cohorts here: the people who want to make UIs that are beautiful, and the people who need to make UIs that are not hot garbage.. and we're reading the article from our respective perspectives.
Translation: I don't need to know why I am doing anything but hey, it looks okay to my eye, and I didn't spend a lot of effort on it. Now I have more time to write a blog post about it that mostly advertises my app.
I understand and share the underlying sentiment, but it seems to me like quite a lot of people are suspiciously satisfied with how learning React or Kubernetes has entirely blinded them to the fact that the everyday things do indeed have a design.
"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 work fine.
I think the major Unix GUIs offered something similar. Meanwhile, Apple's vaunted UI was crippled by hard-coded colors everywhere.
Fast-forward what, 20 years? Everyone finally realizes that inverse color schemes (black text on a white background) SUCK. But what does Microsoft do? REMOVE the color-scheme editor from Windows.
We're still running around trying to deal with a "problem" that was solved 25 years ago. And, as a developer, I can tell you it has been pretty shambolic on Apple platforms. I guess you can say they never understood proper color management, but... damn. So many broken controls in iOS after "dark mode" was first added. A massive design and QA failure.
The color scheme editor actually worked quite nicely up until the release of Windows 2000 [0]. After that, Windows XP introduced the "Luna" visual style (Uxtheme.dll) with inflexible, hard-coded colors. Most software developers stopped caring about color palettes, and almost all applications started using hard-coded colors in their GUIs. They tested their apps with the few skins preinstalled with Windows XP: Blue, Olive Green, and Silver.
[0]: https://imgur.com/a/sXSETJC
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 everything else, making everything invisible or hard to see if you used anything but a white-ish background. Trying to use what we now call dark mode was a big no. At best you could replace the wallpaper by an all-black screen so you feel a little less irradiated by your crt.
Likewise on Unix-like systems: most things can be covered with GTK and Qt themes, but some GUI programs would use a different GUI toolkit, and occasional developers would assume a dark-on-light theme, setting fixed colors accordingly.
Even TUI color interfaces suffer from that: when programs use colors outside of the 16 (that are rather practical to configure) or tweak (e.g., dim, reverse/invert) those for a particular kind of theme.
An annoying thing is that in most those cases things would have been fine if the developers simply did not touch colors. Even the linked article would have been more legible if it had no CSS, with either the usual defaults or a sensibly configured web browser: now it has a text-to-background contrast ratio slightly below the minimum of 7 recommended by WCAG.
Handing all of this control over look and feel to developers was a major mistake, and we pay for it over and over by having tools we keep having to re-learn, that look and function slightly differently from each other.
I never had a problem building my applications in Visual Studio to respect the system color scheme.
If you're going to set the colors of some elements, you have to set them all. It's not that hard a concept.
I blame the Developer UX.
In Visual Studio, objects might have defaulted to the system color scheme, but if you ever selected colors for your controls, the palette was a collection of hard-coded colors, not system color classes. The IDE gave no indication that by selecting a new color you were forgoing an accessible, system-derived hue, and the documentation I had at the time (Sam's teach yourself ____ in 24 hours) didn't give the kind of cookbook examples I would have needed to keep my own GUIs system-controlled.
"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 main foreground color, then used fixed, non-customizable colors for everything else, making everything invisible or hard to see if you used anything but a white-ish background"
Yep, some did. And? If developers issue defective software, the OS should be degraded? What's your point here? Let's say developers somehow mess up sound reproduction: Should the OS no longer support audio playback?
“Developers who ignored proper color-palette practices.”
Agreed. Pls vouch for the comment.
Computer makers and users referred to black text on a white background as inverse video. The Atari 8-bits even had a key to toggle between normal and inverse characters when typing (the Atari-logo key). It's even described in the manual: https://www.atarimania.com/documents/atari-800-computer-owne... To quote the manual: "Inverse video is text being shown in dark letters against a light background."
Then came the "desktop publishing" craze and some attempts to make video screens an analogy for a piece of paper. This fails because paper does not EMIT light. Nor is reading black text off the surface of a glaring light bulb all day a good way to work. Useful for previewing printed output? OK. For all work on a computer? Not so much.
And yet, perhaps in an effort to be "different" from character-based systems, GUIs migrated to inverse color schemes as their default (except for Apple's, which was always inverse and offered no color-scheme management... and still doesn't). Throughout all of this and into the current day, applications that focus on art, photography, and video & visual effects have implemented a so-called "dark" UI. That's not coincidence.
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.
It's not necessarily true, especially if you have a component library and "swappable" themes.
After an upfront investment of setting up the dark and light themes, you can just use your component library and rely on the themes. It's still an investment, but the investment is "constant" and doesn't scale with the number of UI tasks linearly, you don't need to reinvent the wheel, and come up with colors for every feature.
Of course it's a good idea to switch the themes every once in a while, to make sure you didn't miss something, but it's not a huge issue.
It's nice when there's only a handful of UI controls and they're all system-native. Visual Basic was a godsend.
Want a custom control? Draw one using the shape tool, but then you're in for a world of pain maintaining it and handling edge cases.
Want a shadow around it? Draw a second shape and offset it a bit below and a bit to the right of your first shape. Just don't forget when the window gets resized to move/resize not only the first shape but also its shadow separately.
- the vertical ruler between the sidebar and the content is gone, making page structure less pronounced - the redesigned dropdown menu has no borders or shadows and blends with the primary background - the redesigned dropdown menu lost the little dot which highlighted currently selected option, replacing it with a folder icon, but now it's not useful, because it's the same folder icon for each option - the old design had really nice and noticeable "Add URL" button. I suppose, it was removed in favor of the "plus" button in the sidebar, but it's not nearly as noticeable and without the label it's not clear what it actually does
Sure, the issues in the old version are valid, but I think the redesign introduced more severe usability issues instead of mostly aesthetic issues
Building a good user interface is fundamentally an engineering challenge. I see roughly two camps in building UIs, one designing a pretty picture and then tweaking the CSS until it looks like the picture, the other treating the CSS as rules of how the UI should behave. A simple example would be using display: flex; gap: 32px; on a parent of two elements instead of margin-right: 32px; on the left-most element. While the end result is identical, specifying the gap on the parent is better, because it puts the responsibility for spacing in the correct place. This also goes for the way you define CSS classes and rules, if two values are linked, like the height of your buttons and the height of your input fields, then try and capture that in a single rule, or extract it out to a variable.
A lot of building good UIs becomes much easier once you adopt the engineering approach. Consistency is almost built-in at that point, and that automatically makes your UIs better and easier to understand. It keeps your CSS more maintainable too.
While I'm sure there are ways to achieve this with Tailwind, generally I tend to see developers do the exact opposite when they use tools like that: just define everything with atomic classes inline, and forget all about the relations of styling rules to eachother. Tailwind has some great concepts, like defining a limited set of values to choose from, but be careful to keep the engineering, rules based way of building UIs.
There are so many times we've gone a direction in our products only to figure out that while we could make the page look pretty, it never would work well. It always ends up being some version of 'if we go direction X, then features Y and Z will have to be shoe-horned in and it'll look ugly'. When you get that feeling, take a step back, come up with some different approaches, and go with a better one.
The "make it pretty"-step should really be the last thing you do. If you design your UI with heavily visually simplified components and in black and white, it should still work and feel right. Make it work right, and the pretty will come.
Totally agree. I’ve fallen into the trap of chasing “cool” or fancy visuals first, but the most beautiful UI is the one that actually solves the user’s problem. A slick-looking interface that doesn’t work well isn’t really beautiful at all.
> 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.
.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.
What is it about your example that the tailwind approach (h-8) doesn’t achieve?
Define an html component, say MyButton:
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.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)
What DOM element does "shrink-0 w-6 h-6 mr-2 -ml-1" correspond to?
You can find PDF versions of the old Apple HIG online; I just found a GitHub repo that has them:
https://github.com/gingerbeardman/apple-human-interface-guid...
It was a design movement, with zealots and influencers.
Was comparable to Jeffrey Zeldman's "Design with Web Standards".
The books go into reasons for the design decisions they made.
As such, it's still worth reading, more concrete than Norman's "Design of Everyday Things".
The "what good looks like" example provided, HeroUI, avoids aligning these:
https://www.heroui.pro/components/application/layouts
It appears to be related to my display settings on Mac OS. When the text size for the display is set to the "Larger text" it shows this vibrating. When the text size is set to one of the smaller sizes the shaking/vibrating does not appear.
Visual "breaks", such as color changes, spaces, or variation in contrast can help a lot (and still look good). A good example are paragraphs in text: A large chunk of text is more difficult to go through, or re-discover some section, than one divided into paragraphs.
[1] https://www.refactoringui.com/
For anyone in the trenches long enough will know that most of the facts, such as the ones from “Refactoring UI” are common sense. Unfortunately, I’ve realized that it is NOT, even for many designers.
Another bugbear for me personally: rounded corners. Ask online and it feels like people just parrot the idea that rounding is "more friendly and pleasing" over and over, as if blind repetition of an ideal makes it true. But I've never looked at a picture of old webpages or UI frameworks with sharp corners from 20 years ago and go "that's unfriendly." It feels like with this one, a couple research papers came out a while back showing that rounding makes users spend less energy on element identification, and then used that outcome to conclude "well, I guess a huge swathe of UI design is now a solved problem."
Subjectivity died with the need to squeeze out every last drop of "efficiency" out of every UI design. And no, I don't think that rounded corners are friendlier and more pleasing than all alternatives. In fact, I believe they are a staple of the web and modern UI design in general homogenizing into a bland, unremarkable mess, and are thus irritating. I just border-radius: 0; everything globally and call it a day.
So much software these days doesn’t let me do things like “do Z on all Xs matching Y”, instead forcing me to repeat the same slow sequence of actions over and over (swipe, tap button; wait for animation to finish. Go back, swipe, tap button; wait for animation to finish. Go back, swipe, …)
So much of modern UI seems to be created by people whose focus is on "looking good" and less about actually using it daily. For example, YouTube has awkward details that make certain common actions painful, or even impossible. Like a modal window that covers up part of the screen where selection is being made, and it can't be moved or closed without losing all selections. Whoever designed it clearly had not used it enough (or at all) because it's impractical and infuriating as a user. I don't care how good it looks if I can't get it to do what I need.
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/
I weep for our field, because this should be true beyond the confines of each app.
Instead even on the desktop we have hoards of local "optimisations" - one in each bloated Electron POS.
There's a place for novelty UI - entertainment.
Productivity should have no place for it.
The most sensible approach is one by mpv. Ship the core logic of your app in a bundle/library. And everyone can build the environment specific UI for that.
https://imgur.com/a/p9mzrRG
But why the logo of the website/app should be aligned with the icon of the actions?
> The icons are thin, compared to the text, which is bold.
Why this is an issue?
I can somewhat agree with the other points, but I wouldn't call this "bad design." Just because the information can sometimes be presented better doesn't mean the previous way was bad.
There's nothing objective about using ctrl+s for save, but it's an obvious best practice. So not following can be considered bad design fairly uncontroversially.
The two you mentioned are obviously not in that category. I take issue with the logo one especially, because I find the style of the "bad design" better and more functional.
>[...] I’m probably the only one who noticed that it’s calmer.
Ugh.
Anyone have recommendations for UI/UX books for a more modest budget?
https://www.amazon.com/Design-Everyday-Things-Revised-Expand...
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.
E.g. making a bad looking Qt App takes a lot of effort. If you use the things everyone else is using, the same frameworks, the same layouts and standard components, then users will be immediately familiar and know how your interface works. No, you aren't special, no you do not need to reinvent UX with your SaaS product.
- Refactoring UI
- UI Pedia
And all video courses from Tailwind CSS team
Don't let your boss add features one at a time. It creates terrible UX.
>> It’s best to build on top of a good component library, and not develop your own.
This, so much this. Suffering greatly at work right now because my predecessor decided to go with ShadCN as opposed to using a full-blown, fully-featured component library. Their reasoning: it's better to have "lego blocks" with which we can build our own components because that would give us full control.
Yeah, no. In 99% of cases, you ain't gonna need that level of granularity. Just take something that exists and tweak it until it looks the way you want.