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 <<

Voici un jeu qui a été conçu pour le California Milk Processor Board afin d'encourager les gens à boire du lait. Le jeu est fait en 3D (d'après moi à l'aide de PaperVision 3D ainsi que Flash), ce qui est interessant à noter ici est le contexte dans lequel nous sommes placés en tant que participant. Le but est de retrouver le verre de lait qui est enfermé dans un coffre fort tout en échappant à la police. J'ai bien aimé l'emphase que l'on a mis sur le fait que la famille se fait poursuivre par la police, il y a des lumières qui vont de gauche à droite un peu partout pour nous rappeler que cette famille est recherché pour tentative de vol de verre de lait. Un peu ridicule mais l'audience cible n'est certainement pas un jeune de 18 ans à cause de l'allure un peu enfantaine des personnages. Malgré la beauté de l'intégration de la 3D avec Flash et les belles animations, ce que je trouves moins attrayant est le temps de chargement qui est énorme. Même avec une bonne connexion, la taille des fichiers semble immense. Aussi, une partie peut durer jusqu'à 45 minutes si vous décidez d'observer chaque petit détail.

Voici le lien du site : Get The Glass !

Bonsoir, voici un site sur lequel je suis tombé par pur hasard : Galbraiths.com
Je trouve que ce site est innovateur, tout d'abord parce que malgré son interface simple, l'idée qu'il y a derrière, c'est-à-dire une sorte d'invite de commande windows nous fait tous penser au film 'La Matrice'. Notez bien que l'animation de l'écriture n'est pas fait à base de Flash mais bien à partir de JavaScript.

Voici selon moi, les étapes par lesquelles il faut procéder afin de créer avec succès un site web.