Archives pour la catégorie WebDesign

Parlons Webdesign avec l’ergonomie, le marketing liée à l’image, l’identité visuelle, la charte graphique, les animations css et flash, l’intégration css et html, ou encore le partage de résumés de certains projets web.

Les sites internet de la société Privacia deviennent mobiles

Réalisation site internet responsive Privacia

 

création-site-internet-responsive-privacia-recyclage

Pour commencer cette 4eme année de collaboration entre F4 Design et la société Privacia, voici l’adaptation des sites Privacia avec son petit frère Privacia Recyclage qui sont maintenant accessibles et optimisés pour un affichage sur tablettes et smartphones. F4 Design avait réalisé les sites Privacia en 2012 et Privacia recyclage en 2013. Ces sites évoluent selon les besoins de la société. Aujourd’hui, les sites www.privacia.fr et www.privacia-recyclage.com deviennent adaptatifs, avec le responsive design.

L’adaptation de sites internet aux tablettes et smartphones

Le site internet Privacia avait été refondu en 2012 par F4 Design mais il n’intégrait pas les possibilités d’affichage sur tablettes et smartphones, car cela ne rentrez pas dans le budget en 2012. Son petit frère Privacia Recyclage bénéficie de la même structure d’intégration et de développement. Néanmoins en tant que webdesigner j’avais prévu et déjà imaginé cette possibilité. Le design des sites n’a pas eu besoin de refonte pour 2015, il a suffit de quelques ajustement de revoir une partie de l’intégration HTML/CSS.

L’avantage majeur du responsive design, c’est que l’on touche qu’a la partie graphique et aux paramètres d’affichage du site. Rien n’est perturbé sur le contenu, n’y sur le développement ou le référencement naturel du site, quelque soit le terminal utilisé.

Ces sites sont maintenant opérationnels pour être consultés par les utilisateurs de tous types de smartphones et tablettes, iphone, ipad, xperia, galaxy, android, etc…

L’ajout ou le retrait d’éléments pour tablettes et smartphones

Un écran d’ordinateur ne se lis pas comme une tablettes ou un smartphone, c’est pour cela que sur smartphone vous verrez apparaître en haut de page un bouton d’appel téléphonique directement relié au téléphone. Sur tablette cela agit en ouvrant un logiciel tel que skype pour passer une communication via internet sur un téléphone. Aussi le menu principale ne réagit pas au survol d’une souris comme sur ordinateur, le menu a donc été adapté aux besoins d’affichages et d’actions tactiles des tablettes et smartphones. Enfin le menu en pied de page a été réduit en partie car il n’a pas le même espace d’affichage que sur ordinateur. Cela permet de gagner de l’espace d’affichage dans des écrans plus petits, le menu principale étant suffisant ici.

Bonne année 2015 à Privacia !

F4 Design ainsi que ces collaborateurs souhaites une bonne année 2015 à la société Privacia ainsi qu’à ces salariés, avec la réussite, la prospérité et la propreté de la planète !

Site internet : 5 astuces qui rendent votre site plus professionnel

5 astuces pour créer un site internet professionnel
Vous avez fait créer un site internet mais vous ne le trouvez pas très professionnel, pourtant il comporte toutes les fonctionnalitées dont vous avez besoin. Faire appel à un webdesigner vous permettra d’améliorer l’aspect graphique, ergonomique pour lui donner un aspect plus professionnel.

Voici 5 astuces à intégrer, qui vont rendre votre site internet plus professionnel aux yeux des visiteurs.

1-Avoir un logo et s’en servir de base pour créer le design du site

Icône logo flat designAvoir un vrai logo n’est pas un luxe, c’est une nécessité qui va permettre à votre site de se démarquer, le logo est la pièce maîtresse de votre identité visuelle. Vos visiteurs pourront vous identifier uniquement grâce à cela sur l’ensemble de vos supports de communication ainsi que votre site internet.

Pour accentuer votre identité visuelle sur votre site, vous pouvez faire réaliser votre design sur la base de votre logo. Donc utilisez les mêmes codes couleurs, les mêmes types de formes, les mêmes polices, ou la même intention graphique, etc… tout ce qui se rapproche de votre logo. Votre univers unique en sera d’autant plus marqué. Votre logo prendra d’avantage d’importance, les visiteurs le mémoriseront plus facilement avec des aspects visuels du site qui s’y rapportent.

2-Intégrer une barre de menu principal fixe en cas de « scrolling »

Vos visiteurs naviguent dans des pages de différentes tailles. Certaines pages nécessitent inévitablement un « scrolling » de la page, c’est à dire une action de descendre dans la page via la molette de la souris ou la barre de défilement du navigateur. Il est intéressant de mettre en place un menu accessible même dans des pages longues et pour cela, l’astuce consiste à fixer le menu en haut de page afin qu’il soit accessible dès que le visiteur descend dans la page. De ce fait, le visiteur pourra accéder rapidement, et facilement à n’importe quelle  rubrique principale de votre site et gagnera du temps dans sa navigation. Il appréciera et trouvera qu’il est plus agréable de naviguer sur votre site internet que sur beaucoup d’autres.

Attention toutefois, à bien limiter la hauteur du menu pour qu’il ne prenne pas une trop grande proportion du haut de page, cela limiterait la zone de lecture de la page de votre visiteur. Un menu fixe, lors d’un « scrolling », ne devrait pas dépasser 70 pixels maximum de hauteur.

3-Personnaliser les titres, sous titres, puces, etc… convenablement

Bien souvent, dans une page d’un site internet, nous retrouvons uniquement le titre principal de la page, puis un pavé de texte avec quelques sauts de lignes et une image.

Chaque mot a son importance et l’utilisation des mises en forme des textes est à la fois utile pour mettre en valeur les mots ou phrases mais aussi pour une lecture agréable du visiteur, et diriger son œil vers des textes importants. L’utilisation soignée mais non abusive des mises en forme des textes, permettra de donner envie de lire dans un premier temps. Cela permettra, juste après, de rapidement diriger le visiteurs vers des titres, sous-titres, puces, etc… qui sont là pour être lus en priorité sur une lecture en diagonale et rapide liée à ce type de lecture courante sur internet.

Tout comme dans n’importe quel livre, journal ou magazine, la mise en page ainsi que la mise en forme des textes et images ont un rôle capital qui détermine le niveau de confort de lecture de l’information pour donner plus de professionnalisme au contenu de votre site.

4-Créer des zones ou boutons d’actions pour vos visiteurs

Voici un exemple de bouton d’action qui renvoie vers la page de contact

Ne laissez pas vos visiteurs seuls lorsqu’ils terminent la lecture d’un de vos pages ! Donnez leurs, la possibilité d’aller plus loin avec des zones ou des boutons d’action. Une zone ou un bouton d’action est placé à un ou plusieurs endroits stratégiques dans la page, qui va contenir à un ou plusieurs éléments pour inciter le visiteur à réaliser une action, plutôt que de simplement quitter votre site pendant ou après la lecture d’une page.

Les actions proposées peuvent être très diverses :

  • Indiquer un numéro de téléphone ou une adresse email cliquable.
  • Placer un bouton d’action qui renverra vers la page de contact ou de demande de devis.
  • Proposer un lien interne ou externe pour approfondir un sujet.
  • Placer un lien/ un bouton/ une image qui renvoie vers l’une de vos références qui se rapporte à la page.
  • Mettre en avant un bouton d’achat dans le cadre d’un site e-commerce.
  • Inviter le visiteur à s’inscrire via un champ d’inscription à une newsletter pour approfondir le sujet, recevoir un cadeau ou simplement pour recevoir des nouvelles, etc…
  • Dans le cadre d’un article, proposez de laisser un commentaire ou un avis
  • Placez d’autres résumés d’articles à lire de la même catégorie avec une vignette propre à chaque résumé d’article.
  • Inciter au partage de la page avec des boutons de partage sur un ou plusieurs réseaux sociaux.
  • etc…

 5-Avoir un pied de page bien construit

Le pied de page est un élément souvent laissé à l’abandon sur des sites amateurs. On n’y retrouve que les mentions du type « Réalisé par … », « Copyright … » . C’est une double erreur.

Premièrement :
Car le pied de page peut intégrer un menu secondaire qui rappelle les rubriques, voir les sous-rubriques, à la fin de la lecture d’une page pour que le visiteur puisse accéder à d’autres pages de votre site plutôt que de le quitter. Surtout, si vous n’utilisez pas le principe du menu principal fixe cité avant, dans le point n°2.

Deuxièmement :
Le pied de page est l’endroit idéal pour permettre d’accéder aux mentions légales du site, aux conditions générales, au plan du site, au lien vers les pages de réseaux sociaux, etc… à toutes les pages qui ne seront sans doute pas visibles dans le menu principal du site pour gagner en simplicité et espace. Mais, ces pages sont très utiles pour le visiteur qui veut vérifier votre entreprise ou société, vos conditions, etc…

Un pied de page bien construit est signe d’un site organisé et donc plus professionnel.

Conclusion des 5 astuces qui rendent votre site internet plus professionnel

5 astuces pour créer un site internet professionnelAvoir un site internet ne suffit pas ! Pour qu’il soit professionnel, il faut qu’il renvoie une image professionnelle, surtout si vous représentez une entreprise, une société, un commerce, etc… Mais il faudra aussi qu’il soit agréable et utile pour les visiteurs si vous voulez qu’ils s’intéressent à vous ou deviennent vos clients. Pour cela, ces 5 astuces devraient vous y aider.

Toutefois, c’est un travail à la fois technique et créatif, plutôt long qui vous prendra parfois beaucoup de temps si vous l’entreprenez seul et sans connaissance pré-requises. Pour cela, je vous invite à contacter un professionnel proche de chez vous ou à contacter F4 Design, en tant que spécialiste web, je me ferais un plaisir de vous conseiller et de réaliser l’amélioration ou la refonte de votre site internet.

validation-creation-site-internet-pmeAvez-vous utilisé une des 5 astuces sur votre site ou avez-vous d’autres astuces pour rendre un site plus professionnel ? Si vous envisager de faire ou d’améliorer un site professionnel, je répondrez à vos commentaires pour vous y aider 😉 .

 

Refonte graphique du site e-commerce ecocarton.fr

refonte-site-e-commerce-eco-carton

Le Groupe Box Center basé à Narbonne fait partie du réseau National BOX, leader du marché du carton en France.

Le Groupe Box Center m’a confié la refonte graphique du site ecocarton.fr pour qu’il réponde d’avantage à leurs besoins. Cette refonte a pour but de diminuer les demandes d’aide des clients sur des points informatifs de l’utilisation des produits que recevait l’ancien site internet et le service client, cela en réorganisant la lecture de l’information des pages du site, mais également pour améliorer l’expérience des utilisateurs du site. Aussi, cette refonte graphique et ergonomique à pour but d’augmenter le potentiel de vente du site e-commerce.

Les conseils et conclusions qui ont mené au résultat de cette refonte graphique :

Les points clés

  1. Rafraîchir l’aspect graphique du site e-commerce pour lui donner un « coup de jeune »,
  2. Prendre en compte les contraintes fonctionnelles du gestionnaire de contenu utilisé par le client,
  3. Revoir la structure du design du site pour l’adapter aux écrans d’ordinateurs, tablettes, et smartphones,
  4. Garder la logique de référencement naturel de l’ancien site au niveau des contenus et de leurs balisages en les remettant en forme.
  5. Simplifier la lecture de l’information sur les principales rubriques,
  6. Mettre en valeur les produits,
  7. Restructurer la page « Produit » pour augmenter son potentiel d’actions effectuées par les visiteurs et clients,
  8. Faire ressortir les boutons d’actions,
  9. Prévoir d’intégrer des vidéos de tutoriels dans les pages « produits » pour aider le visiteurs à l’utilisation des produits en mettant en forme les indications d’étapes et ajouter un espace pour une vidéo. Cela permet d’augmenter la qualité du contenu de la page pour le visiteur ainsi que pour le référencement naturel,
  10. Définir et réorganiser la mise en forme et les widgets de la sidebar (barre latérale) en fonction des pages pour une meilleure pertinence de l’information en fonction des mots clés de pages et son utilité dans chaque page.
  11. Faire attention aux principes du responsive design (Conception adaptative) en créant des éléments graphiques facilement intégrables et adaptables entre l’écran d’ordinateur, la tablette et le smartphone, pour faciliter le travail de l’intégrateur web.

Les maquettes graphiques pour écrans d’ordinateur

Les maquettes graphiques pour écrans de tablettes tactiles

Les maquettes graphiques pour écrans de smartphones

Défi : 5 jours pour refondre le site F4 Design !

Je suis excité de vous présenter le nouveau site F4-design, résultat de mon Defi‬ personnel : 5 jours pour refondre le site F4 Design !

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

Explorez le nouveau site en commençant par la page d’accueil

Les contraintes personnelles du Défi :

  1. Repenser le parcours des utilisateurs, l’‪#‎ergonomie‬ et rendre le menu accessible en permanence
  2. Intégrer fortement l’‪#‎identité‬ visuelle du logo F4 Design dans le design du site avec des notions de ‪#‎flatdesign‬
  3. Mettre en avant les appels à l’action
  4. Faire respirer les informations pour le confort visuel
  5. Rendre le site ‪#‎adaptatif‬ aux écrans d’ordinateurs, tablettes et smartphones
  6. Insérer des attributs sémantiques ‪#‎Microdata‬ stratégiquement pour améliorer la lecture des informations par les moteurs de recherche.
  7. 5 Jours de délais !

Et en bonus une touche d’animation ‪#‎CSS3‬ pour dynamiser l’ensemble, et un pack d’icônes en .svg (100% de la qualité au redimensionnement ) 🙂

Bon surf !

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

Lancement du site internet du Domaine Cathala

F4 Design réalise et lance le site internet du Domaine Cathala à la date du 11 novembre 2013 !

Mise en place d’un pré-lancement 3 jours avant (emailing, réseaux sociaux) et d’un lancement le jour J (emailing, réseaux sociaux)  sur la liste email du client et ses abonnés sur les réseaux sociaux.

36% de taux d’ouverture pour l’emailing ! Cette opération de micro lancement a été une bonne surprise offerte par F4 Design au Domaine Cathala.

Extrait du 2ème email envoyé pour le jour du lancement du site

creation emailing pour site internet domaine cathala

Découvrez le site internet et ses vins en cliquant sur l’image

Création site internet narbonne - Domaine Cathala

Refonte de site internet pour l’Espace Thermal de Dax

Découvrez les dessous de la refonte du site internet vitrine dynamique avec la possibilité de réservations en ligne pour l’Espace thermal de Dax, en partenariat et sous la direction de l’agence web It and Co.

webdesigner-wordpress-template-espace-thermal

Mon rôle

Développer et intégrer le site sur le gestionnaire de contenu WordPress, implanter notamment un système de gestion multi-langues et une page de réservation en ligne.

Ci-dessous les différentes étapes du projet.

Analyse en pré-projet

Le cahier des charges fourni par l’agence web It and Co a permis d’analyser et déterminer les besoins techniques du clients pour son site internet. Le cahier des charges est utile lors de chaque phase du projet. Il sert de référence et permet de construire correctement le site internet, quel qu’il soit, de façon juste et précise grâce aux informations qui  le constituent et qui ont été déterminées en amont avec le client, le chef de projet, le développeur et le webdesigner notamment.

Webdesign

La phase de création graphique et les maquettes du projet été prises en charge par Frank Viviani, graphiste et directeur artistique  sous la direction de l’agence It and Co. 3 pages ont  été maquettées afin de déterminer la structure globale du site et les spécificités graphiques. Ces pages sont suffisantes pour me permettre d’intégrer l’ensemble des pages du site. La phase de découpage des éléments du design et d’intégration ont été réalisées par mes soins pour l’ensemble des pages et suivant les normes W3c. Le découpage, quant à lui, a été réalisé à l’aide du logiciel Photoshop comme j’en est l’habitude.

Développement sous WordPress

gestionnaire-de-contenu-multilangues-wordpress

Le site utilisant WordPress pour les besoins en terme de gestionnaire de contenu, fonctionnalités et debudget, j’ai procédé à l’installation et à la configuration de WordPress avec un certain nombre de fonctionnalités et de plug-ins permettant au client de :

  • Gérer l’intégralité du contenu de ses pages : textes, images, audio, vidéo.
  • Optimiser facilement certains éléments du site pour le référencement naturel : url « propres » personnalisables, plan du site généré automatiquement, balises META title/description/keywords.
  • Sauvegarder de façon automatique et programmée chaque semaine la base de donnée du site ( backup ).
  • Gérer le contenu multi-langues des pages du site. Ici Français/Anglais/ Espagnol avec personnalisation des urls et des balises META possible en fonction des langues pour le référencement naturel du site.
  • Personnaliser les widgets depuis l’interface de gestion et la possibilité d’afficher les widgets en fonction des pages et des langues du site.
  • Inscrire les visiteurs à la newsletter du site.
  • Etre contacté par un formulaire de contact depuis la page de contact.
  • Recevoir les demandes de réservation en ligne depuis la page de réservation du séjour.
  • Ouvrir une pop-up interne informative sur certain bouton d’information sur le site, sous forme de »div ajax » , bien plus propre, agréable pour l’utilisateur et pas considéré comme pop-up par les navigateurs.
  • Changer les images et les descriptions d’un diaporama animé « slider d’images » en page d’accueil. A savoir qu’il est aussi possible pour le client de mettre en place des diaporamas uniques sur n’importe quelle page de son site à l’aide d’un simple copier/coller d’un [short code]  à disposition.
  • Écrire des actualités composées de textes, images, audios ou vidéos. Ces actualités sont créées sur une page dédiée et génèrent dynamiquement une nouvelle page d’actualités à chaque publication. Cela est géré intégralement par le gestionnaire de contenu wordpress. Il est même possible de programmer la publication des pages d’actualités.

Conclusion

La refonte d’un site internet peut être graphique et technique. Cela va souvent de pair pour les sites qui ne possèdent pas de bases technique suffisamment solides pour pouvoir référencer les pages d’un site facilement et proprement ou pour les sites qui ne disposent pas de gestionnaire de contenu. Les sites qui ne disposent pas de gestionnaire de contenu vont coûter plus cher pour effectuer les mises à jour, même basiques, comme la modification du contenu d’une page. L’utilisation d’un gestionnaire de contenu va permettre au client d’effectuer plus facilement et rapidement certaines de ces mises à jour comme son propre contenu ou de le  faire faire par des prestataires qui n’ont pas forcément de connaissances techniques et qui pourront se concentrer tout de même sur celui-ci.

Le site Espace Thermal m’a permis notamment de découvrir comment implanter du multi-langues sur le gestionnaire de contenu WordPress, de mettre en place la gestion des widgets sur des pages uniques, et de développer une page de réservation sur mesure avec l’affichage de box dynamiques en fonction des choix. Il faut dire que pour cette page j’ai eu quelques conseils de Tony Fresneau, développeur web, qui s’occupe de temps en temps de développement de projet web pour F4 Design.

Voici le lien pour découvrir le nouveau site : http://www.espacethermal.fr

Je suis donc maintenant en mesure de créer des sites multi-langues prêts pour le référencement naturel des pages en multi-langues de façon propre et facilement gérable  pour le client depuis WordPress. J’en suis ravi !

Et vous, projetez-vous de faire un site multi-langues pour votre entreprise ? Ou de créer un site avec des réservations en ligne ?

Designer d’un jour pour un jeu sur Ipad

Je tiens à vous partager ma petite contribution à la création d’un jeu de loterie intitulé « La roue de la chance » sur plateforme Ipad.

Le jeu a été créé pour l’occasion d’évènements organisés par La Maison LARTIGUE et fils.

Voici 3 mises en situation de la création graphique de la roue de la chance :

Version retenue

Roue de la fortune ou Roue de la chance !

Version 4

Roue de la fortune ou Roue de la chance !

Version 3

Roue de la fortune ou Roue de la chance !

Les éléments graphiques mis à part, pour permettre l’animation de la roue :

Le plateau de la roue

750 px de large sur 750 px de haut

L’ombre de la roue

750 px de large sur 750 px de haut, sur fond transparent pour être centrée automatiquement à la roue

Le centre de la roue

750 px de large sur 750 px de haut, sur fond transparent pour être centré automatiquement à la roue

La flèche de la roue

Flèche indicative de la pression tactile

flèche tactile

Ce travail m’a permis de créer pour la première fois une version personnalisée de « la roue de la fortune » pour le compte de l’agence web itandco.

Et vous, avez-vous déjà participé ou créé une « roue de la fortune » ou « roue de la chance » ? Comment avez vous trouvé ce jeu ?