Your SlideShare is downloading. ×
0
STUDIO GNOT Strategic advice For design projects related to communication media Web design Conception, information archite...
WEB SITE DESIGN <ul><li>Coordinated web sites systems </li></ul><ul><li>Single web site s </li></ul><ul><li>Major tasks: <...
WEB SITE DESIGN <ul><li>“ A coordinated visual identity can be traced back to the times of the crusades. Many armies from ...
<ul><li>Continued collaboration with ILO mainly focused on:  </li></ul><ul><li>The definition of a new  business process f...
ILO Intranet first version: the Top level <ul><li>The Intranet home page </li></ul><ul><li>Besides designing the graphics ...
ILO Intranet first version: the top level <ul><li>Supplementary navigation systems: Site index </li></ul>COORDINATED WEB S...
ILO Intranet first version: Departmental level <ul><li>Examples of departmental sites developed with the the coordinated l...
The ILO Intranet as it is now: the Top level <ul><li>More information </li></ul><ul><li>Concept  and  Information architec...
The ILO Intranet as it is now: Coordinated Departmental sites <ul><li>Departmental sites using the coordinated layout </li...
ILO Public: the new site in WCMS, the top level <ul><li>The new “Dynamic” ILO web site implemented with a WCMS (Stellent)....
ILO Public: the new site in WCMS, the top level <ul><li>Other pages at top level </li></ul>WEB SITES DESIGN COORDINATED WE...
ILO Public: Coordinated Departmental sites Level <ul><li>To achive a coordinated visual identity on the web, all the ILO s...
ILO Public: the new business process and its relavant tools <ul><li>Page  listing  the  navigation   components </li></ul>...
<ul><li>Continued colaboration with JRC to achieve coordination of its web sites: 8 scientific institutes and relative 50 ...
JRC first version: JRC level <ul><li>The JRC site was thought as an “electronic brochure” made of brief descriptions promo...
JRC first version:  Institute level <ul><li>IAM Institute home page </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESI...
JRC first version:  Tools for web editors <ul><li>Template pages index </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES D...
The JRC site database driven <ul><li>The site is build according to my data model for content and metadata. Then site is d...
The new JRC site database driven : some pages at top level COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN
WEB SITE DESIGN <ul><li>Keywords: </li></ul><ul><li>Simplicity </li></ul><ul><li>Readibility </li></ul><ul><li>Light-weigh...
SIS-ECVAM: Scientific Information service (JRC) <ul><li>European data bank on alternative methods to animal experiments in...
NEDIES:  Natural and Environmental Disaster   Information Exchange System  (JRC) <ul><li>1999 </li></ul><ul><li>Graphic de...
San Paolo bank: Wealth Management Advisory (WMA) <ul><li>WMA is a San Paolo Unit dedicated to the creation of financial pr...
San Paolo Bank: Universo Servizi <ul><li>Graphic design </li></ul>SINGLE WEB SITE WEB SITES DESIGN 2003
World Commission on Social Dimension of Globalization (ILO) <ul><li>Graphic design </li></ul><ul><li>Information architect...
UN - Sport for development and peace WEB SITES DESIGN SINGLE WEB SITE 2004 <ul><li>Graphic design </li></ul><ul><li>Inform...
ILO Department of comunication (DCOMM) <ul><li>Now this site is changed, it has been migrated into the WCMS used at ILO,  ...
Gender Equality tool (ILO) <ul><li>Data entry mask for Events </li></ul>WEB SITES DESIGN SINGLE WEB SITE 2002 <ul><li>Grap...
Free finance <ul><li>Online services to request offers of mortgages to several banks in parallel. </li></ul>WEB SITES DESI...
<ul><li>Now that you know what you get, call me </li></ul><ul><li>STUDIO GNOT  Information Architects and Interface design...
Upcoming SlideShare
Loading in...5
×

Studio Gnot Web Design

331

Published on

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.

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
331
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Studio Gnot 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 <ul><li>Coordinated web sites systems </li></ul><ul><li>Single web site s </li></ul><ul><li>Major tasks: </li></ul><ul><li>Vision and concept </li></ul><ul><li>Strategic advice </li></ul><ul><li>Information Architecture </li></ul><ul><li>Interface Design : graphic layout and navigation </li></ul><ul><li>Html implementation </li></ul><ul><li>User training </li></ul>1996 > 2009
  3. 3. WEB SITE DESIGN <ul><li>“ 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.... ” </li></ul><ul><li>Coordinated web sites systems </li></ul>1996 > 2009
  4. 4. <ul><li>Continued collaboration with ILO mainly focused on: </li></ul><ul><li>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; </li></ul><ul><li>A coordinated web graphical identity for the ILO website and its over 150 sub-sites; </li></ul><ul><li>A modular and flexible system for the normalization of content structure, navigation and layouts; </li></ul><ul><li>The production of guidelines and formal methodologies for web development; </li></ul><ul><li>Strategic advice to Senior Management of the Organization for communication projects on the web. </li></ul><ul><li>International Labour Organization </li></ul>Coordinated web sites systems 2000 > 2009 WEB SITES DESIGN
  5. 5. ILO Intranet first version: the Top level <ul><li>The Intranet home page </li></ul><ul><li>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. </li></ul><ul><li>Concept , pdf 338 Kb </li></ul>WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS 2001- 2003
  6. 6. ILO Intranet first version: the top level <ul><li>Supplementary navigation systems: Site index </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN The News archive
  7. 7. ILO Intranet first version: Departmental level <ul><li>Examples of departmental sites developed with the the coordinated layout </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN Departmental sites with coordinated layout
  8. 8. The ILO Intranet as it is now: the Top level <ul><li>More information </li></ul><ul><li>Concept and Information architecture , pdf 326 Kb </li></ul><ul><li>Other graphic proposals </li></ul>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.
  9. 9. The ILO Intranet as it is now: Coordinated Departmental sites <ul><li>Departmental sites using the coordinated layout </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN
  10. 10. ILO Public: the new site in WCMS, the top level <ul><li>The new “Dynamic” ILO web site implemented with a WCMS (Stellent). </li></ul><ul><li>Concept and Information architecture , pdf 2.5 Mb </li></ul><ul><li>The site </li></ul><ul><li>The home page </li></ul>WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS 2004 2009
  11. 11. ILO Public: the new site in WCMS, the top level <ul><li>Other pages at top level </li></ul>WEB SITES DESIGN COORDINATED WEB SITES SYSTEMS <ul><li>Go to the page </li></ul><ul><li>Go to the page </li></ul>
  12. 12. ILO Public: Coordinated Departmental sites Level <ul><li>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. </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN 2004 - 2009 <ul><li>The site </li></ul><ul><li>The site </li></ul>
  13. 13. ILO Public: the new business process and its relavant tools <ul><li>Page listing the navigation components </li></ul><ul><li>The new business process </li></ul><ul><li>for web development across the organization including the Regions . </li></ul>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
  14. 14. <ul><li>Continued colaboration with JRC to achieve coordination of its web sites: 8 scientific institutes and relative 50 working units. </li></ul><ul><li>Joint Resarch Centre of the European Commission (DG-JRC) </li></ul>Coordinated web sites systems 1996 > 2000 WEB SITES DESIGN
  15. 15. JRC first version: JRC level <ul><li>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. </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN 1997 - 1998
  16. 16. JRC first version: Institute level <ul><li>IAM Institute home page </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN ISIS Institute home page The Activity page of EI Institute
  17. 17. JRC first version: Tools for web editors <ul><li>Template pages index </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN The grid used to layout the Institute home page <ul><li>Example of pages from my on-line Hand-book used to produce coordinated web sites </li></ul><ul><li>Online hand-book </li></ul>Decription of a page component
  18. 18. The JRC site database driven <ul><li>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 </li></ul><ul><li>Departmental sites using the coordinated layout </li></ul>COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN 1998
  19. 19. The new JRC site database driven : some pages at top level COORDINATED WEB SITES SYSTEMS WEB SITES DESIGN
  20. 20. WEB SITE DESIGN <ul><li>Keywords: </li></ul><ul><li>Simplicity </li></ul><ul><li>Readibility </li></ul><ul><li>Light-weight for fast downloading </li></ul><ul><li>Single web sites </li></ul>1998 > 2007
  21. 21. SIS-ECVAM: Scientific Information service (JRC) <ul><li>European data bank on alternative methods to animal experiments in biosciences </li></ul><ul><li>Graphic design </li></ul><ul><li>Information architecture </li></ul><ul><li>Hand -book for the application of the logo </li></ul>WEB SITES DESIGN SINGLE WEB SITE 1999
  22. 22. NEDIES: Natural and Environmental Disaster Information Exchange System (JRC) <ul><li>1999 </li></ul><ul><li>Graphic design </li></ul><ul><li>Information architecture and data model </li></ul>SINGLE WEB SITE WEB SITES DESIGN
  23. 23. San Paolo bank: Wealth Management Advisory (WMA) <ul><li>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. </li></ul>SINGLE WEB SITE WEB SITES DESIGN <ul><li>2003 </li></ul><ul><li>Graphic design and </li></ul><ul><li>Information architecture , pdf 1.07 Mb </li></ul>
  24. 24. San Paolo Bank: Universo Servizi <ul><li>Graphic design </li></ul>SINGLE WEB SITE WEB SITES DESIGN 2003
  25. 25. World Commission on Social Dimension of Globalization (ILO) <ul><li>Graphic design </li></ul><ul><li>Information architecture </li></ul><ul><li>Implementation </li></ul><ul><li>The site </li></ul>WEB SITES DESIGN SINGLE WEB SITE 2003
  26. 26. UN - Sport for development and peace WEB SITES DESIGN SINGLE WEB SITE 2004 <ul><li>Graphic design </li></ul><ul><li>Information architecture </li></ul><ul><li>Implementation </li></ul><ul><li>The site </li></ul>
  27. 27. ILO Department of comunication (DCOMM) <ul><li>Now this site is changed, it has been migrated into the WCMS used at ILO, go to the site </li></ul>WEB SITES DESIGN SINGLE WEB SITE 2003 <ul><li>Graphic design </li></ul><ul><li>Information architecture </li></ul><ul><li>Implementation </li></ul>
  28. 28. Gender Equality tool (ILO) <ul><li>Data entry mask for Events </li></ul>WEB SITES DESIGN SINGLE WEB SITE 2002 <ul><li>Graphic design </li></ul><ul><li>Information architecture </li></ul><ul><li>The site has been migrated into the WCMS used at ILO </li></ul>
  29. 29. Free finance <ul><li>Online services to request offers of mortgages to several banks in parallel. </li></ul>WEB SITES DESIGN SINGLE WEB SITE 2000 <ul><li>Engeneering of templates and grids for the modular layout system </li></ul>
  30. 30. <ul><li>Now that you know what you get, call me </li></ul><ul><li>STUDIO GNOT  Information Architects and Interface designers Via Enrico Noe, 25 20133 Milano - Italy Tel. +39 02 2361227 Mob. +39 335 5629651 [email_address] </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×