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.
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.
Pair with black or dark gray. Avoid yellow text; use black or rich orange hue on yellow background.
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.
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.
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.
Any part of a data visualization that catches the eye but does not convey an amount of information corresponding to its visual weight.
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.
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.
For various reasons, chiefly because their saturations are both high or because they have very similar luminosities.
For the US: $50 on the low end, with $100 being generous, and more necessary for specialized professionals.
"Typography is 90% of manuscript design", as they say.
Advertising, subscriptions, affiliates, ecommerce, marketplaces.
And, of course, how your design makes them even more money.
Because black rarely appears in the real world. Darker colors usually are usually saturated with some color. More.
Approx. 50-75 characters.
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).
Save strict grids for posters and websites in which the artistry of the composition matters more than the requirements of the information displayed.
Most responsive designs should not use a strict 12-column grid. More.
Only when there are fewer than 3 lines of it. And, even then, rarely.
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.
For brands that need to portray luxury or classiness.
For beginning designers, almost never. For advanced designers, you don't need me to tell you.
On iOS: 44x44pt. On Android: 48x48pt.
Autocomplete, query highlighting, autocorrection, the "no query" state, the "no results" state, multi-type results, etc. More (paid).
Sidebar filtering vs. top bar filtering, show filtered state in place vs. combined list, etc. More (paid).
In brief, widths are the most important. For iPhones, 375pt is the most common. For Android, 360pt. More.
For this site, a low 20%.
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.
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.
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.
[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.
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.
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.
They are based off of handwriting – as opposed to more geometric shapes.
Roboto, Open Sans, and Lato. The latter two feel overused – avoid if possible. More.
[Apercu](apercu-similar-fonts.html), [Futura](futura-similar-fonts.html), and GT America. More.
Note that Figma & Sketch have almost identical keyboard shortcuts.
Use a consistent stroke weight, border radius, and level of detail. When you do a squint test, all should appear equally strong.
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.
Web browswers: 16px. iOS: 17pt. Material Design: 16px. More.
Create darker and lighter variations as needed, primarily by moving saturation and brightness in opposite directions. More.
Because their lowercase letterforms are therefore taller relative to the text size, making them easier to distinguish.
Image overlays, text shadows, floor fades, scrims, text-in-a-box, and more.
4.5:1 to meet AA standards.
3:1 to meet AA standards.
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.
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.
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.
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.
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.
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.
Roughly 7 million people in the US report a visual disability.
Projects you wouldn't do again. Full-time work that wasn't design. Photography. More.
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.
To take the first "good enough" option, rather than wait for what's optimal. Bad design happens when designers satisfice.
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.
"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.
At least enought to change text, modify styling, and download images.
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.
UI controls should appear near where they effect change. More.
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.
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.
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.
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.
Simply restrict users to low-bandwidth communication behind an anonymous identity. The implications for design should be apparent.
Segmented buttons, radio buttons, cards, typeahead, text-based date inputs, etc. More.
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.
Frank Chimero says they want flux – that is, to change. Bret Victor calls it magic ink. Same difference.
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.
Change only one variable at a time. Wait until the results are significant. Be prepared for them not to be.
A good designer is willing to stand by their gut instinct, and recognizes that most A/B tests won't generate meaningful results.
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).
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.
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.
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.
For beginners, focus on typography and geometric shapes. Keep it simple. Don't use the most obvious color or the most obvious symbol. More.
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).
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.
Bodoni, [Helvetica](helvetica-similar-fonts.html), [Times New Roman](times-new-roman-similar-fonts.html), Century, and [Futura](futura-similar-fonts.html).
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.
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".
(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.
People are far more interested in something that's free than something that's even a trivial price.
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.
Virtually any grotesque will do. Recent alternatives: Inter, Roboto, Acumin, Nimbus, Neue Haas Unica.
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.
When a user creates their own solution to the problems your solution caused. If you see one, understand it. More.
Ask this question about a tough design challenge. Sometimes freeing yourself from realistic thinking will generate the best solutions.
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.
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?
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.
Drawing lines is a good way to stop yourself from crossing them.