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

Prêt et Crédit, nouveau site sur le crédit

Jori — Wed, 19 Nov 2008 20:09:00 +0100

J'ai installé sur un WordPress mon template dark liquidcard, qui est désormais dispo sur Wordpress.org en téléchargement libre. Sur ce nouveau site nommé simplement "Prêt Crédits", je vais parler du crédit, du surendettement, du rachat de crédit, et ainsi de suite :) Je vais le faire évidemment à ma façon, en essayant de ne pas être trop ennuyeux ou trop fastidieux, juste lisible, parce qu'il est décidément bien compliqué d'avoir de bonnes infos simples et actuelles sur la jungle du crédit.

Parisii.fr, le blog de Paris et son thème wordpress, "Vie Urbaine"

Jori — Mon, 03 Nov 2008 22:43:00 +0100

Je vous parlais de mon nouveau template pour WordPress dans mon dernier billet. Il est désormais terminé. Vous pouvez le télécharger sur WordPress :)

C'est un template urbain, comme le nom l'indique. Il me sert en fait pour mon nouveau blog, le Blog de Paris, Parisii.fr, où vous trouverez plusieurs articles sur la ville lumière. Un peu dans la même veine que Lusitanie.fr donc. Paris raconté par des habitants de paris, tout simplement, sans formules tape à l'oeil ou de plans foireux de sortie où tout le monde va, et qui sont bien évidemment archi bondés. Vous aurez plutôt des articles du genre : "miam, aujourd'hui j'ai mangé un super sandwitch à la boulangerie du coin". Bref, pas un truc de touristes.

Sur le thème WordPress "Vie Urbaine", vous ne trouverez pas la Tour Eiffel, qui me sert de logo pour Parisii.fr : c'est à tout un chacun de personnaliser son thème de blog, volontairement simple à cet effet. Je le retoucherais sans doute plus tard.

J'en ferais évidemment une adaptation Dotclear.

Au sujet du blog de Paris, si vous vous sentez l'âme d'un écrivain parisien, pourquoi pas ne pas contribuer pour le blog? Ou avec un dessin ;)

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.

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.

Oldies: sites en flash

Jori — Tue, 17 Jan 2006 19:19:00 +0000

Je vous présente dans ce billet quelques un de mes anciens sites fait majoritairement avec la technologie flash. Chacun représente une étape dans ma façon de voir et penser le webdesign. Je n'utilise plus de nos jours flash de façon si intensive, j'ai compris qu'un site, pour bien fonctionner, devait en limiter l'utilisation. Je décrirais dans ce billet pourquoi, en montrant l'évolution de ma façon de faire :)

Mon premier portfolio, un site où j'exposais mes travaux d'étudiant en arts graphiques. Sur ce site, j'intègre du flash dans des pages html. Je ne voulais pas faire un site "tout en flash", à cause d'un soucis de facilité à updater par la suite, avec de nouveaux travaux. Le soucis, c'est que les liens internes du site sont en flash, rendant ainsi impossible pour l'utilisateur une navigation personnalisée (c'est à dire que l'utilisateur choisi si il veut ouvrir le lien dans une nouvelle fenêtre ou non, par exemple).

Un petit travail que j'ai nommé Graphic Rain, pour mes études, que j'ai intégré dans mon premier portfolio. Tout en flash cette fois, il présente l'avantage d'avoir des transitions fluides entre chaque page, vis à vis d'un site qui serait entièrement fait en html. Le problème, c'est qu'il est impossible en flash de pointer sur une page spécifique (imaginez que vous voulez montrer une page interne de ce site en flash - vous pouvez pas) et par conséquent, les moteurs de recherche non plus. C'est le désavantage de flash, en plus d'empêcher un libre accès au contenu (impossible de sauvegarder une image ou d'augmenter facilement la taille du texte). En somme: flash se substitue aux capacités de votre navigateur, limitant l'internaute - ou le robot - dans sa navigation.

Ce travail en flash, exclusiva promo, n'est pas prévu pour être un site, mais une présentation que l'on distribue en cd-rom, j'ai donc allégé pour le web, ne gardant que la présentation initiale (les liens ne fonctionneront pas). Ce travail avait été fait pour une entreprise qui voulait se promouvoir auprès des clients par le biais d'une "carte de visite digitale" comme nous l'avions appelé. Fait en collaboration avec un professionnel du marketing, j'ai du faire beaucoup de concessions pour que nous trouvions un compromis. Comme partout, le client à toujours des idées, et c'est à nous d'essayer de faire du mieux que nous savons, tout en satisfaisant le client.

Encore un autre travail multimédia qui n'est pas un site Internet, mais un kiosque digital. Convento de Cristo présente ainsi un monument historique célèbre de la ville où j'ai étudié les Arts graphiques pendant 5 ans, le couvent du Christ, à Tomar. Un kiosque digital, ce sont ces bornes d'informations que l'on trouve un peu partout dans les musées, les monuments, et qui ont souvent une carte ou un peu d'Histoire de la zone précise que nous visitons. Il y a quelques années, pour faire ce travail, nous aurions utilisé Director, avec son langage Lingo, mais flash, devenu de plus en plus puissant et versatile a progressivement remplacé ce logiciel.

La première version de Ministers of Design est un exercice de style, tout en flash. Nous voulions montrer du service, faire un site bourré d'animations, de petits détails, et nous sommes tombés dans le piège que flash présente aux designers: l'énorme liberté créative que cet outil représente à provoqué un trop-plein d'éléments graphiques, qui sont entrés en conflit avec le contenu, mis en marge. Hors, un des principes basiques du design graphique, c'est que les éléments graphiques sont au service du message que nous voulons transmettre (le contenu) et jamais le contraire.

Conscients de notre erreur, moi et mon collègue, ami étudiant, avons décidés de faire une deuxième version de Ministers of Design. Cette fois ci, nous ferons simple, visuel, en pensant avant tout à ne pas surcharger visuellement notre travail. La simplicité est sans aucun doute une des bases fondamentales du webdesign, et une clef de succès pour un site réussi. Le défi ici était de faire un site tout en flash, mais qui se redimensionne selon la taille de l'écran de l'utilisateur. Il sera toujours en plein écran chez vous.

Finalement, j'ai fini par faire mon portfolio flash. L'ancienne version de mon site, e-Jori a un design plus agréable, à mon sens que les précédents, mais surtout, j'utilise une de mes caractéristiques en tant que designer: je suis aussi illustrateur. Le problème, lorsque nous sommes les deux à la fois, il est parfois plus difficile de prendre du recul vis à vis de son illustration pour pouvoir l'intégrer à un design. Et ceci va se voir sur mon site, l'ergonomie pêche un peu, je n'ai pas donné l'importance nécessaire à la navigation du site, ne pensant plus qu'au visuel.

En conclusion, maintenant, j'utilise flash comme un "plus" qui ne doit en aucun cas se superposer au contenu ou à l'usabilité. Si par exemple quelqu'un n'a pas flash player, il doit être capable de naviguer sur mon site malgré tout (le mieux étant qu'il ne remarque même pas que flash n'est pas là). L'autre point important, c'est de toujours faire attention au poids total de notre travail, il est très facile avec flash d'atteindre plusieurs centaines de Kos, ce qui, pour un modeste 56k, est très pénible. Dernier point, sans aucun doute le plus important: un site, nous voulons que les internautes y reviennent souvent. Si nous présentons à chaque fois la même animation, si l'Internaute doit attendre à chaque fois quelques secondes pour atteindre le contenu, il y a de très fortes chances qu'il aille voir un site peut être pas aussi "beau" (le concept de beauté étant purement subjectif) mais sans aucun doute plus "pratique".

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