iDesign / help

 

Please Support Us with a Donation and Help Us To Grow and Improve.

 

 

 

1.A brief explanation of "iDesign" website interface and architecture

1a.iDesign website "Flash screen" interface

1b.iDesign website "HTML page" interface

1c.How to navigate iDesign flash galleries

 

2.How to navigate "Index/home" flash SWF

 

3.How to navigate "iDiscover" flash SWF

 

4.How to navigate "iExplore" flash SWF

 

5.How to navigate "iSense" flash SWF

 

6.How to navigate "iInvestigate" flash SWF

 

7.How to navigate "iGamelearn" flash SWF

7a.How to play "Learn from the masters" flash game

7b.How to play "Memodesign" flash game

7c.How to play "Reconstruct deconstruction" puzzle flash game

7d.How to play "iDesign SuperQuiz" flash game

 

8.How to navigate "iNavigate" flash SWF

 

9. SITEMAP

10.LINKMAP (underconstruction)

11.CREDITS (underconstruction)

 

Please Support Us with a Donation and Help Us To Grow and Improve.

 

 

 

 

 

 

 

1.A brief explanation of "iDesign" interface and architecture

 

iDesign interface was conceived and designed as a interactive and visually appealing e-learning display, though it has been given a particular structure with the aim of assuring the maximum usability and accesibility for every type of internet user. Indeed iDesign offers to the user many different types of navigation. The content stays the same, but you can reach it from many different angles. More important you can chose to navigate the site using Flash or using the standard HTML web page language.

This type of structure can be considered as an hybrid solution between the "Flash based website" and the "classic HTML site". The purpose was to combine the entertaining and graphical effectiveness of Flash SWF Movies and the classic and straightforward universally known HTML visualization. Indeed Flash is always been criticized for its disorienting action due to its unordinary graphics and distracting animations. Read for example this essay by Jacob Nielsen at http://useit.com/alertbox/20001029.html . In my opinion iDesign hybrid solution grants the best usability to the user, because it gives him the possibility to choose whether to navigate the site using the extravagant interface of the flash screen or using the basic html interface page.

Moreover iDesign Flash SWFs are developed using Flash "text equivalents" which are readable by accessibility softwares like JAWS. If you want to know more about usability and accesibility issues concerning web sites and flash, please click on the following link: http://webaim.org/techniques/flash/ , or find more about flash accesibility guidelines at http://www.adobe.com/accesibility/products/flash/best_practices.html

The site is vertically orientated and, even though the background extends to cover the highest screen resolutions, its "content table" width does not exceed the 760 pixel. More in particular, the main stage of the site content is in "letterbox format" (760 x 350 pixel), which is one of the most used format for flash animations. Please look for the following book in http://books.google.com 3d for the Web by Carol MacGillivray and Anthony Head. Why use the letterbox format?

It was both an aesthetical and technical decision, to choose the "letterbox format" size. Technically it is commonly adopted for it is totally visible to all internet users in the world (4% in the world uses 800x600 display, though nowaday in 2009 this percentage is rapidly decreasing). If you want to know more about browsing trends: http://www.w3schools.com/browsers_display.asp

 

back to top

 

 

 

1a.i_Design "Flash screen" interface

 

 

index page flash interface of iDesign

1.When you load iDesign website on your computer screen you will be in the index page and you will firstly visualize i Design logo (top , center) , followed by an artistic background and with a central white space with a loader in it which will inform you that the flash site is loading. If you don't visualize any loader, or any element at all in the white space, you will probably have to install the flash player.

2.If you have the flash player correctly installed, then your computer will be able to display the flash part of the site, which will be right inside the central white space of the page, just above the logo button at the very top. We will call this part the "Flash Screen". The flash screen is mainly composed by the "main stage" where all the content of the flash site will be displayed (see picture below).

3.Besides the main stage which will be your main navigation screen, you will find two sets of "lateral panels", one at the right and one at the left of the main stage. Each set has four panels that will appear full lenght only if you roll over them with your mouse. Each lateral panel embeds a specific link button that will allow you to reach the other pages of iDesign. Notice that right now you are in the help page of the site: the main iDesign pages are: index , architecture , objects , keystones , authors , styles , light&colors. Moreover the buttons hidden in the panels have also their "simple html equivalents" for people who are not use to navigate with flash. Click here if you want to jump directly to the classic html navigation system.

4. The last flash element you will visualize is the audio control, right under the main stage, as it is shown in picture below. The audio is preset on off but you can turn it on by pressing the play button with your mouse left click. You can change or pause songs using the other buttons on this panel. You can close the panel by clicking on the "close button" righ in the center of the panel.

5. The "html part" is just below this first "flash part" of the site. The content of iDesign stays the same, what changes is the navigation modality.

index flash site navigation

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

back to top

 

 

 

 

 

 

 

1b.i_Design "HTML page" interface

 

 

help index page html part of i design

1.The snapshot above is taken after scrolling down the initial index page browser window. You will notice that there is an html part of the site just below the flash screen.

2. To scroll down your browser and reach the html part you will have to click with your left mouse button on the browser scrollbar at the very right of the browser window.

3. The html part of the iDesign website pages offers a standard type of navigation, simple and straightforward. This choice was made to increase usability and accesibility as you can read in the first chapter. In this part of the site you will find all the equivalents of the "flash screen elements" such as buttons, images, description, etc.

4.The menu bar, just below the flash screen is part of the simple html pages of iDesign. The menu bar is the equivalent of the flash later panels displayed on the flash screen. Notice that right now you are in the help page of the site: the main iDesign pages are: index , architecture , objects , keystones , authors , styles , light&colors.

index html site navigation help

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

back to top

 

 

 

 

 

 

1c.How to navigate iDesign flash galleries

 

 

i design help how to navigate flash galleries

1. iDesign pages are: index , architecture , objects , keystones , authors , styles , light&colors. Each one of these pages has a different flash screen. More correctly, the flash interface stays the same, what changes is the central main stage. The page illustrated in the snapshot above is the Design Objects page. Each iDesign page has a different background image, different flash content and different html content.

All iDesign pages except for the index page, have a flash dynamic gallery displayed on the main stage. You can view the varoius elements embedded in the gallery by scrolling the "image buttons menu" at the top of the main stage. If you click with your left mouse button on one of this image buttons a new browser window will open, dedicated to the element chosen by you.

2. If you rollover with the mouse pointer on the image buttons ,the "object display area" will show you a preview of the element you are interested in with a brief description of it. Images and description are also available in classic web page visualization in the html part of the page, reachable by scrolling down the browser page.

help i design scrolling gallery flash

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

back to top

 

 

 

 

 

 

2.How to navigate "Home" flash SWF

 

 

1.The first page which will be visualized, as you enter iDesign, will be the index page. In the index page you will find the "HOME flash sceen". This is the most important flash screen of the site ( notice that the site has different pages with different flash screen in relation to the theme) and will allow you to enter six flash main areas of iDesign.

These are: discover, explore, sense, investigate, game-learn and navigate. A brief description of what these main areas consist of is visible in the "selection info space" in the main stage. In the index page you will also find a more detailed description of these areas. Instruction on how to navigate each of these areas are available in this help page.

2.The selection menu is where you select the area you would like to enter. Just click with your left mouse button on one letter. Notice that each letter represents a different area. Here is a brief guide for the selection menu:

d - discover ( discover iDesign concept, purpose and aim )

e - explore ( explore interior design history, from ancient to conteporary )

s - sense ( approach interior design through your senses)

i - investigate ( investigate various famous interior design solutions )

g - gamelearn ( play and learn with some digital game based learning tools )

n - navigate ( proceed and deepen your researches on interior design by visiting more specific sites on the web )

 

3. Once you have made your choice and clicked on the letter representing the area you are interested in visiting, just confirm your choice by left clicking on the "confirmation button" or "GO" button, at the right of iDesign animated character.

 

help home

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

back to top

 

 

 

 

 

 

 

2.How to navigate "iDiscover" flash SWF

 

The first part of the flash home screen is "iDiscover", a very simple application in flash. It basically offers information about iDesign website conception, production and evaluation. This application is very easy to use: just click on the file you want to view or download. Here is a list of the files available:

1. iDesign Video Presentation

2. iDesign Slide PowerPoint Presentation

3. iDesign Report (made for Digital Media Master Degree, at London Metropolitan University)

4. iDesign Help (the page you are currently viewing)

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

back to top

 

 

 

 

 

4.How to navigate "iExplore" flash SWF

 

 

explore help i design navigation

1. iExplore is a interactive and dynamic timeline which will help you to deepen your knowledge in the history of interior design. To scroll horizontally this long timeline, you will have to use the timeline navigation bar at the bottom of the stage. Just click on the grey button at the far left of the navigation bar and drag it forward or backward. This will allow you to timetravel back in time and discover all the key moments of interior design history.

2. The organge animated circles that you will find on the stage are draggable info buttons. You can move the info buttons around the stage and positionate them where you prefer and you can click on them to open an info window.

3. An info window will open each time you click on a info button. Try not to open too many window at the same stage, otherwise it wil be very confusing. Again, you can drag the window wherever you like on the stage by pressing and holding on the organce animated circles. You can close the window by clicking on the small cross at the bottom right. More important you can continue your resarch on a specific topic by clicking on the image in the window or by clicking on "more info" button.

help explore

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the movie is not properly displayed

 

 

back to top

 

 

 

 

 

 

 

5.How to navigate "iSense" flash SWF

 

 

i sense i design help instructions

1. iSense is an application that will eventually allow you to arrive to a particular design solutions in accordance to what your senses suggests to you. The process starts from the main selection menu: you click on one of the editable elements of the stage ( surfaces , interiors, furnishing, lighting ) and you will gain access to the drop down menus.

2. The sub-selection drop down menus embed a list of buttons positionated in a vertical order. This list is divided into two main sections; look and feel. Just click on the option you think it matches your sensations. Once you will have made all your choice you can appreciate your final composition and see whether it is in accordance to your senses or not.

i design sense help

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

 

back to top

 

 

 

 

 

 

6.How to navigate "iInvestigate" flash SWF

 

 

i design investigate flash instructions help

1. iInvestigate is another useful tool which will teach you a lot of about interior design. Just select one option on the moving selection menu and click on it with your left mouse button. A new menu will open up and show you other more specific option. Thanks to the selection menu you will visualize the style, the architect or the designer you are interested in.

2. Once a picture showing your selected style, architect or designer solution is visualized on the stage, use the magnifier to scope it and find any additional information on the materials used, the style, etc. Just as a real design investigator.

i sense help

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

 

back to top

 

 

 

 

 

 

 

7.How to navigate "iGamelearn" flash SWF

 

 

i design gamelearn navigation instruciotn help

1. The first thing you have to do once you are inside iGame-learn is to press one of your keyboard arrows and move the character around the screen.

2. iGame-learn interface is just a selection menu but with the look of a roleplay game. The buildings in the stage are access points that will allow you to enter a particular game. To select one of the game that are displayed on the stage you will just have to move your character on one game selection area and look for an entrance.

3. Confirmation windows will appear suddently while iGame-learn is playing. The appear actually when your character will be standing on a hotspot ( that is in front of a building entrance). Read what the main character is telling you and decide whether to accept or dismiss the quest.

i gamelearn help

1. The first thing you have to do once you are inside iGame-learn is to press one of your keyboard arrows and move the character around the screen.

2. iGame-learn interface is just a selection menu but with the look of a roleplay game. The buildings in the stage are access points that will allow you to enter a particular game. To select one of the game that are displayed on the stage you will just have to move your character on one game selection area and look for an entrance.

3. Confirmation windows will appear suddently while iGame-learn is playing. The appear actually when your character will be standing on a hotspot ( that is in front of a building entrance). Read what the main character is telling you and decide whether to accept or dismiss the quest.

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the movie is not properly displayed

 

 

back to top

 

 

 

 

 

 

 

7a.How to play "Learn from the masters" flash game

 

 

i design game learn learn from the masters instructions help page

1. Learn from the masters is a drag and drop puzzle game. The first thing to do is to look at the panel on the left and decide which element you want to move. This panel contains the draggable elements that you will use to compose a particular architecture. To drag an element just click on it with your left mouse button and hold it and move it around the scree.

2. Secondly you will have to drop the dragged element in a precise zone at the right side of the screen. This zone is the drop zone. More precisely you will have to be more precise and finde the exact spot in the drop zone where the draggable element can actually be dropped. If you fail to drop the element your are dragging in its correct drop spot, the element will go right back in its original position.

i design gamelearn learn from the masters flash game

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the video is not properly displayed

 

 

back to top

 

 

 

 

 

 

7b.How to play "Memodesign" flash game

 

 

i design gamelearn memodesign game instructions help page

1. Memodesign game is very simple and intuitive, anyone can play it easily. Just press on the start button at the top left and the cards will appear on the stage as you can see in the snapshot above. Notice that everytime you press the start button the cards disappear and re-appear in a different combination.

2. Once you have all your cards on the stage, you can start playing the game. Simply click with your left mouse button on the cards you want to turn over. Every card hides a different picture, when you click on card you will unveil the corrispective picture. If you unveil two identical pictures one after the other these will disappear from the screen. Notice that you can only unveil two pictures at one time. To win the game you will have to unveil all the pairs of matching pictures.

i design gamelearn memory flash game help

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the movie is not properly displayed

 

 

back to top

 

 

 

 

 

 

 

7c.How to play "Reconstruct Deconstrucion" flash puzzle game

 

 

i design puzzle game instruction

1. Reconstruct Deconstruction is a puzzle game where you will have to compose a deconstruction image that have been scrumbled. Deconstructivist architecture is already puzzling by itself, so it will be very challenging to reconstruct it! The puzzle area on the left side is where you will find all the pieces of the puzzle and where the puzzled image will be reconstructed.

2. On the right side instead you will have a game options menu. You can select various game options that can help you solving the game or exiting the game: show grid / no grid , solve puzzle, remix puzzle, quit game , game menu.

i design puzzle flash game help

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the movie is not properly displayed

 

 

back to top

 

 

 

 

 

 

 

7d.How to play "Superquiz" flash game

 

 

i design gamelearn super quiz game instructions help page

1. To win the superquiz you will have to answer correctly to twelve questions about the history of interior design and architecture. It is suggested that you have a tour of iExplore before trying this game. The game status indicator is on the left side of the top panel and tells you how many questions you have already answered and how many are left.

2.The first thing you have to do is to look at the question display right in the middle of the screen to know what question you are answering to. Read carefully the question in order to choose the correct answer from the answer selection area.

3.The answer selection area, at the bottom of the screen is formed by four panels, each panel embeds a button with a different answer. To pass the level and proceed in the game you will have to click with your left mouse button on the correct answer. If you select the correct answer a message will appear on the screen, the game status indicator will upload and the next question will be visualized on the question display.

4. Last but not least, don't forget the timer! You will only have approximately a minute to answer each question. If you fail to give an answer within the time limit you will loose the game and you will have to start all over again.

i design superquiz flash game help

 

 

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the movie is not properly displayed

 

 

back to top

 

 

 

 

 

 

8.How to navigate "iNavigate" flash SWF

 

 

i design navigate insturctions help page

1. iNavigate is a flash application that is suppose to fasten the navigation of iDesign links and help you go further with your researches in specific area of design. Once you are in iNavigate, the first thing to do is to select the area of design you are interested in. In the snapshot below the selected area of interest indicator is at the bottom right of the screen. However the position of the indicator will change according to which area you will be in, but it will not be difficult to find it since is located where all the linkage in the stage start.

2.The specific link button is where you have to click to narrow more and more your research. You start with main areas, and then selection after selection you will arrive to the end of the pyramidal structure with a button that will link you externally from iNavigate, directly to another website entirely dedicated to a particular topic.

3.Each time you make a selection in iNavigate, the stage moves to a more specific area every time. Getting more and more specific you might loose the path of your research. The back button allows you to get back to the previous screen. In case you get confused you can go back til your initial position.

i design navigate help

 

 

Please wait: an additional help video will appear right below ( video controls are at the bottom of video screen)

Click here if the movie is not properly displayed

 

 

back to top

 

 

 

 

 

9.SITEMAP

 

home

welcome to iDesign

iDiscover

iExplore

iSense

iInvestigate

iGame-learn

iNavigate

sitemap

help (underconstruction)

credits (underconstruction)

 

 

architecture

Steiner House/Adolf Loos (underconstruction)

Schroder House/Gerrit Rietveld(underconstruction)

Ville Savoy/Le Corbusier (underconstruction)

Barcelona Pavillon/Mies Van der Rohe(underconstruction)

Falling Water / Mies Van der Rohe(underconstruction)

Kaufmann Desert House/Richard Neutra

Glass House/Philip Johnson (underconstruction)

House VI/Peter Eisenman(underconstruction)

Douglas House/Richard Meier (underconstruction)

Azuma House/Tadao Ando

Casa Rotonda/Mario Botta(underconstruction)

Y House/Steven Holl(underconstruction)

 

 

design objects

Willis House Chair / Frank Lloyd Wright

Hill House Chair / C.R. Mackintosh

Red-Blue Chair / Gerrit Rietvel

Wasilly Chair / Marcel Breuer

LC series / Le Corbusier

Barcelona Chair / Mies Van der Rohe

Chair mod. 406 / Alvar Aalto

LCW Lounge Chair Wood / Charles Eames

Superleggera / Giò Ponti

Lady Chair / Marco Zanuso

Tulip Suite / Eero Saarinen

Wire Chair / Harry Bertoia

Swan Chair / Arne Jacobsen

Tube Chair / Joe Colombo

Louis Ghost Chair / Philippe Stark

Moon System / Zaha Hadid

Cardboard Furniture / Frank Ghery

 

 

keystones

Ancient Greece Interiors

Pompeian Styles

The Roman Domus

Medieval Gothic Furniture

The Perspective

Italian Majolica

Palaces and Studios

Architectural Furniture & Marquetry

Mannerism and Grotesque

Sambin & Du Cerceau

Royal Palaces and Cabinets

Boulle Furniture

Chinoiseries and Porcelain

Percier & Fontaine

Jacob & Desmalter

The Shakers

Thonet

Arts and Crafts

Wiener Werkstatte

Bauhaus

Modern Industrial Design

 

 

authors

A-L

Aalto A.

Ando T.

Barragan L.

Berlage H.P.

Bertoia H.

Botta M.

Breuer M.

Campo Baeza A.

Castiglioni A.

Colombo J.

Eisenman P.

Foster N.

Fisher D.

Gaudi A.

Ghery F.

Gropius W.

Guimard H.

Hadid Z.

Hoffmann J.

Holl S.

Horta V.

Khan L.

Eames C.

Johnson P.

 

L-W

Le Corbusier

Loos A.

Maki F.

Makintosh C.R.

Moore C.

Meier R.

Munari B.

Neutra R.

Olbrich J.M.

Palladio A.

Piano R.

Ponti G.

Rietveld G.

Rogers R.

Saarinen E.

Starck P.

Van der Rohe M.

Van de Velde H.

Van Doesburg T.

Venturi R.

Zanuso M.

Yeang K.

Wagner. O.

Wright F.L.

 

 

styles

Henri II

Louis XIII

Louis XIV and Regency

Louis XV

Georgian

Chippendale

Louis XVI

Directory

Empire

Gothic Revival

Victorian

Restauration

Louis Philippe

Second Empire

Biedermeier

Art Noveau

Sezession stil

Neoplasticism

Rationalism and Expressionism

Purism

Functionalism

Art Decò - Modernisme

Organic Architecture

International Style

Postmodernism

High-Tech

Minimalism

Deconstructivism

Kitsch-Pop-Vintage

Ecodesign

 

 

materials

Wood

Rocks and Stones

Marbles and Granites

Chalk, Plaster and Cement(underconstruction)

Concrete (underconstruction)

Metals (underconstruction)

Glass (underconstruction)

Ceramics (underconstruction)

Plastics (underconstruction)

Resins (underconstruction)

Fabrics (underconstruction)

Eco-friendly (underconstruction)

 

 

lights and colours

Natural light (underconstruction)

Ambient lighting (underconstruction)

Lamps (underconstruction)

Chandeliers (underconstruction)

Spotlights (underconstruction)

Neon lights (underconstruction)

LED (light emitting diode) (underconstruction)

Barrisol (underconstruction)

Plain Colours (underconstruction)

Colour Psychology (underconstruction)

Coloured Surfaces (underconstruction)

Surface Decorations (underconstruction)

 

 

 

 

 

 

10.LINKMAP

 

 

 

 

 

 

11.CREDITS

 


designed by : jbdesign studio Italy


Thank you very much for your time.

 

terms and conditions | privacy statement
©2008 design by jb design

 

 

Please Support Us with a Donation and Help Us To Grow and Improve.

 

 

 

 

 

www.jbdesign.it