Archive for ‘octobre 2009’

Et voilà le cours tant attendu, Design Out of the Box. Pour ne pas être trop magistral (vous avez tous surement suivis le cours), je ne vais pas vous ennuyer avec les 25 règles, je vais plutôt laisser les exemples parler. J'ai décidé de comparer un site web affreux VS un site que je trouve Out of the Box.

:: Site affreux ::

Faites-attention, être Out of The Box, ce n'est pas ça. Du tout. Les couleurs sont mal choisie, la maquette est carrée (malgré le pli au coin haut-droit). Le biseautage appliqué aux boutons est affreux. Je n'ai pas essayé les jeux, mais j'espère bien qu'ils sont divertissants, sinon le site n'aurait rien de positif. Bref, je crois que ça suffit pour les sites qui ne respectent pas les règles du design Out of the Box.

Après avoir visité le site de Gnarls Barkley (chanteur, lien ici), j'ai constaté qu'il y avait plusieurs éléments intéressants à noter. Tout d'abord, le fait que le site soit fait en Flash rend la navigation extrêmement dynamique, même si ça prend une ou deux minutes pour s'habituer à l'interface plutôt marginale. Ce qui est intéressant à noter ici est comment sont placés les nuages en bas de page. Normalement, le bas de la page est la place qui est la moins regardée sur une page web. Le fait d'y incorporer des nuages qui bougent sans cesse fait en sorte de rendre l'ensemble de la page homogène et réduit considérablement les zones inutiles. Un autre aspect très intéressant, l'animation quand vous cliquez sur un lien est réussie(essayez par vous-même, une image vaut mille mots... imaginez une animation à plus de 30 fps =P). Bref, si votre maquette web ressemble à cela, way to go !

Malgré leurs tailles, un icône est un élément très important tous domaines confondus. Étant donné que nous sommes tous en multimédia, j'ai trouvé une manière d'appliquer cette manière et l'orienter vers le Web. Comme vous pouvez le remarquer sur plusieurs pages web, il y a toujours un petit icône, par exemple sur le site du Blogger, il s'agit du "B" blanc sur un fond orange. Voilà ce qu'on appelle un Favicon(Favorite Icon ou Shortcut Icon). Ce petit icône est extrêment facile à intégrer. Tout d'abord, il s'agit de créer un fichier .ico (certains sites le font en ligne comme favicon.cc , vous pouvez également le faire sur Photoshop). Ensuite il faut l'intégrer dans le code HTML. Voici la ligne de code pour le faire :

<link rel="shortcut icon" href="le chemin de favicon.ico" />

Et voilà! vous avez un favicon pour votre site Web. Malgré le fait que cela semble si simple, la création de ce fameux favicon ne demeure toutefois pas toujours évidente. Ne vous inquiétez pas, j'ai trouvé une solution très simple à votre manque d'inspiration. Je suis tombé sur un site Web qui contient un outil qui convertit les photos (.jpg) en texte ASCII.(cliquez ici pour accéder au site) Alors si par exemple je décide de choisir une photo de moi, je dois tout simplement cliquer sur le bouton "Browse", choisir la photo en question, ensuite il y a l'option A-Z ou Numeric. Donc si vous préférez les lettres choisissez A-Z, sinon prenez l'option Numeric. Bref, cliquez sur "Convert Photo" lorsque vous êtes prêts. Attendez un peu et ensuite vous verrez le texte apparaître sur l'interface même du site. La où cela peut devenir intéressant est justement la fabrication de favicon. Si vous trouvez une icône que vous aimez, vous pouvez facilement lui donner un effet "digital" grâce à ce fabuleux outil.

Je crois que pour réussir à faciliter la navigation d'un site, il faut tout d'abord avoir un menu simple d'accès, homogène et il faut que ce dernier attire l'œil de l'utilisateur. L'utilisation des onglet demeure selon moi la manière la plus simple de mettre en pratique les aspects que j'ai cités en haut. J'ai trouvé un exemple d'un menu fait en jQuery ou le menu est restreint à une boîte et il se déplace selon la position de la souris dans la boîte. Je crois que l'implémentation d'un tel menu dans un site rendrait la vie facile au designer web étant donné qu'il lui reste beaucoup de place pour intégrer son contenu.

>> example du menu jQuery <<

Pour ce qui est du cours concernant la structure du contenu, j'ai trouvé un site web qui respectait les 4 règles d'un contenu de qualité (complet, organisé, lisible, accessible). C'est rendu un peu un cliché de nos jours mais malgré le fait que le site de Apple rempli parfaitement les critères, j'ai décidé de fouiller un peu plus loin. J'ai pris 2 sites en exemple et je compare le site de RadioShack (oui je sais c'est mort au Canada) et le site de BestBuy. Les deux ont une énorme quantité de contenu mais grâce à quelques techniques qui se retrouvent dans le .ppt de Dominic, il est beaucoup plus facile de se retrouver sur le site de BestBuy.

.: BestBuy :.
.: RadioShack :.

Dites-moi ce que vous en pensez!

Je ne vois pas beaucoup d'intérêt à publier mon exercice Adidas dans le cadre du cours des gabarits CSS. Premièrement, il ressemble à tous les autres et deuxièmement, ce n'est pas super intéressant. À la place, j'ai trouvé un site qui donnait 5 trucs accessible par rapport aux différentes techniques employées en CSS, que ce soit pour un formulaire, un champ texte ou autres. Voici le lien >> cliquez ici <<