tool of web_design

1STUDIO GNOT

Strategic adviceFor design projects related to communication media

Web designConception, information architecture, content guidelines, interface design (graphic design, interaction design and usability), implementation

Editorial conceptionsGhost-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

WEB SITE DESIGN1996 > 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

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

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.

2000 > 2009

International Labour Organization

WEB SITES DESIGN

Coordinated websites systems

5ILO Intranet first version: the Top level

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

WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS

2001- 2003

6ILO Intranet first version: the top level

Supplementary navigation systems: Site index

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

The News archive

7ILO Intranet first version: Departmental level

Examples of departmental sites developed with the the coordinated

layout

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

Departmental sites with coordinated layout

8The ILO Intranet as it is now: the Top level

More information

Concept and Information architecture, pdf 326 Kb

Other graphic proposals

WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS

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.

9The ILO Intranet as it is now: Coordinated Departmental sites

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

Departmental sites using the coordinated layout

10ILO Public: the new site in WCMS, the top level

The new “Dynamic” ILO web site implemented with a WCMS (Stellent).

Concept and Information architecture, pdf 2.5 Mb

The site

The home page

WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS

20042009

11ILO Public: the new site in WCMS, the top level

Other pages at top level

WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS

Go to the page

Go to the page

12ILO Public: Coordinated Departmental sites Level

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.

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

2004 - 2009

The site

The site

13ILO Public: the new business process and its relavant tools

Page listing the navigation components

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

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

The new business process

for web development across the organization including the Regions.

14

Continued colaboration with JRC to achieve coordination of its web sites: 8 scientific institutes and relative 50 working units.

1996 > 2000

Joint Resarch Centre of the European Commission (DG-JRC)

WEB SITES DESIGN

Coordinated websites systems

15JRC first version: JRC levelCOORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

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.

16JRC first version: Institute level

IAM Institute home page

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

ISIS Institute home page

The Activity page of EI Institute

17JRC first version: Tools for web editors

Template pages index

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

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

18The JRC site database driven

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

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

1998

19The new JRC site database driven: some pages at top level

COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN

20

WEB SITE DESIGN

Keywords:

Simplicity

Readibility

Light-weight for fast downloading

1998 > 2007

Single web sites

21SIS-ECVAM: Scientific Information service (JRC)

European data bank on alternative methods to animal experiments in biosciences Graphic design Information architecture Hand-book for the application of the logo

WEB SITES DESIGN SINGLE WEB SITE

1999

22NEDIES: Natural and Environmental Disaster Information Exchange System (JRC)

1999 Graphic design Information architecture and data model

SINGLE WEB SITE WEB SITES DESIGN

23San Paolo bank: Wealth Management Advisory (WMA)

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.

SINGLE WEB SITE WEB SITES DESIGN

2003 Graphic design and

Information architecture, pdf 1.07 Mb

24San Paolo Bank: Universo ServiziSINGLE WEB SITE WEB SITES DESIGN

2003

Graphic design

25World Commission on Social Dimension of Globalization (ILO) Graphic design Information architecture Implementation The site

WEB SITES DESIGN SINGLE WEB SITE

2003

26UN - Sport for development and peace WEB SITES DESIGN SINGLE WEB SITE

2004

Graphic design Information architecture Implementation The site

27ILO Department of comunication (DCOMM) WEB SITES DESIGN SINGLE WEB SITE

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

28Gender Equality tool (ILO) WEB SITES DESIGN SINGLE WEB SITE

2002

Graphic design Information architecture The site has been migrated into the WCMS used at ILO

Data entry mask for Events

29Free finance

Online services to request offers of mortgages to several banks in parallel.

WEB SITES DESIGN SINGLE WEB SITE

2000

Engeneering of templates and grids for the modular layout system

30

Now that you know what you get, call me

STUDIO GNOT Information Architects and Interface designers

Via Enrico Noe, 2520133 Milano - ItalyTel. +39 02 2361227Mob. +39 335 5629651maurizio.gnot@fastwebnet.it