11 ms·

Practical Tips for Cheating at Design

480 points by marvinpinto 9y ago

fenwick67 9y ago
TBH I am starting to hate the subtle box-shadow on card components, including the example they provide as "better" [1]. It's getting to a point where it's hard to see the edges, especially if I have f.lux on or need to clean my glasses. A regular border is easier to spot and more definite. It's not skeuomorphic but it's more functional. [1] https://cdn-images-1.medium.com/max/800/1*qH-2RAS3rbnql-vpP8flmg.png https://cdn-images-1.medium.com/max/800/1*qH-2RAS3rbnql-vpP8...
- kaiby 9y ago
  Another concern is performance issues with box-shadow. A product I worked on displayed hundreds of twitter-like messages, each with its own box-shadow. Scrolling on less powerful devices would noticeably thrash. Disabling box-shadow improved it significantly. This was back in ~2012, so perhaps devices have become more powerful since then for this issue to be negligible.
  - nsriv 9y ago
    This is still a major design consideration for developing world mobile apps with webviews and sites, removing box shadows tripled time-on-site immensely for a site I designed for a client.
  - seanmcdirmid 9y ago
    Was this WPF by any chance? They really messed up on their drop shadow implementations, enough to cause a lot of performance problems that weren’t really necessary.
- Canadauni 9y ago
  Is there a third alternative to separating card components? I don't really like using borders and box-shadow while aesthetically pleasing isn't as accessible or performative. I guess one could make liberal use of white space but then the component isn't really a card anymore.
  - fenwick67 9y ago
    A different background on the card versus its container
sp332 9y ago
I like most of these, especially the different ways of making a hierarchy stand out. But I would say that if you're going to use gray text, pick out the exact shade using a really crappy LCD screen, maybe on an old phone, to make sure it's legible. Sites that use very light gray make me think the designer picked the color on a 5k iMac with the lights off. Also, make your buttons look like buttons.
- joshribakoff 9y ago
  There's also automated WCAG tools that check for "contrast errors". For example you should ensure you provide background colors as a fallback if the user has background images disabled or the image has not downloaded yet
cpburns2009 9y ago
Half of this advice hinders usability. #2.1: Reducing the opacity of your text makes it harder to read. #4: Borders help logically separate areas of an interface. Throwing in more white-space is wasteful. #4.3: Gratuitous white-space is wasteful, especially if you have limited screen real-estate (i.e., mobile). #7 is a major pet-peeve of mine which I cannot agree with. If it's a button, make it look like a button. Nothing is more confusing than a button that just looks like some text label.
- JoshMnem 9y ago
  I like borders too. They often help make it easier to understand the layout from a quick glance.
  - wlesieutre 9y ago
    Especially in contexts where there’s more then one hierarchy along more than one axis. UIs where you have content in the middle with multiple columns and sidebars and toolbars turns into a mess with the no borders flat design approach.
- sameji 9y ago
  I have to disagree. In an absolute sense you are correct, however you're missing the relative benefit of each point. #2.1: Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. #4: Why are you worried about white-space? If you have space, you can use it. If you run out, then you have to start rationing and using other visual tools. Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. #4.3: So create a responsive layout for mobile that uses more borders where necessary. #7: This is a major (and valid) criticism of flat UX, but slightly adjacent to the point in the article. The article says you don't need a background colour for every button, which is good advice.
  - cpburns2009 9y ago
    > Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. I should have clarified this better. I dislike low contrast text because it makes it hard to read which is popular with the flat UI trends. Opacity isn't used so much from my experience, but light grey text on white is which has the same effect. I agree that inconsistent font sizes are bad too. > Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. In the example from the article I think the bordered version is much more concise and clearly delimits the search box and list. White-space seems to be used too carelessly in an attempt to avoid any clearly defined borders. > The article says you don't need a background colour for every button, which is good advice. You don't need to give every button a colorful background. But each button should have at least a border or background to distinguish it from standard text. The background can be just a boring grey like the classic Windows dialog buttons.
hawktheslayer 9y ago
The color picker site they link to which limits choices is great for me- I will admit to spending hours trying to pick the perfect color scheme. https://dribbble.com/colors/eee966 https://dribbble.com/colors/eee966
- cdpolyme 9y ago
  I have the same issue. Not being a designer I can spend hours tweaking CSS color values, only to come back the next day and think it looks awful again. Two things have helped me: 1) using https://coolors.co/app https://coolors.co/app and just trusting it, 2) creating SASS functions that derive secondary colors from a primary one. I currently don't have it at hand, but it boils down to making a series of lighter and darker versions of a given color, where, very importantly, the lighter ones are also less saturated than the shadows.
  - thestepafter 9y ago
    Would you mind sharing your functions when you do have them on hand?
- ficklepickle 9y ago
  I'm in the same boat. I tend to use adobe color [1] to pick colors. You can give it a color, and it will give you complementary or contrasting colors. It is great for making background gradients or finding a color that "goes" with background for those of us that can't really tell. [1] https://color.adobe.com/create/color-wheel/ https://color.adobe.com/create/color-wheel/
zsgoldberg 9y ago
Please be sensitive to the lightness of greys you use for smaller text, especially if you value any of your users who are aging (all of them) or have vision-related issues (some of them, maybe more than you think)
oldcynic 9y ago
Pet hate of mine is using more space to replace a border or other distinction between elements. Most of the time I want to see more playlists, or email subjects, in preference to delighting in your use of whitespace. Information density matters. Buttons should look like buttons. Always.
sharp11 9y ago
Using low-contrast elements to create hierarchy looks nice, but bear in mind that it breaks accessibility for many low-vision users.
acobster 9y ago
The text in the first example, "bolder not bigger," is quite obviously bigger.
yoz-y 9y ago
Overall I like this advice. However some of their examples do not really push the point. In the first example they make the text both bigger _and_ bolder and smaller _and lighter. This is good, however it is contrary to what they say. In the shadows example, I prefer the bordered version. Shadows do not always look good and borders are "safer" to use.
deleted 9y ago
[deleted]
silveira 9y ago
"4. Use fewer borders / 3. Add extra spacing". I'm not a big fan of this current trend. It seems that everyone is doing that and I found difficult to find the logical separation between elements.
meesterdude 9y ago
While not everyone is a fan of this, I think it's the best article on web design i've read in a long time, and easily the best thing i've read on HN this year. Kudos. Not all the advice is going to work in all situations, but they do serve as a great collection of simple but effective tips for improving the design. I've spent a long time tweaking things about in this realm, so these tips are welcome even if i already use many of them. Seeing them together also helps identify new techniques or combinations you can use. I don't agree with tertiary buttons with no border and no underline, for example. I think that poorly communicates what's clickable/tappable and whats not. But then again, that's an easy tweak.
- busterarm 9y ago
  I have some gripes about using text colors close to the background color (http://contrastrebellion.com http://contrastrebellion.com), but at least at the same time they're advocating not using grey. I agree, this is the best design article I've read in maybe a decade.
barskern 9y ago
Thank you for the share. Simple and useful tips to bring UI to a prettier state. Especially for a "pure" programmer, myself, who has no idea how to make nice interfaces without being guided.
imron 9y ago
> “Is this text secondary? Let’s use a lighter color.” Please no. Light grey text on not very dark grey background? Can this design trend just die? See: http://contrastrebellion.com/ http://contrastrebellion.com/
- JaggedNZ 9y ago
  I don't get why people are picking on this statement when most of the "good" examples given have plenty of contrast and he then goes into many techniques to maintain good contrast. Ironically the contrast rebellion site uses very similar techniques to create visual hierarchy, see slide 2 in particular.
  - PeterisP 9y ago
    That's the point, they do not have plenty of contrast. In the very first "good example", the phrase "Explore popular tourist destinations..." is needlessly difficult to read for me, and "28 reviews" might as well not be there; it's difficult to notice and I need to strain my eyes to read something with that low contrast. That picture is a clear example of something that's hard to use for many people, doesn't satisfy official accessibility standards, and should not be recommended. Maybe you're younger or have better vision or a significantly different screen than I do, but then let that be a warning that either you need do usability testing on some settings where that particular picture looks not sufficiently 'contrasty' to you as well, or you need to write down the RGB values that this image has with a note "that's not enough contrast for general usage even if it looks ok to my eye".
  - Silhouette 9y ago
    I don't get why people are picking on this statement when most of the "good" examples given have plenty of contrast Many of the "good" examples don't have sufficient contrast for a lot of people. The first step to fixing a problem is understanding that it exists.
  - busterarm 9y ago
    Pretty sure the examples fail the test: https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/ Edit: 2.80:1
jcadam 9y ago
As a programmer who usually has to do all of the UI work himself, I definitely appreciate this! I've been on exactly one team during my career where we had a dedicated graphic design person. Alas, it's seen as a waste of money by most management types in my industry (govt contracting).
HelloNurse 9y ago
The examples are mostly low contrast: a wasteland of white and preferably off-white empty space, also white and preferably off-white and preferably borderless boxes, lightly colored and mostly grey text inside them. When did combining dark text on a light background and light text on a dark background become nontrivial advice? When web pages had a proper structure and color scheme (compare www.gnu.org now and in 2004: http://web.archive.org/web/20040113091408/https://www.gnu.org/ http://web.archive.org/web/20040113091408/https://www.gnu.or... ) they were more readable.
- meesterdude 9y ago
  More readable, yes. But not as pretty. One can obviously go too pretty and lose all readability, but the socialization of the web has to some degree required we embrace more diversity in design. I still have trouble not underlining clickable links, for example. But sometimes in a design it's just as obviously clickable without it, and less cluttered too.
matte_black 9y ago
I would caution anyone from using these tips if you are building some kind of B2B Enterprise app where the focus is on getting as much information on screen as possible and minimizing the possibility of making errors. Borders and clear destructive actions are a must. Needless spacing is wasted space.
- Raphmedia 9y ago
  On the contrary, well thought of white space guide the eye. It doesn't waste space. It is a part of the design in itself and is usually the hardest component to get right.
  - matte_black 9y ago
    It can certainly waste space. And a lot of it. I’ve seen designers redesign tight tabular data layouts into light and airy cells of data and it ends up displaying 60% less information on a screen, requiring more scrolling from a user. This is exactly the kind of thing enterprise apps don’t need, but it looks good for a consumer app.
    - Raphmedia 9y ago
      That's an example of badly thought-of white space.
      - PeterisP 9y ago
        If it's important for you to fit as many rows in the screen as reasonably possible with maximum readability, then doing the separation with some separator takes less pixels/distance than separating them with whitespace. There's not much to think about the whitespace in such a scenario - it's a simple yes/no experiment; you can try to simply remove the separating line. If the resulting whitespace ensures good enough readability/separation, then it works; if it'd need increased spacing, then it's worse than having the separator and not worth thinking about how much extra spacing you'd want - the answer to that is as little as possible, i.e., zero.
dahart 9y ago
> 1. Use color and weight to create hierarchy instead of size This article has a lot of great advice for the visuals. Using opacity to better mix colors is super handy. But my main reaction is there is one bigger, better way to cheat at design in nearly all situations, and that's to avoid hierarchy. All the tips here can be taken as ways to cram more things together. When I try harder to say one and only one thing in any page or dialog, my design has usually improved. It can be really very difficult to let go of some things I strongly feel the user needs to see, but when I do, it's surprising how often I find that "less is more".
- colmvp 9y ago
  > It can be really very difficult to let go of some things I strongly feel the user needs to see, but when I do, it's surprising how often I find that "less is more". I find that when a screen has a lot of options, it usually means that the creator is un-opinionated / didn't make a decision on what's important and surrendered to implement everything that was asked, whereby it feels like a clown fiesta.
wycy 9y ago
Even the "bad" examples provided are beautiful. I do love the accent borders. I've been using them a lot lately in PowerPoint tables.
calimac 9y ago
Love the article. ...Medium Sucks. Abandon it stop building another property. Medium does not feed you traffic. Medium is like a virtue signal - Nothing more.
dictum 9y ago
When it's about UI design, you know the advice is good when you see a lot of comments panning it on HN ;) I just have two nitpicks: different font sizes are not a problem as long as the hierarchy is clear (i.e. sizes not seemingly chosen at random) and the advice on text contrast is accurate (unless you're using a display at very low brightness, pitch black text is jarring on light backgrounds), but the contrast on the example is too low. For body text, the ideal choice is closer to #222 or #333. Here, the advice on colors also applies: you can give the black a slight blue hue if the rest of the interface has blue accents. The last example (https://cdn-images-1.medium.com/max/1600/1*cuYcwjOO26sKHImHaY6yFA.png https://cdn-images-1.medium.com/max/1600/1*cuYcwjOO26sKHImHa...) also moves me to give an unsolicited tip: pay attention to the "color" of the typeface you're using. That example has body text in Avenir (EDIT: looking again, it must be Proxima Nova); it's a thin geometric type, so the gray of the body text should be darker, or a bolder weight should be chosen. As it is, it's not very readable, which is okay for certain sentences but not appropriate for a warning message. Since system and webfonts are often constrained to regular and bold (and rarely, a bolder and a lighter weight) it's easier to control this by tweaking the gray. An alternative is to give a higher priority to "you will lose all of your saved data".
lootsauce 9y ago
UI Developer for over 20 years and fine arts and design major in college. From my experience I can't agree more with all of these recommendations. Fewer font sizes and more font weights in general is always good. Removing borders is extremely powerful for a lot of great reasons. When trying to maximize data density and readability, when trying to reduce clutter/visual noise and gain whitespace. The use cases for borders can often be resolved in other ways. However this puts more demand on the quality of the typography and layout hence the other techniques mentioned come into play those are design challenges worth addressing. More on borders: This of course is a tool that can be mis-used but I find it is one of the best tools I have. The emphasis should be on data / information not on arbitrary borders. You can say the same thing many different ways visually. This is under-appreciated. You need not have font size, color, style all colluding to say the same thing, that you can accomplish with only one of these. When dealing with any series of items the human eye will clearly see periodic patterns and implied lines / alignments very quickly thus I find that often borders are unnecessary and even impede a working design. A key observation is that with every border you have two white space areas to design with and a foreground element competing for attention with your actual information. Every border you eliminate gains you twice as much whitespace as you had and one fewer foreground element. 3 design components to 1. As with lines of unnecessary code, when you can delete elements in a design you are winning.
combatentropy 9y ago
These are great principles, but the execution still lies with you. I studied graphic design and have done it for many years, but I still fiddle for a while with the exact parameters: font size, font weight, text color, background color, border padding, border width, border color, border radius, text shadow. You can call all the "functions" he espouses, but whether it reigns on a throne of beauty, or falls apart in a pile of mush, depends on the "arguments" fed into those functions. So if it doesn't look right at first, keep tweaking. Try a shade darker, try a shade lighter. Add more spacing, add less spacing. And so on. Expect to spend some time on it. Don't be discouraged if at worst it looks bad. Moving stuff around, and adjusting the different parameters, can eventually bring everything in a state that sings.
red_admiral 9y ago
This is still a great tutorial, but isn't it just the medium version of something I already bookmarked back in 2017? https://codepen.io/tyrellrummage/full/ZJPXgy/ https://codepen.io/tyrellrummage/full/ZJPXgy/ The one technical question I have is about using a lighter font to de-emphasise things: the example de-emphasises "*Prices may vary ..." underneath the bold, emphasised "$17 per person". Isn't that a bit of a "dark pattern"?
kazinator 9y ago
> Making the text closer to the background color is what actually helps create hierarchy, not making it light grey. Note that "closer to background color" is, more or less, "making it transparent".
- seanmcdirmid 9y ago
  “Making it more transparent” you mean (or I guess more translucent to be more correct). A interpolation of 20% from black to the background color will still be plenty readable.
makecheck 9y ago
Generally very good but mixing button/non-button style is a dark pattern that should be avoided. If you have 3 alternative actions and one looks like a button, why don’t the other two? It is actually very easy to miss at least one option that way, or otherwise make a mistake.
- che_shirecat 9y ago
  a "dark pattern" is a UI tactic that is very purposefully crafted to deceive or manipulate a user. confusing button styles as you describe them are just "bad practice," they aren't dark patterns until designers use them with the specific intent of confusing the user
amelius 9y ago
Is it just me or do the examples in the article look like they were copied from common websites? To me it is just a grab-bag of things I've seen before. I think that's one problem with the web: so often are designs simply copied that the web looks boring. Well-designed, but boring.
- bpicolo 9y ago
  Boring is great from the UX perspective. Things doing what's expected is exactly what you want!
  - amelius 9y ago
    Then the advice in the article should simply be: copy the designs!
    - bpicolo 9y ago
      That's definitely my secret to UI/UX in startup-sans-designer world :)
jakubp 9y ago
Please don't use "lighter" and "darker" colors to signal importance. The contrast on these is invariably too low for most displays, and people miss that cue completely. What's lighter for you has the exact same color/intensity for most users. It's the same with "material design" where some genius decided that buttons no longer need to look like buttons, and links no longer need to look like links. Sure they don't. And users sure don't need to know what can be done with the interface. But what's the point? /rant
wuliwong 9y ago
I bookmarked this. There are a lot of nice tips for someone like me who builds lots of prototypes but isn't a designer at all.
theartfuldodger 9y ago
The contrast examples in this article are a continuation in a poor trend of monkey see monkey do design that seems to come out of a reliance and reuse of original base bootstrap styles. Designers seem to love to decide that certain text doesn't look right, is unimportant compared to that stock image they spent 3 hours selecting. A great tip for cheating on design regarding typography is to completely drop "grey" from options. What will happen is that during any manner of stress testing, usability or accessibility testing someone will immediately point out the lack of legibility. More importantly when your site is audited for accessibility issues, you will fail on contrast every time. I realize this was written as tips to help non designers but most "designers" should be staying away from making decisions about font color that lean towards "grey". The cost and effort in development of most written copy far exceeds the value of this design trend that leads to low legibility, low impact type. Web designers need to get back to the basics of typography. The web as a whole and "start up" style sites particularly suffer greatly from design choices by designers who clearly never actually read what they layout.
- adventured 9y ago
  > More importantly when your site is audited for accessibility issues, you will fail on contrast every time. I see this problem in the footer almost universally. High contrast footers have somehow become rare. I understand the desire to de-emphasize that section versus the primary content of a page, however if the footer is going to actually do its job I think it makes sense to have it set to a higher contrast design than not.
imhelpingu 9y ago
This article strikes me as an indicator that we've reached peak this-kind-of-thing. In particular, I predict that in a year, it will seriously date your design if you're using a lot of CSS shadows and putting a random bright color on the side of anything square-shaped.

480 points by marvinpinto 9y ago

TBH I am starting to hate the subtle box-shadow on card components, including the example they provide as "better" [1]. It's getting to a point where it's hard to see the edges, especially if I have f.lux on or need to clean my glasses. A regular border is easier to spot and more definite. It's not skeuomorphic but it's more functional. [1] https://cdn-images-1.medium.com/max/800/1*qH-2RAS3rbnql-vpP8flmg.png https://cdn-images-1.medium.com/max/800/1*qH-2RAS3rbnql-vpP8...

kaiby 9y ago
Another concern is performance issues with box-shadow. A product I worked on displayed hundreds of twitter-like messages, each with its own box-shadow. Scrolling on less powerful devices would noticeably thrash. Disabling box-shadow improved it significantly. This was back in ~2012, so perhaps devices have become more powerful since then for this issue to be negligible.
- nsriv 9y ago
  This is still a major design consideration for developing world mobile apps with webviews and sites, removing box shadows tripled time-on-site immensely for a site I designed for a client.
- seanmcdirmid 9y ago
  Was this WPF by any chance? They really messed up on their drop shadow implementations, enough to cause a lot of performance problems that weren’t really necessary.
Canadauni 9y ago
Is there a third alternative to separating card components? I don't really like using borders and box-shadow while aesthetically pleasing isn't as accessible or performative. I guess one could make liberal use of white space but then the component isn't really a card anymore.
- fenwick67 9y ago
  A different background on the card versus its container

sp332 9y ago

I like most of these, especially the different ways of making a hierarchy stand out. But I would say that if you're going to use gray text, pick out the exact shade using a really crappy LCD screen, maybe on an old phone, to make sure it's legible. Sites that use very light gray make me think the designer picked the color on a 5k iMac with the lights off. Also, make your buttons look like buttons.

joshribakoff 9y ago
There's also automated WCAG tools that check for "contrast errors". For example you should ensure you provide background colors as a fallback if the user has background images disabled or the image has not downloaded yet

cpburns2009 9y ago

Half of this advice hinders usability. #2.1: Reducing the opacity of your text makes it harder to read. #4: Borders help logically separate areas of an interface. Throwing in more white-space is wasteful. #4.3: Gratuitous white-space is wasteful, especially if you have limited screen real-estate (i.e., mobile). #7 is a major pet-peeve of mine which I cannot agree with. If it's a button, make it look like a button. Nothing is more confusing than a button that just looks like some text label.

JoshMnem 9y ago
I like borders too. They often help make it easier to understand the layout from a quick glance.
- wlesieutre 9y ago
  Especially in contexts where there’s more then one hierarchy along more than one axis. UIs where you have content in the middle with multiple columns and sidebars and toolbars turns into a mess with the no borders flat design approach.
sameji 9y ago
I have to disagree. In an absolute sense you are correct, however you're missing the relative benefit of each point. #2.1: Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. #4: Why are you worried about white-space? If you have space, you can use it. If you run out, then you have to start rationing and using other visual tools. Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. #4.3: So create a responsive layout for mobile that uses more borders where necessary. #7: This is a major (and valid) criticism of flat UX, but slightly adjacent to the point in the article. The article says you don't need a background colour for every button, which is good advice.
- cpburns2009 9y ago
  > Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. I should have clarified this better. I dislike low contrast text because it makes it hard to read which is popular with the flat UI trends. Opacity isn't used so much from my experience, but light grey text on white is which has the same effect. I agree that inconsistent font sizes are bad too. > Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. In the example from the article I think the bordered version is much more concise and clearly delimits the search box and list. White-space seems to be used too carelessly in an attempt to avoid any clearly defined borders. > The article says you don't need a background colour for every button, which is good advice. You don't need to give every button a colorful background. But each button should have at least a border or background to distinguish it from standard text. The background can be just a boring grey like the classic Windows dialog buttons.

hawktheslayer 9y ago

The color picker site they link to which limits choices is great for me- I will admit to spending hours trying to pick the perfect color scheme. https://dribbble.com/colors/eee966 https://dribbble.com/colors/eee966

cdpolyme 9y ago
I have the same issue. Not being a designer I can spend hours tweaking CSS color values, only to come back the next day and think it looks awful again. Two things have helped me: 1) using https://coolors.co/app https://coolors.co/app and just trusting it, 2) creating SASS functions that derive secondary colors from a primary one. I currently don't have it at hand, but it boils down to making a series of lighter and darker versions of a given color, where, very importantly, the lighter ones are also less saturated than the shadows.
- thestepafter 9y ago
  Would you mind sharing your functions when you do have them on hand?
ficklepickle 9y ago
I'm in the same boat. I tend to use adobe color [1] to pick colors. You can give it a color, and it will give you complementary or contrasting colors. It is great for making background gradients or finding a color that "goes" with background for those of us that can't really tell. [1] https://color.adobe.com/create/color-wheel/ https://color.adobe.com/create/color-wheel/

zsgoldberg 9y ago

Please be sensitive to the lightness of greys you use for smaller text, especially if you value any of your users who are aging (all of them) or have vision-related issues (some of them, maybe more than you think)

oldcynic 9y ago

Pet hate of mine is using more space to replace a border or other distinction between elements. Most of the time I want to see more playlists, or email subjects, in preference to delighting in your use of whitespace. Information density matters. Buttons should look like buttons. Always.

sharp11 9y ago

Using low-contrast elements to create hierarchy looks nice, but bear in mind that it breaks accessibility for many low-vision users.

acobster 9y ago

The text in the first example, "bolder not bigger," is quite obviously bigger.

yoz-y 9y ago

Overall I like this advice. However some of their examples do not really push the point. In the first example they make the text both bigger _and_ bolder and smaller _and lighter. This is good, however it is contrary to what they say. In the shadows example, I prefer the bordered version. Shadows do not always look good and borders are "safer" to use.

deleted 9y ago

[deleted]

silveira 9y ago

"4. Use fewer borders / 3. Add extra spacing". I'm not a big fan of this current trend. It seems that everyone is doing that and I found difficult to find the logical separation between elements.

meesterdude 9y ago

While not everyone is a fan of this, I think it's the best article on web design i've read in a long time, and easily the best thing i've read on HN this year. Kudos. Not all the advice is going to work in all situations, but they do serve as a great collection of simple but effective tips for improving the design. I've spent a long time tweaking things about in this realm, so these tips are welcome even if i already use many of them. Seeing them together also helps identify new techniques or combinations you can use. I don't agree with tertiary buttons with no border and no underline, for example. I think that poorly communicates what's clickable/tappable and whats not. But then again, that's an easy tweak.

busterarm 9y ago
I have some gripes about using text colors close to the background color (http://contrastrebellion.com http://contrastrebellion.com), but at least at the same time they're advocating not using grey. I agree, this is the best design article I've read in maybe a decade.

barskern 9y ago

Thank you for the share. Simple and useful tips to bring UI to a prettier state. Especially for a "pure" programmer, myself, who has no idea how to make nice interfaces without being guided.

imron 9y ago

> “Is this text secondary? Let’s use a lighter color.” Please no. Light grey text on not very dark grey background? Can this design trend just die? See: http://contrastrebellion.com/ http://contrastrebellion.com/

JaggedNZ 9y ago
I don't get why people are picking on this statement when most of the "good" examples given have plenty of contrast and he then goes into many techniques to maintain good contrast. Ironically the contrast rebellion site uses very similar techniques to create visual hierarchy, see slide 2 in particular.
- PeterisP 9y ago
  That's the point, they do not have plenty of contrast. In the very first "good example", the phrase "Explore popular tourist destinations..." is needlessly difficult to read for me, and "28 reviews" might as well not be there; it's difficult to notice and I need to strain my eyes to read something with that low contrast. That picture is a clear example of something that's hard to use for many people, doesn't satisfy official accessibility standards, and should not be recommended. Maybe you're younger or have better vision or a significantly different screen than I do, but then let that be a warning that either you need do usability testing on some settings where that particular picture looks not sufficiently 'contrasty' to you as well, or you need to write down the RGB values that this image has with a note "that's not enough contrast for general usage even if it looks ok to my eye".
- Silhouette 9y ago
  I don't get why people are picking on this statement when most of the "good" examples given have plenty of contrast Many of the "good" examples don't have sufficient contrast for a lot of people. The first step to fixing a problem is understanding that it exists.
- busterarm 9y ago
  Pretty sure the examples fail the test: https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/ Edit: 2.80:1

jcadam 9y ago

As a programmer who usually has to do all of the UI work himself, I definitely appreciate this! I've been on exactly one team during my career where we had a dedicated graphic design person. Alas, it's seen as a waste of money by most management types in my industry (govt contracting).

HelloNurse 9y ago

The examples are mostly low contrast: a wasteland of white and preferably off-white empty space, also white and preferably off-white and preferably borderless boxes, lightly colored and mostly grey text inside them. When did combining dark text on a light background and light text on a dark background become nontrivial advice? When web pages had a proper structure and color scheme (compare www.gnu.org now and in 2004: http://web.archive.org/web/20040113091408/https://www.gnu.org/ http://web.archive.org/web/20040113091408/https://www.gnu.or... ) they were more readable.

meesterdude 9y ago
More readable, yes. But not as pretty. One can obviously go too pretty and lose all readability, but the socialization of the web has to some degree required we embrace more diversity in design. I still have trouble not underlining clickable links, for example. But sometimes in a design it's just as obviously clickable without it, and less cluttered too.

matte_black 9y ago

I would caution anyone from using these tips if you are building some kind of B2B Enterprise app where the focus is on getting as much information on screen as possible and minimizing the possibility of making errors. Borders and clear destructive actions are a must. Needless spacing is wasted space.

Raphmedia 9y ago
On the contrary, well thought of white space guide the eye. It doesn't waste space. It is a part of the design in itself and is usually the hardest component to get right.
- matte_black 9y ago
  It can certainly waste space. And a lot of it. I’ve seen designers redesign tight tabular data layouts into light and airy cells of data and it ends up displaying 60% less information on a screen, requiring more scrolling from a user. This is exactly the kind of thing enterprise apps don’t need, but it looks good for a consumer app.
  - Raphmedia 9y ago
    That's an example of badly thought-of white space.
    - PeterisP 9y ago
      If it's important for you to fit as many rows in the screen as reasonably possible with maximum readability, then doing the separation with some separator takes less pixels/distance than separating them with whitespace. There's not much to think about the whitespace in such a scenario - it's a simple yes/no experiment; you can try to simply remove the separating line. If the resulting whitespace ensures good enough readability/separation, then it works; if it'd need increased spacing, then it's worse than having the separator and not worth thinking about how much extra spacing you'd want - the answer to that is as little as possible, i.e., zero.

dahart 9y ago

> 1. Use color and weight to create hierarchy instead of size This article has a lot of great advice for the visuals. Using opacity to better mix colors is super handy. But my main reaction is there is one bigger, better way to cheat at design in nearly all situations, and that's to avoid hierarchy. All the tips here can be taken as ways to cram more things together. When I try harder to say one and only one thing in any page or dialog, my design has usually improved. It can be really very difficult to let go of some things I strongly feel the user needs to see, but when I do, it's surprising how often I find that "less is more".

colmvp 9y ago
> It can be really very difficult to let go of some things I strongly feel the user needs to see, but when I do, it's surprising how often I find that "less is more". I find that when a screen has a lot of options, it usually means that the creator is un-opinionated / didn't make a decision on what's important and surrendered to implement everything that was asked, whereby it feels like a clown fiesta.

wycy 9y ago

Even the "bad" examples provided are beautiful. I do love the accent borders. I've been using them a lot lately in PowerPoint tables.

calimac 9y ago

Love the article. ...Medium Sucks. Abandon it stop building another property. Medium does not feed you traffic. Medium is like a virtue signal - Nothing more.

dictum 9y ago

When it's about UI design, you know the advice is good when you see a lot of comments panning it on HN ;) I just have two nitpicks: different font sizes are not a problem as long as the hierarchy is clear (i.e. sizes not seemingly chosen at random) and the advice on text contrast is accurate (unless you're using a display at very low brightness, pitch black text is jarring on light backgrounds), but the contrast on the example is too low. For body text, the ideal choice is closer to #222 or #333. Here, the advice on colors also applies: you can give the black a slight blue hue if the rest of the interface has blue accents. The last example (https://cdn-images-1.medium.com/max/1600/1*cuYcwjOO26sKHImHaY6yFA.png https://cdn-images-1.medium.com/max/1600/1*cuYcwjOO26sKHImHa...) also moves me to give an unsolicited tip: pay attention to the "color" of the typeface you're using. That example has body text in Avenir (EDIT: looking again, it must be Proxima Nova); it's a thin geometric type, so the gray of the body text should be darker, or a bolder weight should be chosen. As it is, it's not very readable, which is okay for certain sentences but not appropriate for a warning message. Since system and webfonts are often constrained to regular and bold (and rarely, a bolder and a lighter weight) it's easier to control this by tweaking the gray. An alternative is to give a higher priority to "you will lose all of your saved data".

lootsauce 9y ago

UI Developer for over 20 years and fine arts and design major in college. From my experience I can't agree more with all of these recommendations. Fewer font sizes and more font weights in general is always good. Removing borders is extremely powerful for a lot of great reasons. When trying to maximize data density and readability, when trying to reduce clutter/visual noise and gain whitespace. The use cases for borders can often be resolved in other ways. However this puts more demand on the quality of the typography and layout hence the other techniques mentioned come into play those are design challenges worth addressing. More on borders: This of course is a tool that can be mis-used but I find it is one of the best tools I have. The emphasis should be on data / information not on arbitrary borders. You can say the same thing many different ways visually. This is under-appreciated. You need not have font size, color, style all colluding to say the same thing, that you can accomplish with only one of these. When dealing with any series of items the human eye will clearly see periodic patterns and implied lines / alignments very quickly thus I find that often borders are unnecessary and even impede a working design. A key observation is that with every border you have two white space areas to design with and a foreground element competing for attention with your actual information. Every border you eliminate gains you twice as much whitespace as you had and one fewer foreground element. 3 design components to 1. As with lines of unnecessary code, when you can delete elements in a design you are winning.

combatentropy 9y ago

These are great principles, but the execution still lies with you. I studied graphic design and have done it for many years, but I still fiddle for a while with the exact parameters: font size, font weight, text color, background color, border padding, border width, border color, border radius, text shadow. You can call all the "functions" he espouses, but whether it reigns on a throne of beauty, or falls apart in a pile of mush, depends on the "arguments" fed into those functions. So if it doesn't look right at first, keep tweaking. Try a shade darker, try a shade lighter. Add more spacing, add less spacing. And so on. Expect to spend some time on it. Don't be discouraged if at worst it looks bad. Moving stuff around, and adjusting the different parameters, can eventually bring everything in a state that sings.

red_admiral 9y ago

This is still a great tutorial, but isn't it just the medium version of something I already bookmarked back in 2017? https://codepen.io/tyrellrummage/full/ZJPXgy/ https://codepen.io/tyrellrummage/full/ZJPXgy/ The one technical question I have is about using a lighter font to de-emphasise things: the example de-emphasises "*Prices may vary ..." underneath the bold, emphasised "$17 per person". Isn't that a bit of a "dark pattern"?

kazinator 9y ago

> Making the text closer to the background color is what actually helps create hierarchy, not making it light grey. Note that "closer to background color" is, more or less, "making it transparent".

seanmcdirmid 9y ago
“Making it more transparent” you mean (or I guess more translucent to be more correct). A interpolation of 20% from black to the background color will still be plenty readable.

makecheck 9y ago

Generally very good but mixing button/non-button style is a dark pattern that should be avoided. If you have 3 alternative actions and one looks like a button, why don’t the other two? It is actually very easy to miss at least one option that way, or otherwise make a mistake.

che_shirecat 9y ago
a "dark pattern" is a UI tactic that is very purposefully crafted to deceive or manipulate a user. confusing button styles as you describe them are just "bad practice," they aren't dark patterns until designers use them with the specific intent of confusing the user

amelius 9y ago

Is it just me or do the examples in the article look like they were copied from common websites? To me it is just a grab-bag of things I've seen before. I think that's one problem with the web: so often are designs simply copied that the web looks boring. Well-designed, but boring.

bpicolo 9y ago
Boring is great from the UX perspective. Things doing what's expected is exactly what you want!
- amelius 9y ago
  Then the advice in the article should simply be: copy the designs!
  - bpicolo 9y ago
    That's definitely my secret to UI/UX in startup-sans-designer world :)

jakubp 9y ago

Please don't use "lighter" and "darker" colors to signal importance. The contrast on these is invariably too low for most displays, and people miss that cue completely. What's lighter for you has the exact same color/intensity for most users. It's the same with "material design" where some genius decided that buttons no longer need to look like buttons, and links no longer need to look like links. Sure they don't. And users sure don't need to know what can be done with the interface. But what's the point? /rant

wuliwong 9y ago

I bookmarked this. There are a lot of nice tips for someone like me who builds lots of prototypes but isn't a designer at all.

theartfuldodger 9y ago

The contrast examples in this article are a continuation in a poor trend of monkey see monkey do design that seems to come out of a reliance and reuse of original base bootstrap styles. Designers seem to love to decide that certain text doesn't look right, is unimportant compared to that stock image they spent 3 hours selecting. A great tip for cheating on design regarding typography is to completely drop "grey" from options. What will happen is that during any manner of stress testing, usability or accessibility testing someone will immediately point out the lack of legibility. More importantly when your site is audited for accessibility issues, you will fail on contrast every time. I realize this was written as tips to help non designers but most "designers" should be staying away from making decisions about font color that lean towards "grey". The cost and effort in development of most written copy far exceeds the value of this design trend that leads to low legibility, low impact type. Web designers need to get back to the basics of typography. The web as a whole and "start up" style sites particularly suffer greatly from design choices by designers who clearly never actually read what they layout.

adventured 9y ago
> More importantly when your site is audited for accessibility issues, you will fail on contrast every time. I see this problem in the footer almost universally. High contrast footers have somehow become rare. I understand the desire to de-emphasize that section versus the primary content of a page, however if the footer is going to actually do its job I think it makes sense to have it set to a higher contrast design than not.

imhelpingu 9y ago

This article strikes me as an indicator that we've reached peak this-kind-of-thing. In particular, I predict that in a year, it will seriously date your design if you're using a lot of CSS shadows and putting a random bright color on the side of anything square-shaped.