|
|
Portfolio ~
Sites Web
Note: Afin d'éviter que les sites soient
introuvables, ou que leur qualité ait été compromise
sans avoir consulté mon expertise; les liens mènent tous
à mes démos.
| Annuaire de mariage:
Contrat ~ Css |
Juillet 09 |
|
| |
 |
Ce design abondant en subtils dégradés donne de la richesse et de la lumière aux couleurs. Celles-ci ont été choisi autant pour plaire au monsieur qu'à la dame. Un style raffiné digne d'un couronnement.
Voir: Annuaire de mariage |
| Truck Stop Québec:
Contrat ~ Js, Css, Flash, As, Firefox |
Septembre 08 |
|
| |
 |
Ce site surchargé a désormais une structure reposante. J’ai modifié la template proposée en quelque chose d’original au point d’être un défi à assembler; puis lui ai donné une teinte de bleu afin d’éviter la couleur brunâtre que le gris a sur écran. Les puces rouges identifient les liens et publicités que la souris survole. Presque toutes les pubs ont été recréées afin qu’elles soient plus claire et que la page soit plus rapide à charger; les doter d’une css allégea intensément le html. J’ai inventé et programmé un visionneur d’images afin que la page soit moins longue, appris les iFrames et comment leur donner une longueur différente dans Firefox qu’en IE. La quantité d’image à éditer aura su aiguiser ma patience.
Voir: Truck Stop Québec |
| Imperial and son:
Contrat ~ Js, Css, Firefox, Anglais |
Mai 08 |
|
| |
 |
Ce site gracieux a un menu de recherche simplifié. Grâce à javascript et à mon ingéniosité, les menu font sauver du temps à l’utilisateur. Il attend que la page se recharge uniquement lorsqu’il a fait toutes ses sélections. Les listes on été créés à partir de zéro au lieu d’utiliser un "jumpmenu" afin d’en avoir un meilleur contrôle. Ainsi, lorsqu’un choix a été spécifié au lieu de tous, le texte devient plus visiblement bleu. Pour le menu des items, une mini description et le prix apparaît au survol d’une image; et une flèche permet de passer aisément au prochain item ou set. Seul le javascript est démontré.
Voir: Imperial |
| Manhattes:
Contrat ~ Css, 100%Flash, As, Firefox, Anglais |
Mars 08 |
|
| |
 |
Mon plus grand chef d’œuvre; créé entièrement en flash et à un rythme effréné. J’ai innové dans la simplicité mais avec extrême souci du détail; rendant ce site si somptueux. L'original preloader est le logo qui se remplit. Les couleurs du pont ont été harmonisées pour se fondre dans l’infini, avec des lumières qui passent discrètement. Les liens changent au survol, se mettant à pulser de lumière, puis se mettent en évidence et se désactivent lorsque sélectionnés. Mais ma plus grande fierté est la programmation de la barre de défilement que j’ai réinventée. Elle est faite de flèche qui défile automatiquement le texte, mais également de lignes interactives qui indique le nombre de page et celle en cours. Ce site est la preuve du potentiel de mon talent et de mes capacités en constante expansion.
Voir: Manhattes |
| One Directory Page:
Contrat ~ Css, Firefox, Anglais |
Octobre 07 |
|
| |
 |
On m’a confié la partie design de ce moteur de recherche pour numéros d’entreprises. J’ai créé le logo, trouvé un thème de couleurs qui uni celles du Canada et des États-Unis, et j’ai balancé l’indigo, le bleu et le rouge. J’ai confectionné de somptueux reflets de dégradés manuels pour la carte; et ai assemblé toutes ses pièces en prenant soin de ne pas avoir d’espaces blanc, ou que la bordure ne les décale pas. Avoir un dessin qui se prolonge du cadre à l’arrière plan de la zone de texte requiert une technique qui peut s’avérer capricieuse; mais que j’affectionne de plus en plus.
Voir: One Directory Page |
| Asso-CETASE:
Contrat ~ Css, Firefox |
Juillet 07 |
|
| |
 |
L'association étudiante du centre d'étude de l'Asie de l'Est de l'université de Montréal m'a confié son site Web.
J'ai redessiné leur vieux logo en vecteurs pour le nettoyer. Mon design reprend l'idée d'unir le bleu du Québec et le rouge de l'Asie. Dans la bannière, le Japon, la Chine et le Vietnam ont chacun une image pour représenter la grâce de leur culture. Les couleurs vibrantes et grands contrastes invoquent l'énergie des étudiants.
L'image du bambou qui se continue dans le background brise la rigidité du cadre. Le statut de la page change au survol des liens (dans IE).
Voir: Asso-CETASE de l'UQAM |
| Delmar:
Contrat ~ Js, Css, Anglais |
Juin 07 |
|
| |
 |
Le style se veut simple et aussi raffiné que leurs produits. J'ai si bien fais mes recherches que j'ai utilisé un de leur pendentifs sans le savoir. Les teintes or et perle rappellent les bijoux; et des dégradés légers donnent un effet de lumière. L’organisation facilite la fonctionnalité: pour éviter la surcharge et la confusion, seul les champs de formulaire modifiables ont un contour visible. Les zones de texte jadis trop grande et illisiblement trop petite est dans un DIV déroulant.
Voir:
- Login (Liens inactifs)
- Côté client (3 pages, liens actifs)
- ConfirmShipment et ProdInfo
|
| LENCAdesign:
Contrat ~ Css, Anglais |
Octobre 06 |
|
| |
 |
J'ai créé le logo et amélioré la template qu'ils ont choisi en créant le thème de couleur et le style. L'image a été replacée par une que j'ai modifié afin que tout soit harmonieux.
Voir: LENCAdesign |
| Primeau Métal:
Contrat ~ Js, Css |
Octobre 06 |
|
| |
 |
Mon style expérimental brise le traditionnel cadre rigide avec des courbes fluide de galaxies, unissant leurs thèmes de l’eau et Star Trek, mais en évitant soigneusement la surcharge de couleurs et d’éléments. Lorsque je mets des vidéos, je ne les démarre pas automatiquement pour laisser l’utilisateur décider quand il est prêt. Mon menu épuré regroupe les liens pour que deux différents ne mène à la même page, maximisant l'efficacité. Vive l'ergonomie!
Voir: Primeau Métal |
| Portfolio V1-S2:
Personnel ~ Js, Css |
Avril 06 |
|
| |
 |
Ce site se transforme et se modifie pratiquement seul. À défaut d'avoir un hôte Php, j'ai utilisé Javascript pour construire une base de données. Après cela, tout me paraît simple.
Le même menu est utilisé sur toutes les pages mais il désactive le bouton de la page en cours, en change la couleur et affiche le bon titre. Le style du site est choisi au hasard et conservé jusqu'à ce que l'utilisateur en sélectionne un autre. S'il prend aléatoire, un nouveau design apparaît à chaque page.
Le but de ce site est de pratiquer des idées et textures. Le 2e style, Dactilo, est fait avec du vrai papier et encre de chine.
Sélectionnez le style "Dactilo".
Voir: Portfolio Multistyles |
| Portfolio V1-S1:
Personnel ~ Js, Css |
Septembre 05 |
|
| |
 |
Ce site se transforme et se modifie pratiquement seul. À défaut d'avoir un hôte Php, j'ai utilisé Javascript pour construire une base de données. Après cela, tout me paraît simple.
Le même menu est utilisé sur toutes les pages mais il désactive le bouton de la page en cours, en change la couleur et affiche le bon titre. Le style du site est choisi au hasard et conservé jusqu'à ce que l'utilisateur en sélectionne un autre. S'il prend aléatoire, un nouveau design apparaît à chaque page.
Le but de ce site est de pratiquer des idées et textures. Le 2e style, Dactilo, est fait avec du vrai papier et encre de chine.
Sélectionnez le style "Agrumes".
Voir: Portfolio Multistyles |
| Shad's Shrine:
Personnel ~ Js, Css, Flash, As, Anglais |
Janvier 05 |
|
| |
 |
Je dessine dans mes temps libres et ce site regroupe quelques unes de mes histoires. La capture montre un dessin qui a été animé avec Flash. Faire des escaliers circulaires qui tournent avec un fichier jpg, au lieu de dessiner des vecteurs avec Flash, m'a empêché d'utiliser les options de perspectives. En créer l'illusion a requis beaucoup de patience et d'ingénuité.
Le site est en anglais car c'est la langue que je préfère utiliser en informatique; et avec beaucoup de mes loisirs.
Voir: Shad's Shrine: Origines Page 2 |
| SkuadStudios:
Scolaire ~ 100%Flash, As, Bilingue |
Mai 04 |
|
| |
 |
Mon mandat était de concevoir un site Flash bilingue qui se modifie non seulement sans le logiciel, mais également sans bases de données. Mon idée fut d'utiliser des fichiers textes.
Dans le portfolio, pour chaque nom dans la liste de projets, les images & textes sont importés et le bouton s'active dans le menu. S'il y a de la vidéo, le bouton apparaît; il fera ouvrir un pop up Html ayant un bouton pour chaque vidéo.
Il y a des fentes de quatre profondeur différentes afin de faire sortir les morceaux des 4 grandes sections du site. Je voulais que ces créateurs 3D aient un design qui leur ressemble.
Voir: Échantillon de SkuadStudios |
| Aylwin:
Scolaire ~ Js, Css, PHP, DB |
Avril 04 |
|
| |
 |
Pour mon dernier projet de fin de session, mon coéquipier et moi avons relevé le défi de faire un imposant site afin de pratiquer tout ce qui pouvais l'être. Le thème du site est soit vert ou rouge et son panier d'achats est fonctionnel. Lorsque quelqu'un devient membre du site, il peut publier des annonces sur le babillard et discuter sur le forum que j'ai entièrement programmé. Je me suis également occupée des validations javascript selon les droits des admins et membres. Le design, la structure, la création d'images vectorielles avec flash et autres aspects visuels étaient ma responsabilité.
Voir: Aylwin |
| Respirez Lierre Pur:
Scolaire ~ 100%Flash, As |
Octobre 03 |
|
| |
 |
Mon premier site entièrement réalisé en Flash fut sur les diverses sortes de lierre.
Ce petit projet a servi à pratiquer les fonctions de bases, mais également à les pousser un peu plus loin en y ajoutant une barre de chargement et un jeu.
Je vous invite à admirer l'introduction d'un lierre qui pousse et à combattre une infestation d'araignées.
Voir: Respirez Lierre Pur |
| X:
Scolaire ~ Js, Css, Flash, As |
Octobre 03 |
|
| |
 |
Le but de mon premier projet de fin de session était de simuler un site de commerce électronique. L'introduction qui sert de carte du site est faite en flash; ainsi que la page 'audio vidéo', le menu du site et bien des détails.
La section Tarot donne des cartes au hasard. Je les ai scannées moi-même, ce qui montre ma grande patience.
Avec mes compétences d'aujourd'hui je pourrais améliorer le site, mais à ce moment ce fut un projet audacieux qui m'a beaucoup appris.
Voir: X - Film & produits dérivés |
| Marché Clandestin:
Scolaire ~ Js, Css |
Juin 03 |
|
| |
 |
Cet exercice avait pour but de pratiquer les frames et les actions au survol de la souris; ce qui n'est pas aussi ergonomique que je le ferais aujourd'hui mais intéressant quand même: Chaque boules du costume affiche le menu d'une différente section du site.
La meilleure amélioration est au sujet de la langue. Au lieu d'avoir une surcharge de texte, l'écrivant deux fois, j'ai utilisé des layers pour masquer l'un d'entre eux.
Mes méta-tags sont tellement efficaces que les propriétaires m'ont demandé d'enlever le site afin de ne pas créer de confusion pour leurs clients.
|
|
|
 "Annuaire de mariage: Téléphones pour organiser un mariage")
 "Primeau Métal: Compagnie de pose de gouttières")
 "Aylwin: Bowling")
