e-Jori, portfolio d'Art et Design de Jori Avlis - Design

Un logo pour Artofruits, futur site des amoureux de belles images

Jori — Fri, 14 Mar 2008 10:39:00 +0100

Depuis quelques temps, je travaille sur un projet nommé Artofruits, à titre perso. Ce sera un site qui servira de porte d'entrée à d'autres sites qui seront créés ou qui sont déjà créés ayant rapport avec l'Art. Comme à chaque fois que je commence un nouveau design, la première étape consiste à élaborer un cahier des charges, même très basique : une ou deux lignes générales suffisent pour avoir une idée directrice. Et quelles sont ces lignes générales? Et bien pour le savoir, il faut avant tout savoir quel public Artofruits aura. Est ce que c'est pour les enfants, ou est ce que c'est pour les retraités? Est ce que c'est pour ceux qui veulent s'amuser, ou est ce que c'est pour les accros junkies du dessin?

Artofruits est en fait assez généraliste et hétéroclite, ça n'arrange pas nos affaires. Mais ce qui est sûr, c'est qu'il faut un minimum de personnes attirées par la simplicité mais aussi la rigueur du design, qui donne l'impression qu'ici, nous pourrons parler d'Art et dessin tranquillement.

Ceux qui suivent mon parcours depuis longtemps maintenant, et qui se souviennent un peu de ce que j'ai fait verront une similitude avec un ancien projet, nommé Art-Tutorials, niveau logo. Il se trouve que j'aimais beaucoup ce que j'avais fait à l'époque, et je voulais absolument pouvoir me servir de ça un jour dans un nouveau projet. C'est désormais chose faite avec Artofruits, qui reprendra donc simplement le design Mozaïk élaboré à cette époque. Bien sûr j'adapterais un peu et mettrais au goût du jour, mais c'est bien ce design qui servira de base pour ce nouveau site.

Il sera basé sur Spip, un cms à l'active communauté francophone, que je connais relativement bien (je m'occupe du référencement naturel du site en spip d'un de mes clients, Cybernétix pour ne pas le nommer - et qui font de la robotique spécialisée en intervention en milieux hostiles - je passe la pub ainsi que la transmission de popularité gratuite =D ...). Ce CMS est rapide à prendre en main, et je mettrais bien sûr à disposition de la communauté en open source ce design Mozaïk.

Pour l'heure, Artofruits existe déja, si vous êtes curieux vous pouvez voir à quoi ressemble un site totalement vide : http://artofruits.com/ Mais d'autres sections existent, comme par exemple le forum du fanzine ms (si, vous faites de la BD et que vous voulez participer à l'élaboration du futur fanzine numéro 4, n'hésitez pas à nous rejoindre...), ou le site de potes qui le valent bien : Waltch et Tawar Pawar =)

Une petite animation flash

Jori — Wed, 31 May 2006 22:15:00 +0000

Une petite animation en flash, ou plutot trois: à l'arrêt, la marche et la course (plutôt un petit footing :) ). L'avantage de flash pour ce genre d'animations sur le web est évident: le fichier ne pèse que 40 ko, et on a un grand confort pour modifier ce qu'on veut. C'est toute la puissance du design vectoriel!

Vous pouvez également voir le début d'une autre animation que je suis en train de faire ici: http://www.deviantart.com/view/33144161/

Mozaik, pour dotclear

Jori — Sun, 08 Jan 2006 12:53:00 +0000

J'ai fini l'adaptation en thème dotclear d'un ancien design que j'avais fait pour PHPBB, Mozaïk. J'éspère qu'il vous plaira, il est liquide (adaptable à toute résolution) et facilement personnalisable.

Pour l'installer: installeur

Les fichiers archivés si l'installeur ne fonctionne pas: archives

Et enfin deux petites prévisualisations: visualiser header et visualiser bottom

À propos, le dessin utilisé pour le header est Flores Latinas, que vous pouvez voir sur deviantART dans son intégralité : deviantART, libre à vous de remplacer cette illustration par votre header personnalisé ;)

Thème LiquidCard

Jori — Thu, 29 Dec 2005 10:56:00 +0000

J'ai enfin fini l'adaptation du thème de mon petit site :) Le design s'adapte à votre résolution, ainsi, quelque soit votre résolution, le site ne paraitra jamais minuscule :p (bon en dessous de 800*600 avec Internet Explorer, ça bugue un peu à cause du calendrier...). Un LiquidCard simplifié, sans flash, mais en revanche un header liquide aussi, comme le reste des éléments qui composent ce thème.

A vous de le personaliser ;)

Si vous utilisez ce thème, merci de me l'indiquer (en commentant ce billet, par exemple), que je puisse vous lier.

Une petite capture d'écran

Une petite démo

Installeur:

http://e-jori.com/etc/dc_themes/theme-LiquidCard-0.1.pkg.gz

Version rar, si l'installeur ne marche pas:

http://e-jori.com/etc/dc_themes/LiquidCard.rar

Variantes de couleur:

Pink Liquid Card

installeur | archive | visualiser

green Liquid Card

installeur | archive | visualiser

night Liquid Card

installeur | archive | visualiser

dark Liquid Card

installeur | archive | visualiser

blogs utilisant Liquid Card :)

le redesign d'e-Jori

Jori — Tue, 13 Dec 2005 22:52:29 +0000

Le besoin de faire un site personnel qui soit facilement updatable, et qui valorise plus les contenus m’ont poussé à refaire e-Jori à partir du zéro. Ou presque. Dans ce billet, j’explique comment j’ai procédé, c’est assez révélateur de ma façon de travailler.

Mon ancien site etait visuellement agréable. Mais il souffrait d'un défaut assez important, du point de vue du designer. Il ne valorisait pas le contenu, il se suffisait à lui-même. Or, dans l'optique d'un site qui se doit avant tout de présenter de façon simple et claire mes travaux, il était quasi impossible, avec cette interface tout en flash, de le faire. J'ai donc décidé d'adopter une nouvelle stratégie: mon nouveau portfolio sur le web serait un blog. Plus personnel, plus de facilité pour y mettre du contenu et de tenir au courant les personnes qui y portent de l'intérêt (vous). Le choix du blog à adopter est évident: ça sera dotclear. Codé en XHTML strict, faisant la séparation parfaite entre le contenu et le design grâce à CSS, c'est l'outil idéal. Il faut donc commencer à élaborer un design qui soit à la fois agréable et facile à naviguer, tout en valorisant mes travaux. C'est partit! :)

Tout d'abord, il faut, comme avant chaque projet, avoir une idée. Après quelques croquis, je suis arrivé à ce premier jet, où je pose les principales caractéristiques de mon futur site. Il aura des éléments de continuité avec l'ancien site, comme la présence de Marine (ma mascotte, on va dire) ou les plantes vertes. Il sera en design "élastique", c'est à dire que le site se redimensionne suivant la résolution de l'écran de l'internaute. Il sera aussi en XHTML strict, bien entendu. Pendant cette étape, comme à tout moment de l'élaboration d'un projet, il faut demander l'avis de personnes extérieures au projet. Amis, proches, collègues, clients en cas de travail professionnel. Ceci pour essayer de faire ce que le design doit faire: répondre à un consensus. En essayant de tenir compte des critiques du plus de personnes possibles - tout en gardant notre individualité et originalité propre - on arrive à de meilleurs résultats: c'est par la critique qu'on avance, que l'on progresse, et qu'on se rend compte de ce qu'il faut faire pour plaire à son public.

La deuxième étape consiste à transformer notre croquis en quelque chose de plus concret. Sous le logiciel freeHand, je passe donc en vecteurs ce que j'avais précédemment dessiné. C'est une base de travail que je peux maintenant modifier. À ce stade, on doit déjá savoir si ce qu'on veut réaliser est faisable techniquement parlant en XHTML/CSS. J'ai déjà toutes les difficultés techniques en tête, mais aussi les possibilités.

Après un bon brainstorming, plusieurs avis de beaucoup d'amis, les différents éléments qui vont composer mon site commencent à prendre forme. Marine sera en vecto, présentée en flash avec une petite animation. Cette façon de faire permet d'avoir une taille de fichier très réduite (moins de 40 ko) et d'ajouter une animation bien sympathique :)

Il devient clair qu'il faut changer de couleurs. C'est, comme toujours, le moment le plus délicat. Quoi de plus subjectif que le choix des couleurs, surtout si il faut faire un consensus? Donc, comme toujours, je fais un rapide tour d'horizon, avec plusieurs choix de couleurs. Je sais ce que je veux, à ce stade. Quelque chose qui soit assez neutre vis à vis du contenu, mais assez fort pour passer une image qui reste gravée dans la mémoire.

Une autre tentative de couleurs. On se rapproche de l'effet "Antiquité Romaine" que je voulais avoir. Je suis un grand admirateur de cette période, et c'est tout naturellement que l'on m'a suggéré de faire des couleurs qui s'en rapprocheraient. J'ai donc du changer aussi à ce moment le design de Marine, pour la faire plus "d'époque". Il fallait aussi simplifier un peu son trait, afin que l'utilisation de ressources système soit moindre (combien de fois avons nous vu sur le web des sites en flash qui "ramaient" parce que la personne qu'il l'a fait n'a pas pensé du tout aux gens qui surfent sur le net avec un ordi qui n'est pas forcément le dernier cri de l'informatique...).

Ceci etait le dernier design avant le définitif. Comme vous pouvez le constater, j'ai finalement opté pour un fond blanc, plus neutre, en plus d'avoir une liaison directe avec mon ancien site. Rajout des plantes, mais les mettre "tel quel" n'etait pas une solution satisfaisante. Une fois ce problème résolu, je pouvais m'attaquer à l'étape finale: la réalisation du site proprement dit. Il faut savoir que comme toujours, beaucoup d'idées surgissent pendant le processus de réalisation, et c'est ainsi que surgit l'idée de faire Marine fixée en bas à droite de l'écran. Avec mon design, si on scrollait vers le bas, la barre latérale ne continue pas, et laisse un vide blanc. Pourquoi ne pas y laisser Marine, qui accompagne ainsi l'internaute dans son voyage sur le site? De plus, on accentue l'effet qu'elle donne: une fille qui présente le site, comme une élève devant le tableau noir, expliquant au reste de la classe son exercice :)

Alors bien entendu, cette idée est impossible à faire pour Internet Explorer, qui ne supporte pas la propriété CSS nécessaire pour le faire. Tant pis, ça sera un bonus pour tout ceux qui ont fait le pas vers Firefox ou Opera. Après quelques jours de découpage et d'intégration XHTML, j'ai finalement fini mon site, que voici :)

PS: une grosse majorité du temps passé lors du webdev de ce site l'a été pour debuguer toutes les erreurs d'affichage de notre ami (ironie...) Internet Explorer. Bugs connus: Flash player pour linux n'affiche pas de fond transparent. Un décalage du fond lors du scroll surgit derrière Marine sous Firefox et Internet Explorer n'affichera pas le fond transparent du PNG de remplacement du fichier swf de Marine au cas où l'internaute n'aurait pas flash.