11 ms·

Rules for creating good-looking user interfaces

353 points by domysee 1y ago

Terretta 1y 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: https://www.heroui.pro/components/application/layouts https://www.heroui.pro/components/application/layouts
- matusp 1y ago
  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 1y 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 1y 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.
amelius 1y ago
My #1 rule: Don't let your boss add features one at a time. It creates terrible UX.
userbinator 1y 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 1y 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 1y ago
  Because they hire designers instead of hiring people who take a scientific approach and observe what real users actually do.
VerifiedReports 1y 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.
- ghssds 1y 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.
  - mixmastamyk 1y ago
    It worked quite well until skinz came in fashion, a self-inflicted issue.
    - moring 1y ago
      Self-inflicted by who?
zahlekhan 1y 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.
scary-size 1y 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. [1] https://www.refactoringui.com/ https://www.refactoringui.com/
- Brajeshwar 1y ago
  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 1y 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 1y 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.
superice 1y 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.
- CrulesAll 1y 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.
keyle 1y ago
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.
- card_zero 1y ago
  Which golden rule do you have in mind? The rule of thirds?
  - balamatom 1y ago
    The Categorical Imperative would be a good start.
    - card_zero 1y ago
      In graphic design!? Actually in UX design, yes, maybe.
- 3abiton 1y ago
rishi_rt 1y 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.
plonq 1y ago
There’s horizontal scrolling on mobile, which is ironic.
bbbbbenji 1y ago
tl;dr: consistency is the key to good-looking user interfaces.
- Klaster_1 1y 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.
deleted 1y ago
[deleted]
wseqyrku 1y ago
don't "design" user interfaces, visualize data structures and iterate to make it intuitive based on usage patterns.
- gyomu 1y 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 1y 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.
kitd 1y 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.
rishi_rt 1y 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.
pembrook 1y 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.
oleggromov 1y 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 1y 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.
- Biganon 1y ago
  Also, grey text on black background. The epitome of good design, as everyone knows.
wdroz 1y 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 1y 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 1y 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?
- ChrisMarshallNY 1y ago
  I don’t think DOET is that much. https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654/ https://www.amazon.com/Design-Everyday-Things-Revised-Expand...
- seaotta 1y ago
  [dead]
tpoacher 1y ago
Next at 11: Rules for creating secure apps, from a salesperson.
oneeyedpigeon 1y ago
Someone needs to send a memo to Apple designers about alignment: https://imgur.com/a/p9mzrRG https://imgur.com/a/p9mzrRG
- eps 1y ago
  This does look messy.
blauditore 1y 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 1y 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.
precompute 1y ago
That was an awesome article.
KronisLV 1y 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. Here's a concrete example of why something like that is a decent example: https://primevue.org/datepicker/ https://primevue.org/datepicker/
- skydhash 1y ago
  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.
lloydatkinson 1y ago
Ironic because this site is broken on mobile
markus_zhang 1y ago
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.
photon_lines 1y 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-interface-design https://photonlines.substack.com/p/an-intuitive-guide-to-int...
2d8a875f-39a2-4 1y 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 1y 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.
renerick 1y 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 1y 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.
npn 1y ago
It still looks like crap though. Not very convincing, eh.
devops000 1y ago
I recommend these booklets: - Refactoring UI - UI Pedia And all video courses from Tailwind CSS team
enraged_camel 1y 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.
KolibriFly 1y ago
The advice to embrace slight imperfections in favor of global consistency is something I learned the hard way
Etheryte 1y ago
Would be nice if the website talking about this worked well on mobile too.
mwkaufma 1y ago
All aesthetics and no usability. How about: don't build the UI in a webview.
presentation 1y 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.
wackget 1y ago
Sorry but based on this person's website, they have no business giving UI advice to people.
65 1y ago
Not sure I should trust said developer if this page is overflowing on iOS.
groby_b 1y ago
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.
constantcrying 1y 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.
watersb 1y 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: https://github.com/gingerbeardman/apple-human-interface-guidelines 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".
HenriTEL 1y ago
The design might be great on your app, but I just had a look at the features page https://lighthouseapp.io/features https://lighthouseapp.io/features and it looksquite messy. Too many of colors and information in the feature tiles, colors of icons in the section headers are off, alignment is odd. As a newcomer, understanding the features on this page takes a lot of efforts.

353 points by domysee 1y 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: https://www.heroui.pro/components/application/layouts https://www.heroui.pro/components/application/layouts

matusp 1y ago
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 1y 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 1y 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.

amelius 1y ago

My #1 rule: Don't let your boss add features one at a time. It creates terrible UX.

userbinator 1y 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 1y 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 1y ago
Because they hire designers instead of hiring people who take a scientific approach and observe what real users actually do.

VerifiedReports 1y 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.

ghssds 1y 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.
- mixmastamyk 1y ago
  It worked quite well until skinz came in fashion, a self-inflicted issue.
  - moring 1y ago
    Self-inflicted by who?

zahlekhan 1y 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.

scary-size 1y 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. [1] https://www.refactoringui.com/ https://www.refactoringui.com/

Brajeshwar 1y ago
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 1y 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 1y 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.

superice 1y 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.

CrulesAll 1y 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.

keyle 1y ago

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.

card_zero 1y ago
Which golden rule do you have in mind? The rule of thirds?
- balamatom 1y ago
  The Categorical Imperative would be a good start.
  - card_zero 1y ago
    In graphic design!? Actually in UX design, yes, maybe.
3abiton 1y ago

rishi_rt 1y 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.

plonq 1y ago

There’s horizontal scrolling on mobile, which is ironic.

bbbbbenji 1y ago

tl;dr: consistency is the key to good-looking user interfaces.

Klaster_1 1y 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.

deleted 1y ago

[deleted]

wseqyrku 1y ago

don't "design" user interfaces, visualize data structures and iterate to make it intuitive based on usage patterns.

gyomu 1y 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 1y 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.

kitd 1y 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.

rishi_rt 1y 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.

pembrook 1y 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.

oleggromov 1y 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 1y 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.
Biganon 1y ago
Also, grey text on black background. The epitome of good design, as everyone knows.

wdroz 1y 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 1y 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 1y 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?

ChrisMarshallNY 1y ago
I don’t think DOET is that much. https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654/ https://www.amazon.com/Design-Everyday-Things-Revised-Expand...
seaotta 1y ago
[dead]

tpoacher 1y ago

Next at 11: Rules for creating secure apps, from a salesperson.

oneeyedpigeon 1y ago

Someone needs to send a memo to Apple designers about alignment: https://imgur.com/a/p9mzrRG https://imgur.com/a/p9mzrRG

eps 1y ago
This does look messy.

blauditore 1y 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 1y 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.

precompute 1y ago

That was an awesome article.

KronisLV 1y 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. Here's a concrete example of why something like that is a decent example: https://primevue.org/datepicker/ https://primevue.org/datepicker/

skydhash 1y ago
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.

lloydatkinson 1y ago

Ironic because this site is broken on mobile

markus_zhang 1y ago

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.

photon_lines 1y 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-interface-design https://photonlines.substack.com/p/an-intuitive-guide-to-int...

2d8a875f-39a2-4 1y 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 1y 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.

renerick 1y 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 1y 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.

npn 1y ago

It still looks like crap though. Not very convincing, eh.

devops000 1y ago

I recommend these booklets: - Refactoring UI - UI Pedia And all video courses from Tailwind CSS team

enraged_camel 1y 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.

KolibriFly 1y ago

The advice to embrace slight imperfections in favor of global consistency is something I learned the hard way

Etheryte 1y ago

Would be nice if the website talking about this worked well on mobile too.

mwkaufma 1y ago

All aesthetics and no usability. How about: don't build the UI in a webview.

presentation 1y 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.

wackget 1y ago

Sorry but based on this person's website, they have no business giving UI advice to people.

65 1y ago

Not sure I should trust said developer if this page is overflowing on iOS.

groby_b 1y ago

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.

constantcrying 1y 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.

watersb 1y 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: https://github.com/gingerbeardman/apple-human-interface-guidelines 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".

HenriTEL 1y ago

The design might be great on your app, but I just had a look at the features page https://lighthouseapp.io/features https://lighthouseapp.io/features and it looksquite messy. Too many of colors and information in the feature tiles, colors of icons in the section headers are off, alignment is odd. As a newcomer, understanding the features on this page takes a lot of efforts.