A list of commonly used devices and elements used for structure organisation and layout all of which contribute to the overall user interface.
More to be added...
This grey block is a panel or a card.
Used with grids to separate or highlight content
This stack of UI components are displayed in a masonry grid which stacks cards/boxes in a format similiar to bricks
https://isotope.metafizzy.co/ is one example of a JQuery plugin that's quite useful.
A device useful for navigating deep structures and aiding users to see their journey and navigate back to previous sections
Buttons are used for interaction. eg.
This masonry grid features a filter which allows panels of a certain type to be shown while others are hidden. This can be used to organise information and ease in finding specific items.
A useful Jquery plugin for masonry grids and filters: https://isotope.metafizzy.co/
Buttons are used for interaction. eg.
Thumnails are usually separate smaller size image files of a larger image. Use thumnails for quicker downloads with an option to open a larger image if needed.
Lighboxes are one example of a method to open larger images in a modal format
Modals are similar but usually contain articles
This opens a modalMore of a presentation method and not so much a component but still interesting. This was a big trend in web sites at one point but seems to be dying off.
Parallax is based on mathematical/physics principles dealing with displacement of objects giving the illusion of depth. Traditionally it was used in theatre set designs to create the illusion of large scenes on a small stage when combined with foreshortening and perspective trickery. The same concept is used in websites to create interesting movement and illusion of depth in user interfaces. Commonly used with images while scrolling down a long page.
Navigation is common in websites and apps. The horizontal navigation bar is one of the most common.
Almost a standard part of navigation, Dropdowns are useful due to their space saving nature and means of grouping and categorisation
An element hidden by default off to one side of the screen which can slide in when via interaction with a link/button or some other trigger.
Bulleted items, striped, a list is pretty much self-explanatory
Similiar to Tabs and Switchers, Accordions are a way of organising information in a compact format.
Sliders are often used as banners to display galleries of images, slides or sales promotions. There are many Jquery plugins out there which acheive the same function in varying degrees of complexity.
This particular example below is FlexSlider