Des logos vraiment étranges

Voici un premier logo qui représente une griffe de vêtement italienne «a-style». Un bon exemple pour les jeunes qui portent cette marque...









Le second logo est utilisé pour un clinique dentaire. On comprend ce que le graphiste a voulu représenter, mais je crois qu'il n'a pas fait sa job comme il le faut.



Je crois que ce logo de pharmacix est vraiment mal fait. Pourquoi ces deux petits ronds? On les enlève et il n'y a plus aucune confusions.







Qu'est-ce que vous lisez? «The MAC Store» ou autre chose? Enfin bref, c'est assez dévalorisant pour Apple et pour ce magasin.

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.

1001 cocktails

www.1001cocktails.com est un site web remplit de choses amusantes à découvrir sur tout ce qui conserne ls cocktails. Il y a des reçettes, des photos, un forum et une boutique. En haut vous avez le menu principal qui comprend beaucoup de sous-menu. Le mieux est vraiment de cliquer par exemple sur «cocktails» et d'utiliser le menu de gauche qui apparaît. Celui-ci est en lien qu'avec des cocktails. Le champ de recherche par ingrédients est très intéressant. Nous avons des cases à cocher avec plusieurs ingrédients, ceux qui sont cochés, sont les ingrédients les plus utilisés. Pour ce qui est de la petite boutique du site, les éléments qu'on peut acheter sont tous bien alignés sur la gauche. Les photos sont vraiment de belle qualité et pas trop grosse. Nous avons également l'onglet «actualités» sur des petites nouvelles se rapportant aux différentes sortes de cocktails. La petite banière en haut avec le palmier est très attirantes. Ce qui est très pratique, mais qui m'a prit du temps à découvrir, c'est «mon panier». Lorsqu'on aime une reçette, on peut la mettre dans notre panier. En résumé, un site à découvrir pour vos soirées entre amis. Il y a des jeux également et des reçettes de cocktails sans alcool.

Ahh! La technologie!

En naviguant un peu sur Youtube, je me suis arrêté sur un vidéo qui montrait les nouvelles recherches chez Nokia. Au début, j'ai tout de suite pensé au nouveau Iphone, mais finalement, c'est un peu différent. Un écran tactile quand même assez grosse, nous permet de naviguer rapidement dans les menus du téléphone. Lorsqu'on descend avec la «barre de défilement» sur le côté gauche avec notre doigt, on revient au menu racine si je peux dire. Il y a également un petite barre de défilement dans le bas, donc toutes deux sont très accessible. De plus, on peut utiliser un petit cube qu'on déplace plus spécifiquement sur l'onglet où l'on veut accèder. Finalement, si je comprend bien, nous avons deux écrans, qui se tourne horizontalement comme une caméra vidéo. Cet extrait d'un futur cellulaire m'a surtout attiré en premier lieux avec sa musique et ses éléments graphiques 3D. De la compétition pour le iPhone?



J'ai également trouver ce lien vraiment «nice» si je peux me le permettre. Wow! On arrête pas le progret, c'est fou! C'est vraiment innovateur et spécial, et en même temps tellement pratique. On peut le porter comme bracelet ou facilement plié dans sa poche.

Realtek

Realtek est un logiciel de configuration de son qui venait avec mon ordinateur. J'ai souvent eu des problèmes de son et j'étais obligée de passer par-là on dirait. Sauf que l'interface de ce «bidule» est vraiment mal fait. Je n'y comprend rien. Nous pouvons créer des environnements de sons, comme dans un hangard, un couloir de pierre, une ruelle ou un parking, mais à quoi ça peut bien me servir pour règler mes problèmes? Il y a une sorte de roulette à droite avec des icônes qui ne me disent absolument rien ainsi qu'un petit bonhomme «karaoke» qui ne sert à rien. Les onglets en haut sont bien, mais le gros inconvénient est que d'autres onglets se continuent ailleurs, plus loin. Une petite flèche en haut à droite nous le montre lorsqu'on fini par la trouver et que l'on clique dessus. Je déconseille l'installation de ce logiciel de son sur votre ordinateur.

Beaucoup trop de choses à voir

Le site www.chezmaya.com est conçu pour les gens qui ont le temps de naviguer pour trouver ce qu'il cherche. Que ce soit des cartes virtuelles, des poèmes, des blagues, des photos, des émoticônes, des jeux, des musiques, des liens, des forums, etc. Ça fini pu!!! Toutes ces informations pourraient être bien classées dans un beau menu, mais la créatrice du site en a voulu autrement. C'est surement dû à son manque d'expérience en design d'interface. ;-p

La page d'accueil comprend plusieurs choses. Le menu est disposé à la fois à la gauche de la fenêtre et à la droite et ce, jusqu'en bas très loin de la page. La typographie utilisée est vraiment étrange et les liens sont en lettres majuscules, très dur à lire. Beaucoup de petites icônes par-ci par-là qui ne se ressemblent pas. Au centre de la page, des liens qui mènent soit à des poèmes, à des cartes virtuelles ou autre. Enfin bref, lorsque je veux envoyer des cartes virtuelles rapidement, je n'ose même pas m'aventurer dans ce site.

Un site vraiment coloré!

Le film Hairspray n'a pas fait fureur lors de sa sortie au cinéma, mais son site lui nous donne le goût de voir le film et de parcourir ce beau site et ce très facilement. Dès de début, le mot «loading» apparaît en couleur avec des pois. Ensuite, la musique commence et tout les personnages apparaissent pour disparaître peu de temps après et laisser place à un menu assez spéciale. De gros caractères avec des angles différents et des couleurs qui frappent ainsi qu'un personnage sur la gauche. Lorsque nous cliquons sur un titre, par exemple «photos gallery», le fond change de couleur. Les petites étoiles en arrière-plan bougent et donne de la dynamique au site. Puis, lorsqu'on clique sur «back to main menu» ... SURPRISE! un autre personnage apparaît à gauche du menu. Il n'y a pas de sous-menu cachés, que l'essentiel des informations que nous devons savoir par rapport au film.

http://www.hairspraymovie.com/

Vraiment mal fait!

Le nouveau logiciel de microsoft word est vraiment différent de l'ancienne version. Beaucoup de frustration lorsqu'on cherche une simple fonctionnalité telle que «enregistrer-sous». L'interface n'est plus du tout fait pareil. Il faut vraiment réapprendre à utiliser ce logiciel comprit avec Windows Vista. Plusieurs commandes se trouvent cachées dans le bouton rond jaune avec le logo de microsoft word en haut à gauche. Sauf que l'inconvénient est que celui-ci ne ressemble en aucun cas à un bouton. Il est vrai de dire que lorsqu'on le survol, il apparaît une fenêtre disant:«cliquez ici pour ouvrir, enregistrer ou imprimer[...]», mais la fenêtre n'apparaît pas immédiatement lors du survol. Et une petite flèche pas très loin de se bouton nous permet de rajouter les icônes de ses options dans la fenêtre pour y accèder plus rapidement. Pourquoi ne sont-elles pas la dès l'ouverture du nouveau document? De plus, il y a de gros carrés en haut avec tous les outils, comme paragraphe, police et styles. Les styles ne sont pas très clairs, car il faut cliquer sur une autre petite flèche introuvable en bas à droite de la fenêtre. Mes deux colocataires pensent réinstaller l'ancienne version pour faire leurs travaux avec plus de rapidité. Pas de temps pour chercher une fonction introuvable.

Un site bien conçu et divertissant

Si vous êtiez dans ma classe la session passée avec Xavier Marchand ou si vous avez visité les différents sites de la liste des plus beaux portfolios qu'on choisit les étudiants en multimédia, et bien, vous allez sûrement faire :«ah! ça me dit quelque chose ce site.» Simon Bonnallie est un photographe et son portfolio m'a vraiment frappé principalement grâce à son design d'interface et c'est pour cette raison que je vous fais part de cette découverte via ce blog.

Dès notre entrée sur le site, on peut remarquer qu'une main virtuelle dépose une photo un peu «frippée» sur une table ou un bureau. Nous sommes déjà curieux de voir ce que les mains peuvent faire d'autre. En effet, au survol des différents éléments sur la photo, les mains apparaissent. L'un dessine le contour de l'élément survolé tandis que l'autre écrit sur la table un mot. Ce mot est en lien avec le menu situé plus bas qui réagit lui aussi aux survols de la souris. Deux façon claires de naviguer sur son site afin de découvrir ses oeuvres.

Puis, sur les contours, nous avons d'autres petits éléments, qui entre dans le cadre du site lorsqu'on les survols. Se sont des liens sur de gros projets sur lesquels Simon Bonnallie veut surement qu'on aille jeter un yeux.

Finalement, lorsqu'on se met à cliquer sur les différents onglets du menu, nous pouvons voir toutes ses photos classées par thèmes. Une après l'autre, les photos apparaissent grâce, encore ici, à la main. Vraiment originale! Un petit menu, moins clair celui-ci, nous fait passer d'une image à l'autre.

Je trouve que le seul inconvénient de ce site est sa grandeur, sinon j'aime vraiment beaucoup ce site et comment il a su m'accrocher grâce à son interface ingénieuse.

Qu'en dites-vous? -> Lien :http://www.bonnallie.net/index2.html

Mon premier cours de design d'interface

Wow ! On a pas fini d'en apprendre avec ce prof. Des choses simples, qui peuvent être oubliées, mais qui font toute la différence. Bien organiser son arborescence lorsqu'on fait un site, c'est primordial si je comprend bien ? C'est vrai qu'on peut se perdre facilement lorsqu'un bouton ne ressemble aucunement à un bouton ou que le champ de recherche se situe non pas sur la page d'accueil, mais bien ailleurs sur le site. Dans ce blog, extrêmement accessible et fonctionnelle, vous retrouverez à chaque semaine des messages de ma part sur différents thèmes au sujet de tout ce qui se rapporte au design d'interface. Que se soit des critiques de sites web, des tutoriaux qui parlent de design ou même des réflexions à ce sujet. Bonne visite et n'hésitez pas à revenir y jeter un yeux à chaque semaine !