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


Slide1 l.jpg

UNESCO Knowledge Portal

Graphic Solutions

http://www.unesco.org


Unesco org l.jpg

UNESCO.ORG

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


Unesco org3 l.jpg

UNESCO.ORG

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


Unesco org4 l.jpg

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 org5 l.jpg

UNESCO.ORG

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


Unesco org6 l.jpg

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 org7 l.jpg

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 l.jpg

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 subportals9 l.jpg

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 subportals10 l.jpg

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 subportals11 l.jpg

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 subportals12 l.jpg

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 subportals13 l.jpg

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 subportals14 l.jpg

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 l.jpg

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 shtml16 l.jpg

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 shtml17 l.jpg

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 shtml18 l.jpg

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 shtml19 l.jpg

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 l.jpg

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 science21 l.jpg

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 science22 l.jpg

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 science23 l.jpg

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 science24 l.jpg

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 science25 l.jpg

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 l.jpg

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 social27 l.jpg

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 social28 l.jpg

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 social29 l.jpg

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 social30 l.jpg

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 l.jpg

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 culture32 l.jpg

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 culture33 l.jpg

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 culture34 l.jpg

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 culture35 l.jpg

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

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


Culture http www unesco org culture36 l.jpg

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 culture37 l.jpg

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 l.jpg

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 shtml39 l.jpg

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 shtml40 l.jpg

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 shtml41 l.jpg

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 shtml42 l.jpg

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 shtml43 l.jpg

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 consistency graphic and ergonomical solutions l.jpg

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 consistency graphic and ergonomical solutions45 l.jpg

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 consistency graphic and ergonomical solutions46 l.jpg

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 consistency graphic and ergonomical solutions47 l.jpg

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.


Principles for the design of the single portal l.jpg

Principlesfor the design of the single Portal


Principles for the design of the single portal49 l.jpg

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.


Principles for the design of the single portal50 l.jpg

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


Principles for the design of the single portal51 l.jpg

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.


Principles for the design of the single portal52 l.jpg

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.


Principles for the design of the single portal53 l.jpg

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.


Principles for the design of the single portal54 l.jpg

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.


Principles for the design of the single portal55 l.jpg

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.


Principles for the design of the single portal56 l.jpg

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.


Principles for the design of the single portal57 l.jpg

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.


Principles for the design of the single portal58 l.jpg

Principlesfor the design of the single Portal

Page structure

  • The basic page structure is based on the following:


Principles for the design of the single portal59 l.jpg

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.


Principles for the design of the single portal60 l.jpg

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.


Principles for the design of the single portal61 l.jpg

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.


Principles for the design of the single portal62 l.jpg

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…


Principles for the design of the single portal63 l.jpg

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


Principles for the design of the single portal64 l.jpg

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


    Principles for the design of the single portal65 l.jpg

    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


    Principles for the design of the single portal66 l.jpg

    Principlesfor the design of the single Portal

    • Typographical rules

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


  • Principles for the design of the single portal67 l.jpg

    Principlesfor the design of the single Portal

    • Typographical rules

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


  • Principles for the design of the single portal68 l.jpg

    Principlesfor the design of the single Portal

    • Typographical rules

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


  • Principles for the design of the single portal69 l.jpg

    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.


  • Principles for the design of the single portal70 l.jpg

    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