The Wikimedia Design Style Guide does provide principles and guidelines to help answer interaction design questions.
Its resources enable designers and developers from our communities build on top, saving valueable time. The files are provided in format of original software (here Sketch and Adobe Illustrator), and also as copy in an open format for use in license-free software.
Several listed resources are also hot linked from the related sections, all binary files are part of the GitHub repository in main 'resources' folder.
User-interface resources, which are aligning to the Design Style Guide principles are labelled “WikimediaUI”.
Components – WikimediaUI theme
Components are the building blocks for interfaces.
- Collection of all “WikimediaUI” icons, Adobe Illustrator file
- Template for creating new conforming icons, Adobe Illustrator, Sketch, SVG
In 'resources/WikimediaUI-icon_template_SVG_shapes' folder you find specific template forms – circular, diagonal, long, square and tall
Base style variables
For products that are technically bound to other UI libraries or frameworks, we also provide base style variables to implement a “WikimediaUI” look and feel. It includes all generalizable component like complete color palette or best-practice interaction values for animations and transitions. It is for example used for OOUI's main theme.
Design Style Guide imagery
Following the “open to collaboration” principle, we also share the Wikimedia Design Style Guide imagery Sketch file, with all creations by Design team for guide's sections.