Archives du mot-clé WebDesign

Réalisation du site internet des instituts Freudiens de Psychanalyse du Narbonnais et du Roussillon

creation-site-internet-formation-psychanalyse

Aujourd’hui je vous présente rapidement dans cette vidéo ma dernière réalisation pour la création, la mise en place et la maintenance du site www.psychanalyse-formation.fr des Instituts Freudiens de Psychanalyse du Narbonnais et du Roussillon.

Instituts Freudiens de Psychanalyse du Narbonnais et du Roussillon ouvrent leur portent pour la première fois à la rentrée pour Octobre 2014. Découvrez la Psychanalyse dans votre région grâce aux Instituts Freudiens localisés dans plusieurs ville de France.

Le contenu du site a été créer par Brigitte CristantePsychanalysteDidacticienneSexothérapeute analytique. Il est mise en forme par un webdesign qui se veux identitaire et adaptatif aux écrans d’ordinateurs, tablettes et smartphones. Le site vous propose du contenu informatif et explicatif sur le thème de la psychanalyse, vous pourrez aussi trouver des informations sur le détails de la formation psychanalyste d’initation, de professionnalisation et certifiante, proposée par les Instituts Freudiens de Psychanalyse du Narbonnais et du Roussillon. Ou encore télécharger le Bulletin d’inscription, le calendrier de la 1ère année d’initiation et le programme des cours.

Pour en savoir plus sur la psychanalyse rendez-vous sur http://www.psychanalyse-formation.fr

Comment faire un site internet pour smartphone, tablette et ordinateur ?

Cliquez sur la citation pour la partager sur Twitter :

Avec l’avènement des supports mobile, tablette et smartphone, le site internet d’une entreprise doit s’adapter pour capter des nouveaux clients.

Créer un site internet pour mobile, tablette et ordinateur

2 axes de solutions s’offrent à l’entreprise pour créer son site internet :

  1. Créer un site internet pour chaque support et ses résolutions d’écran
  2. Créer un site internet qui s’adapte à chaque support et ses résolutions d’écran avec le « Responsive web design » dit « conception de sites web adaptatifs ».

1.Le site internet créé sur mesure pour chacun des supports et ses résolutions d’écran

Avec cette solution, l’avantage sera d’avoir un environnement de site internet unique pour l’utilisateur et 100% repensé par rapport au support et à la façon dont l’utilisateur se sert du site sur un écran de taille différente. Encore faut-il que le travail soit correctement effectué pour chaque support.

Le plus gros problème de cette méthode pour les petites et moyennes entreprises ou pour les indépendants, c’est le coût bien sûr ! Car chaque site devra être refait entièrement sur la partie visible et la partie gestion de contenu pour pouvoir gérer le site en fonction du support. Cela engendre globalement une multiplication par 3 du prix initial du site pour le refaire sur chaque support. Soit pour un site vitrine à environ 1500 €, optimisé pour l’affichage sur un écran d’ordinateur, on passe à 4500 € au total pour faire 2 autres versions, l’une pour les écrans de tablettes et l’autre pour les smartphones.

Le 2ème inconvénient est que le site ne sera vraiment pas adapté aux autres types d’écran avec leurs résolutions diverses. Il faudra donc se contenter d’une des 3 versions pour la visionner tant bien que mal sur un nouveau support d’écran. Ou investir encore dans une nouvelle version spécifiquement prévue pour un type de plateforme avec sa résolution d’écran.

Exemple de processus de création pour une site vitrine créé 3 fois pour 3 supports : ( ordinateur, tablette, smartphone )

  1. Conception pré-projet pour le site version écran d’ordinateur
  2. Maquettage (écran d’ordinateur)
  3. Découpage/intégration (écran d’ordinateur)
  4. Développement (écran d’ordinateur)
  5. Tests (écran d’ordinateur)
  6. Mise en ligne (écran d’ordinateur)
  7. Optimisation pour le référencement naturel (écran d’ordinateur)
  8. Référencement naturel (écran d’ordinateur)
  9. Mise à jour à effectuer (écran d’ordinateur)
  10. Suivi
  11. Conception pré -projet pour le site version écran de tablette tactile
  12. Maquettage (écran de tablette tactile)
  13. Découpage/intégration (écran de tablette tactile)
  14. Développement (écran de tablette tactile)
  15. Tests (écran de tablette tactile)
  16. Mise en ligne (écran de tablette tactile)
  17. Optimisation pour le référencement naturel (écran de tablette tactile)
  18. Référencement naturel (écran de tablette tactile)
  19. Mise à jour à effectuer (écran de tablette tactile)
  20. Suivi
  21. Conception pré-projet pour le site version écran de smartphone
  22. Maquettage (écran de smartphone)
  23. Découpage/intégration (écran de smartphone)
  24. Développement (écran de smartphone)
  25. Tests (écran de smartphone)
  26. Mise en ligne (écran de smartphone)
  27. Optimisation pour le référencement naturel (écran de smartphone)
  28. Référencement naturel (écran de smartphone)
  29. Mise à jour à effectuer (écran de smartphone)
  30. Suivi

Nous nous retrouvons ensuite avec la redirection de l’ensemble de la communication visuelle vers 3 types de liens en fonction des 3 supports.

Comme vous pouvez le constater, le processus est répété entièrement 3 fois est donc il est forcement très long et coûteux.
Il est aussi bien de souligner qu’il y aura donc 3 interfaces de gestion pour chaque site sur un support donné, donc il sera beaucoup plus long de faire des mises à jours.

Maintenant, découvrons la solution qui est vraiment avantageuse pour les budgets de la plupart des petites et moyennes entreprises… Et qui n’est pas une solution bon marché mais belle est bien une autre façon d’aborder le design et l’interface multisupports.

2.Le site internet créé pour s’adapter à chaque support et ses résolutions d’écran avec le « Responsive web design »

responsive web design (conception de sites web adaptatifs)

Avec cette solution, le site internet devient unique dans sa gestion et il s’adapte à tous les écrans. Pour cela, le principe vient du « Responsive web design » qui est une façon de penser et de développer une interface graphique qui s’adapte à toutes les résolutions des écrans, quels que soient les supports.
Pour arriver à un tel résultat de façon optimisé sur au moins 3 types de supports, il faut partir du principe que l’on casse certaines contraintes qui vont nous permettre d’avoir un site qui s’adapte à toute les résolutions et définir des limites d’affichage en dessous ou au dessus d’une résolution donnée.

3 points essentiels pour créer un site en  » Responsive web design « 

  1. Mettre en place un système de grille flexible
  2. Prévoir l’affichage des images flexibles
  3. Utiliser les media queries

Exemple de processus de création pour une site vitrine créé 1 fois en « Responsive web design »  pour 3 supports : ( ordinateur, tablette, smartphone )

  1. Conception pré-projet pour le site version écran d’ordinateur, tablette et smartphone en commun
  2. Maquettage en commun (écran de smartphone, ordinateur, tablette tactile)
  3. Découpage et intégration en commun (écran de smartphone, ordinateur, tablette tactile)
  4. Développement unique
  5. Tests d’affichage en commun sur les 3 supports  (écran de smartphone, ordinateur, tablette tactile)
  6. Mise en ligne unique
  7. Optimisation pour le référencement naturel unique
  8. Référencement naturel unique
  9. Mise à jour à effectuer unique
  10. Suivi en commun

Pour faire un site internet pour smartphone, tablette et ordinateur, vous avez donc 2 solutions : faire un site sur mesure pour chaque support ou faire un site responsive web design. Les deux approches ont leur lot d’avantages et d’inconvénients, néanmoins pour les petites et moyennes entreprises qui veulent être présentes sur le marché mobile et tablette, le responsive web design est la solution la plus adaptée au budget mais aussi la plus rapide à mettre en oeuvre, la plus simple pour les mises à jour et recommandée pour le référencement naturel par Google.

Voir nos offres de création de sites internet responsive

The Hobbit blog, analyse du blog officiel

Suite à la sortie du film « The Hobbit » en Amérique, soit traduit littéralement « Le Hobbit » chez nous, j’ai voulu en savoir plus sur l’envers du décor du film et j’ai découvert les « making off » sur le blog officiel www.thehobbitblog.com .

Je vous invite à découvrir les moyens techniques et graphiques mis en place pour la création de ce blog officiel consacré à l’univers du film Le Hobbit. Le blog a été mis en place d’après des techniques de création, en somme, très simple à réaliser pour un professionnel de la création web et je vais vous expliquer pourquoi.

Crédits images « thehobbitblog.com »

Un blog officiel pour le film « The Hobbit »

Pour le film Le Hobbit, réalisé principalement par le célèbre Peter Jackson, qui a aussi réalisé la trilogie du Seigneur des anneaux, un blog officiel a été mis en place pour les fans. Celui-ci présente notamment  des vidéos de « making of » de la réalisation du film, des photos et des articles des évènements qui se passent autour du film et de ses stars.

Les techniques utilisées pour le développement du blog The Hobbit

Le coeur du blog :

Il faut savoir que les techniques de développement des blogs on bien évolué depuis les 10 dernières années. Il est de plus en plus courant pour les petites et moyennes entreprises d’avoir recours à l’utilisation de « CMS » ( Système de gestionnaire de contenu ) de type « Open Source » ( code source libre de droit et d’exploitation). Néanmoins, les grandes entreprises préconisent souvent la création de blogs sur mesure pour des besoins spécifiques. Ici, la première surprise, qui n’en est qu’une à moitié, c’est que le blog officiel du film The Hobbit a été créé en utilisant le CMS Open Source le plus utilisé dans le monde par les professionnels du blogging, c’est à dire WordPress. WordPress est une puissante plate-forme avec CMS  développé à l’origine pour créer des blogs. WordPress sert depuis quelques années déjà de CMS avec brio pour la création et la maintenance de sites internet professionnels, en plus des blogs professionnels.

Les fonctionnalités mises en place sur le blog :

Voici la première grande déception pour un blog officiel dédié à un film du cinéma

1- Pour les professionnels de la création de blogs, cela est visible au premier coup d’oeil, pour les non initiés, il suffit d’aller jeter un coup d’oeil dans le code source pour s’appercevoir que les fonctionnalités visibles proposées n’ont pas pris plus d’1 minute à être mises en place une fois WordPress installé. Car ici, les créateurs du blog ont utilisé un thème premium « Glow » de chez eleganthemes http://www.elegantthemes.com pour mettre en place le design et les fonctionnalités du site.

Coût total de l’opération pour l’agence web qui a créé le blog = 49$ soit moins de 40 euros pour mettre en place les fonctionnalités.

2- Un minimum de fonctionnalités a été mis en place sur la partie invisible pour l’utilisateur en utilisant des plug-ins gratuits. Ouf ! Sinon cela serait un vrai travail d’amateur, « l’honneur est sauf ? ». Nous retrouvons l’installation du plug-in « Yoast WordPress SEO plugin » qui est un plug-in dédié à l’amélioration du référencement naturel des pages. L’implantation du plug-in « Nextgen Gallery » qui sert à faire facilement des Galeries d’images, même depuis l’interface de gestion sans connaissance en développement web, donc utile pour les personnes en charge de la publication des articles du blogs. De même que le plug-in « Slideshow Gallery » pour la mise en place de diaporama d’images accompagné de titres et de textes modifiables.

Coût total de l’opération pour l’agence web qui a créé le blog = 0€ mais environ 1 ou 2 heures, le temps de mettre en place les plug-ins et de les intégrer au design pour les personnaliser, si besoin.

3- Ah désolé ! Mais, j’ai fait le tour des fonctionnalités spécifiques de ce blog qui ne sont pas fournies nativement avec WordPress ou dans le thème acheté 49$.

Conclusion sur le développement et les fonctionnalités du blog officiel The Hobbit

L’utilisation de WordPress ici semble prometteur et permettrait de gagner des coûts pour le développement de fonctionnalités spécifiques ou innovantes ou même de mettre en place un design personnalisé pourrait-on penser… Pourtant, il n’en est rien. Ici, WordPress n’utilise pas 20% de ses possibilités et le blog laisse grandement à désirer pour une qualité dite professionnelle au niveau de son développement. Je n’entrerai pas dans les détails des articles qui sont souvent le post de vidéos ou d’images accompagnés de 2 lignes de texte et sans aucun sens ou scénario de publication. Sauf la date peut être. Nous sommes bien loin d’un travail professionnel de grande agence web et plus proche d’un développement de blog amateur ou à très faible budget.

La création du design du blog The Hobbit

L’esprit du blog :

Oui, sur le blog The Hobbit, nous retrouvons les bases d’un blog :

  • Page d’articles avec texte, photos et vidéos,
  • recherches par catégorie,
  • archives,
  • galeries d’images,
  • widgets de bases,
  • et liens.

L’utilisation d’un thème graphique existant pose des bases solides sur le blog tel que nous le connaissons tous. Mais aucun travail de personnalisation n’a été réalisé pour le design de ce blog officiel. Sauf le haut de page qui laisse apparaître un plan monté avec le titre du film et l’un des héros du film « Gandalf » dans de vertes étendues. Une poignée d’heures de travail, tout au plus, pour la recherche de ce haut de page. Le menu de navigation, quant à lui, reste fidèle au thème acheté 49$ et a même perdu de son essence graphique pour ne laisser apparaître qu’un fond noir dénué de sens.

Une personnalisation graphique quasiment inexistante :

Quand on observe le reste du site, il n’y a malheureusement que peu de commentaires positifs à faire. Le graphiste a simplement changé la couleur des arrières plans des dates de chaque article. Ensuite, tout est identique au thème acheté à 49$ .

Donc, aucun travail graphique ou ergonomique n’a été réalisé pour ce blog officiel. Seul l’ajout d’un « Like » Facebook a été mis en place sur les pages des articles et les résumés d’article, ce qui est une idée qui est maintenant commune mais qui en vue du travail réalisé pour la création de ce blog pourrait être vue comme une innovation magistrale ! (Rire)

Un blog The Hobbit officiel, officiellement raté !

Un blog officiel pour un film de renommée mondiale avec, comme je l’imagine, un budget suffisant pour faire quelque chose de correct et qui me semble ici avoir fait, encore une fois, le bonheur des commerciaux. En vendant un blog à la limite de l’amateurisme pour un résultat que je vous laisserai juger mais que je trouve déplorable et qui ne représente pas la qualité de prestation habituellement vue pour la création de sites ou de blogs avec les partenaires et grands studios qui ont participé au film The Hobbit comme Warner Bros, MGM, New line cinema .

Un détail illégal pour un site officiel et qui mérite un carton rouge : le blog ne comporte ni page avec un plan de navigation ( non obligatoire ) , ni mentions légales ( obligatoires ), ni copyright ou de droits réservés ( obligatoires ).

La critique est facile quand on se place en tant que spectateur. Néanmoins, en tant qu’acteur de la création graphique et web et notamment créateur de blogs sur WordPress pour des entreprises et des associations, je me permets une critique, pour laquelle j’ai cherché à trouver des points positifs, en vain. Par contre, j’ai simplement listé les points négatifs et j’ai préféré le faire sans trop de détails pour ne pas choquer les moins avertis des arnaques et du business des sites et blogs sur internet.

Pour moi le blog The Hobbit officiel est très facilement chiffrable. Il vaut 250,00 euros maximum si l’on ne souhaite pas arnaquer le client. Soit 200,00 euros pour la mise en place de WordPress et le temps passé à installer le template acheté 49$, à le personnaliser graphiquement avec les éléments cités plus hauts, soit moins d’une demi journée. Ajoutez l’installation de 3 plug-ins gratuits en 5 minutes et vous obtenez un prix raisonnable de 250,00 euros pour ce blog.

Combien pensez-vous que les sociétés de production du film ont déboursé pour ce blog ?
Comment trouvez-vous le blog thehobbitblog.com ? je parle bien le blog en lui même techniquement et graphiquement, pas de son contenu.

Web design : cas pratique d’un site e-commerce

image de webdesign d"une étude d'un site e-commerce

Phenix Vétérinaire est un site de vente de livres et de parties de livres sur les thèmes regroupés dans « agriculture et agronomie, sciences de l’environnement, sciences aquatiques, océanologie  » et  » Médecine vétérinaire, santé animale, zoologie  » .

La première étape, suite à la création du logo, était de déterminer l’utilisation des gammes de couleurs du site. Je pars souvent du principe que le logo sert de base créative à l’ensemble du site, car le logo est la partie principale de l’identité visuelle que se soit pour de la communication visuelle, pour de la vidéo ou du web… Ici le logo  que j’ai créé pour le client était riche en couleurs. J’ai donc déterminé les couleurs dominantes afin de m’en servir pour le design du site. Cela apporterait une cohérence certaine entre chaque élément.

Le choix des couleurs

  • Le marron devait servir de pilier, de couleur mère de l’ensemble du design, comme c’est le cas en arrière plan du logo.
  • Le bleu qui est utilisé dans le texte « VÉTÉRINAIRE » et sur la couverture du livre du logo, est léger mais vient soutenir les pages du livre et le phénix qui en sort, ainsi que le mot « PHENIX ». C’est donc une couleur que j’ai utilisée en soutien, pour les titres des blocs de produits, les liens, ainsi que l’ensemble des éléments passifs et l’arrière plan du site avec des teintes plus claires.
  • Le Jaune orangé, quant à lui, est la couleur principale qui constitue le phénix, c’est une couleur très dynamique et vivante. Elle s’accordait donc parfaitement et naturellement avec les boutons d’action, ou des rappels sur des zones pour leur donner de l’importance.
  • Le blanc placé derrière l’écriture du logo apporte de la pureté et de la clarté à l’information. Cela m’a permis d’utiliser communément cette couleur blanche pour le fond de l’intérieur des pages.
  • Le gris est la couleur d’écriture choisie pour l’ensemble des textes des pages et des zone de remplissage. Il sert à afficher l’information mais ne choque pas l’œil comme cela aurait pu être le cas avec un noir sur fond blanc. L’utilisation du gras pour les titrages ou les tarifs, permet de les mettre en avant. Néanmoins contrairement à un site de type « discount », ici l’importance n’est pas le prix, les réductions ou les supers affaires… C’est la qualité de l’information, car nous sommes dans le domaine médical et scientifique. Il était donc plus éthique de mettre en avant l’information sans la différencier « fortement » du prix avec un changement de couleur par exemple.

Moteur de recherches

Webdesign moteur de recherche scientifique et médicale

Lors de la création du design de ce site ecommerce, la demande consistait à mettre en avant le moteur de recherches pour permettre aux personnes de trouver des livres correspondants. Il est placé de telle manière qu’il est accessible et visible rapidement puisqu’il est situé à l’intérieur du haut de page et sur quasiment l’ensemble de la largeur de la page. On ne peut pas le manquer ! Néanmoins, l’utilisation de couleurs douces, d’un jeu d’ombres et d’une perspective le mettent en avant mais n’agresse pas l’œil de l’utilisateur.

L’accessibilité des informations détaillées

schema de processus d'accessibilité d'information d'un produit

La demande était de mettre en forme l’état d’un bloc de produit avec ces informations obligatoires puis avec des informations détaillées accessibles en un clic sans changer de page. Grâce à l’agrandissement dynamique du bloc produit, la quasi totalité de l’information du produit devient disponible.  Cet aperçu permet à l’utilisateur de naviguer entre les produits et d’en savoir plus sans changer de page.

Conclusion

Ce design de site de type e-commerce m’a permis notamment d’exprimer un nouveau jeu de couleurs que j’ai trouvé intéressantes, d’organiser un webdesign basé sur la recherche et de mettre en forme un procédé d’accessibilité d’information. Le site se compose de plus d’une dizaine de pages en maquettes. Si vous êtes curieux de webdesign ou de thèmes de recherche du site, je vous invite à le consulter pour voir l’ensemble du travail effectué.

Vous pouvez aussi me laisser votre avis juste en dessous.

Voir le site Phénix vétérinaire : http://www.phenix-veterinaire.com/

Le nouveau design Facebook en avant première !

Découvrez en avant première comment sera le nouveau design des profils Facebook !

Date annoncée, le  30 septembre 2011.

J’ai appliqué l’explication donnée pour tester le nouveau design Facebook depuis le site suivant : http://www.disko.fr/blog/obtenir-derniere-version-de-profil-facebook/

Pour cela il faut passer du coté du site des développeurs Facebook et suivre l’explication du lien ci-dessus.

Cliquez sur l’image pour la voir en taille réelle et laissez vos commentaires sur ce que vous pensez de cet aperçu. Il faut savoir que là ce n’est qu’une partie, car le mur est présenté sous forme d’articles en 2 colonnes mais vous pouvez mettre en avant certains sur toute la longueur de la page, comme celui que j’ai mis en bas de l’image.

Design facebook profile

3 conseils pour le design d’un site web professionnel

Internet est composé d’un grand nombre de sites internet tous plus ou moins différents les uns des autres en apparence. Néanmoins, le design de sites professionnels est plus ou moins identifiable par la qualité de la conception et de la création.
Afin de proposer un design professionnel et donc, d’une certaine qualité, à vos clients, voici 3 conseils qui, je l’espère, vous serviront à l’amélioration de vos web designs, tout comme je travaille sur l’amélioration de ceux que je propose régulièrement.

Continue reading

Refonte du site internet karting92.com

http://www.Karting92.com

Cet été, j’ai été amené à prendre en charge la refonte graphique et restructuration « relooking complet » du site de karting Parisien bien connu dans notre capitale, Karting 92.

Mais j’ai aussi été chargé d’ajouter une animation de karting 3d intégré dans le haut de page flash crée pour l’occasion, puis de mettre en place de nouvelles pages… suivant l’audit d’une société externe.

A partir des ressources graphiques du client, de mes propres ressources et de créa, j’ai personnalisé plusieurs des pages du site tout en respectant la conception de leur identité visuel créée préalablement par mes soins. Certaines contraintes comme la réutilisation du code du développement de l’ancien site m’ont amenées à trouver des solutions d’intégration et d’animation rapides. Ce sont ces mêmes contraintes qui m’ont servies à estimer le temps de conception nécessaire lors du début du projet afin de répondre aux attentes.

Les grandes étapes du projet :

_Refonte graphique/maquettage

_Animation 3D, Compositing et Flash

_Découpage et intégration

_Récupération/implantation de la structure PHP

_Tests et correctifs

_Création de nouvelles pages en cours de projet

_Création de 4  modèles de newsletter

_Tests et correctifs

_Mise en ligne du site , test et correctifs

Voici un aperçu de trois maquettes des pages du site :

webdesign maquettewebdesign maquettewebdesign maquette

Voici un aperçu d’un modèle de newsletter du site :

webdesign newsletter


Je vous invite à consulter le site Karting 92 à l’adresse internet suivante http://www.Karting92.com