The document discusses challenges in naming things for design systems and provides recommendations. It addresses naming things for branding, different stakeholders, and technical implementation. Key points are to brand for culture, name for communication across teams, and structure naming for APIs to manage changes over time.

1. The Naming Of ThingsThe Naming Of Things
Ben Buchanan
@200okpublic | designops.expert

2. The two hardest problems in computer scienceThe two hardest problems in computer science
cache invalidation
naming things
off-by-one errors

3. Created by Sergey Patutin from the Noun Project

4. Maluma & Takete (1929)Maluma & Takete (1929)

5. Kiki & Bouba (2001)Kiki & Bouba (2001)

6. Research suggests people alter their appearance
to match cultural expectations about their name.
eg. we imagine Bob has a rounder face than Tim.

7. BobBob TimTim

10. People react to names subconsciously
...so if they are arguing about a name,
they may struggle to express exactly why.

11. Our design system naming should match expectations.
...but whose expecations?

12. All stakeholders?All stakeholders?
Business
Designers
Developers
Users

13. Users don't know or careUsers don't know or care
Web applications, like sausages, cease to inspire respect in proportion as we
know how they are made.
- John Godfrey Saxe

14. StakeholdersStakeholders
Business
Designers
Developers

15. Things to nameThings to name
Design system
UI library
Components
Patterns
Design assets
Code

16. Key StakeholdersKey Stakeholders
Thing Business Design Development
Design system ✓ ✓ ✓
UI library ✓ ✓ ✓
Components ✓ ✓
Patterns ✓ ✓
Design assets ✓
Code assets ✓

17. Two naming concernsTwo naming concerns
1. Brand
2. Implementation

18. BrandBrand
Thing Business Design Development
Design system ✓ ✓ ✓
UI library ✓ ✓ ✓
Components ✓ ✓
Patterns ✓ ✓
Design assets ✓
Code assets ✓

19. Branding the systemBranding the system
Reflect your culture
Differentiate design and implementation
Short and easy to say
Beware of phonetics and pisstakes

20. Example: QuantiumExample: Quantium
Quantium Design System (QDS)
Library is Qbit
Components are Qbits
Patterns are Qpieces

21. ImplementationImplementation
Thing Business Design Development
Design system ✓ ✓ ✓
UI library ✓ ✓ ✓
Components ✓ ✓
Patterns ✓ ✓
Design assets ✓
Code assets ✓

22. Naming for implementationNaming for implementation

23. Naming for implementationNaming for implementation
Team names, wiki spaces
Sketch/Figma projects, symbols, layers, mockups
Code repos, builds, websites, deployment packages, file names, namespaces,
templates, selectors, variables, props, functions, exports, imports, type definitions,
test suites, test names, test props and selectors, page objects

24. Critical for communicationCritical for communication
Thing Business Design Development
Design system ✓ ✓ ✓
UI library ✓ ✓ ✓
Components ✓ ✓
Patterns ✓ ✓
Design assets ✓
Code assets ✓

25. Designers & DevelopersDesigners & Developers
Conflicting domain knowledge
Both sides 'know' they are 'right'

26. Collaboration beats 'winning'Collaboration beats 'winning'

27. Common conundraCommon conundra
Menu, Dropdown or Select?
Dialog, Modal, Modal Dialog?

28. Menu? Dropdown? Picker?Menu? Dropdown? Picker?

29. Menu?Menu?

30. Menu?Menu?

31. SelectSelect DropdownDropdown NavNav

32. The conversationThe conversation
form semantics
HCI concepts
component as part of suite

33. Dialogs, pages and modal interactionDialogs, pages and modal interaction

34. DialogDialog

35. DialogDialog

37. Dialog...?Dialog...?

39. DialogDialog Focused Task PageFocused Task Page

41. Focused PageFocused Page

43. Page DialogPage Dialog

45. The conversationThe conversation
usability of code
'dialog' vs 'modal'
modals over-used
focusing user attention

46. Naming for design implementationNaming for design implementation

47. The design API zoneThe design API zone
Thing Business Design Development
Design system ✓ ✓ ✓
UI library ✓ ✓ ✓
Components ✓ ✓
Patterns ✓ ✓
Design assets ✓
Code assets ✓

48. Design API (and versions!)Design API (and versions!)

49. Naming for technical implementationNaming for technical implementation

50. Code API zoneCode API zone
Thing Business Design Development
Design system ✓ ✓ ✓
UI library ✓ ✓ ✓
Components ✓ ✓
Patterns ✓ ✓
Design assets ✓
Code assets ✓

51. The goalsThe goals
functionality
naming extensibility
code usability
longevity

52. Don'tDon't
Never use old and new
Avoid unnecessary specifics, but...
Beware inappropriate generalisation

53. DoDo
Set naming basics early
Be consistent
Sketch out the whole suite of names
Assume your design will change
Use type systems to help

54. BasicsBasics
Namespace
Naming methodology
Plurals
Wrappers for element sets

55. Naming exampleNaming example
.<ns>-<thing>-<variant>-<modifier>
.q-button-primary
.q-button-primary-disabled

56. Naming exampleNaming example
import {
Element,
ElementVariant,
ElementProp,
ElementOtherprop,
ElementWrapper,
ElementWrapperProp,
ElementTurtlesAllTheWayDown,
} from './element/'

57. PluralsPlurals
Button component or Buttons component?
It's annoying when import s randomly switch!

58. ContainersContainers
What do you call a container for a set of components?
buttons
button-set
button-group
button-wrapper
...?

59. Tshirt sizingTshirt sizing
xxs , xs , s , m , l , xl , xxl
Avoid specifics as they change
Oh wait should that be LikeIt , LoveIt and GottaHaveIt ?

60. DimensionsDimensions
width height - single dimensions
size - all relevant dimensions

61. Semantics have limitsSemantics have limits
Don't give up too easily, but...
Sometimes left is just left
Some utilities are ok!

62. Schemes have limitsSchemes have limits

63. Be consistent and tidy,
but don't fight human nature.

64. API LongevityAPI Longevity

65. Minimise the surfaceMinimise the surface
Be very clear about your API limits
Keep as much behind the API as possible
Create change buffers

66. Avoid breaking changesAvoid breaking changes
A breaking change simply means
something that worked stops working.

67. ExampleExample
Only support templates
Only support what's in the docs
Provide page objects

68. If you must break somethingIf you must break something
Deprecate the old
Provide the new
Name them separately so they co-exist

69. This is managed through SemVerThis is managed through SemVer
Semantic Versioning (semver.org) lets you publish updates with meaningful numbers
that alert people to breaking changes.

70. HoweverHowever
SemVer is the numbering of things
and a story for another day.

71. Tame the Naming BeastTame the Naming Beast
brand your design system for hearts and minds
frame communication for collaboration
set your API for implementation

72. Thank you!Thank you!
@200okpublic | designops.expert