Combining techniques

In the example below, all of the techniques above have been used to create an extremely flexible tile component that accounts for different states and variances for use within mockups and prototypes.

Here is a summary of a few of the different component variations:

A well-constructed component can take on many different forms simply by swapping out nested components, and toggling the visibility of layers.

Breakdown

Nested within the tile component, shown above, are a number of elements which can be turned on/off, or swapped to different components.

IconsThe icon throughout are nested instances and can be easily swapped out for other icons.

Tile contentThe content area in the tile is also a nested component. To create the base tile component, there is a placeholder component with a red dotted line which outlines the dimensions, and also establishes its constraints within the tile. I can replace the placeholder component with my actual content grid components. Combining this with the cropped “clip content” method, I can display a version of a “repeat grid” view which will grow with the parent component.

ScrollbarThe scroll bar is simply a nested component whose visibility can be toggled if we want to communicate that the content inside is scrollable.

TruncationA small vector with solid white to transparent gradient is situated above the tile title text component. It’s visibility can be toggled on or off to show our fade-out truncation effect when required.

SearchSituated within the tile header, is a search input component that can be toggled as well. Since this particular element is a also a nested component, it allows me to swap out different states of the input field from placeholder, to populated, to populated with focus.

Here it is in action: