Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle icons: Difference between revisions

From MoodleDocs
Line 27: Line 27:
== Format ==
== Format ==


* Activity icons: gradient colour, 24x24 px canvas, output 24x24 px
* Plugin icons: gradient colour, 16x16 px canvas, output 16x16 px. Except for:
* Plugin icons: gradient colour, 16x16 px canvas, output 16x16 px
** Activity icons: gradient colour, 24x24 px canvas, output 24x24 px
* Block icons: monochrome, 16x16 px canvas, output 16x16 px
* Action icons: monochrome, 12x12 px canvas, output 12x12 px. Except for:
* Action icons: monochrome, 12x12 px canvas, output 12x12 px
** Toolbar icons: monochrome, 16x16 px canvas, output 16x16 px
** Dropdown icons: monochrome, 16x16 px canvas, output 16x16 px
* Display icons: monochrome, 16x16 px canvas, output 16x16 px
* SVG (Scalable Vector Graphics) and PNG version in different sizes (12px, 16, 24) for unsupported browsers in 72ppi
* SVG (Scalable Vector Graphics) and PNG version in different sizes (12px, 16, 24) for unsupported browsers in 72ppi



Revision as of 06:35, 10 April 2014

Complete overhaul of all standard icons in core
Project state Completed
Tracker issue MDL-34080
Discussion New default icon set for Moodle 2.4 roadmap
Assignee Barbara Ramiro and Frédéric Massart

Moodle 2.4

The default icons have undergone a complete overhaul for Moodle 2.4. Not only are the new icons a little bigger and more colourful but they are SVG format and support full scaling on all devices, so they always look good.

Summary of changes

To make your activity modules look good, you need to upgrade your icons by adding some SVG files. Use the following design guidelines to produce an icon that plays well with the core ones.

  • Icon format: SVG preferred and PNG version for fallback
  • Activity icons: Increased in size from 16x16 to 24x24 px colour
  • Action icons: Standardized from various sizes to 12x12 px monochrome
  • All other icons: Standardized from various sizes to 16x16 px monochrome

Objectives

  • Universal design - commonly used
  • Distinctive shape and form for its function or purpose
  • Works well on light and dark background
  • Scalable for multiple screen resolutions

Format

  • Plugin icons: gradient colour, 16x16 px canvas, output 16x16 px. Except for:
    • Activity icons: gradient colour, 24x24 px canvas, output 24x24 px
  • Action icons: monochrome, 12x12 px canvas, output 12x12 px. Except for:
    • Toolbar icons: monochrome, 16x16 px canvas, output 16x16 px
    • Dropdown icons: monochrome, 16x16 px canvas, output 16x16 px
  • Display icons: monochrome, 16x16 px canvas, output 16x16 px
  • SVG (Scalable Vector Graphics) and PNG version in different sizes (12px, 16, 24) for unsupported browsers in 72ppi

Style

  • Flat perspective
  • Not too much details on small resolutions
  • Not too few details on higher resolutions
  • Consider space and proportion
  • Source of light: 90 degrees
  • Sharp
  • Consistent curvature on rounded corners
  • Lighting and gradients should have consistent amount and direction

Activity icons

Properties

  • Outline: Outer border - dark gradient
  • Highlight: inner border - light gradient
  • Body - Gradient

design-activity-icon.png

Effects on same colour background

  • With highlight, it stands out from the background
  • Without highlight it blends into the background

design-activity-icon-effects.png

Samples

design-activity-icon-samples.png

Gradient colour palette

  • Column 1: Outer outline (top to bottom)
  • Column 2: Inner outline - highlight (top to bottom)
  • Column 3: Body (top to bottom)

The palette in a file format suitable for Inkscape can be downloaded from [1]

design-activity-icon-palette.png

Action and block Icons

Dimensions

  • Block icons: canvas 16x16px - output 16x16 px
  • Action icons: canvas 12x12px - output 12x12 px

Style

  • Simple (not too detailed)
  • Flat
  • Smooth curves
  • Fill entire dimension (rotate to 45 deg for thin shapes)
  • Single layer

Colour

  • #999999 (r:153 g:153 b:153)

Samples

design-action-block-icon-samples.png

SVG settings (Illustrator)

  • SVG Profile: SVG 1.1
  • Font Subsetting: None (use system fonts)
  • Image Location: Embed Images
  • CSS Property: Style attributes
  • Font Type: SVG
  • Encoding: UTF-8
  • Not compressed (compressed creates svgz and becomes unusable)
  • Vector data precision: 1 decimal
  • Use illustrator effects rather than Photoshop effects (to make it vector rather than raster)
  • Add effect layer rather than direct on the object for easy editing

Illustrator files:

General recommendations

Make it easy for designers to edit the SVG file in image editor and for themers to edit it in the text editor:

  • Use as few vector points as possible (no unnecessary points)
  • If possible, use basic shapes and the pathfinder tools instead of the pen tool
  • Clean layers: remove unnecessary or unused layers. Group and name it accordingly
  • Use effects that allows roundtrip without rasterization (meaning it should not render raster from svg to illustrator to svg)
  • Use grids: 12, 16 and 24

See also