The work of Chris for Staf 24: Rutschmann Architekten

STAF 2 * Patrick Mendelsohn * Pierre Dillenbourg * Daniel Peraya * Daniel Schneider
Staf 21 * Staf 22 * Staf 23 * Staf 24 * Staf 25 * Staf 26

Practical course - Stage - Praktikum
II a
The work for Staf 24 of Chris

Abstract

Projected, developed and implemented 2 web-sites:
www.rutschmann.ch: Hans Rutschmann Architekten AG, CH-8197 Rafz, Switzerland
A web-site for architects presenting new projects and realized projects.
www.moser-reisen.ch: Moser Reisen, CH-8416 Flaach, Switzerland
A web-site for a car travel company presenting the current offers.

My plans about my work for Staf 24
Project 2: www.moser-reisen.ch: Moser Reisen, CH-8416 Flaach, Switzerland
Have a look at the current web projects of Chris

Project 1
www.rutschmann.ch: Hans Rutschmann Architekten AG, CH-8197 Rafz, Switzerland

Goal: A web-site for architects presenting new projects and realized buildings
The intention was clear: developing and implementing a well functioning web-site that should present both the coming projects of the compay (houses to sell before starting construction) and the previously realized buildings (to show some examples of what the company has done during the last years).
The steps in my work for this web-site
1
Gathering the wishes and the needs of the company and their staff for their new web-site
Mr. H. Rutschmann, the owner and CEO of the company, explained me the goals of the project:
- Presenting projects that the company has realized during the last years.
- With pictures and short texts.
- Offering new houses that have been constructed on the CAD systems of the company, but not constructed yet.
- With plans, descriptions and pictures of models.
- Introducing the staff working for the company.
- Facilitating a first contact with the company thru the web.
2
Setting up the concept for this particular web-site
The concept I developed for the company follows these rules:
- The web pages have to focus the presented information to one single goal.
- Visiting surfers have to be welcomed by some elements of interactivity, e.g. responding elements within the pages.
- The graphic design of the web pages has to be nice but not too complicated.
Since the planned content turned out to be rather big, we divided it up into several sections:
- Homepage
- New Offers
- About Us
- Family Houses
- Appartment Blocks
- Renovations
- Industrial Buildings
- Agricultural Buildings
- Public Buildings
- Consulting
- Contact
- Hints
As a help for navigating the web-site these sections are indicated on all pages (not on the sub-pages).
And in order to give an overview with short comments all the sections are introduced on the welcome page.
3
Developing first presentations
In order to make the discussions about selecting and presenting contents on the web pages easier I created some model pages to review together.
We decided about the fonts, the colours, the arrangement of the elements within the pages and the sequence of the pages.
4
Types of web-pages
This process ended up in small number of different types of pages - beside the homepage and the welcome page:

Section main page (main level)
Giving an overview of that section and providing links to the sub-pages.
Each section main page consists of several elements:
- Corporate logo: on click to homepage
- Section icon
- Section title
- Help button: on touch showing help
- List of sections: on click to the chosen section
- Display field: where the informations are presented:
-- Pictures in a small format, providing links to the related sub-pages.
-- Very short or no text informations related to these pictures
On many section main pages there are 2 pictures in the same frame available, to select with the mouse.
- Copyright indications

Sub-page (sub-level 1)
Showing more details with bigger pictures and giving a short text information.
Each sub-page consists of several elements too:
- Corporate logo: on click to homepage
- Section icon: on click to section main page
- Title of sub-page
- Display field: where the informations are presented:
-- Pictures in a bigger format
-- Text informations related to these pictures
On many sub-pages there are 2 pictures available, to select with the mouse.
- List of the other sub-pages within the same sections: on click to the chosen sub-section
- Links to section main page and to welcome/overview-page.

Project description page (sub-level 2)
Providing many informations and details for stimulating the customers attention.
Each project description page consists of these elements:
- Corporate logo: on click to homepage
- Section icon: on click to section main page
- Title of that project
- Display field: where the informations are presented:
-- Pictures in a bigger format: 2 pictures available, to select with the mouse.
-- Very detailed text informations about this project
- Links to all detail plans concerning this project, plans displayed in normal and in reduced versions.
- List of all detail plans of the the same project: on click to the chosen plan.
- Links to section main page and to welcome/overview-page.

Detail plan page (sub-level 3)
Showing the plan of that part of the building.
Each detail plan page consists of several elements:
- Corporate logo: on click to homepage
- Project icon: on click to project description page
- Title of that detail plan
- Display field: where the detail plan is presented.
- List of all detail plans of the the same project: on click to the chosen plan.
- Links to project description page, to section main page and to welcome/overview-page.

Individual pages (main level)
Contact page
- Provides the form for sending an email to the company office.
- No sub-pages needed.
About Us page
- Unique feature: interactive slide-show of the entire staff.
- Small personal page for each team member.
Consulting
- Informs about the consulting services of the company.
- No sub-pages needed.
5
Adjusting the concept
As a result of the discussions concerning content and page types the concept got modified and enlarged.
During the development work we got a more detailed idea about contents and presentation forms.
6
Adding new contents to the growing site
As soon as the main parts were created, the attention was drawn onto elements with lower priority.
Like:
- Tips
7
Elements of interactivity
A web-site has to show some of the advantages of that medium.
Interactivity is the prime feature that can be realized on the web with reasonable effort.

Focussing the first sight on the main message
The company logo displays without any additional informations on the homepage.
Moving the mouse onto the page makes all the contact informations appearing.

Confirming the surfers choice
Telling the surfer that the page has recognized the current choice where to go.
By highlighting the link being touched by the mouse.

Help messages by moving the mouse over the help button
Expanding the entire help message at once.
Without clicking nor changing the page.

Multiple pictures by moving the mouse over the picture
Displaying 2 pictures within the same picture frame.
- Outside and inside of the house.
- Views from different sides.
- Overview and detail.

Additional pictures and informations by moving the mouse over the corresponding part of the picture
- Displaying an additional picture showing a closer view.
- Displaying an additional message with more informations.
8
Administrating and keeping the web-site running well
An up-to-date web-site needs to be constantly supported.
Parts of the site have to be reshaped or reorganized.
New or changed informations have to be added.
That will be my task for now and for the near future.
There are still several aspects to be optimized.
And some parts will be recreated with new techniques of web engineering.

Chris Mueller (chris@prolingua.ch)

++41 (0)52 301 3301 phone
++41 (0)52 301 3304 fax

98 10 01