51 ms·

Visual design rules you can safely follow

• GloriousKoji 4y ago
  > Lower letter spacing and line height with larger text. Raise them with smaller text Am I the only person who enjoys dense text?
  • travisjungroth 4y ago
    For whatever density you like, it’ll probably look better that density scales sublinearly with font size.
  • aimor 4y ago
    I was hoping someone posted this, you're not alone. I hate when lines are spaced so far apart, I think it's actually harder to read but maybe that's just because of all the scrolling. Decreasing the line height for headings is good advice (I think most of the article is pretty good), but when I compare the leading between books and websites it's as if the internet is formatted like learning-to-read children's books.
• rayrag 4y ago
  I recently started following author of this article on Twitter, he shares a lot of tips/tricks/insights about UI, visual design, etc. Highly recommended. And you will more articles like this on his website. He should add navigation to article pages, though. https://anthonyhobday.com/sideprojects/ https://anthonyhobday.com/sideprojects/ https://anthonyhobday.com/sideprojects/visualtechniques/ https://anthonyhobday.com/sideprojects/visualtechniques/ https://twitter.com/hobdaydesign https://twitter.com/hobdaydesign
  • leephillips 4y ago
    It’s worse than that. I liked this article, but it was anonymous and undated. I looked around the site to find out who this was. Despite the author wanting you to know about him, what other people think about his skills, etc., he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL? I finally saw his name in his page about “books I wrote”. I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
    • pessimizer 4y ago
      > Does he want you to guess it from the URL? This is not difficult.
    • rayrag 4y ago
      > It’s worse than that. I liked this article, but it was anonymous and undated. I looked around the site to find out who this was. Despite the author seemingly wanting you to know about him, what other people think about his skills, etc., he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL? I finally saw his name in his page about “books I wrote”. I'm guessing that his website is work in progress or/and he's learning cms he's using. >I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something. Sure, but you should learn from multiple sources as not everyone should teach about everything. It's up to you to connect that knowledge.
      • IIAOPSW 4y ago
        Or, the craziest option, he's writing out of sheer expression of his interests and doesn't care to "build a personal brand" or "gain a following".
    • chrisweekly 4y ago
      Agreed. I do think it's better to publish good ideas on an imperfect site than not to share at all, but yeah, every article needs to have a date on it. Leaving it undated doesn't make it "evergreen", it just makes it annoyingly cut off from the implicit context of the point in time.
      • exodust 4y ago
        Agree about the date. Even saying the year is better than nothing. In another of his articles he begins with "Stripe recently refreshed their website..." but we have no way of knowing what "recent" means. The article might be 10 years old. For someone focused on attention to detail, he has neglected the importance of date in context: https://anthonyhobday.com/sideprojects/attentiontodetail/stripe.html https://anthonyhobday.com/sideprojects/attentiontodetail/str... Sometimes it's okay not to mention date, such as a movie or book review. We know it was written some time after the book or movie was released - a date already known to reader.
  • jijijijij 4y ago
    [dead]
• milliams 4y ago
  A good reason to break "Use near-black and near-white instead of pure black and white" for blacks is if the design will be viewed either on a projector, or with an an OLED screen as both will display pure blacks quite pleasingly.
  • eikenberry 4y ago
    I thought the no-pure white/black was due to human visual perception. That neither occurs in nature and they seem fake/artificial to the viewer. Nothing about how good it looks on the medium.
    • pessimizer 4y ago
      > That neither occurs in nature and they seem fake/artificial to the viewer. It also doesn't occur on monitors. White and black on a screen is not pure, screens aren't that good.
      • eikenberry 4y ago
        Very true. This is more coming from print media where you can get closer to true colors. This might be one of those things that needs a tweak when translating between mediums. Much like optimal line length.
        • carlosjobim 4y ago
          Sadly we're still in the past when it comes to displays to be used outdoors, but if you compare a Kindle in sunlight, the white background is probably an order of magnitude brighter than any normal computer or telephone screen. "Don't use pure black for text" or "don't use a pure white background" are total myths among designers. You'll never have anything close to a pure color on current display technology.
  • navane 4y ago
    I suspect the designers with their near white and near black to have superior monitors that are capable of more contrast than regular users. Ironically my cheap monitor automatically converts pure black and white to near.
• kentonv 4y ago
  > Use near-black and near-white instead of pure black and white Please don't. Reducing contrast of text makes it harder to read. Even if you do it just a little bit, it still makes it a little bit harder to read. Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30. Plus it doesn't even look better. I guess this is subjective but I frequently open the devtools inspector to edit people's CSS to turn their near-black into black and their near-white into white, and every time I'm like "Wow, that looks so much better!" Maybe I'm just a systems engineer with no sense of taste but I absolutely don't understand why anyone wants this.
  • pphysch 4y ago
    Yes. Users can adjust their screen brightness to their personal taste. The "safe" rule would be to use 100% black and 100% white for maximum contrast. Only diverge from that if you have a good reason.
    • 542458 4y ago
      I think that the idea that most users will adjust their monitor to make my website look good is unrealistic.
      • pessimizer 4y ago
        They're not, they're adjusting their monitor to make black and white look good. It has nothing to do with you.
        • 542458 4y ago
          Most content on most users’ screens doesn’t use pure black/white for UI. Most users will (assuming they even know or care how to adjust their monitor, which is far from a given!) adjust their monitor to make most content look good, which will not be the same as making pure black/white UI look good.
• alanbernstein 4y ago
  > Pure black looks unnatural on a screen, and pure white is too bright. Huh? Nothing about text on a screen is "natural". "Too bright" is completely meaningless, you have no idea what my motivations are for the brightness settings on my screen. The content should make use of the full range of brightness, and the user can then adjust the contrast to any point in [0, 1] as desired. This is like suggesting that an audio sample should only use 10% of the dynamic range allowed by the file format, because "speakers are too loud". > some odd shapes have a visual centre that is different from their mathematical centre. "Mathematical" doesn't really mean anything here. Are you referring to the centroid? If anything that is a "more mathematical" concept than a midpoint. The use of this word here makes it look like you want to eschew the technical perspective in favor of the emotional, aesthetic perspective. But a centroid can be computed.
  • whywhywouldyou 4y ago
    This is the entire basis of the article. Use the word "mathematical" where convenient to sound smart, but never come close to defining the word. Sprinkle in a whole bunch more of these opinions-masquerading-as-facts, and there you have it. Same thing with the "too bright". Too bright based on what? Too bright for whom? Doesn't matter. Just follow these opin- I mean rules.
    • nequo 4y ago
      "Mathematical" and "optical" alignment is not the best wording I think. It seems that "align by weight, not by width" would be a better way to summarize the author's advice. But apart from that, it is good advice, and I think the post gives a few more good rules of thumb too.
      • partlysean 4y ago
        I prefer to call it “optical” and “mechanical” alignment, rather than “mathematical.”
        • rbanffy 4y ago
• whywhywouldyou 4y ago
  I love when a series of opinions is presented as rules. It really lets you know how important the author believes they are!
  • s1mon 4y ago
    I doubt that any of these rules are things the author considers to be proprietary opinions. The majority of them are common guidelines that are echoed by any competent graphic or UI designer. Many things like line length and leading have been extensively studied. Human factors researchers take things like readability/legibility seriously. A lot of science goes into signage or other functional uses of text. While the presentation may have struck you as pompous, as far as I can tell, the author is just trying to save people time of researching these things and make it more likely that people won't keep building terrible websites which are hard to read or use. There are a few things like using slightly off-black or off-white that can be controversial, but overall this reads to me like a great place to start if you don't know any better.
  • sbuk 4y ago
    These are a set of extremely good ‘rules of thumb’. General engineering is full of them. One rule not mentioned though is this; “Break any of these rules sooner than do anything outright barbarous”, to paraphrase Orwell. However, to safely break these rules, it helps to know and understand them in the first place.
• Am4TIfIsER0ppos 4y ago
  If you can't use pure black and pure white can you at least use "pure black plus 1" and "pure white minus 1"? If not then how far can you go away from the extremes before it becomes permissible?
• adamrezich 4y ago
  it ought to be clarified that this is from the perspective of digital design, i.e. things that appear on screens. some, but not all of it is applicable to print design. that said, it seems to be a pretty decent list, all told—I clicked the link expecting to find lots of things to complain about, but it's actually alright.
• allenu 4y ago
  A lot of negative comments here, but these are useful rules of thumb when designing UI, especially if you don't have a design background. They're not perfect, sure, but it's a good starting point. A lot of these tips I've learned on my own just analyzing how designers I've worked with did things or noticing how sites I thought were aesthetically pleasing to the eye have done it. I kind of wish I had a summary like this a few years ago.
  • helmholtz 4y ago
    It's wearisome how predictable HN is. I guess I've spent too much time on here (and continue to do so!). Every single time something vaguely design-related comes up, the entire discussion is about how thou shalt not steal my god-given right to use pure-black-on-white. Programmers apparently detest anything even remotely not #000, but fuck me is it ever repetitive and boring. I loved this list.
    • giraffe_lady 4y ago
      I don't think there's a name for this concept but I think of it as like, anti-pretentious pretentiousness. The place I first saw it well described was in a novel where tennis players who spend a lot of time on the court picking up balls develop a fluid motion to launch the ball off the ground with their racket and so avoid bending over to pick it up. It becomes a signal that a player is serious. But then less serious players see that, see that it looks smooth and cool, understand what it signals, and so practice that motion for its own sake. In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are. HN falls hard into this in general. But then combine it with the disdain or even contempt it's fashionable to show towards subjective pursuits like aesthetics, and it gets dialed way up. Like you said it's very predictable. Any time I see a link that has any sort of distinctive design, unique typographic style, or especially authorial tone, I know instantly what a handful of comments are going to be.
      • paulv 4y ago
        > In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are. Truly elite players have ball boys and girls pick up balls for them. Your point, though, reminds me of the Sneetches by Dr. Seuss
• karaterobot 4y ago
  These are good rules of thumb. As a professional designer for coming up on 2 decades, I'd say they are indeed safe to follow in most situations. He gives the good advice that you should only follow the rules when they make sense, and not otherwise. With that in mind, the two rules I disagree with the most are: > Measurements should be mathematically related > Elements should go in order of visual weight Because, whereas most of the other rules are probably good to follow 90% of the time, these feel sort of arbitrary and opinionated. I think making measurements mathematically related is a convenience and is often helpful, but for the same reason that optically centering things is better than mathematically centering them, I think you can easily ignore a mathematical relationship between values if it doesn't look as good. There is nothing inherent about humans that makes us prefer magic numbers, it's just that using them gives us an easy way to achieve visual consistency. If it stops doing that, ignore the ratio. If a grid or your font sizes look better nudged by a pixel or two in one direction or the other, do that instead. With respect to ordering elements by visual weight, my only complaint is that he specifically says "heavier first", rather than "heavier first, or heavier last, both are fine as long as you're consistent". So, it's a nitpick, but it bothered me because it's an easy distinction to make.
  • IgorPartola 4y ago
    I would also say the ordering rule is just plain wrong. In a modal or a wizard I can easily see doing something like this as a good option: [Back] nevermind [NEXT]
    • motoxpro 4y ago
      That example is a nightmare.
    • wlonkly 4y ago
      That specific example is spatial, though. Assuming left to right writing, "next" is on the "forward" side, and "back" on the "back" side.
  • blululu 4y ago
    At the end of the day I feel like you are correct in practice but the advice to follow mathematical relationships is still solid. Yes you are probably going to need to deviate from the mathematical relationship at some points, but these are generally helpful to observe and understand the design challenge. For one thing have a mathematical basis acts as a good starting point. This is helpful for more junior designers, it is good when the assets that are in flux and it is generally useful for getting things close before tuning. Second, having some mathematical conception of the layout can help provide deeper insights into the problems. You can start to formulate things in more regular terms and you can start thinking beyond a layout configuration and consider how the problems generalize. Ultimately people have different methods and you should do what works for you, but I think that this point is still good advice in general.
• luckylion 4y ago
  Does this or something similar exist as a browser plugin? I suck at visual things, and it mostly looks dumb because I don't have an intuition about these things. I could go over a list like this and apply every tip to each element of what I might be working on but that's annoying. Font-size vs line-height, element alignment, button contrast and padding etc feel like things that could be automated -- even if it just ends in "hey, I drew a bunch of lines over your page, maybe you find something that looks like it could be moved to one of them". Does that exist?
• marssaxman 4y ago
  This is well done: the scope is well-contained, the text is clearly written, the ideas are clearly illustrated, and the advice seems helpful. Glad to have read it.
• deleted 4y ago
  [deleted]
• quacked 4y ago
  I deeply hate the style of design that's become popular over the past few years. "No borders, flat text and flat buttons, multiple fonts and font sizes on the screen at all times, heavily simplistic and hidden menus". I use software to build stuff, damn it. I want well-notated and labelled complexity. Stop making my tools look like an elementary school classroom in a dystopian short film.
  • enlyth 4y ago
    The "Tertiary button" example in the article. How is this a button? It's a piece of text. Zero visual indication whatsoever that it functions as a button. I've done my fair share of front end dev and I like modern flat designs, however these text-only buttons take it too far.
    • quacked 4y ago
      I once counted twenty different methods of indicating that something was clickable on a single screen in a Jira build my company was using. They ranged from a button with depth to literally nothing but blank white.
    • alspaca 4y ago
      I liked the piece overall but this felt like granting an imprimatur to dark pattern design.
  • xkcd1963 4y ago
    I recently watched Cowboy Bepop and was astonished how pleasantly the complex and alien UX/UI looked
• deleted 4y ago
  [deleted]
• eric4smith 4y ago
  Cough, cough... HN? "Keep body text at 16px or above 16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read."
  • krapp 4y ago
    Hacker News was designed by someone who considers design a waste of time and a distraction from the purity of information, and who made the site ugly and awkward on purpose to keep normies away. Honestly we're lucky it looks as good as it does.
    • Angelore 4y ago
      One "feature" of an aggressively simplistic design is that it's relatively easy to customize. Here is my personal take (I use stylus extension for firefox to inject the css) https://gist.github.com/Angelore/77999cc2152dfbcd38f18ba6a7a2b08c https://gist.github.com/Angelore/77999cc2152dfbcd38f18ba6a7a...
    • xigoi 4y ago
      IMO, HN looks better than many sites created by professional designers. It allows you to actually read the content instead of waiting ten seconds for the page to load, then scrolling through kilometers of whitespace and unrelated “hero images”.
      • krapp 4y ago
        >It allows you to actually read the content instead of waiting ten seconds for the page to load, then scrolling through kilometers of whitespace and unrelated “hero images”. I'm able to read the content on every site I visit even when it has whitespace and images but to each their own. I'm glad Hacker News serves your needs.
        • xigoi 4y ago
          I'm glad you have a fast unlimited internet connection and a big screen. Not everyone has that privilege.
• deleted 4y ago
  [deleted]
• deleted 4y ago
  [deleted]
• saurik 4y ago
  > Use a line length around 70 characters ... It doesn’t matter too much if your line length is 60 or 80 characters, but go too far either side of that and you might run into subtle readability issues. Says a website using a painfully-large font size that results in a line length of only ~40-characters ;P. That said, despite using a much more reasonable font size, Hacker News goes out of its way to limit line length to ~40 characters even though there is extra margin it could be using to get up to ~50-60. Now, I'm sure some people are going to balk and say that this website--and Hacker News--in fact have longer line lengths and I must be crazy, but the reason they look the way they do to me is because I am reading this on a phone... as are most people doing most of everything they do these days: using actual computers is now somewhat rare. However, I honestly have no issue reading with a ~40 character line length! In truth, I am pretty confident that I prefer it to longer 60-80 character lines: I read books on my phone, and I have the font size set to reflow at ~40 characters per line, and if I move to landscape (at the same size) I find that difficult to track as the lines are simply too long. Now, we might then conclude that this is somehow just obsolete advice caused due to a lot of designers having grown up during a time when people used to have devices (even computers) with larger screens and were maybe more used to seeing long lines of text on large sheets of paper, where obviously everything had longer lines than my narrow phone... ...but no: I'd argue that some of the best typesetters in the field, who had the strongest reason to care about optimizing for legibility and readability, worked for newspapers, and if you pull up a scan of an old paper--whether from the 1980s or the 1860s--you will find that they all prefer ~40 characters per line (and you will find the same with science journals and government registers and most magazines). I will thereby claim that the only reason we put up with 60-80 character lines is because it feels like a waste on a widescreen monitor to enforce such a narrow column and the technology of scrolling makes it extremely awkward to have multiple columns (as anyone who gets angry at navigating PDF articles--almost all of which are typeset with ~40 characters per line--in a web browser experiences viscerally).
  • tomcam 4y ago
    > Hacker News goes out of its way to limit line length to ~40 characters Not so much: https://imgur.com/a/T1hDP8c https://imgur.com/a/T1hDP8c
• random3 4y ago
  (I believe) 80% of design is technical and 20% is creative. This means developer built UIs, documents, etc. could look waaay better by following simple design (typography! included) guidelines. I believe these guidelines exist, but there's no well defined, available, or well-known "grammar" (as in this type of grammmar https://vita.had.co.nz/papers/layered-grammar.html https://vita.had.co.nz/papers/layered-grammar.html) and there's no set of rules. With a proper grammar and rules we could go a very long way. Other examples are "What every engineer should know about..", https://12factor.net/ https://12factor.net/, https://semver.org/ https://semver.org/ etc.
  • exodust 4y ago
    > "80% of design is technical and 20% is creative." Can you provide an example of a 20% creative decision that has no technical aspects?
    • deleted 4y ago
      [deleted]
    • sibit 4y ago
      When/where/if: 1. Illustrations should be used. 2. Photos should be used. 3. IxD (interaction design) / animations. 4. Colour palette selection / creation. 5. Flourishes. These are the things I struggle with when designing generic corporate marking websites. I'm not a designer but I've worn the designer hat many times. I always warn my employer/client that I'm more of a technical designer than a creative one. Nowadays I just stick to application design since it's 100% technical. Example: as someone who's more technical than creative I could have come up with the overall layout of the Excalidraw+[0] website but I don't think I would have thought about adding circles around keywords or the dashed line that leads users down the page. [0]: https://plus.excalidraw.com/ https://plus.excalidraw.com/
      • exodust 4y ago
        Playfulness, "flair" and other emotive forces guide creative decisions usually, but there's nothing stopping a technical person from arriving at similar outcomes via a more technical process. It will take more time and be less fun, less satisfying, but it's possible. For example, once the basic IA is worked out, you could have a phase of the project called "flourishes", where your knowledge of illustrative techniques, eye-tracking, colour theory and UX tricks and so on, guides the design. Along with business needs, communication preferences... Another phase could be "product photography" where knowledge of what makes a good photograph comes into play. But yeh it's usually easier to get a professional designer who enjoys and does these things all day long!
• layer8 4y ago
  > Pure black looks unnatural on a screen Pure blacks only exist on OLED, and to a lesser extent with FALD (not relevant for text). What’s worse, IPS panels only have a nominal contrast ratio of 1:1000 or less. #000 already is only dark gray on them. Please, PLEASE, use pure black for text! > pure white is too bright I’d argue that the brightness of your display is turned up too high if pure white is too bright. It shouldn’t be brighter than a sheet of white paper held next to it, and normally we don’t claim that those are too bright.
  • humanizersequel 4y ago
    >normally we don’t claim that those are too bright I print a lot of books, and I find that a more "cream" colored paper is much more pleasant to read for an extended period of time. YMMV but if there's more than a paragraph of text involved I'd prefer a lower contrast ratio.
    • layer8 4y ago
      I usually adjust the lighting so that reading is comfortable. The same can be done with screen brightness. The benefit of white paper is that when you do require high contrast, you don’t need ultra-bright lighting to achieve it.
      • kuschku 4y ago
        Adjusting the screen brightness means you need to calibrate your screen again from scratch. All other settings have to be redone after changing the brightness, and you need to generate a new color profile. Standard brightness has a fixed value, adjust contrast in your designs, not in the settings of the screen.
        • xigoi 4y ago
          What the fuck are you talking about? Most people don't recalibrate their screens after changing brightness.
• balaji1 4y ago
  Such rules are great help for beginner designers or engineers working without full design specs. Even if experts might debate the reasoning and science, it provides some rails for such folks. The "multiples of 8" for spacing and sizes is one such rule I follow and it is easy to remember. Some of the rules in the original article are harder to remember. Though I will remember the 16px as min font size idea.
• kiawe_fire 4y ago
  It’s really unfortunate that the author started with the most controversial of rules, because I find much of the rest of the article to be quite the helpful summary. Particularly padding and margins - I’ve only recently taken the time to study what makes a design look good vs looking off in terms of spacing, and have come to similar conclusions as the author. I suspect if the rule against pure black on pure white were buried in the middle (or omitted) then the response would be warmer.
  • TAKEMYMONEY 4y ago
    I learned about "too much contrast" from a type designer that painted typefaces by hand. We were taught not to use pure black ink on white paper because it's a bit less legible than softer contrast. I'm not sure why it's so controversial among digital designers. The same person taught me that "optical alignment is often better than mathematical alignment" (which is why the bottom of curved letters often falls slightly below the baseline if you look closely).
    • Dalewyn 4y ago
      >I'm not sure why it's so controversial among digital designers. Assuming you're talking about the "Give me #000000 on #FFFFFF or give me death!" crowd, it's a kneejerk reaction to the cardinal sin of gray-on-gray content that is fucking impossible to read.
      • deleted 4y ago
        [deleted]
      • FullyFunctional 4y ago
        "Kneejerk" is a bit of a down-putting assumption, isn't it? There are many, MANY, reason why someone might disagree with the OP opinion on black and white. I happened to have a few iOS apps where true black is an option (which is desirable on OLED to save battery). A perhaps less common concern is eInk whose dynamic range is quite limited and for which #000000/#FFFFFF greatly enhances readability.
    • 4y ago
• chrstphrknwtn 4y ago
  > Pure black looks unnatural on a screen What does that _actually_ mean? Grey looks more 'natural'?
  • manchmalscott 4y ago
    If I open up word and print out something with a black font color on standard paper, that printed document won't have completely black ink on a completely white paper. Things that are 100% black and 100% white don't actually exist in the real world.
    • chrstphrknwtn 4y ago
      > Things that are 100% black and 100% white don't actually exist in the real world. Notice that this also describes pixels on a display.
• stayux 4y ago
  If you're not well-versed in visual design, it's okay to stick to some basic guidelines. But remember, every rule is just a starting point. If you have a solid understanding of contrast, color, composition, usability, accessibility, and more, you have the freedom to experiment and try new things. In my professional opinion, standardization and commoditization in design have their pros when it comes to production and usability. However, this approach is leading us towards a bland and uninteresting user experience. I'm hoping that the emergence of XR will bring back some of the old-school "skeuomorphic" spirit of exploration, expression, and texture in design. If we keep relying solely on "best practices," we risk being replaced by automation. And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:)
  • JohnFen 4y ago
    But I have to say -- there are a lot of people with a design background, working for major software companies, that produce crap user interfaces too.
    • stayux 4y ago
      The craftsmanship requires dedication, critical thinking and hard work. In the world of lean development and design sprints, the quality of UI is not the important part. Maybe in the near future, only the best designer will survive the shift.
  • dheera 4y ago
    > And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:) Maybe it's time overthrow the W3C and invent HTML6 already, and provide for some proper modern UI widgets instead of needing piles and piles of JavaScript UI-library-of-the-month that create widgets by hacking together a clutter-fest of div hell. Stuff like <hamburger>, <tabset swipeable="true">, <img pinchzoomable="true" onclick="window.lightbox(this)" lowsrc="..." highsrc="..." ultrahighsrc="...">, <ul pulltorefresh="true" onrefresh="foo()"> should be part of it already, <button> should have more sane margins, font, contrast, and border radius choices by default, <hr> should be low contrast by default as the article says, and the default background and text colors should be #f2f2f2/#222222, and not #ffffff/#000000. Visual centering should be implemented in CSS with a neural net. Let's get standards with the beat.
• epolanski 4y ago
  I'm gonna give those rules a go tomorrow. I'm a frontender in a two men team and we have a backoffice application that doesn't require nice ui but still would like to see wheter I can improve it with those rules.
• squokko 4y ago
  These are excellent tips for a programmer who's never thought about design to make something that looks workable. Will you get better results for a few hundred dollars from Upwork? Yes. But before you get to that stage, these rules are good.
• 07814146052 4y ago
  [flagged]
• User23 4y ago
  My favorite thing about this is how it recapitulates why there are twelve inches in a foot.
  • deleted 4y ago
    [deleted]
• kristopolous 4y ago
  I do almost all of these. I'm not a designer but I follow a similar maxim - everyone can be trained to do serviceable design that's good enough.
• SergeAx 4y ago
  > Use near-black I am not buying OLED only smartphones since first Samsung Galaxy to follow this controversy. Black should be black.
  • zozbot234 4y ago
    Yes, the author also says that visually closer elements should be brighter, even in dark mode. If you use pure black for the overall background and dark gray as the fill-in color for frames/highlights, this agrees with the author's recommendation and still leaves you with plenty of contrast to play with. I also agree that pure white should almost never be used in dark mode - it's usually reserved there as a highlight color, for critical warnings that should immediately alert the user.
• teki_one 4y ago
  First step should be: get a cheap TN display and make sure that the page is readable. (The buttons are horrible, but I gave up the hope that modern design will care about usability.)
• keithalewis 4y ago
  I have an idea for a TV show. Have people preaching their "knowledge" actually use what they create. Every time they can't figure out how to use it have an audience member whack them with a nerf bat.
• chriddyp 4y ago
  Curious to see Apple using real black as background on their home page but rgb(29, 29, 31) for their black text.
  • FullyFunctional 4y ago
    O L E D
  • kuschku 4y ago
    That's how it should be – for images, #000000 is fine, but for text, you'll want slightly lower contrast (between #101010 and #222222)
    • eirikbakke 4y ago
      I think the designers are coming from the CMYK world of newspaper printing and such, where, due to alignment issues, text must be printed using a separate black ink ("K" black) even though it could theoretically be produced by mixing Cyan/Magenta/Yellow. This is due to the difficulty of perfectly aligning three different color plates, as well as imperfections in the ink. In printed photographs, on the other hand, all four inks can be mixed to produce a darker black than is seen in the surrounding text ("rich" black). Thus, in newspapers, the contrast ends up being higher in photos than in text. But this is due to limitations of paper printing technology--none of this applies to computer displays, where R/G/B components are always perfectly aligned.
      • kuschku 4y ago
        Even in digital media, you might want a 10000:1 contrast in photos, videos and games, but you only want 10:1 in text. It's not reasonable to constantly change your monitor's settings, especially when you want to display both in the same document. With HDR content, this is already possible, full brightness in an HDR video will be far brighter than #ffffff in css. But even for regular media, this is an issue, which is why you should configure your screen for the maximum possible contrast and then reduce contrast of text in software. If you set text to maximum contrast, you need to reduce contrast in your monitor settings, which then also affects photos (which you obviously don't want).
• XorNot 4y ago
  Urgh, I wish people would just pure black. The number one CSS style hack I end up applying to websites is to shift "grey" text to just solid black, and the difference in legibility is dramatic.
• SCAQTony 4y ago
  As a designer and no a fine artist, pure black type can be used and looks great on this hexadecimal: #E0E0E0
• eek2121 4y ago
  FYI I recommend following U.S. gov't standards: https://designsystem.digital.gov/documentation/developers/ https://designsystem.digital.gov/documentation/developers/ Dark/light mode is fine and all, however be wary of accessibility. Note that the US actually even publishes it's own CSS/JS framework similar to bootstrap. I believe (but I am not positive) it is here: https://designsystem.digital.gov/ https://designsystem.digital.gov/ I don't claim it to be perfect, but the last time I had the opportunity to use it, it put other UI/UX frameworks to shame.
  • at_a_remove 4y ago
    Back when I still did web stuff, at one point I had made a special accessibility stylesheet one could set for the university. Nothing crazy, just bigger fonts, higher contrast, and some of the guidelines at the time were going for "light text on dark backgrounds," so I implemented that as well. Got rid of a lot of the little crufty visual design elements the designers (who were not me but set thhe rules) that look pretty but end up being kind of irritating. Couldn't get anyone to go for it. Just a nice click for "accessibility mode," you know? I've talked about this on HN ad nauseum but it was so frustrating to have this issue ignored. I am in a different field now and try not to let my employers know that I can do web stuff because, but if I ever got back into it, I think I would have to have some kind of employment contract section covering YES WE ARE GOING TO DO THIS I DON'T CARE IF IT TAKES MORE TIME with some kind of slideshow presentation everyone would have to endure each year titled "Your Audience Isn't Just Teens with Gigabit Connections Who Have the Visual Capacity to Discern Dust Particles Drifting By."
  • deleted 4y ago
    [deleted]
  • EricE 4y ago
    I'm a huge fan of it too - their section on color should be required reading by any designer: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie... Whats really nice is it's not just theory, but a ready to deploy system. You don't have to adopt it 100%, but you can drop it into your environment and then tweak it to meet your needs, rather than having to start from scratch.
• 8note 4y ago
  > If you saturate your neutrals you should use warm or cool colours, not both This one seems weird. The left option is much clearer than the right one
• nomilk 4y ago
  For any complete design noobs, like myself, I asked HN for a crash courses in design, and the top recommendation was Refactoring UI by Adam Wathan and Steve Schoger. I studied that ebook over 5 days (it would be possible to read in 1 day), took notes, and found it a delight to read and incredibly unpretentious (sophisticated ideas are conveyed in simple side-by-side comparisons of right vs wrong ways to do things). [1] https://news.ycombinator.com/item?id=31889958 https://news.ycombinator.com/item?id=31889958
  • stakhanov 4y ago
    I recently paid for Refactoring UI, after the rave "reviews" it's getting on HN, but was quite disappointed to find that it's mostly about design in general and doesn't have a lot to say about design problems that are specific to UI and nothing at all that takes into account the time axis of interaction design. I pretty much knew all of this stuff already from having read a much cheaper introductory book on visual design that was written with print in mind. I'm also a bit displeased that "UI" seems to mean "webpage" these days (not even SPAs, but just laying out hypertext and graphics on a screen), whereas I always considered that to be a special case of UI that's so trivial that it almost needs to be thought of as a "degenerate" special case. It used to be called "web design" but that's probably too 90s and wouldn't sell books nowadays. I actually wanted to learn about desktop GUIs, making this wholly the wrong book for me.
    • TuringTest 4y ago
      I self-taught those principles decades ago with "About Face 2.0", "The Design of Everyday Things" and "Don't Make Me Think". Though old, I know they provide solid principles because I still find them relevant today. These come from an era before HCI was a professional discipline taught in schools. I suspect newer books don't teach these general principles because they take for granted that a professional will have learned them already through their formal training, so they can focus on specifics. https://www.amazon.com/About-Face-2-0-Essentials-Interaction/dp/0764526413 https://www.amazon.com/About-Face-2-0-Essentials-Interaction... https://www.amazon.com/-/es/Don-Norman/dp/0465050654/ref=pd_bxgy_img_sccl_1/131-6909325-4981545 https://www.amazon.com/-/es/Don-Norman/dp/0465050654/ref=pd_... https://www.amazon.com/-/es/Steve-Krug/dp/0321965515/ref=pd_bxgy_img_sccl_1/131-6909325-4981545 https://www.amazon.com/-/es/Steve-Krug/dp/0321965515/ref=pd_...
• ornel 4y ago
  I don't understand why there isn't a "home" link somewhere in most pages of his website, the only way to see more of his stuff is to manually edit the URL. I really like his content and respect his skill, so there should be a good reason right?
• zacharachnia 4y ago
  I agree, and another thing too! I think that lorum ipsum dolor.
• creata 4y ago
  Has anyone formally defined (something close to) the idea of the "visual center", as described in the article? I'm guessing that the centroid of the shape isn't the answer.
  • quickthrower2 4y ago
    Makes me think of a guest complaining our (spirit-level levelled) pictures aren't level and adjusting them by hand/eye.
    • SamBam 4y ago
      Are all the horizontal and vertical elements near your picture level? i.e. the ceiling (often not level) the floor (ditto), the door frames, etc. If those aren't then your "level" picture will look uneven.
  • onos 4y ago
    Did some googling and just found a bunch of assertions for where the visual center is in an image. Sounds like it’s “where people perceive” the center to be and that’s about as good a def as is possible.
  • Izkata 4y ago
    My reflex was "center of mass", but with some searches people mostly say in a flat 2d figure it's the same thing as centroid.
  • davnn 4y ago
    Not really formal, but there are a ton of books and articles that describe such things from a psychological standpoint. I can recommend „Dondis, Donis A. A primer of visual literacy. Mit Press, 1974.“ to anyone interested in concepts such as those in the linked article.
  • IIAOPSW 4y ago
    My first guess is it is the centroid. My second guess is because the example isn't a simple convex shape, the brain sees it as two shapes glued together and you want the barrycenter of those.
• deleted 4y ago
  [deleted]
• xkcd1963 4y ago
  "Hard divides catch the eye" marks the hard divides red
• Existenceblinks 4y ago
  > The brightness difference between background and container should be within 12% for dark interfaces, and 7% for light interfaces I only find this useful to me. Some others are ok. Some are I already do. Some are just natural (easy to feel that it's off)
• moron4hire 4y ago
  > Pure black looks unnatural on a screen, and pure white is too bright. Your screen does not reproduce pure black or white. Contrast ratios on LCD displays are already bad enough. No need to make it worse. People have contrast and brightness controls on their displays. Stop making comfort decisions for them. Let the user choose for themselves.
  • kuschku 4y ago
    > Your screen does not reproduce pure black or white The black on my screen is darker than the darkest dark in my environment, and the white is brighter than looking right into my ceiling lamp. For all intents and purposes, it does reproduce pure black and white. For readability, the contrast range should be clamped to that of paper – pure black ink on white paper looks the same as using #444444 on #eeeeee on my (calibrated) monitor. To compensate for people with misconfigured monitors, extending the range to the colors mentioned in the article makes sense, but not any further, as that's going to be painful to look at. Please properly configure your monitor instead. To be able to accurately represent images, the contrast of #000000 to #ffffff needs to be much larger than the contrast of any text in any reasonable situation.
    • kuschku 4y ago
      And before I get the suggestion "just change your screens configuration to only reproduce colors visible on paper": It's useful to be able to reproduce colors far beyond the range of print. Not everything IRL is colored by reflective pigments. From sunsets to iridescent birds, there's lots of colors and contrast ranges available in real life that your screen should accurately produce as well.
• e-dant 4y ago
  Programmers have a lot to learn from designers. Programming is a form of expression between a human and a system. We should finally start treating it that way. Write something beautiful.
  • xkcd1963 4y ago
    Programmers write, designers design. If you do both you are a mixture of both.
    • sbuk 4y ago
      Both solve problems. The OP is absolutely right, there are more parallels than differences.
      • xkcd1963 4y ago
        Any job solve problems.
• ww520 4y ago
  These are good UI design rules, especially for non-designers.
• Daub 4y ago
  An effective collection. Around half of these principles can be generalized as one form or another of background/ foreground contrast.
• auspex 4y ago
  Is there a “who wants to be hired” for UI/UX designers? We have been looking for a good contract designer.
• noduerme 4y ago
  I started reading this and hoped, but never expected, to see something like "everything should line up with something else". This rule actually can be used to generate all the other rules about spacing, kerning, leading, font size, padding, etc. It was the first true piece of "secret" design knowledge I was handed down when I went to work at an ad agency at 15, having already been proficient in Quark and PS/AI but without any formal design training. The rule about alignment based on eye / weight versus mathematical alignment also flows naturally from this. Interestingly, it was the agency director who was not a true designer who told me this; I believe it was her one and only rule for judging design, and it worked quite well. In the years I spent studying design and typography in art college later on, I never once heard anyone mention this rule. But it is the very first thing I bring up with designers I hire. One thing that happens when you follow this rule is that you get an automatic grid of sorts, that isn't necessarily constrained to a standard way of breaking up grids. Using the same measurement increments (e.g. 10 pixels padding, or 1/2" gutters) as the multiple by which things that are lined up take their space from each other, you can get regularity and readability without boredom even in pretty wild designs. Excellent job by this author putting these ... essentially rarely spoken, infrequently taught, but fundamental and quotidian design rules into a clear, digestible format. These are all things that are sort of assumed in design agencies but are rarely elaborated on so clearly.
  • jasmer 4y ago
    "I never once heard anyone mention this rule. " That's because designers use guides. Things that line up with guides, line up with other things. So putting it as the later, aka 'lining up with other things' becomes rather the indirect way of putting it.
    • noduerme 4y ago
      Guides are a bit of a crutch, and smart guides are often a hazard (precisely because of mathematical versus visual centering being different in many cases). They're useful to check later if things line up to the pixel, but they don't help with e.g. creating rhythms between leading and images to find the perfect line height to match the perfect image width/height so that the top and bottom of an image aligns with the ascenders and baseline of the text that flows around it. Guides will not decide for you which element something else should line up with, nor which side of an element to align. Sometimes aligning the left edge of something with the center of something else is appropriate, for example. It's true that small imprecisions in lining things up create subconscious disruption - but most people who've done years of design can spot a 1px misalignment like that without guides. The rule that everything should line up with something else doesn't refer to technical precision. It refers to how you construct and think of where to place each element in your overall design, well before you get to the stage of pixel-level adjustments.
• WA 4y ago
  Isn’t the rule "Closer elements should be lighter" a contradiction with "Keep container colours within brightness limits"? Should a background be darker than the containers it holds? Or should containers be designed as if they are behind a background, basically a hole in the page?
• makach 4y ago
  If you want to be boring, follow the rules. Some of the best design, art, music, code breaks all the rules. Don't misunderstand me, boring is good, predictable and comes with less noise. However, there will be fever prices and innovation will suffer.
  • avereveard 4y ago
    well this is "safe design rules for developers" so I guess that's where being formulaic it comes from, to which "just pay a designer" is a fair answer.
• tpmx 4y ago
  The designers of the Amazon Prime Video app logo should read the article: https://apps.apple.com/us/app/amazon-prime-video/id545519333 https://apps.apple.com/us/app/amazon-prime-video/id545519333
• HellDunkel 4y ago
  Like many of you i was at first sceptical but this is indeed a good list.
• swyx 4y ago
  - Use near-black and near-white instead of pure black and white - Saturate your neutrals - Use high contrast for important elements - Everything in your design should be deliberate - Optical alignment is often better than mathematical alignment - Lower letter spacing and line height with larger text. Raise them with smaller text - Container borders should contrast with both the container and the background - Everything should be aligned with something else - Colours in a palette should have distinct brightness values - If you saturate your neutrals you should use warm or cool colours, not both - Measurements should be mathematically related - Elements should go in order of visual weight - If you use a horizontal grid, use 12 columns - Spacing should go between points of high contrast - Closer elements should be lighter - Make drop shadow blur values double their distance values - Put simple on complex or complex on simple - Keep container colours within brightness limits - Make outer padding the same or more than inner padding - Keep body text at 16px or above - Use a line length around 70 characters - Make horizontal padding twice the vertical padding in buttons - Use two typefaces at most - Nest corners properly - Don’t put two hard divides next to each other
• deleted 4y ago
  [deleted]
• avereveard 4y ago
  > Use near-black and near-white instead of pure black and white sure, I bought a hdr monitor specifically to have graysh blacks and washed out whites.
• mrtechniques 4y ago
  This is absolute dogshit advice LOL
• Aachen 4y ago
  I've noticed that font size is contemporary. It used to be a lot smaller when people had smaller resolution monitors, which seems counterintuitive because it ought to be harder to read with fewer pixels to render those tiny characters. In twenty years, it might be different again. The trend is to larger font sizes, and I've noticed things are already adjusting to that and if you've got a traditional small font size, it'll simply be hard to read. We're basically scaling up interfaces as a whole, slowly, while all the advice is is to increase font size to some arbitrary minimum for readability.
  • prennert 4y ago
    I bet if the font size was given in pt instead of px it would be mostly constant. Because you need a minimum physical size of the letters to be able to read them (like the test at the optometrist). As you get bigger resolution on standard sized (computer) screens, increasing px gives you the same physical size of the letters with more and more detail around the edges etc.
    • account42 4y ago
      For CSS, both px and pt are (supposed to be) physical sizes: 1 px = 0.75 pt 1 px = 1 pixel was the original intention but has not been true for a long time now. The problem is that some people use HDPI screens without (adequate) display scaling - likely to recover screen space from existing bloated desings - and then base their own designs on that. So neither px nor pt end up referring to physical sizes in practice.
    • roelschroeven 4y ago
      I have the impression that it's more than that. Many websites these days allow me to see less text at a time on a 27 inch monitor then I had 35 years ago on a 14 inch monitor. More and more websites look like those books for very young children, with text and line spacing so large that only a few paragraphs (or sometimes not even that) fit on the screen.
  • mitchdoogle 4y ago
    Wouldn't smaller fonts render bigger on old monitors? Higher resolution means you have to use a bigger font. And now you run into a 15 year old website now and then and text looks tiny
• caporaltito 4y ago
  Excellent. This is really the ABC of UI design.
  • TuringTest 4y ago
    This is the ABC of UI style. Design, meanwhile, is the process of establishing goals for a user interface and making sure that the artifact you build serves those goals. Readers please be aware of the difference, as there's a traditional confusion among both terms going on. A UX professional should learn about both perspectives and know how to apply both.
• ecmascript 4y ago
  I love these kind of cheat tips that I can bring up whenever I design, thanks for this!
• tudorw 4y ago
  It's good advice, though I'd set the inner radius a little higher, that is the only element that doesn't quite sit right with me.
• lenkite 4y ago
  Interestingly the mathematical alignment feels less jarring to me. Also tested with a few other people. Maybe this is cultural.
• boxed 4y ago
  > As elements on the screen get closer to the user, they should get lighter. This applies to both light and dark mode UIs, because it matches how the real world works. I am looking around and this seems to me to be a straight up lie. In fact, I can clearly see the opposite if I look out the window. Objects further away get LIGHTER, not darker. Very strange to write something so trivially false with such confidence. Like he would have written "objects fall up"!
  • choult 4y ago
    Try looking at the examples thinking they have depth, oriented so their depth is directly heading away from your eyes. The one with dark on top looks like a tunnel to me; the one with light on top looks like items layered on each other.
    • boxed 4y ago
      The examples cheat. They start with a dark background and then the next layer becomes lighter, then darker again.
  • zero_iq 4y ago
    That's true for very large spaces/distances (except at night) where atmospheric scattering comes into play, but consider looking at a flat surface with stacks of objects on it. Lower elements are typically more occluded from lighting due to shadows from higher and neighbouring objects (ambient occlusion), with objects closer to you getting more illumination. The brain is known to make use of such cues to gauge depth, and it's used in several optical illusions. (You can even make use of this principle with flash photography techniques to create approximate depth maps for surfaces. It's quite effective.) I would argue that a model based on close distances of stacked items (e.g. stack bits of card or paper) is generally a better model than one based on large outdoor spaces, as it is a closer analogy in most situations. (Reading on-screen being reading off a relatively-close surface.) But both can work. Look at screenshots of a game such as Spelunky: dark backgrounds, light foreground objects. The eye is drawn to the lighter surfaces and can ignore the darker background. But if the background was a distant landscape (e.g. Rastan -- don't know why that was my first thought... showing my age!), rather than a relatively close cave wall, your approach of desaturated lighter backgrounds might work just as well, as it would be more realistic. And at night, the opposite would be true.
• bromuk 4y ago
  Agree with them, however I think true black #000000 is useful in this day and age on OLED devices. Having something fade in to the bezel of the device is a nice design statement.
• mitchdoogle 4y ago
  Much of this is current design trends, or even trends from 10 years ago in some cases. I see a lot of Google's material design here.
• bearmode 4y ago
  Speaking as an (ex) graphic designer myself, most of these are very good rules of thumb.
• camillovisini 4y ago
  Last year I've read a book by architect and design theorist Christopher Alexander. He introduces a collection of fundamental properties of wholeness - the Fifteen Fundamental Properties from which life in objects and buildings emerges. I tried to capture the essence of each property, mostly for my own reference I put them here https://camillovisini.com/article/fifteen-fundamental-properties/ https://camillovisini.com/article/fifteen-fundamental-proper...
• ceeam 4y ago
  Starts with > use low contrast Didn't read further.
  • hrnnnnnn 4y ago
    It actually starts with "use near-black and near-white instead of pure black and white". Near black against near white is high contrast.
• josefrichter 4y ago
  Nah. Use black and white freely. They are colors too.
• SomeHacker44 4y ago
  I do not understand the first rule. I want pure black backgrounds, even if "you" wont give me pure white foreground letters. This has become more and more important as I have aged. Maximum contrast please. Especially on OLED.
• batushka3 4y ago
  Author should be used for making soap for the first advice of using near black. These near black texts are KILLING eyes when reading them.
• mahoro 4y ago
  As a software engineer who occasionally creates interfaces, I appreciate these kinds of rules a lot. The most valuable thing is that it gives me the instruments to think and reason about my designs. Many thanks to the author!
• wink 4y ago
  I'm close to 40 now and I'm not using 8pt pixel fonts anymore. But the advice to use 16px normal text fonts was probably written by someone on a mac or other hi-dpi display. On Windows and Linux without 4k I find it horrible. So you're shifting from "not large enough for 50% of your users" to "too large for 50% of your users" - unless you know your user's hardware... The rest is nice but this grinds my gears.
• pxoe 4y ago
  it seems to be bit too opinionated and kinda overly exact in values, in some places. it's eager to go for some kind of look it prefers, instead of being more general (for it to be more flexible to fit within people's own tastes, preferences, and design systems), mostly going for more 'spacier values/look'. even in the first rule, with the 'near-black' just being...gray. picking #222 and trying to pass that off as 'near-black' when #111 is just right there, is a choice. #f2f2f2 as a "near-white" as well, that is not near-, that's off-, and again, there's #fafafa or #f7f7f7. rather than being general, giving proportional suggestions, it's not so much "rule of thumb" but "make the values this", which seems like the opposite of the kind of 'advice' it claims to give. (and even if those are just 'examples' - for this to be a page of reference, one'd want to steer from giving exacts as much as possible. so, maybe give examples in like, drop downs? and make the visuals into actual visual guides?) also, not sure why this kinda random assortment of 'rules' was picked out to be comprised of these ones, and for them to be listed in this way. it doesn't come together into a more systematic approach, it's just kinda all over the place. (unlike if it was ordered more like, 'this is about space; this is about shapes; elements; colors; text; alignment; containers; clarity; complexity; etc.)
• awinter-py 4y ago
  this is 1) highly useful and 2) says things that can't be encoded into any style tool I've ever used it seems like standard-of-care tools like tailwind converge to transliterated css in real-world frontends take something like 'saturate your neutrals' -- to use this automatically, a tool would have to label an element as neutral + figure out the color of the foreground element 'math relationships between spaces' as well -- computers should be great at this (it's math!) but css is doing everything in its power to not run code ever, making it hard css isn't a tool for theming
• FrameworkFred 4y ago
  I love guides like this and I bookmarked this one. It reminds me of a book by Robin Williams (that I remember because of Mork) called "The Non-designers Design and Type Book." I got a lot out of that book because it gave me some visibility into guidelines I wasn't aware of before I read it. It definitely improved the quality and effectiveness of a ton of my work on and off the web. The idea of alignment in this post reminds me of similar ideas in Williams' book, but there are definitely ideas in the post that aren't in the book. I definitely will take the advice of another comment in this thread and try to follow more of the author's content. I think I'll
• spion 4y ago
  > Use near-black and near-white instead of pure black and white This is not safe. During the past few years this became a trend, legibility has suffered greatly and eyestrain has increased significantly for me. It gets even worse when combined with `font-weight: 300` - completely unusable. This is on high quality 4K laptop screen / expensive EIZO FlexScan 32" monitor / Macbook screen - its even worse with other less expensive equipment. "Near" is also open to interpretation.
• EricE 4y ago
  Some really good rules of thumb! If you are interested in diving deeper, there is also a lot of good thinking in the US Web Design System - freely available here: https://designsystem.digital.gov https://designsystem.digital.gov
• sourcecodeplz 4y ago
  This was such a great article. No fluff, just great compacted design tips (rules).
• Teamteam16 4y ago
  Hey ไอ้สสัส