Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
|UI Element||A basic building block of a website, exists alone or in homogenous groups|
|UI Collection||A heterogeneous group of several elements which can usually be found together.|
|UI View||A way to present common website content like comments, activity feeds|
|UI Module||An element where its behavior is an essential part of its definition|
|UI Behavior||A set of free-standing actions not specifically tied to an element|
All UI components of a single type are defined similarly.
Defines mutually exclusive types which each may have their own html
Defines element states like disabled, hovered, pressed down
Defines changes to an element which are not mutually exclusive and can be used together
An element can optionally define how attributes can be shared across a group
A collection can define elements which might be found inside
A collection may define states for content elements or itself
A collection may define variations for content elements or itself
A view may define elements which can exist inside of the view
A view may define states for content elements or itself
A view may define variations for a content elements or itself
|Modules & Behaviors|
Types of Definitions
UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an "element" in chemistry.
UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
Examples of UI elements:
UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.
UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements definitions, collections are not typically useful to define in plural.
Examples of UI collections:
- Grids (Layout)
Examples of UI modules:
- Chat Rooms
UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.
Examples of UI views:
- Comment Feed
- Activity Feed
- Product List