User Interface Best Practices

Resources naming

Basic Principle

• Resources are named in the PascalCase with the format <WHERE><WHAT>.

• <WHERE> describes where it logically belongs in the app. Resources used in multiple screens use general, all others use the name of the screen they are in.
• <WHAT> indicates what the resource represents; often matches with the name of the view the resource is shown.

Images

The <WHERE> indicates the screen where the image will be used:

• ArticleDetail: an image in the screen ArticleDetailView.
• Settings: an image in the screen SettingsView.
• General: a generic image used in multiple screens as part of the application’s design system.

The <WHAT> describes what the image acually represented on the screen:

• TitleLogo: a logo image of the title section.
• Background: a background of the screen.
• BackIcon: an icon of the back button.
• ProfilePlaceholder: a placeholder for the profile image.

The <WHAT> describes the image rather than the type of view it will be shown in.

  ConfirmButton
  LoadingView
  PlaceholderNavigationView
  BackgroundImageView

  ConfirmIcon
  LoadingAnimation
  ProfilePlaceHolder
  ProfileBackground