100 Things a UX/UI Designer Should Know

Architect Michael Sorkin recently died from coronavirus, and in a tribute to his beautiful piece 250 Things an Architect Should Know, I’ve compiled a list of 100 things a UX/UI designer should know.

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

Click an item to expand its answer · Expand all

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 color
   Pair with black or dark gray. Avoid yellow text; use black or rich orange hue on 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 recieve will also then by 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? 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-quotataion marks, dashes, or bullets – into the left margin so as to create a stronger sense of alignment. More here.
11. Why certain colors 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, ecommerce, 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 colors usually are usually saturated with some color. 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 color 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 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 color (with gray, white, or black being 0 saturation). Brightness is akin how "on" a dimming light bulb is. High brightness may be white or a very bright color, but 0 brightness is always black. More.
34. The font on the plaque that Neil Armstrong put on the moon
    [Futura](futura-similar-fonts.html). Though designed in the 1920s, no font more strongly conveys the 60s. Use for brands needing a slight 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 off of 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](apercu-similar-fonts.html), [Futura](futura-similar-fonts.html), and GT America. More.
40. All the keyboard shortcuts on your favorite design app
    Note that Figma & Sketch 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 color
    Color is 3 dimensions, whether you measure it RGB, CMY, HSB, HSL, or Lab. Understanding that any two colors can differ in 3 ways allows you to think more clearly about how to create color variations.
43. The default text size on most web browsers, iOS, and in Material Design
    Web browswers: 16px. iOS: 17pt. Material Design: 16px. More.
44. How to create an entire UI using just one color
    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 colors
    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 colors. 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 colors 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 Unsplash, Pexels, 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. 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
    The name for a phenomenon in which data is concentrated around a particular 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 enought 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 effect change. More.
68. The difference between a friend and a facebook friend
    The former is someone who 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 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 color 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 means 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](helvetica-similar-fonts.html), [Times New Roman](times-new-roman-similar-fonts.html), Century, and [Futura](futura-similar-fonts.html).
87. At least two dozen fonts on sight
    If you can recognize Vignelli's 5 favorites, 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 behavior, don't ask about it directly. Instead, ask about – and understand – current behavior.
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.