STAF13 *** Daniel Peraya
Texte, image et son dans le multimédia
Text, picture and sound in multimedia
Text, Bild und Ton in Multimedia



Icons

Visualization task of Chris Mueller * Send EMail


Contents
Abstract

Navigating between pages
- to subdirectories
- to overview page CyberSlang
- to my Home
- to students' list Céline

Navigating within a page
- Up
- Chapters

Inviting for an action
- sending EMail

CyberSlang logo


Abstract
Creating icons for fast navigation and visualized communication in my products.

Have a look here:
Eric Sciolli: Construction d'un système d'icones

up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang


Navigating between pages
Navigating to subdirectories

Internet users arriving on my home page should have a quick and easy access to my products of the postgraduate studies at Tecfa.
For this purpose I created icons for the Staf courses (Staf 11-18).

Requirements

  • The icons should be similar to eachother in order to show the family they belong to (Staf studies).
  • In same time, they have to indicate their unique content (Staf 11 or 12 or 13 or . . .).
  • And the icons have to emphasize the product character of my work.

    Solution

  • A fruit symbolizes the products belonging to the group of Staf tasks.
  • Each apple indicates the number of one specific Staf course.
  • For more flexible use, I cloned a series of small and a series of big apples.

    tidBits 11 tidBits 11

    Users should be able to navigate efficiently from page to page within my home at Tecfa.
    For this purpose, the HTML pages show the links to all subject fields of the Staf courses in a row of small icons.

    tidBits 11 tidBits 12 tidBits 13 tidBits 14 tidBits 15 tidBits 16 tidBits 17 tidBits 18

    Please, test the links in the lower part of this page (Go to TidBits).

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang

  • Navigating to CyberSlang

    In addition to the Staf courses, I created one more icon and directory:
    CyberSlang presents all the products that help to explain the cyberspace and its vocabulary.

    cyberSlang cyberSlang

    Please, test this link on my home page.

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang

    Navigating to Home

    All my HTML pages should provide a direct return link to the home page.
    The icon representing a house seemed to me very suitable for that.
    And to make sure everybody understands this home as the home of Chris the name is written beside the home.

    home chris

    Please, test this link in the bottom part of this page.

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang

    Navigating to students' list Céline

    Visitors might be interested to compare equivalent products of different people.
    For this purpose, I often added in the lower part of my HTML pages direct links to the corresponding pages of my fellow students.
    And, in addition, each of my pages shows beside my home icon the icon of the students' group.
    We are the third team and called Céline.

    celine

    Please, test this link in the bottom part of this page.

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang


    Navigating within a page
    Internet users navigate not only beetween pages but also within pages:
    - from top to anywhere in the page,
    - from anywhere in the page back to the top,
    - from anywhere in the page to anywhere else in the same page.

    Up: to top of page

    For navigating all the way up in the page I created a small and handy icon with a clear message: up.
    Since the combination of the colors yellow and black give a very good contrast, I took these two colors.

    up

    Chapters: to anywhere within this page

    In addtion to navigating to the top of the page navigating to other chapters or sections within the same page might be very useful to.
    Since the contents are different from page to page, I created these links with keywords.
    By using a very small font size I give these keywords a touch of icons: the are more like visual signs rather than textual messages.
    Putting them together in a chaine and in combination with the up icon underlines the visual function.
    This line of links shows up at the end of each chapter or section within a page.

    Please, test these links right on the next line.

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang


    Inviting for an action
    Inviting for sending EMail

    Each of my pages should supply a way to send feedback to the author.

    mail to: prolingua@access.ch At the beginning, I posted this message with an email icon and the written email address beside.

    mail to: prolingua@access.ch After discovering an animated version in form of an animated gif, I switched to the latter version.

    Please, test this link in the bottom part of this page.

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang


    CyberSlang
    Logo header for CyberSlang

    Indicating the content group to which a page is belonging to is another function - besides just navigating.
    All my HTML pages providing informations about the cyberspace, its rules, its concepts, and its vocabulary appear with this header: the are members of 'the ultimate instant online encyclopedia'.
    Clicking into this header links the user to the contents overview of CyberSlang.

    Please, test this link in the top part of any CyberSlang page.

    cyberSlang

    up - Contents - Abstract - Subdirectories - Cyber - Home - Céline - Up - EMail - CyberSlang


    tidBits 111-18


    contact mail to: prolingua@access.ch
    Chris Mueller (prolingua@access.ch)

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

    97 05 24