mes 3 trucs préférés pour créer un design «out-of-the-box»

1. Mettre une image explosive en arrière-plan

Je trouve que ce petit truc simple change vraiment la dynamique d'une interface web. On va chercher de belles couleurs ou de belles images se rapportant au thème du site et tout se transforme.


2. Étendre une région par dessus une autre.

Nous avons ici un site sur différents établissements offrant divers services. J'ai donc décidé de mettre en avant-plan une ville et ses immeubles. Un lien direct avec le sujet du site, car vous pouvez rechercher le service que vous voulez selon votre arrondissement.




3. Numériser ou photographier des objets réels.

Un truc vraiment facile et drôle à la fois. Je me suis amusée pur mon TP à numériser différents instruments de cuisine donc un linge à vaisselle. Parfais pour un site de reçettes. Il vous suffit de mettre ce «torchon» en arrière-plan, d'ajuster les couleur selon le thème et le tour est joué.

Un web design à moitié!

www.prophilprod.com

Dès l'ouverture de la première page, nous sommes curieux de cliquer sur l'ordinateur. En faite, c'est tout simplement une pub qui parle du designer web et lorsqu'elle est terminé, la fenêtre se ferme et nous remet la page. On a tendance à cliquer sur le bouton «Enter», mais ce bouton nous repart la pub. Deux choses qui font la même chose, vraiment mal fait. Il faut aller cliquer sur «skip intro» pour accéder au site. Dans le fond, cette page était sa page intro, mais sans l'intro. Enfin bref, une fois rendue sur son site, la musique est accrochante et tous pleins d'éléments apparaissent. Point très intéressant, on peut contrôler le volume et la balance. Point vraiment idiot, on doit cliquer sur une petite main pour faire apparaître le menu. Pourquoi n'apparaît-il pas tout de suite? Ce menu est déjà là en faite, mais n'a pas l'apparence d'un menu. Il appelle ça : rubrique et c'est placé en plein milieu de la page en petit. Il y a plusieurs éléments qui bougent, mais il ne nous aide pas tous à savoir où l'on doit cliquer. Dans la rubrique portfolio, la navigation est spéciale… une boite, des cubes qu'on doit cliquer pour voir ses projets web, imprimer ou ses logos. Les petits sons de survol sont bien et l'animation des icônes de ses travaux est attrayante. Dans la section «logo» il n'y a même pas d'animation de survol ni de possibilités d'agrandissement. L'onglet «profil» est sans défauts à mon avis. L'animation du petit bonhomme qui donne le «i» du mot «profil» est chouette et pas trop long. Finalement, l'ordinateur ne permet pas de revoir la pub d'introduction lorsqu'on clique dessus. L'utilisateur a utilisé ce «bouton» pour voir quelque chose et maintenant qu'il est rendu sur le site, il ne peut plus faire d'action avec.

Un beau site web

http://www.reptiletech.com

Wow! Je suis tombée par hasard sur ce site. Une compagnie de création de sites web. La première page du site offre plusieurs choix d'affichage du site (flash, html, français et anglais) ce qui donne la possibilité à plusieurs utilisateurs de visualisé leur site. Par la suite, ce que j'ai vraiment aimé, c'est le temps de téléchargement. Quelques secondes à peine et une petite musique très intéressante débute puis une vague par du haut pour aller dans la bannière du bas glisser. Un petit quelque chose qui nous amène à survoler la page rapidement pour ensuite nous la présenter. La page première présente le portfolio. Il nous suffit de cliquer sur la petite flèche et nous pouvons survoler les pages d'un site web créer par l'équipe sans passer par le lien du site. Il y a aussi le lien cliquable pas très loin. Il est vraiment astucieux d'avoir inscrit une courte description du projet. Quel était le but de l'équipe? Les points à améliorer, les demandes du client, etc.

Une bannière «En Bref» reste toujours fixe lorsqu'on visualise les éléments du portfolio. Le logo de la compagnie est placé à gauche à la verticale, ce qui nous donne le goût de pencher la tête pour voir ce qui est écrit. La couleur verte domine et c'est ce qui donne le thème au site. Nous ne nous sentons pas agressé et ça incite l'utilisateur à rester sur le site et de naviguer. Les courbes donnent aussi ce sentiment de douceur. Les pages apparaissent avec un effet de vague également.

On conclusion, un site simple, mais très accrocheur!

Mes icônes

Ma première famille a pour thème «la musique». Pour ce qui est des icônes «dossier musique» et «gravure CD» ce fut assez simple, mais pour les autres, il a fallu que je trouve un moyen d'intégrer ce concept. Les couleurs «flash» ajoute de la lumière et de l'énergie à ce concept.
Ça vient un peu de la boule disco qu'on associe aux discothèques et à la musique. Les cercles en arrière-plan donnent du mouvement aux icônes comme si ce serait les ondes sonores d'un son ou d'une musique.

Mon deuxième concept est «l'automne». J'ai prit de temps de créer une feuille qui est répétée dans toutes mes images d'icônes. De plus,
les couleurs du dossier et de la pochette CD sont automnales. La poubelle est représentée comme un sac rempli de feuilles ce qui rappelle les habitudes des gens en cette saison.

Petit retour en arrière!

Je vous parle maintenant de mon examen final en design de la session dernière. Nous devions créer une affiche pour un événement qui se déroulait au Jardin Botanique. Plusieurs éléments nous étaient fournis, il suffisait juste de les mettre en place avec les techniques apprises durant la session. J'ai donc commencer par aller chercher trois couleurs qui se trouvaient dans la photo que j'ai choisie, c'est-à-dire le blanc, le rouge et le jaune, toutes des couleurs de lumière. Pour faire ressortir le titre principal, j'ai utilisé la couleur jaune pour les deux mots importants. Le lieu de rendez-vous est aussi très important, je l'ai donc mis en rouge. La tarification est teintée de couleur jaune, car ce n'est pas la suite du texte principal en blanc qui décrit l'événement. Le thème de la lumière devait dominer dans l'affiche, c'est pour cette raison que j'ai décidé de mettre mon fond noir et mes éléments d'avant plan en couleur. Une autre image est située en bas de l'affiche avec une opacité moindre pour créer un lien, une suite, avec le haut de l'affiche. Pour ce qui est de l'image en haut, je l'ai recadrée en cercle puis je lui ai mise une source lumineuse en dessous pour créer une ambiance lumineuse comme l'événement le veut. Vous pouvez remarque plusieurs lignes de forces dans ma réalisation et la disposition n'est pas linéaire et ennuyante. Pour terminer, j'ai rajouté deux petits papillons qui donnent du mouvement à l'affiche. Ces mouvements sont créés avec les petites lignes blanches en vague. On dirait qu'ils étaient à l'extérieur de l'affiche pour venir s'y poser.

Honte à mon magasin!

http://www.potpourri.ca

Je travaille dans une magnifique boutique appelée Pot Pourri et je n'avais jamais prit le temps d'aller voir sur le site web. J'ai été très déçue par le résultat. Surtout pour ce qui est du texte vraiment mal intégré avec pleins de fautes typographiques qui font que nous sommes incapables de lire ce qui est écrit. De plus, le menu du haut n'a pas vraiment d'effets de survols et les liens dans le semblant menu de gauche n'ont aucun effet. Le texte écrit sur la bannière verte en dessous de la photo ressemble à un gros bouton mais c'est juste... enfin je ne sais même pas pourquoi c'est écrit ça. Le site ne comporte pas beaucoup d'information et il aurait été intéressant de voir plus de photos des articles vendus en magasin.

Par contre, les couleurs sont vraiment belles et s'harmonisent très bien ensemble. Elles nous font ressentir la douceur de la boutique. Les quelques photos aussi sont très belles.

Pizza Donini

Le site web de Pizza Donini est en construction et comme exercice dans notre cours de Design d'interface, nous devions créer une maquette du site.

Tout d'abord, j'ai reprit le cadre vert de la page d'accueil en construction ainsi que les couleurs pas trop agressantes. Le cadre vert a été supprimé en bas et à droite pour donner l'impression à l'utilisateur que la page continu. J'ai modifié un peu le logo avec deux petits coups de pinceau vert et rouge que j'ai utilisé comme bannière pour présenter les titres principaux de mes repas. Une autre petite barre rouge afficherait lors de mes survols. Le menu de gauche à comme fond des images avec une faible opacité d'aliments tels que des piments très appétissants. De plus, il y a une petite texture sur mon fond beige. Finalement, pour chaque menu choisi, nous avons des suggestions d'accompagnements avec leurs images en plus petits.