Iconography and Illustration
Below are the typical icons used throughout the CMS to give clear visual direction to what the button or section is about.
|
tick in the checkbox |
|
remove from table |
|
delete |
|
group access |
|
close modal |
|
clear search |
|
user group locked |
|
user group unlocked |
|
error or warning |
|
blue remove icon |
|
red remove icon |
|
add widget icon |
|
remove icon |
|
add link icon |
|
drop down arrows |
|
up arrow |
|
down arrow |
|
alert - error |
|
alert - sucess |
|
alert - informational |
|
schedule |
Placeholder Icons
Placeholder icons are used throughout the Content Management System and are used as a replacement for a featured image on a list, page, file, video, contact or webpage.
They act as a visual representation of the content type if that content item is missing a featured image. The media library and existing modal use the placeholder icons for videos and files.
Each icon has an opacity of 75% when placed instead of a featured image. The media library and existing content modal feature specialist placeholders which include a background.
List
Page
File
Webpage
Video
Contact
RSS
Missing Asset Placeholder
The missing asset placeholder icon is used when an asset that is being used as a featured image or has been placed within a modular page, has been deleted from the media library or for other reasons cannot be found.
This icon has an opacity of 75% in all instances.
This asset has been deleted from the media libary
Refer to the CMS Widgets section for more on the missing asset placeholder's behaviours.
Missing asset on a modular page item (left) Missing asset on featured image (right)
Illustration
Throughout the CMS, illustrations are used to enhance visual feedback to users. Illustrations have a specfic colour palette and style that suits the current UI.
Delete
No search results
No existing content
Generic Media Library
Empty Media Library
Drag and drop
Icon and Illustration Guidelines
When drawing a new icon or illustration for use in the platform, the following guidelines should be used.
The colour palette used is limited. Below are the two main colours used for icons and illustrations. Icons should be kept simple and clear and when appropriate, should be labeled. Some icons and illustrations require some extra detail or shading, this is only when extra detail is required to communicate what the icon is. Icons should be as simple as possible... but not too simple.
Below is a guide of what to do and what not to do when creating an icon.
Some illustration used throughout the CMS have a limited colour palette and are kept quite minimal whne it comes to detail. Some illustrations feature a smiley face to give the UI a more friendly feel.
Shading/background colour is created using the light blue grey colour. There should always be white space left between the background ending and the edges of the icon shape. The background/shading should never fill the entire inside of the icon shape.
Here's what to do
and here's what NOT to do
Colours
The following colours are used to create the icons and illustrations throughout the platform. They are set at a 75% opacity when appropriate such as when used in placeholder icons.
Refer to CMS Colour Palette for colour hex codes.