Tool of web design

1. 1 STUDIO GNOT
Strategic advice
For design projects related to communication media
Web design
Conception, information architecture, content guidelines,
interface design (graphic design, interaction design and usability),
implementation
Editorial conceptions
Ghost-writing and editing of coordinated-image handbooks, technical
documentation
This brochure has a selection of recent works on the web, since 1997.
My aim here is to give you a taste of what I have accomplished as an
information architect, graphic designer and, above all, as the creator of
coordinated systems for content architecture and user interface on the web.

2. 2 WEB SITE DESIGN
1996 > 2009
Coordinated web sites systems
Single web sites
Major tasks:
Vision and concept
Strategic advice
Information Architecture
Interface Design: graphic layout
and navigation
Html implementation
User training

3. 3 WEB SITE DESIGN
“A coordinated visual identity can be
traced back to the times of the
crusades. Many armies from different
countries were fighting on the same
battle field... the only way to
distinguish friends from enemies was
to identify the allies via an unique
visual distinction such as the shields
marked with with a red cross on a
white background.... ”
1996 > 2009
Coordinated web sites
systems

4. 4
Continued collaboration with ILO mainly focused on:
 The definition of a new business process for web
development across the organization’s
boundaries, including the Regions. The new web
development process generated relevant cost
savings for ILO;
 A coordinated web graphical identity for the ILO
website and its over 150 sub-sites;
 A modular and flexible system for the
normalization of content structure, navigation
and layouts;
 The production of guidelines and formal
methodologies for web development;
 Strategic advice to Senior Management of the
Organization for communication projects on the
web.
WEB SITES DESIGN
Coordinated web
sites systems
2000 > 2009
International Labour Organization

5. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Intranet first version: the Top level 5
The Intranet home page
Besides designing the graphics and layout of the
ILO intranet, the task was to create a “top” layer
acting as an index leading to the many
departmental sites and to harmonize the overall
navigation.
 Concept, pdf 338 Kb
2001- 2003

6. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Intranet first version: the top level 6
Supplementary navigation systems: Site index
The News archive

7. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Intranet first version: Departmental level 7
Examples of departmental sites
developed with the the coordinated
layout
Departmental sites with coordinated layout

8. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
The ILO Intranet as it is now: the Top level 8
More information
 Concept and Information architecture, pdf 326 Kb
 Other graphic proposals
2004
In this new development it has been redesigned the graphical
aspect and introduced an added information space for the ILO
departments to publish their news at the top level. A stronger
coordination was actuated at the departemental level.

9. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
The ILO Intranet as it is now: Coordinated Departmental sites 9
Departmental sites using the coordinated layout

10. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Public: the new site in WCMS, the top level 10
The home page
The new “Dynamic” ILO web site
implemented with a WCMS (Stellent).

Concept and Information architecture, pdf  The site
2004
2009

11. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Public: the new site in WCMS, the top level 11
Other pages at top level
 Go to the page
 Go to the page

12. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Public: Coordinated Departmental sites Level 12
To achive a coordinated visual identity on the web, all the ILO sites
use the same layout system. At the moment the sites are
implentented in “static”, in the future they will be migrated into the
WCMS.
 The site
2004 - 2009
 The site

13. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
ILO Public: the new business process and its relavant tools 13
Page listing the navigation components
The new business process
for web development across
the organization including the
Regions.
Tools and guidelines
On-line hand-book for
implementing Standard
Templates, to be used in Phase 3
Methodology document to be
used in Phase 1

14. 14
Continued colaboration with JRC to
achieve coordination of its web
sites: 8 scientific institutes and
relative 50 working units.
WEB SITES DESIGN
Coordinated web
sites systems
1996 > 2000
Joint Resarch Centre of the
European Commission (DG-JRC)

15. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
JRC first version: JRC level 15
1997 - 1998
The JRC site was
thought as an
“electronic brochure”
made of brief
descriptions
promoting the JRC
activites and
products. The
brochure functioned
as an unique entry
level to technical
descriptions
published by already
existing Units’ web
sites.

16. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
JRC first version: Institute level 16
IAM Institute home page
ISIS Institute home page
The Activity page of EI Institute

17. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
JRC first version: Tools for web editors 17
Template pages index
The grid used to layout the Institute
home page
Example of pages from my on-line
Hand-book used to produce
coordinated web sites
 Online hand-book
Decription of a page component

18. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
The JRC site database driven 18
The site is build according to my data model for content and
metadata. Then site is driven by a database on top of which a
home-made CMS was built to provide for the the presentation
and data contribution. I’va also created the graphic aspects
and layouts. Database lists, pdf 31 Kb
Departmental sites using the coordinated layout
1998

19. WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS
The new JRC site database driven: some pages at top level 19

20. 20 WEB SITE DESIGN
Keywords:
Simplicity
Readibility
Light-weight for fast downloading
1998 > 2007
Single web sites

21. WEB SITES DESIGN SINGLE WEB SITE
SIS-ECVAM: Scientific Information service (JRC) 21
European data bank on alternative methods to
animal experiments in biosciences
 Graphic design
 Information architecture
 Hand-book for the application of the logo
1999

22. WEB SITES DESIGN SINGLE WEB SITE
NEDIES: Natural and Environmental Disaster Information Exchange System (JRC) 22
1999
 Graphic design
 Information architecture and data model

23. WEB SITES DESIGN SINGLE WEB SITE
San Paolo bank: Wealth Management Advisory (WMA) 23
WMA is a San Paolo Unit dedicated to the creation of financial
products and spreading of selling documentation for to agents
of the San Paolo group. In designing this site I fulfilled the
Unit’s goal in presenting the products and spreading the
documentation.
2003
 Graphic design and
 Information architecture, pdf 1.07 Mb

24. WEB SITES DESIGN SINGLE WEB SITE
San Paolo Bank: Universo Servizi 24
2003
 Graphic design

25. WEB SITES DESIGN SINGLE WEB SITE
World Commission on Social Dimension of Globalization (ILO) 25
 Graphic design
 Information architecture
 Implementation
 The site
2003

26. WEB SITES DESIGN SINGLE WEB SITE
UN - Sport for development and peace 26
2004
 Graphic design
 Information architecture
 Implementation
 The site

27. WEB SITES DESIGN SINGLE WEB SITE
ILO Department of comunication (DCOMM) 27
2003
 Graphic design
 Information architecture
 Implementation
Now this site is changed, it has been migrated into the
WCMS used at ILO, go to the site

28. WEB SITES DESIGN SINGLE WEB SITE
Gender Equality tool (ILO) 28
2002
 Graphic design
 Information architecture
 The site has been migrated into the WCMS used at ILO
Data entry mask for Events

29. WEB SITES DESIGN SINGLE WEB SITE
Free finance 29
2000
Online services to request offers of mortgages to
several banks in parallel.
 Engeneering of templates and grids for the
modular layout system

30. 30
Now that you know what you get, call me
STUDIO GNOT
Information Architects and Interface designers
Via Enrico Noe, 25
20133 Milano - Italy
Tel. +39 02 2361227
Mob. +39 335 5629651
maurizio.gnot@fastwebnet.it