Slide1 l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 70

UNESCO Knowledge Portal Graphic Solutions PowerPoint PPT Presentation

UNESCO Knowledge Portal Graphic Solutions http://www.unesco.org UNESCO.ORG UNESCO presence in the Internet facilitates consultation and access to information from all over the world. UNESCO.ORG In many cases it is the only possible link between the user and the Organization. UNESCO.ORG

Download Presentation

UNESCO Knowledge Portal Graphic Solutions

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


UNESCO Knowledge Portal

Graphic Solutions

http://www.unesco.org


UNESCO.ORG

  • UNESCO presence in the Internet facilitates consultation and access to information from all over the world.


UNESCO.ORG

  • In many cases it is the only possible link between the user and the Organization.


UNESCO.ORG

  • The visual identity of UNESCO in the web is crucial for users of many different backgrounds, ages, origins, cultures, education levels and structures: Institutions, organizations, corporations, professionals, individuals, as well as UNESCO staff and team collaborators.


UNESCO.ORG

  • The UNESCO Portal is not only a vital working toolbut the immediate support of the visual identity of UNESCO.


UNESCO.ORG

  • The UNESCO Portal should reflect the philosophy and the work of the Organization, as well as its structure and the linkages between the various sectors and departments.


UNESCO.ORG

  • Most importantly, it should at all times respect the graphic codes regarding colour, shape, typography, layout, as well as show and promote creativity, diversity and the identity of its sectors, departments and services.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • The analysis of the knowledge subportals reveals a distinct intention of respecting common codes regarding visual identity, navigation structure and ergonomic solutions.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • Each supbportal has an individual graphic identity but similar structure regarding typography, access to information and links and positioning with regard to other subportals and services.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • Some of them omit aspects of UNESCO visual identity or use it in very different ways as far as shape, size or colour are concerned.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • Basically, this reflects an extremely rapid growth in a new medium such as Internet, as well as the lack of standards requiring graphic consistency.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • In many instances there is a lack of relationship and links between departments, which leads to duplication of information, creates confusion and hampers user´s access to information.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • In many instances as well, documents are not tailored to the web, which means an excess of information in some cases and insufficient information in others.


Analysis and evaluation of the graphic solutions of the five Knowledge Subportals

  • The use of the delta in its different versions as an identification banner of the site, the position of icons and common elements give us hints to the development of a common portal which identifies a compact organization working in different fields as Education, Natural Sciences, Social Sciences, Culture, Communication & Information, each keeping its own identity but with common elements within the Organization.


Education http://www.unesco.org/education/index.shtml

  • The banner is dominated by black and white portraits with a subtle coloration which is an elegant allusion to diversity.


Education http://www.unesco.org/education/index.shtml

  • The overall page is dominated by a white background, common to the thematic menu on the left, the central or contents portion and the menu on the right, as well as the top portion, containing the UNESCO logo, the banner, the title and the language options. This gives good consistency to all site areas and an overall cleanliness to the window to diversity.


Education http://www.unesco.org/education/index.shtml

  • Nevertheless, the absence of differentiating elements to isolate each area, e.g. by colour bands or blocks, or by horizontal or vertical lines gives the same priority at the same time to all areas of information.


Education http://www.unesco.org/education/index.shtml

  • The right menu shows a relative richness of colour and illustrations which could divert the user´s attention from the other areas.


Education http://www.unesco.org/education/index.shtml

  • The left menu shows a nice graphic detail in different colours but a suggested pale grey background is covered by the white background of each title.


Natural Sciences http://www.unesco.org/science

  • The top area contains several thematic images, one of them highlighted. This is a good way to focus attention on particular issues.


Natural Sciences http://www.unesco.org/science

  • The blue and yellow of the delta strokes are repeated as the colour code in the rest of the window. Blue is used in the thematic areas on the left side and yellow for resources and events on the right side.


Natural Sciences http://www.unesco.org/science

  • These menus are delimitated by blue vertical lines which separate them visually from the central contents area. The icon menu and the central headings are separated by blue horizontal lines.


Natural Sciences http://www.unesco.org/science

  • This set of lines gives structure to the different areas of the page in the traditional layout used in newspapers to differentiate columns and articles.


Natural Sciences http://www.unesco.org/science

  • The abundance of information contained in the central area makes it an excessively long page.


Natural Sciences http://www.unesco.org/science

  • The amount of images, logos and photographs is adequate for easy downloading and gives a clean look and ease of navigation.


Social Sciences http://www.unesco.org/general/eng/programmes/social/

  • This subportal has a different visual structure. There is a fixed resources menu on the right and the central section is actually divided in two, so there are four vertical columns.


Social Sciences http://www.unesco.org/general/eng/programmes/social/

  • The excellent graphic solution of the banner which extends downwards and to the left, beyond the delta, contains close-up portraits of a girl, a man and a woman in which the most important features are the eyes.


Social Sciences http://www.unesco.org/general/eng/programmes/social/

  • The titles use a strong, narrow typography over colour bands which reinforce the structure and the different sections.


Social Sciences http://www.unesco.org/general/eng/programmes/social/

  • The adequate amount of information, condensed in single sentences, is a good introduction for the related links. The colour blocks, in subtle shades of grey and ivory, separate well the different areas (resources, features, themes, news…).


Social Sciences http://www.unesco.org/general/eng/programmes/social/

  • The subportal has a strong design and a marked “journalistic style”. As far as the visual identity is concerned, it is the only subportal in which the UNESCO logo is used in black on an ochre background.


Culture http://www.unesco.org/culture

  • This is the only subportal not using an image for the banner but the logo of the sector, the word “culture”, in a large size.


Culture http://www.unesco.org/culture

  • The layout of the portal focuses on the left-hand menu, consisting of bright coloured bands and titles in negative on the bands.


Culture http://www.unesco.org/culture

  • Blue dominates the page; it is used for the typography of the titles and for the UNESCO logo


Culture http://www.unesco.org/culture

  • This subportal also carries an excess of information in the news section, in the center area.


Culture http://www.unesco.org/culture

  • An avantgarde typography has been chosen for headings, slogans and logo.


Culture http://www.unesco.org/culture

  • The right-hand menu, features and resources, appears in a blue margin box on a white background.


Culture http://www.unesco.org/culture

  • The use of square shaped images, all in the same small size, unifies the whole layout; the images serve as icons which can be used to access information.


Communication & Information http://www.unesco.org/webworld/index/shtml

  • The banner consists of a single image which fades into the white background in a geometrical pattern.


Communication & Information http://www.unesco.org/webworld/index/shtml

  • With a red dominant, this subportal has a structure in which once again the different areas of the window are defined by subtle shades of grey and red.


Communication & Information http://www.unesco.org/webworld/index/shtml

  • The menus appear on the left hand side and the news content on the right.


Communication & Information http://www.unesco.org/webworld/index/shtml

  • Just as in the Culture subportal, here the equal size of the images unifies the look. News items are separated with dotted lines and each one carries a square image and a small “more” icon which leads to complete information.


Communication & Information http://www.unesco.org/webworld/index/shtml

  • Emphasizing the red dominant, the UNESCO logo is used in white against a red background.


Communication & Information http://www.unesco.org/webworld/index/shtml

  • The typographical and cromatic sharpness and the graphical simplicity gives great fluidity and ease of navigation and makes information very readable.


Looking for consistencyGraphic and ergonomical solutions

  • The study of the subportals shows that all have a similar structure and organization of information, with similar navigation hierarchy and ergonomy, but without graphical consistency.


Looking for consistencyGraphic and ergonomical solutions

  • Building on the experience and the positive features of each one of the subportals and respecting their design, elements and chromatic diversity, we propose their unification through graphical codes which take into account the original features of each subportal and respect the graphical identity of UNESCO.


Looking for consistencyGraphic and ergonomical solutions

  • With the constant position of their elements, a single structure, typographical consistency, geometrical construction and hierarchy of headings, we propose making navigation easier and establishing a single portal.


Looking for consistencyGraphic and ergonomical solutions

  • The main concept is that UNESCO.ORG should be the only portal which opens the different doors of knowledge to its users, and the common link between the different knowledge sectors.


Principlesfor the design of the single Portal


Principlesfor the design of the single Portal

  • Top strip

  • Rapid access menu to Organization, the five Knowledge Subportals and Sitemap and Services. On a dark grey background, a small band (23 pixels high) with text in negative.


Principlesfor the design of the single Portal

Delta

  • Consists of an oblique stroke (arc of a circle) and a pale grey horizontal strip (23 pixels high) which defines four areas:

  • Main image of the page

  • UNESCO logo

  • Language choice area

  • Page contents


Principlesfor the design of the single Portal

Main image

  • Consisting of a single image (596 x 80 pixels)

  • which fades to the left with the white background of the logo area, limited by the oblique line of the Delta; to the right it can fade with the dominant colour of the page or with the white background.


Principlesfor the design of the single Portal

UNESCO logo

  • The UNESCO logo shall always appear on the top left hand side of the portal, immediately below the top menu strip.


Principlesfor the design of the single Portal

UNESCO logo

  • It is always closely linked to the main image of each page, inserted in the delta.


Principlesfor the design of the single Portal

UNESCO logo

  • It should always appear in dark grey on a white background; both lines of text aligned to the right of the symbol.


Principlesfor the design of the single Portal

UNESCO logo

  • The height of the logo, including both lines of text, should be 58 pixels inside a white surface of 182 x 80 pixels, bordered by a vertical line of 1x44 pixels which starts in the top right angle of the white surface and ends at the bottom of the UNESCO symbol.


Principlesfor the design of the single Portal

Language choice area

  • The different languages appear in two columns on a grey-to-white fading background, towards the fertilization point of the delta.


Principlesfor the design of the single Portal

Page contents

  • Headed by a grey band immediately below the banner. This band includes the page title (sector or service), first in the hierarchy of titles, aligned with the rest of titles and subtitles of the contents area and the main contents text.


Principlesfor the design of the single Portal

Page structure

  • The basic page structure is based on the following:


Principlesfor the design of the single Portal

Page structure

  • A horizontal heading with the top menu, all the delta elements (logo, banner image, title band). The right hand portion of the title band, in a darker shade of grey, contains the “search” icon and box.


Principlesfor the design of the single Portal

Page structure

  • Headed by the language choice area on the left hand side, a main menu (182 pixels wide) with the main themes as well as a regions/countries, Member States menu which could include icons and maps.


Principlesfor the design of the single Portal

Page structure

  • A central area with a proportional variable width according to window width depending on the navigation program and the screen definition.


Principlesfor the design of the single Portal

Page structure

  • A reference menu (182 pixels wide) limited by a pale grey background with interactive access to information which extends the main contents of the page: references, resources, features, documents, events, publications…


Principlesfor the design of the single Portal

Page structure

  • A dark grey footer band which closes the contents of the page and includes a link to the homepage “unesco.org” as well as a link to technical and legal information (disclaimer, privacy policy, user ID…)


Principlesfor the design of the single Portal

  • Typographical rules

  • All the elements of texts are typographical resources which depend on the navigator program preferences; this means that “image-texts” should be avoided, as they can slow downloading or disappear.

  • RESOURCES

    FEATURES

    CULTUE SECTOR


    Principlesfor the design of the single Portal

    • Typographical rules

  • Sans-serif fonts such as all variants of Verdana or Arial should be used.

  • RESOURCES

    FEATURES

    CULTURE SECTOR


    Principlesfor the design of the single Portal

    • Typographical rules

  • The main title in the grey band should be black colour, bold version, size 16


  • Principlesfor the design of the single Portal

    • Typographical rules

  • The page title should be dark grey, regular version, size 16.


  • Principlesfor the design of the single Portal

    • Typographical rules

  • Subtitles should be dark grey, regular version, size 12.


  • Principlesfor the design of the single Portal

    • Typographical rules

  • Small titles in each item should be bold version, size 11, and the main text size 9. In order to differentiate sections within the main contents, a title should be used, size 16 regular version, followed by a horizontal line starting at the end of the title.


  • Principlesfor the design of the single Portal

    • Typographical rules

  • The titles in the side menus shall be based on a colour strip (182 x 23 pixels); text should be white, regular version, size 11.


  • Login