Page design and formatting

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search


Noun project drafting icon 1446749 cc.svg

This page is to collect examples of visually appealing page layouts with examples, ready to use blanks and links to related documentation and other useful resources. Once it expands to a certain size it will be broken down into sub pages.

Please don't use visual editor on this page, it will probably break things.

Resources[edit]

Noun Project resources icon 901632 cc.svg

This section provides links to different resources that may be useful in understanding how to format and present pages.


Noun Project formatting icon 1413313 cc.svg


Noun Project image icon 212472 cc.svg

Image resources[edit]

Open license images[edit]

Icons[edit]

Proforma[edit]

Please use this format when adding a new section to this page including this heading.

Examples[edit]

Examples of the the formatting being used (screenshots are OK if it is not possible to make it work here).

Blanks[edit]

Blank versions that make it easy for people to reuse, if it is not possible to provide these here because of templates etc, please create them somewhere else and link to them.

Description[edit]

A description including tips, any issues or limitations, links to resources used etc.

Usage[edit]

Examples where this formatting has been used.


Icons with text[edit]

Examples[edit]

Noun Project broadcast icon 761688 cc.svg

Wikimedia websites are some of the most used educational resources in the world, they receive 14 billion page views per month from 500 million people. This includes access through zero rated services including Facebook Free Basics and Wikipedia Zero. Additionally, information from Wikipedia and Wikidata appear in Google Knowledge Graph and on Facebook.

High-contrast-zoom-in.svg

Help more people to see your information

Data from Wikidata is used by many high traffic websites including Wikipedia which is one of the most used websites in the world </> receiving over 15 billion page views per month.

Blanks[edit]

Example.svg

Text goes here

Example.svg

Title text

Body text

Description[edit]

This formatting is helpful for breaking up text heavy documentation into smaller pages, section heading can be used within the blocks. Icons come from The Noun Project.

Usage[edit]


Title banners[edit]

Examples[edit]

UN Media



Overview of Wikimedia

Wikimedia projects

Blanks[edit]

Title


Description[edit]

An attractive way to do section headings, they still generate sections in the table of contents.

The <h> numbers define the heading type, e.g <h2> is equivalent to == == and <h4> is equivalent to ==== ====.

Usage[edit]


Drop down menus[edit]

Examples[edit]

link Education for Sustainable Development
  • Climate Change Education clearing house: Comprehensive resource library and information exchange on HIV and AIDS to support ministries of education, development agencies, civil society, researchers and other education partners, to develop effective HIV and AIDS, school health and sexuality education.
  • Global Action Programme on Education for Sustainable Development Clearinghouse: The GAP ESD Clearinghouse is a repository for Education for Sustainable Development (ESD) resources and news events from all UNESCO regions. It aims to serve as the central information platform for the Global Action Programme (GAP) on ESD and to collect and share learning resources, good ESD practices and innovative research.

Blanks[edit]

link Title text

Text here

Description[edit]

Drop down menus are helpful for providing quick reference to information and hiding long lists. Can be edited in Visual Editor (the edit window shows the list expanded).

Usage[edit]


Tables with no borders[edit]

Examples[edit]

Noun 33167 - Social media.svg
Promote the project Encourage other people to take part on social media including Facebook, Twitter and Instagram using the links above. link 2 minutes
Noun Project woman icon 362180 cc.svg
Suggest a person Suggest a person who should have a Wikipedia article. link 3 minutes
Noun Project women icon 1186957 cc.svg
Suggest a list Suggest an existing list of women who should have Wikipedia articles. link 3 minutes

Blanks[edit]

Example.svg
Section heading Description text link Time
Example.svg
Section heading Description text link Time
Example.svg
Section heading Description text link Time

Description[edit]

Tables without borders are a good way of displaying information in a structured way without it really looking like a table.

Issues:

  • The table shrinks to fit the width of the text inside it, this may be an issue in some situations using several tables which will look inconsistent.

Usage[edit]


Galleries with icons in description[edit]

Examples[edit]

Blanks[edit]

Description[edit]

Useful for creating page with many options without using tables, icons from The Noun Project are useful.

Image blocks[edit]

Examples[edit]





About Wikimedia Commons

Salvatore Postiglione Motiv aus dem Decamerone cropped.png

This simple guide will take you through the process of using the millions of high resolution photos on Wikimedia Commons which are free of charge to use, including for commercial use. This guide also applies to the other media (e.g audio and video) found on the website.

Wikimedia Commons has 2,260 freely licensed and public domain educational images, audio and video available to everyone, in their own language. Wikimedia Commons acts as the central media archive for the various Wikimedia projects including Wikipedia, it contains content from both organisations and individuals and is created and maintained by volunteers.

Wikimedia is a global movement whose mission is to bring free educational content to the world. Wikimedia strives to bring about a world in which every single human being can freely share in the sum of all knowledge.

Blanks





Example title text

Salvatore Postiglione Motiv aus dem Decamerone cropped.png

Example text

Example Text

Example text

Description

The background colour of the text block is based on a colour common in the image. Currently the images must be cropped to a specific format (2,100 × 550 pixels) to be included in the template.


Issues:

  • The formatting messes up the Table of Contents and includes very long subsection headings, __NOTOC__ can be used on the page to remove the table of contents.
  • The formatting for some reason make sections headings underneath break and restricts anything underneath to 1000 pixels wide.
  • The formatting is very broken on mobile phones

Usage[edit]