Page design and formatting

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

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

Formatting resources

• Using galleries
• Don't display table of contents
• Wikitext coding reference

Image resources

Open license images

• Wikimedia Commons
• Unsplash (all images uploaded after 5 June 2017 use a non-standard license which is incompatible with Wikimedia projects)
• Pixabay royalty free images (CC0)

Icons

• Noun Project
• Noun Project Icons on Commons

How to prepate images from the Noun Project for Commons

▼

	Download the image as .svg Open it in Inkscape Click on the credit and delete it (might be two objects) Click on File > Document Properties and make the canvas size 100x100 Select all and then right click and select Group Resize to fit the canvas with a bit of a border File > Save (not save as)

Proforma

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

Examples

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

Blanks

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

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

Usage

Examples where this formatting has been used.

Icons with text

Examples

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.

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

Text goes here

Title text

Body text

Description

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

• WikiProject:United Nations
• Wikidata Data Import Guide
• Wiki4Women

Title banners

Examples

UN Media

Overview of Wikimedia

Wikimedia projects

Blanks

Title

Description

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

• Wikiproject United Nations
• Wiki4Women

Drop down menus

Examples

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.

Wikivoyage

▼

Language
English
Deutsch
Français
Italiano
فارسی
Nederlands
Português
Polski
Русский
Español
Việt
Svenska
中文
עברית
Română
Ελληνικά
Українська

Blanks

Title text

▼

	Text here

Description

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

• Wikiproject United Nations, used to transclude a section of another page for quick reference
• Wikiproject United Nations to hide huge lists that may be useful to some people but not others

Tables with no borders

Examples

	Promote the project	Encourage other people to take part on social media including Facebook, Twitter and Instagram using the links above.	2 minutes
	Suggest a person	Suggest a person who should have a Wikipedia article.	3 minutes
	Suggest a list	Suggest an existing list of women who should have Wikipedia articles.	3 minutes

Blanks

	Section heading	Description text	Time
	Section heading	Description text	Time
	Section heading	Description text	Time

Description

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

• Wiki4Women

Galleries with icons in description

Examples

• Topics
• 
  Archives
  
• 
  Art
  
• 
  Biography
  
• 
  Biology
  
• 
  Encyclopedia
  
• 
  Entertainment
  
• 
  Food
  

Blanks

• Title text
• 
  Text 1
  
• 
  Text 2
  
• 
  Text 3
  

Description

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

Title and subtitle with graphic

Example

Switched On Working with experts to build a worldwide database of sexuality education

Blanks

Title Subtitle

Description

A good way of creating a title for a page, the subtitle size is a percentage of the title size so changing the title size will change the subtitle size automatically

Usage

• https://www.wikidata.org/wiki/Wikidata:Switched_On:_Working_with_experts_to_collate_a_worldwide_database_of_sexuality_topics

Image blocks

Examples

About Wikimedia Commons

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 1,975 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

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

• Wikimedia Commons Simple Media Reuse Guide