Page design and formatting


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.

ResourcesEdit

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 image icon 212472 cc.svg

Image resourcesEdit

Open license imagesEdit

  • 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)

IconsEdit

link How to prepate images from the Noun Project for Commons
  1. Download the image as .svg
  2. Open it in Inkscape
  3. Click on the credit and delete it (might be two objects)
  4. Click on File > Document Properties and make the canvas size 100x100
  5. Select all and then right click and select Group
  6. Resize to fit the canvas with a bit of a border
  7. File > Save (not save as)

ProformaEdit

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

ExamplesEdit

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

BlanksEdit

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.

DescriptionEdit

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

UsageEdit

Examples where this formatting has been used.


Icons with textEdit

ExamplesEdit

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.

BlanksEdit

Example.svg

Text goes here

Example.svg

Title text

Body text

DescriptionEdit

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.

UsageEdit


Title bannersEdit

ExamplesEdit

UN Media



Overview of Wikimedia

Wikimedia projects

BlanksEdit

Title


DescriptionEdit

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 ==== ====.

UsageEdit


Drop down menusEdit

ExamplesEdit

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.

BlanksEdit

link Title text

Text here

DescriptionEdit

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).

UsageEdit


Tables with no bordersEdit

ExamplesEdit

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

BlanksEdit

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

DescriptionEdit

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.

UsageEdit


Galleries with icons in descriptionEdit

ExamplesEdit

BlanksEdit

DescriptionEdit

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

Title and subtitle with graphicEdit

ExampleEdit

Noun Project Vector icon 1849477.svg

Switched On

Working with experts to build a worldwide database of sexuality education

BlanksEdit

Example.svg

Title

Subtitle

DescriptionEdit

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

UsageEdit

Image blocksEdit

ExamplesEdit





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,059 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

UsageEdit