IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Webdesign & Ergonomie Discussion :

rendre une Interface Web plus ergonomique/jolie


Sujet :

Webdesign & Ergonomie

  1. #1
    Membre du Club
    Inscrit en
    novembre 2006
    Messages
    150
    Détails du profil
    Informations personnelles :
    Âge : 34

    Informations forums :
    Inscription : novembre 2006
    Messages : 150
    Points : 48
    Points
    48
    Par défaut rendre une Interface Web plus ergonomique/jolie
    Bonjour,

    j'ai réalisé en html/css l'interface web ci-dessous (formulaire web basique avec <div>). J'aimerais la rendre un peu plus "user friendly" en je m'en remets donc à vous..
    En effet le formulaire est fonctionnel mais je trouve que l'interface reste trop classique
    Je prends donc en compte tou(te)s vos remarques/conseils
    Merci,
    Olivier

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Config File</title>
    <SCRIPT language="Javascript">
    function Affiche_sources_yes(){
    div_sources.style.visibility="visible";
     
    }
    function Affiche_sources_no(){
    div_sources.style.visibility="hidden";
     
    }
     
    function Affiche_doc_yes(){
    div_doc.style.visibility="visible";
     
    }
    function Affiche_doc_no(){
    div_doc.style.visibility="hidden";
     
    }
     
    </SCRIPT>
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    input, textarea
    {
    font-family:"Times New Roman", Times, serif; 
    }
     
    input:focus, textarea:focus (ne marche pas sur IE) 
    {
    background-color:#FFFF99;
    }
     
    label
    {
    color:blue;
    }
     
    legend 
    {
    font-family:Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
    color:#F8971D;
    font-weight:bold;
    }
     
    fieldset
    {
    margin-bottom:15px; 
    background-color:#FFFFCC;
    }
     
     
     
    </style>
     
    </head>
     
    <body>
     
    <form name="sendfile" method="POST" ENCTYPE="multipart/form-data" action="upload.php"> 
     
     
    <fieldset>
     
     
    <center>
    <img src="./logo.jpg" height="49" width="160"  >
    </center>
     
    </fieldset>
     
     
    <fieldset>
     
    <label for="email">Please confirm your email adress [Important]</label>
    <br>
    <INPUT type=text name="email">
    </fieldset>
    <fieldset>
     
     
     
    <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
     
    </tr>
    </table>
    <br>
     
     
    <label for="infos">Would you have the setup file ?
    </label>
     
     
    <br/>
     
    <p>
    <input type="radio" name="sources" value="yes" id="yes" tabindex="40" onClick="Affiche_sources_yes();"/> <label for="">yes</label><br />
    <input type="radio" name="sources" value="no" id="no" tabindex="70" onClick="Affiche_sources_no();" /> <label for="">no</label><br />
    </p>
     
     
     
     
    <div id="div_sources" style="visibility:hidden">
     
     
     
    <p>Setup File : 
    <input type="file" name="file[]" id = "file[]" size="20"> 
    </p>
     
     
     
    </div>
    </fieldset>
     
    <fieldset>
     
    <label for="infos">Would you have some information to give about this application ? (Install Guideline or anything else)
    </label>
     
     
    <br/>
     
    <p>
    <input type="radio" name="sources" value="yes" id="yes" tabindex="40" onClick="Affiche_doc_yes();"/> <label for="">yes</label><br />
    <input type="radio" name="sources" value="no" id="no" tabindex="70" onClick="Affiche_doc_no();" /> <label for="">no</label><br />
    </p>
     
    <div id="div_doc" style="visibility:hidden">
     
     
     
    <p>Install guideline : 
    <input type="file" name="file[]" id = "file[]" size="20">
    </p>
     
     
     
    </div>
     
     
     
    </fieldset>
     
    <fieldset>
     
    <label for="infos">Would you have any other information to provide ? (license key, the person that might use this application, or anything else..)
    </label>
     
    <br>
    <TEXTAREA name="information" rows=10 COLS=40></TEXTAREA>
     
     
     
    </fieldset>
     
     
     
    <p>
    <input type=submit value=Submit> 
     
    </p>
     
     
    </form>
     
     
    </body>
     
    </html>

  2. #2
    Membre éclairé Avatar de Ceddoc
    Homme Profil pro
    Développeur Java
    Inscrit en
    janvier 2009
    Messages
    493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2009
    Messages : 493
    Points : 698
    Points
    698
    Par défaut
    Ta demande est vaste... Il y a des centaines de choses à faire pour rendre une telle page plus jolie mais là comme ça je dirais:
    -Des couleurs plus harmonieuses (bleu et jaune c'est pas mon truc)
    -Mettre une police moins classique
    -Utiliser des images de fond pour faire des fonds plus agréables aux blocs... (des dégradés?

    Après je suis pas graphiste

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    novembre 2009
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : novembre 2009
    Messages : 5
    Points : 8
    Points
    8
    Par défaut
    Bonjour,
    voici quelque petite retouche pas trop révolutionnaire mais plus ergonomique bonne chance

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Config File</title>
    <SCRIPT language="Javascript">
    function Affiche_sources_yes(){
    div_sources.style.display="block";
     
    }
    function Affiche_sources_no(){
    div_sources.style.display="none";
     
    }
     
    function Affiche_doc_yes(){
    div_doc.style.display="block";
     
    }
    function Affiche_doc_no(){
    div_doc.style.display="none";
     
    }
     
    </SCRIPT>
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    input, textarea
    {
    font-family:"Times New Roman", Times, serif; 
    }
     
    input:focus, textarea:focus (ne marche pas sur IE) 
    {
    background-color:#FFFF99;
    }
     
    label
    {
    color:blue;
    }
     
    legend 
    {
    font-family:Arial, "Arial Black", Verdana, sans-serif;
    color:#F8971D;
    font-weight:bold;
    }
     
    fieldset
    {
    margin-bottom:15px; 
    background-color:#FFFFCC;
    }
     
     
     
    </style>
     
    </head>
     
    <body>
     
    <form name="sendfile" method="POST" ENCTYPE="multipart/form-data" action="upload.php"> 
     
     
    <fieldset>
     
     
    <center>
    <img src="./logo.jpg" height="49" width="160"  >
    </center>
     
    </fieldset>
     
     
    <fieldset>
     
    <label for="email"><strong>Please confirm your email adress </strong>[Important]</label>
    <br>
    <INPUT type=text name="email" size="50">
    </fieldset>
    <fieldset>
    
     
     
    <label for="infos"><strong>Would you have the setup file ?
    </strong></label>
     
     
    <br/>
     
    <p>
    <input type="radio" name="sources" value="yes" id="yes" tabindex="40" onClick="Affiche_sources_yes();"/> <label for="yes">yes</label><br />
    <input type="radio" name="sources" value="no" id="no" tabindex="70" onClick="Affiche_sources_no();" /> <label for="no">no</label><br />
    </p>
     
     
     
     
    <div id="div_sources" style="display:none;">
     
     
     
    <p>Setup File : 
    <input type="file" name="file[]" id = "file[]" size="20"> 
    </p>
     
     
     
    </div>
    </fieldset>
     
    <fieldset>
     
    <label for="infos"><strong>Would you have some information to give about this application ?</strong><br/> (Install Guideline or anything else) </label>
     
     
    <br/>
     
    <p>
    <input type="radio" name="sources" value="yes" id="yes1" tabindex="40" onClick="Affiche_doc_yes();"/> <label for="yes1">yes</label><br />
    <input type="radio" name="sources" value="no" id="no1" tabindex="70" onClick="Affiche_doc_no();" /> <label for="no1">no</label><br />
    </p>
     
    <div id="div_doc" style="display:none">
     
     
     
    <p>Install guideline : 
    <input type="file" name="file[]" id = "file[]" size="20">
    </p>
     
     
     
    </div>
     
     
     
    </fieldset>
     
    <fieldset>
     
    <label for="infos"><strong>Would you have any other information to provide ?</strong><br/> (license key, the person that might use this application, or anything else..) </label>
     
    <br>
    <TEXTAREA name="information" rows=10 COLS=70></TEXTAREA>
     
     
     
    </fieldset>
     
     
     
    <input style="width:200px; height:30px; font-size:18px;" type=submit value=Submit> 
     
     
    </form>
     
     
    </body>
     
    </html>

Discussions similaires

  1. Arborescence dans une interface web dans IE
    Par ithilly dans le forum Général Conception Web
    Réponses: 1
    Dernier message: 19/09/2006, 20h24
  2. [Système] Lancer un batch via une interface web
    Par Scorff dans le forum Langage
    Réponses: 1
    Dernier message: 23/08/2006, 18h47
  3. Rendre une page web obligatoire
    Par sorry60 dans le forum Général Conception Web
    Réponses: 6
    Dernier message: 23/06/2006, 13h18
  4. [AJAX] Créer une interface web pour un programme Java
    Par Wookai dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 30/03/2006, 11h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo