Some are practical, some are poetic; all pay homage to the wonderful complexity of designing things for our fellow human beings.

  1. The angular size of legible text About 0.3° from baseline to cap height. Whether you’re reading text on your phone or a billboard, this is a good minimum for body copy. More here.
  2. How to use yellow as a brand colour Pair with black or dark gray. Avoid yellow text; use black or rich orange hue on a yellow background.
  3. The best patterns for displaying tables on mobile devices See this list by Brad Frost.
  4. How to train a client to give you good feedback Decide, beforehand, on the goals that constitute a successful design. Focus all design presentations on how your design achieves those goals, and the feedback you receive will also then be of the same type.
  5. What your users would be doing if they weren’t using your app The thing you’re building is likely not how the user wants to spend their time. You’re merely their best option for getting where they want to go. Best to keep this in mind.
  6. How long a hoverstate animation should be, in milliseconds 100ms-250ms is pretty quick. A 500ms fade-out will feel slow, and, if multiple nearby elements have such fade-outs, the user will feel like they’re leaving “ripples” with their cursor.
  7. What ‘chart junk’ is Any part of a data visualization that catches the eye but does not convey an amount of information corresponding to its visual weight.
  8. The biggest thing slowing down your website’s loading time For my site, images. For you? The first step, check Google PageSpeed Insights.
  9. What top-down lighting bias is We are so used to light coming from the sky that things – including interfaces – actually look unnatural when they appear to be lit from below.
  10. Hanging punctuation Position punctuation that precedes text – e.g. open-quotation marks, dashes, or bullets – into the left margin so as to create a stronger sense of alignment. More here.
  11. Why certain colours clash For various reasons, chiefly because their saturations are both high or because they have very similar luminosities.
  12. The market rate for usability testing participants (60-minute session) For the US: $50 on the low end, with $100 being generous, and more necessary for specialized professionals.
  13. What the best design of 1000 years ago looked like “Typography is 90% of manuscript design”, as they say.
  14. How to make a design that will be understood 10,000 years in the future These post-apocalyptic indicators of nuclear waste are a good start.
  15. How websites make money Advertising, subscriptions, affiliates, e-commerce, marketplaces.
  16. How your client’s website makes money And, of course, how your design makes them even more money.
  17. Why painters never use black Because black rarely appears in the real world. Darker colours usually are usually saturated with some colour. More.
  18. The appropriate number of characters per line for body text Approx. 50-75 characters.
  19. How to create an error message when your brand colour is red Use yellow or orange for errors. Reduce brand red on-page users would see errors. Limit input such that errors are prevented (such as input masking).
  20. When to use a grid system Save strict grids for posters and websites in which the artistry of the composition matters more than the requirements of the information displayed.
  21. When not to use a grid system Most responsive designs should not use a strict 12-column grid. More.
  22. When to center text Only when there are fewer than 3 lines of it. And, even then, rarely.
  23. When to right-align text For left-to-right languages, right-aligning should be saved for (a) numbers that are comparable digit-for-digit (e.g. prices or counts – not ID numbers, ZIP codes), (b) the headers labelling such numbers, and (c) rare occasions when you need a strong right edge for the text.
  24. When to use a didone For brands that need to portray luxury or classiness.
  25. When to use a slab serif For beginning designers, almost never. For advanced designers, you don’t need me to tell you.
  26. The minimum tap target size on both iOS and Android On iOS: 44x44pt. On Android: 48x48pt.
  27. A handful of patterns for showing search results Autocomplete, query highlighting, autocorrection, the “no query” state, the “no results” state, multi-type results, etc. More (paid).
  28. A handful of patterns for filtering search results Sidebar filtering vs. top bar filtering, show a filtered state in place vs. combined list, etc. More (paid).
  29. The screen sizes of popular mobile devices In brief, widths are the most important. For iPhones, 375pt is the most common. For Android, 360pt. More.
  30. What percentage of people look at your site on mobile For this site, a low 20%.
  31. Why Gmail bolds your search term in its autocomplete dropdown, yet Google Search bolds everything but your search term in its autocomplete dropdown Gmail is showing you specific search endpoints (messages), which you’re interested in matching directly. On the other hand, Google Search is guessing your query, so what you haven’t yet typed is the key differentiator.
  32. When to use a bar chart, line chart, and pie chart Bar and line charts are similar, however, line charts are more closely associated with time series and are easier to read for larger numbers of series. Use pie charts only for categories that add up to 100%; bar charts are best when one item can appear in multiple categories.
  33. The difference between saturation and brightness Saturation is the richness of the colour (with gray, white, or black being 0 saturation). Brightness is akin to how “on” a dimming light bulb is. High brightness may be white or a very bright colour, but 0 brightness is always black. More.
  34. The font on the plaque that Neil Armstrong put on the moon Futura. Though designed in the 1920s, no font more strongly conveys the 60s. Use for brands needing a slightly retro feel, or use thick weights (often uppercase) for sporty, street brands.
  35. What’s on the plaque of the Pioneer spacecraft The Pioneer spacecraft is equipped with a small plaque designed for any aliens that might intercept the craft. On it is perhaps the greatest data visualization of all time – showing male and female figures to scale with an image of the craft, a diagram of our solar system, and a map of where to find us, using a galactic map of pulsars. It is also my twitter background.
  36. The difference between inductive and deductive reasoning Inductive: using past observations to predict a general rule. Deductive: using logical rules to create airtight predications. This mirrors the two primary ways interfaces teach users new concepts, cf. Teach By Example.
  37. Why humanist fonts often feel warmer and friendlier than other sans serifs They are based on handwriting – as opposed to more geometric shapes.
  38. The 3 most popular fonts on Google Fonts (for the masses) Roboto, Open Sans, and Lato. The latter two feel overused – avoid if possible. More.
  39. The 3 most popular fonts on Typewolf (for the trend-setters) Apercu, Futura, and GT America. More.
  40. All the keyboard shortcuts on your favourite design app Note that Sketch and Figma have almost identical keyboard shortcuts.
  41. How to design matching icons Use a consistent stroke weight, border-radius, and level of detail. When you do a squint test, all should appear equally strong.
  42. The dimensionality of colour Colour is 3 dimensions, whether you measure it RGB, CMY, HSB, HSL, or Lab. Understanding that any two colours can differ in 3 ways allows you to think more clearly about how to create colour variations.
  43. The default text size on most web browsers, iOS, and in Material Design Web browsers: 16px. iOS: 17pt. Material Design: 16px. More.
  44. How to create an entire UI using just one colour Create darker and lighter variations as needed, primarily by moving saturation and brightness in opposite directions. More.
  45. How to create an entire UI using no colours Designing in grayscale first is a sensible practice.
  46. Why fonts with high x-heights are more legible Because their lowercase letterforms are therefore taller relative to the text size, making them easier to distinguish.
  47. At least 5 methods for putting text on top of images Image overlays, text shadows, floor fades, scrims, text-in-a-box, and more.
  48. The WCAG recommended contrast ratio for body text 4.5:1 to meet AA standards.
  49. The WCAG recommended contrast ratio for headline text 3:1 to meet AA standards.
  50. What Leonardo DaVinci recommended as the first practice for beginning artists Copywork, of course.
  51. The most useful blend modes Darken is great for displaying white-background images on slightly darker colours. Layers of black on Overlay or Soft Light create darker variations of what’s beneath them. Black Multiply layers can be an alternative to darkening an image. Conversely, a white Overlay layer can make an image more washed out, yet with more vivid colours than typical desaturation.
  52. The principles of good composition Have a focal point. Make it clear, interesting, and in-focus. Look for places where imagery can be symmetrical, repetitive, or obey the rule of thirds.
  53. Where to find photography that doesn’t look stock I prefer UnsplashPexels, and Pixabay.
  54. Four reasons a user’s search query might not turn up any results Your database doesn’t have what they wanted. They made a typo. They used a synonym or similar word to what the system uses. They accidentally filtered out the result they wanted.
  55. How to write an error message Be polite. Be succinct. Don’t use jargon. Recommend a course of action. Remember the user will be seeing this at a low point in their experience with the app.
  56. How to write a call-to-action Avoid the generic (“click here”). Expose the benefit to the user (“Start My Free Trial”). Make it relevant to the viewer, given everything you know about them. And make the button visible.
  57. How a screen reader works Rather similar to how one might expect an “audio version” only of the web to work. The text is read. Controls – and their state – are described. Shortcuts can be used for skipping to elements of various types – search bars, headlines, links, etc. Sudden interface changes (e.g. notifications) can be problematic. Semantic HTML augmented with ARIA labels can help.
  58. And how many people use one Roughly 7 million people in the US report a visual disability.
  59. What not to put in your design portfolio Projects you wouldn’t do again. Full-time work that wasn’t design. Photography. More.
  60. How to present a design Don’t start from the top-left and work down the page. Instead, start from the primary goals of the design needs to meet, and show the multiple ways in which your design achieves each goal.
  61. What “satisfice” means To take the first “good enough” option, rather than wait for what’s optimal. Bad design happens when designers satisfice.
  62. Which is more important – aesthetics or usability Usability. More.
  63. What a poisson distribution is A name for a phenomenon in which data is concentrated around a particularly low value, but tapers off into a long tail of higher values. When users need to pick Poisson-distributed dates (scheduling a meeting), you should use a different control than when users need to pick a more evenly-distributed dates (entering birthdays). More.
  64. Jakob’s Law “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know”. More.
  65. Browser dev tools At least enough to change text, modify styling, and download images.
  66. 3 reasons not to use “carousels” No one wants to wait around to see all images. They can only be navigated by clicking impossibly small translucent circles. They reflect a lack of prioritization of content.
  67. What the Law of Locality is UI controls should appear near where they affect change. More.
  68. The difference between a friend and a Facebook friend The former is someone who you trust, can share the trivial minutiae of your day with, and share large parts of a worldview with. The latter is someone who can see your Facebook posts in their feed – and vice versa. The point? Your software will piggyback off of real-world nouns. Mind them.
  69. How PageRank works Google’s algorithm for ranking the importance of webpages. In short, every page’s score is determined by the score of the sites linking to it, which are in turn determined by the sites linking to them, etc. More.
  70. The explore/exploit tradeoff In finding the optimal solution to a problem, do you stick with the best solution you know of so far (exploit), or do you keep looking (explore)? Across domains, people (such as designers or users) explore early and exploit later.
  71. The different types of mobile keyboards iOS and Android both offer special keyboards for email addresses, URLs, numbers, and phone numbers. Never make a user type a phone number on a standard alphanumeric keyboard.
  72. The psychology of road rage Simply restrict users to low-bandwidth communication behind an anonymous identity. The implications for design should be apparent.
  73. 10 controls you can use instead of dropdowns Segmented buttons, radio buttons, cards, typeahead, text-based date inputs, etc. More.
  74. What complementary and substitute goods are Complementary goods are things you buy in addition to the original thing – like a peanut with jelly. Substitute goods you buy instead of the original thing – like almond butter instead of peanut butter. These are two powerful paradigms when considering what content you can recommend to your users. Consider what they’re looking for, and what might complement or substitute for it.
  75. What screens want Frank Chimero says they want flux – that is, to change. Bret Victor calls it magic ink. Same difference.
  76. Why you shouldn’t listen to your users In short, because they’re too polite, too forgetful, and too close to their own problems. Better to ask them what they do. Better still to just watch them do it.
  77. How to run an A/B test Change only one variable at a time. Wait until the results are significant. Be prepared for them not to be.
  78. When to not run an A/B test A good designer is willing to stand by their gut instinct and recognizes that most A/B tests won’t generate meaningful results.
  79. How to write Be succinct. Be conversational. Make the strongest true statement you can. Have a list of writers who you can channel when lacking inspiration (I use Steven Pressfield’s non-fiction).
  80. How to edit Print it out and read it aloud. Rephrase what you stumble over. Imagine you are paid $1000 for every word you cut. Remember: the reader won’t miss all the good bits you removed. They’ll only judge the good bits you included.
  81. How good online communities go bad If you don’t make and enforce clear rules, you’ve already lost. If you make and enforce clear rules, congrats – now you have to legislate a million edge cases. Also, see the road rage question.
  82. The 80-20 rule 80% of the output comes from 20% of the input. Examples: 20% of your ideas will contain 80% of the potential, 20% of your pages will get 80% of your traffic, 20% of your users will be 80% of your app’s usage, etc.
  83. How to make a half-decent logo For beginners, focus on typography and geometric shapes. Keep it simple. Don’t use the most obvious colour or the most obvious symbol. More.
  84. Why games are fun They present a challenge. Bounded and safe, yet needing to perform in real-time heightens arousal. The best games are not too difficult (discouraging) or too easy (boring).
  85. Why gambling is addictive In general: variable reward, the illusion of control, the Gambler’s Fallacy (the belief that many losses mean you’re “due” for a win), and, of course, the fact that they’re games, and games are fun.
  86. The only 5 typefaces Massimo Vignelli said he needed Bodoni, Helvetica, Times Roman, Century, and Futura.
  87. At least two dozen fonts on sight If you can recognize Vignelli’s 5 favourites, this one (Avenir), and the 3 most common on Google Fonts and Typewolf, you’re already halfway there.
  88. Where to find good inspiration Dribbble is still the best. Sorry, haters. Follow me here.
  89. Why menus in fancy restaurants don’t list cents on their prices Simplicity is elegant. Bargains are about the price. But if you want the best, price is a triviality. Also, signalling: “$9.99” signals “We’re trying to make this look cheap”. “10” signals “This isn’t about the price”.
  90. Five ways to reduce clutter on a messy page (A) Remove it entirely. If it can’t be removed, (B) lighten it, or (C) put it behind a menu. As a last resort, simply (D) align it with other items and (b) make it consistent with them, so as not to stand out.
  91. The zero price effect People are far more interested in something that’s free than something that’s even a trivial price.
  92. The differences between Helvetica and Arial Non-essential, but makes for good party trivia. Gary Hustwit has done a lot of PR for our profession. In any case: Helvetica has horizontal/vertical terminals.
  93. Five alternatives to either Virtually any grotesque will do. Recent alternatives: Inter, Roboto, Acumin, Nimbus, Neue Haas Unica.
  94. How to ask questions without biasing the answer Keep them open-ended. Use mirroring to encourage talking. To understand future behaviour, don’t ask about it directly. Instead, ask about – and understand – current behaviour.
  95. Desire paths When a user creates their own solution to the problems your solution caused. If you see one, understand it. More.
  96. How it would work if it were magic Ask this question about a tough design challenge. Sometimes freeing yourself from realistic thinking will generate the best solutions.
  97. Maker’s schedule vs manager’s schedule Designers and developers do a lot of their best work in large chunks of uninterrupted time. Managers and PMs are more like switchboards in human form. Understand your team member’s optimal needs, and adjust accordingly. More.
  98. Who your ideal client is Be specific. Once you name names, you can start slowly pushing your career in their direction. For me, I want to do some design work for Rigetti. Know anyone there?
  99. The tradeoff between line height and line length The purpose of line-height is to make it easy for your eyes to track from the end of one line to the beginning of the next. If you make a line longer (as measured in characters), then it needs more line-height. There are two ways to make a line longer: shrink the font size, or increase the width.
  100. What you wouldn’t design, even for all the money in the world Drawing lines is a good way to stop yourself from crossing them.

Internet is huge! Help us find great content

About

If you need 5 cents, don't ask for 3, ask for 10

Navigation