Consultant référencement naturel et design : voir et être vu sur le web, par José da Silva, alias Jori Avlis - Tag - design

Futur template wordpress et dotclear : Fluctuat Nec Mergitur

Jori — Tue, 14 Oct 2008 23:30:00 +0200

Juste un petit aperçu de ce que sera le header d'un futur nouveau blog sur Paris. J'adapterais ensuite son design à un template générique distribué librement avec les licences de creative commons habituelles.

J'aime bien faire ce genre de design "urbain", avec la ville en fond, j'avais déjà fait quelque chose d'approchant pour feu mangastyl avec des persos à la place des bâtiments il y a quelques années, pour dotclear.

Azulejo Portugais, thème pour Wordpress

Jori — Sun, 17 Aug 2008 01:11:00 +0200

Mon nouveau site sur le Portugal et la culture lusophone, Lusitanie.fr; repose sur le thème spécialement créé pour lui, "Azulejo Portugais". Ce thème a pour base graphique les carrelages typiques que l'on voit un peu partout au Portugal, les "azulejos" (sur des maisons de particuliers, sur des églises, sur des mairies, des boutiques... partout). Majoritairement bleu et blanc, un design qui s'adapte à la résolution de l'écran, et qui se veut porteur d'un certain concept portugais de l'esthétisme.

Cette image ci-contre correspond au header - la partie supérieure - du template pour Wordpress. Vous pouvez télécharger le thème pour Wordpress ici : http://e-jori.com/etc/wp-azulejo.zip et l'installer normalement pour votre blog Wordpress : il est compatible avec les widgets, et la barre latérale est sur la gauche. Le template a également été optimisé pour le référencement naturel, qui de toute façon est déjà très bon par défaut sur Wordpress.

Avant que quelqu'un ne le demande, oui, je prépare une version pour Dotclear =) !

Au sujet de Lusitanie.fr : c'est un blog sur lequel je parlerais du Portugal et des cultures héritières, les pays lusophones (Brésil, Angola, Cap-Vert...). Différents aspects de la culture seront abordés, de la musique à la gastronomie, en passant par les monuments ou les coutumes locales. Dans mon premier post, je vous parle de Fado, la musique de la Saudade.

L'image de gauche correspond ici au footer de "Azulejo de Portugal". Chaque fin de post est ponctué d'un coquillage. L'utilisation de la police de caractères "monotype corsiva" pour le titrage est assez "osée", parce que ce n'est pas une police habituelle, mais pourtant ! Il semblerait qu'elle soit disponible dans plus de 80% des systèmes Windows, ce qui en ferait une police encore plus répandue que Times New Roman. Pourquoi s'en priver, surtout qu'elle correspond plus ou moins à la police que je cherchais pour ce design... Il faut savoir qu'au départ, je voulais utiliser sIFR pour ce template, afin d'inclure la police de mon choix. Après avoir réussi à installer sIFR, j'ai été forcé de constater que cette technologie avait trop de désavantages : de nombreux petits bugs, comme le non affichage pur et simple des titres une fois sur deux, une difficulté à configurer et personnaliser la police m'ont donc fait préférer une inclusion classique en CSS de la police de caractères actuelle. J'ai fait le même type de pari pour la police en général du template, "Palatino Linotype" : très répandue également sur les systèmes windows, l'écrasante majorité des lecteurs des blogs utilisant ce thème pour wordpress (et prochainement dotclear) devraient le voir conformément à l'original.

Pourquoi mettre une majuscule au début de chaque mot dans un TITLE

Jori — Fri, 01 Aug 2008 12:09:00 +0200

Sur le blog officiel francophone d'Adwords, nous pouvons y lire ceci :

Utilisez avec discernement les majuscules dans votre texte d’annonce. Evitez la mise en majuscule excessive de mots complets. Adoptez plutôt la mise en majuscule de la première lettre de chaque mot composant votre annonce et facilitez ainsi la lecture de votre annonce par l’utilisateur.

Nous savons qu'auparavant, ils conseillaient de ne pas mettre de majuscules dans les annonces. C'est en quelque sorte, un changement d'attitude de la part de Google qui reflète la non-connaissance du marché français et de ses règle de typo, qui, contrairement aux anglo-saxons, nous interdit de mettre une majuscule à chaque mot d'un titre.

Alors pourquoi ont-ils décidé de le conseiller désormais, y compris en France, faisant fi de nos règles typographiques?

Comme toujours, leurs recommandations sont basées sur l'optimisation de la conversion, à l'incitation au clic. Le fait de mettre une majuscule sur chaque première lettre d’un mot dans un titre, ou une phrase, possède des avantages et des inconvénients à ce sujet. L’inconvénient, c’est que si on lit une phrase qui verrait toutes les premières lettres de ses mots en majuscules, le rythme de lecture sera cassé, un peu comme si on élevait la voix à chaque début de mot. La compréhension de la phrase est difficile dans de telles conditions. Donc, pour une phrase ou un texte encore plus long, vraiment, l'usage des majuscules à ToUT bOuT dE cHanT comme c'était la mode il y a quelques temps sur le web des djeunz est à proscrire : on doit faire un effort inutile de déchiffrage, ce qui n'aide pas la conversion, vous en conviendrez.

En revanche, dans un titre, ça peut être un avantage. Dans un titre chaque - rare - mot est mis en valeur, la majuscule agissant comme séparateur visuel d’occurrence. Un lecteur distingue ainsi plus rapidement dans le titre de l'annonce le mot clef qu'il avait tapé dans le moteur de recherche. C'est aussi pour cette raison que Google met en gras le mot recherchés dans les titres.

Mais franchement, c'est du pinaillage. Parce qu'à ce tarif, je ne suis pas sûr qu'étant quelqu'un de respectueux de la belle langue française (du moins j'essaie), j'irais cliquer aveuglément sur une annonce qui me met toutes les premières lettres de son titre en majuscules, comme les anglais.

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

LiquidCard pour WordPress

Jori — Sat, 01 Mar 2008 22:53:00 +0100

Je viens de voir que je n'avais pas encore fait de billet pour mon thème LiquidCard pour WordPress, alors que je l'avais décliné sur ce fameux moteur de blog depuis... belle lurette maintenant ¬¬ Donc voila, réparons cette regrettable erreur, en vous mettant à disposition LiquidCard normal (avec les couleurs de mon blog), et l'assez populaire dark LiquidCard (celui tout noir et bleu). Il y a des blogs qui utilisent un peu partout sur le web ces deux thèmes, à vous de taper sur Google les bons mots clefs, j'ai la flemme =D

http://e-jori.com/etc/wp-dark-liquidcard.zip pour la version foncée
http://e-jori.com/etc/wp-liquidcard.zip pour la version normale. Dézippez les dans votre dossier de thèmes, ça devrait marcher.

webdesign: principaux sites réalisés.

Jori — Wed, 25 Jan 2006 18:28:00 +0000

Au cours des années, de mon premier site réalisé en 1999 jusqu'a aujourd'hui, beaucoup de choses ont changé au niveau du webdesign. Je vous montre ici mes réalisations principales, à des moments clefs de mon parcours de webdesigner. De l'époque où le mot d'ordre etait l'utilisation de tables et des éditeurs wysiwyg à aujourd'hui: respect des standards et la séparation du contenu du graphisme en utilisant (x)html et css2. Pour voir un graphisme en plus grand, cliquez sur l'image :)

e-tsuki fut mon premier site à voir le jour sur le web, sortant du simple cadre universitaire. Axé vers les jeunes dessinateurs influencés par le Japon, il me format aux armes du webmaster, en me donnant une première approche de la pratique. Installation de forum, modération, mes connaissances théoriques étaient mises en pratique. Le graphisme que je vous montre ici etait la troisième version, un site n'est pas figé dans le temps mais doit toujours suivre l'air du temps, évoluer, progresser.

Ce site fut réalisé par la méthode classique. Après avoir fait un design général sur papier, puis sur illustrator ou freehand, on passe au découpage et à l'intégration. En utilisant des tables (qui sont sémantiquement réservées aux données tabulaires), en mêlant graphisme et contenu, en ne faisant pas attention à rendre le site accessible à n'importe quel navigateur (à l'époque, l'hégémonie d'Internet Explorer était devenue totale). Cette façon de faire est assez directe, on construit le site au fur et à mesure. L'énorme désavantage: un tel site est très difficile à actualiser ou à changer le design, une refonte graphique équivaut à tout refaire de zéro. Pour ce site, j'ai en plus ajouté flash, sans penser aux personnes qui ne l'auraient pas. Résultat: impossible pour quelqu'un qui n'a pas flash player d'accéder au contenu d'e-tsuki.

Lors de mon stage chez SiteWork, il me fut demandé de réaliser une série de templates (designs génériques) et un site pour commercialiser ses mêmes templates. Il s'agissait de faire très simple, les templates seraient vendus bon marché par la suite à des petites entreprises, commerçants ou particuliers. En ce qui concerne le graphisme de novaexpo, et c'était le cas également pour le site d'e-tsuki, mon principal objectif était de faire un design liquide (occupant l'écran de l'utilisateur dans toute sa largeur, s'adaptant á la résolution). Je dois dire que faire des sites qui soient vus correctement chez le maximum de personnes est mon grand cheval de bataille sur le web, et l'adaptation des designs aux différentes résolutions d'un écran un défi. Voyez vous même: en redimensionnant la fenêtre de votre navigateur, vous verrez mon site (e-Jori) s'adapter aux nouvelles conditions d'affichage. Vous pouvez observer le design du portail de novaexpo ici. Le logo, le fond en 3D et le flash ont été également réalisés par mes soins.

Quelques templates réalisés lors du stage:

Un petit travail réalisé pour un hôtel. À ce moment j'avais compris que flash ne devait pas se superposer complètement au html normal, un site qui aurait un fort trafic de tout horizons se doit d'être simple. Nous réduirons donc flash à un simple "bonus" graphique. L'erreur à éviter: mettre les boutons dans le fichier de flash, obligeant l'internaute à attendre que flash se charge pour pouvoir changer de page, ou empêchant carrément quelqu'un qui n'aurait pas flash de naviguer. Ah, bien entendu, tout élément flash doit être un bonus et non pas une tare lors du chargement, les fichiers doivent être donc de taille très réduite.

Megalojas est un site encore en construction, pour un futur portail de plusieurs magasins en ligne. Chaque magasin est basé sur le logiciel libre osCommerce. J'ai également réalisé les magasins en ligne, en adaptant les templates d'osCommerce au design que j'avais créé auparavant (charte graphique, logos).

Sur ce site, réalisé pour une entreprise de création de logiciels, j'abandonne enfin les tableaux et passe au design moderne: utilisation d'une feuille de style pour tout ce qui est design et graphisme, standards du web. Ainsi, le site est accessible pour tout le monde, quelque soit son navigateur, y compris les navigateurs texte. De plus, l'utilisation d'une feuille de style qui sépare complètement le graphisme du contenu permet une très grande facilité pour un éventuel redesign du site, on ne touche plus au contenu. De plus, pour faire un redesign global, on ne modifie qu'un seul fichier (la feuille de style), inutile de changer toutes les pages du site (on comprend tout de suite l'avantage lorsque notre site peut avoir plusieurs centaines de pages différentes).

e-Kaki est sans aucun doute mon principal projet personnel, un site qui permet aux artistes de s'exprimer sur le web et qui rencontre un franc succès, pour un public si ciblé, nous venons d'atteindre les 100 000 visiteurs uniques. Codé selon les préceptes du consortium W3C, le haut niveau d'exigence est évident. Il faut afficher dans les meilleures conditions les oeuvres de nos membres, ce qui implique un design liquide et non intrusif (on se doit de valoriser le contenu avant tout autre chose, un graphisme trop présent risque d'éclipser l'importance des oeuvres exposées). De plus, le fait de séparer le design du contenu permet de proposer à nos utilisateurs le choix entre plusieurs templates, chacun décide ainsi de lui même quel graphisme il préfère pour visualiser e-Kaki. Cette caractéristique nous a aussi permis de faire un design qui change selon l'heure de la journée: sur le forum, on sait tout de suite si il fait nuit ou pas ;)

Finalement, je réalise actuellement des thèmes pour le logiciel de blog dotclear. En un clin d'oeil, je peux changer l'aspect visuel de mon site, simplement en choisissant un autre thème dans l'interface d'administration. Tous sont en xhtml strict et css2.

Thème réalisé pour le site MangaStyl', un point de rencontre de tous les artistes influencés par le Japon et l'Asie en général.

Le thème Mozaïk, une adaptation d'un ancien template que j'avais réalisé pour les forums PHPBB.

Le thème Liquid Card, l'évolution du thème de mon site personnel en thème "tout public", dont vous pouvez voir une démo ici.

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

De l'importance de la taille des pupilles.

Jori — Thu, 22 Dec 2005 20:41:00 +0000

Un problème avait surgit il y a quelques temps, lors d’une retouche d’un ancien dessin. Quelques personnes m’avaient dit qu’ils préféraient, malgré mon amélioration technique évidente, les yeux de l’ancienne version, et ne savaient pas vraiment m’expliquer pourquoi. Après quelques recherches, deux sondages et beaucoup de discussion, je sais pourquoi. J’ai compris que la taille des pupilles est beaucoup plus importante que l’on puisse croire au premier abord, et que c’est une façon d’apporter un coté émotionnel à notre œuvre extraordinaire. Un si petit détail, mais pourtant si important ! Voyons voir mes conclusions…

Après quelques discussions, retouches diverses, il s'est avéré que beaucoup de gens préféraient mon dessin avec de plus grandes pupilles. Clarisse, le nom du personnage, avait l’air plus sympathique. Sauf que moi, je la trouvais sans personnalité, sans son caractère, et je me demandais ce que je voulais bien dire par là. Quel est son caractère ? Elle est une esclave, toujours inquiète de son sort et révoltée de ne pas être libre, malgré le calme apparent de la scène dans laquelle elle se trouve. Je fais donc des yeux de cette façon pour exprimer ce sentiment.

L’autre facteur à prendre en compte : la lumière environnante va influencer la taille de la pupille. Beaucoup de lumière, petites pupilles, peu de lumière, grandes pupilles. Mais à lumière normale, ce sont nos émotions qui vont donc influencer la taille de nos pupilles. Si quelqu’un à peur, ou qu’il a du dégoût ou de la haine, sa pupille se rétractera. Si au contraire, il est tranquille, calme ou qu’il se sent attiré par quelque chose ou quelqu’un, sa pupille se dilatera. Et nous, nous le savons instinctivement. C’est pour ça que certaines personnes, juste par le regard, peuvent nous sembler plus sympathiques que d’autres, comme il a été prouvé par des études, et comme je l’ai vérifié par mes sondages. 54% des gens ont préféré l’œil numéro 3 dans mon sondage sur deviantART, et 53% dans mon sondage sur MangaStyl’. Cela ne s’invente pas, les yeux sont tous rigoureusement identiques, mis à part la taille de la pupille. L’œil numéro 4 étant trop exagéré (pas de pupille), il est un peu hors jeu, tout comme le 1 (pourtant mon préféré sur les seuls critères de l'ésthétique...).

On voit une technique en photographie, pour éviter les yeux rouges à cause du flash, qui consiste à envoyer une petite lumière avant le flash dans les yeux de nos sujets. La pupille se contractera et l’effet yeux rouges sera éliminé. Mais alors… dans la photo, notre sujet n’aura pas ce visage de sympathie et calme que nous aimerions avoir, à cause de la taille réduite des pupilles ! Oui, je sais, on me rétorquera qu’on ne devrait jamais utiliser de flash ;)

Dans cette optique, je fais un rapide survol de quelques dessins qui gagneraient à être retouchés, du moment que je suis en accord avec l'émotion que je veux transmettre. Pour Clarisse, c'est ce regard que je veux, tant pis si il est moins sympathique, gentil, doux, ce qu'on voudra. Il est aussi moins potiche, ce regard ambigu (effrayé, peur, degout, dedain, haine, ce que vous voudrez en contrepoint avec un visage calme et souriant). Mais pour mon fanart de Ranma-chan, on peut négocier. Je vais donc la retoucher.

Le dessin à droite étant le retouché, c'est mieux non?

Voir la version finale sur deviantART

Pour finir, on pourrait encore parler de l'effet des drogues sur notre pupille, certaines la rétrecissant, d'autres tout le contraire, mais je crois que ça n'aiderait pas, n'est-ce pas? Mais il se peut donc que notre personnage paraisse avoir consommé quelques kilos d'héroïne, faut faire attention :p

Un petit lien marrant sur la puissance du regard en ventes.