slide1
Download
Skip this Video
Download Presentation
UNESCO Knowledge Portal Graphic Solutions

Loading in 2 Seconds...

play fullscreen
1 / 70

UNESCO Knowledge Portal Graphic Solutions - PowerPoint PPT Presentation


  • 255 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'UNESCO Knowledge Portal Graphic Solutions' - albert


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
UNESCO Knowledge Portal

Graphic Solutions

http://www.unesco.org

unesco org
UNESCO.ORG
  • UNESCO presence in the Internet facilitates consultation and access to information from all over the world.
unesco org3
UNESCO.ORG
  • In many cases it is the only possible link between the user and the Organization.
unesco org4
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
UNESCO.ORG
  • The UNESCO Portal is not only a vital working toolbut the immediate support of the visual identity of UNESCO.
unesco org6
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Culture http://www.unesco.org/culture
  • An avantgarde typography has been chosen for headings, slogans and logo.
culture http www unesco org culture36
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
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
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
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
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
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
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
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
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
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
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
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 portal49
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
ad