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.
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.
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.
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.
> I can't name a single well-designed app off the top of my head
Which wouldn't be a surprise to anybody who actually cares about good design. Precisely because a really well designed product should just help you do whatever is it needed to help you do, and be all most invisible in doing it. It just worked however you expected it to so well you barely even give it a passing thought. It was unobtrusive. It was as little design as possible. I was not trying to wow you by the fact it's one of the million good-looking apps you've seen.
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.
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.
Or do you mean: simply understand all of human psychology and design UIs that work for everyone? That seems to be what you're saying, but both are impossible. Nobody really understands human psychology, especially those who think they do. Show me a psychology finding that is applicable to UI design and I'll show you a study of 30 college freshman that doesn't replicate. And you cannot design a UI that is intuitive for everyone; people are too different, and the "average person" literally doesn't exist.
So what exactly is your advice? Know everything and apply that knowledge appropriately for your specific situation? React and Kubernetes have clear documentation, tutorials, and canonical ways of doing things. UX design has a couple of clever books. The analogue of "just learn good UX design" is not "just learn React", it's "just learn how to write readable, maintainable, clear, performant code everywhere." It takes decades.
> 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.
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.
Is this the book you recommend people read to learn about "the gestalt"?
Are there any other resources/books/courses you can recommend?
Though I warn you, I read it 30 years ago and I still cannot enter a kitchen without cursing how bad the stove is.
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.
"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.
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.
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?
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 DOM element does "shrink-0 w-6 h-6 mr-2 -ml-1" correspond to?
The "what good looks like" example provided, HeroUI, avoids aligning these:
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.
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.
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.
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".
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.
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.
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...
>> 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.
- 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.
