Webdesign de l'habillage
graphique du site boutique

Client : Les Laboratoires Cinier-B
Sète | Languedoc Roussillon | Hérault (34)

Webdesign boutique : conception ergonomique et charte graphique web d'un site internet de e-commerce avec portail Professionnel et Particulier. La charte graphique a pour mission de porter les notions de laboratoire, d'aromathérapie et de soins naturels.

Prestation webdesign :

Conception ergonomique et graphique,
transmission de psd à l'intégrateur fonctionnel XHTML/CSS

Design d'une page d'annonce
d'un site internet boutique

Client : Charcuterie Bernard Le Bourhis
Maure de Bretagne | Bretagne | Ille et Vilaine (35)

Webdesign d'une page d'annonce pour l'ouverture prochaine du site boutique. Cette charte graphique web a été conçue avec des éléments à la fois graphiques et photographiques, des objets et matériaux ont été photographiés spécifiquement pour la création de ce webdesign.

Prestation photographique et webdesign :

Conception graphique, photo

Création d'un visuel illustré
pour template de site internet

Projet prospectif
Montpelllier | Languedoc Roussillon | Hérault (34)

"Branding" de nom de domaine, design de l'habillage graphique web, création d'illustration. Il s'agit d'un projet relevant à la fois du site portail, du site boutique et du site vitrine pour le théâtre, la mise en ligne de programme, et la vente et réservation de billet en ligne.

Prestation webdesign

Création graphique logo, charte graphique, branding

Création d'un habillage graphique
de site boutique

Client : Tickets Formula One
Grande Bretagne

Site internet boutique - Création d'une charte graphique web d'une billeterie en ligne de place de formule1. Design de l'identité visuelle de la boutique et création du template du site (intégré sous Joomla!). Personnalisation de l'interface de la boutique Virtuemart. Le site est conçu pour être enrichi de contenus très régulièrement.

Prestation webdesign :

Création graphique site et boutique en ligne,
livraison de psd à un intégrateur XHTML/CSS

Conception ergonomique
et graphique d'un site vitrine

Client : Golf-Challenge
Annecy | Rhône-Alpes | (74)

Webdesign d'un site boutique de matériel de golf pour la vente aux professionnels : revendeur et parcours de golf (site BtoB). Le site propose l'accès à des pdf en téléchargement ainsi qu'un accès aux marques proposées et à leurs sites internets respectifs.
Esprit à la fois corporate, sport et chic.

Prestation web design et identité graphique :

Création graphique du site vitrine, élaboration de fichiers psd pour l'intégrateur XHTML/CSS

Charte graphique
de site internet vitrine

Client : Les serres de Saint André
Saint André de Sangonis | Languedoc Roussillon | Hérault (34)

A partir d'un logo fourni par le client, design d'un habillage graphique de site web pour intégration sous Joomla!.
Esprit convivial et facilité d'accès. Le site est un support d'information permanente sur la serre, et un calendrier d'événements culturels et artistiques qui sont proposés au fil des saisons.

Prestation webdesign

Création ergonomique et graphique,
transmission de psd à l'intégrateur fonctionnel XHTML/CSS

Charte graphique web
de site e-commerce

Client : Trioviz
Paris | Ile de France (75)

Création d'un template pour un site boutique de lunettes 3d. Esprit jeu video.

Prestation webdesign

Création ergonomique et graphique,
transmission de psd à l'intégrateur fonctionnel XHTML/CSS

Webdesign d'un site
internet écologique

Client : Lombritek éco-innovation
Montpelllier | Languedoc Roussillon | Hérault (34)

Conception d'un webdesign pour une société innovante dans le domaine écologique, le lombricompostage et les Lombristations. Il s'agit de traitement des eaux usées et de valorisation des déchêts organiques par l'action des lombriciens.
Visuels de diaporama en accueil.

Prestation webdesign

Création ergonomique et graphique,
transmission de psd à l'intégrateur fonctionnel XHTML/CSS

Charte graphique
de site internet chic

Client : Elegance and wedding
Organisateur de mariage
Clermont-l'Herault | Languedoc Roussillon | Hérault (34)

Webdesign chic : création d'une charte graphique web pour un wedding-planer. Ambiance haut de gamme pour des prestations sur mesure. Site vitrine des services proposés et galerie photographique.

Prestation webdesign

Création ergonomique et graphique,
transmission de psd à l'intégrateur fonctionnel XHTML/CSS

  • WEBDESIGN
    sur mesure
  • TECHNOLOGIES
    web
  • DU CONTENU
    avant tout !
  • WEB, PRINT ...
  • NEWSLETTER :
    l'emailing


Design de charte graphique web | WebDesign



Vous souhaitez donner un nouveau souffle à votre site web avec un nouveau webdesign ou vous ne disposez pas encore d’une site internet ?


Nous développons des sites internets entièrement sur-mesure, selon vos attentes spécifiques, votre culture d’entreprise, votre identité, et votre positionnement socio-culturel. Si certains des ces aspects sont encore à définir, je pourrai intervenir sur la globalité du projet, avec, à la carte : la création du nom de votre marque et du nom de domaine, conception du logo et de la charte graphique web, prise de vue photographique selon les besoins du site internet ou recherche de photos sur banque d’image si nécessaire, conception de votre communication sur support papier, création de visite virtuelle interactive afin de permettre à l’internaute de découvrir et s’immerger dans un lieu représentatif et valorisant pour votre entreprise ( showroom, atelier, salle de spectacle, site touristique, restaurant, hôtel, thêatre, etc ...)



Les différents types de site internet que nous pouvons vous proposer selon votre usage : site vitrine, site boutique, site portail, blog professionnel


Ceux-ci sont combinables : Vous pouvez par exemple investir graduellement dans un site vitrine et le faire évoluer ultérieurment en lui adjoignant des fonctionnalités supplémentaires selon vos besoins et les nouvelles orientations de votre entreprise. Cela présente l’avantage d’étaler vos investissements, et d’offrir le confort de l’évolutivité quand vous le souhaitez.

Des solutions

évolutives,


et sur-mesure

Site vitrine

Un site vitrine est l’outil ideal pour présenter votre entreprise, ses produits et ses services, apporter des informations nouvelles quand vous le devez.

Site boutique, "e-commerce"

Un site bien nommé "boutique", permet de commercialiser des produits et services sur internet. Ce type de site peut être enrichi de fonctionnalités poussées vous permettant par exemple, une gestion de vos stocks, la mise en place de système de paiements en relation avec une structure bancaire ( CB, Paypal, ...), l’organisation d'une logistique de livraison, etc ...

Site portail

Un site portail peut vous permettre d’aiguiller l’internaute si vous disposez de plusieurs sites ou mini-sites, de diffuser une information globale et guider le visiteur vers des sites ou parties de site plus spécialisées ( Professionnel/particulier, différentes marques, différents produits sans lien entre eux, des activités que vous souhaitez bien dissocier, ...)

Les "Blogs"

un site de type «Blog» afin de publier du contenu informatif assez souvent, dans un esprit éditorial. Ce type de site internet vous apportera une très bonne performance en matière de référencement en l’interconnectant avec vos sites "vitrine" et e-commerce. Il n’est pas rare de trouver des blogs d’entreprise et de professions indépendantes.



Votre positionnement : webdesign corporate, webdesign institutionnel, webdesign grand public, webdesign pour professionnels, ...


A l’image de toute forme de communication visuelle et informative, le positionnement culturel et sociologique doit se ressentir dès la première page d’un site internet.

De l'impératif de capter l'attention de l’internaute :
La pertinence esthétique de votre webdesign, sa clarté, son ergonomie, et les contenus accessibles en page d’accueil vont en quelques secondes forger son jugement : il commence à naviguer sur votre site, ou ... clique le bouton du navigateur «page précedente» pour reprendre sa recherche !






Choisir la technologie web la plus adaptée




Site statique, Site dynamique, Site Flash


Il peut sembler surprenant d’évoquer ces choix aujourd’hui tant les sites avec gestion de contenu (CMS pour "Content Management System") se sont imposé pour devenir quasi incontournables !
Joomla, SPIP, ... ces structures techniques et "open source" sont aujourd’hui très performantes et régulièrement mises à jour ( sécurité, amélioration ergonomique, fonctionnalités ...)



Voici dans les grandes lignes les solutions techniques qui s’offrent à vous, indépendamment de l'aspect graphique, le webdesign :

 


Choix technologiques
pour un site web
:

Vous avez besoin d’un site vitrine avec peu de contenu , et sans vous soucier de sa maintenance ?

"Small is beautifull !"
Je peux créer pour vous un site dit «statique» en html/css, enrichi d'éléments Javascripts et en créant une charte graphique web entièrement sur mesure. Cette formule est intéressante pour un site de 1 à 3 pages environ. Pour un site internet plus étendu, il est préférable d’opter pour une solution dynamique de type "Joomla!".
En matière de design graphique, de raffinement et de crédibilité pour l’internaute, rien ne distingue une site statique d’un site dynamique.

J'oserai même affirmer qu’un "simple statique" offre une plus grande lattitude créative car il permet de jouer d’effets de composition graphique assez libres, proche du Print ( superposition de zones techniquement différentes par exemple), effets que la modularité d’un site dynamique aurait tendance à proscrire. Ainsi, la faiblesse de l’un est la force de l’autre, et vice-versa.

Enfin, et pour illustrer le propos, ce site que vous parcourez, est un site «statique».

Vous souhaitez administrer seul votre site web et le nourrir de nouveaux contenus régulièrement ou occasionnelement ?

Nous allons naturellement vous proposer une solution dynamique utilisant le framework Joomla! en le personnalisant intégralement. C’est un type de site modulable, évolutif, et administrable par tout-un-chacun via une interface claire et ergonomique ( backoffice). Ce type de site internet utilise au moins une base de données, et un language plus complexe que le html : PHP, essentiellement.

Il s’agit là d’une solution sophistiquée qui requiert plusieurs types d’expertise :
Le développement, l’Intégration, et le Webdesign

- Le développement est la création de fonctionnalité web par la programmation pure : technologie PHP, Java, sécurisation, référencement, audit et test de montée en charge, ...

- L’intégration est la construction technique et fonctionnelle du site, du découpage de template (l’habillage graphique créé par le webdesigner) à la mise en ligne du site. L’intégrateur assure au besoin la maintenance et la mise à niveau des sites les plus complexes. Il peut également apporter une formation à l’administration de site si nécessaire. L’intégrateur œuvre en étroite collaboration avec le développeur pour le déploiement de système de e-commerce hautement sécurisé, à la fois dans son aspect bancaire, et sa dimension logistique ( gestion de stock, comptabilité, approvisionnement ...)

- Le Webdesign : la partie visible ! Celle sur laquelle l’internaute va se forger une opinion sur votre entreprise, dès la première seconde, et surtout, va l’inviter à parcourir votre site, ou ... refermer la fenêtre s’il n’est pas séduit ou rassuré sur la pertinence et la crédibilité du site.
Le webdesigner a pour mission essentielle de produire un habillage graphique attractif, explicite et ergonomique.

Le site Flash

Le site Flash est un phénomène très à part, aussi séduisant que peu ou pas évolutif.
Séduisant car la force qu’il tire de l’animation est très propice aux sites spectaculaires et à très forte image de marque.
Hélàs, le language Actionscript ne permet pas, (ou pas encore) de créer des sites abordables financièrement, et administrables par le client. Ce type de site ne peut évoluer que dans les mains de son créateur, au prix d’un important travail.

Pour ces raisons, et parcequ’il s’agit d’une expertise différente, nous ne proposons pas de site Flash. Si tel est votre attente, il vous faudra recourir aux talents d’un Flashdesigner qui est spécialiste en ce domaine.

Cependant, il existe un compromis performant associant les qualités d'un site évolutif, aux charmes de l'animation Flash :
Il est possible d’inclure une animation Flash dans un site classique ou un site administrable html/css, c’est une option intéressante qui combine les avantages des mondes html/css et Action Script.







Ramage, plumage


Un contenu de qualité est essentiel !


Un matériaux pertinent et qualitatif est vital pour votre site web.

Il est nécessaire que vous définissiez des contenus rédactionnels pour votre site et vos pages webs. Effectuer ce travail en amont peut sembler contraignant, mais le bénéfice est grandement assuré. C’est en quelque sorte un travail préliminaire d’architecte, faisant de votre site un ouvrage clair, agréable et structuré.
Certains clients, enthousiasmés à l’idée de disposer d’un "beau site" négligent ce préparatif des contenus. Il en résulte de grandes difficultés lorsque le site est construit et que survient la question fatale : que met-on dans cette page, et dans ce modules, et dans cette autre rubrique ?!
Il vous est possible de faire appel à un rédacteur mais je vous conseille d’effectuer ce travail vous-même, car qui mieux que vous pourrait décrire et présenter votre activité, votre production ?

Il est également indispensable de disposer d’images et ou illustrations de qualité. Si vous n’en disposez pas, je vous propose de créer des illustrations vectorielles et d’effectuer des prises de vues photographiques afin de maîtriser la globalité de votre communication web et montrer sous leur meilleur jour les produits que vous souhaitez commercialiser.
Faire visiter votre entreprise ou un site extérieur valorisant avec une visite virtuelle interactive est un atout supplémentaire et peut convaincre l’internaute de se tourner vers vous.


Êtes-vous prêt(e) ?




"Je dispose d'une belle plaquette,
pouvez-vous en faire un site internet ?
"


Webdesign et Communication imprimée sont deux univers différents techniquement, et culturellement :
C’est pourquoi une plaquette ne peut devenir un site web !


Nous allons voir, quelles sont les principales divergences fondatrices de ces supports :

Spécificités
comparées :

webdesign
et print design

Support figé / Support évolutif et modulaire

Un document imprimé est par nature figé, permanent, définitif. C’est pourquoi l'instant du "bon à tirer" (BAT) éveille parfois une certaine angoisse, si ce n'est, une angoisse certaine, chez celui qui doit parapher le célèbre «bon pour accord» : ce document va être dupliqué par millier et il ne sera plus possible d’effectuer des corrections après sa fabrication.

Grâce à l'invention du site Internet, fini cette poussée d'adrénaline ! Un site internet est une construction modulable et presque, vivante : ce que vous voyez sur votre écran est une (re)construction effectuée en temps réel par votre Navigateur ( FireFox, Safari, Opera, Chrome, Internet Explorer, ...). Celui ci va suivre une sorte de plan définissant des contenus graphiques et rédactionnels, ainsi que des actions à effectuer automatiquement, ou sur demande (clic).
Cette nature structurelle est la base de la modularité d’un site. Des espaces de contenu peuvent avoir des tailles s’ajustant automatiquement, certaines parties d’une page peuvent être affichées ou masquées selon les rubriques visitées, et enfin, pour les sites dynamiques, des contenus peuvent êtres appelés dans une base de données extérieure à la page visible et selectionnés selon les requêtes de l’internaute.

Le point ...

Prenez une loupe et observez un document imprimée : c’est une constellation de points généralement circulaires, de couleurs Cyan, Magenta, Jaune, et Noir. Ces points pratiquement indiscernables à l’oeil nu produisent l’illusion des images et des textes sur le document Print. Deux principes permettent ceci : le tramage plus ou moins dense de points qui constitue le corps du visuel, et la «synthèse SOUSTRACTIVE» des couleurs par la présence en diverses proportions des couleurs Cyan + Magenta + Jaune + Noir. C’est la quadrichromie ou mode «CMJN».
Voyons ce qu'il en est de l’aspect WEB au paragraphe suivant ...

et le pixel : lumière !

Qui dit lumière dit «synthèse ADDITIVE» des couleurs, c’est à dire le mélange des 3 couleurs primaires du monde video : Rouge Vert Bleu. Le mélange des ces 3 couleurs aux valeurs égales et maximales produit : du blanc. (Le mélange egal et maximal en synthèse soustrative du cyan magenta et jaune doit produire un noir pas tout à fait obscur, c’est le noir «trichrome». C’est pour cela que l’encre noire est ajoutée pour produite des noirs parfaits en imprimerie)
En web donc, les photons nous bondissent à la rétine, tandis qu’en print les photons rebondissent sur le papier avant d’atteindre l’oeil. Le web, c’est direct et sans intermédiaire.
En webdesign, l’unité de mesure et de construction visuelle est le pixel. Le pixel est un petit carré auquel est affecté une couleur de synthèse RVB, et une position dans la fenêtre du logiciel, ou sur l’écran. La surface de votre écran est une grille de pixels. Le nombre de ces derniers définit la résolution de votre écran. La résolution d’écran est généralement exprimée ainsi : 1024px x 780px pour les plus modestes jusqu’à 1920px x 1080px parmis les plus confortables.

Le webdesigner qui crée une charte graphique de site internet travaille avec des pixels, et doit penser «pixels». C’est l’unité de mesure.

Le monde RVB se distingue particulièrement par l’étendu de sa gamme de couleur que le monde CMJN ne peut reproduire dans son intégralité.
Les verts et bleus électriques en sont les plus significatifs. Souvenez vous des couleurs des sites web de la première heure : lunettes de soleil indice 4 recomandées ...
Autre spécificité importante : les profils colorimétriques.
Les fichiers graphiques à destination de l'impression incluent un profil ICC ( International Color Computing). Ces profils sont des fichiers décrivant la manière dont un matériel numérique doit restituer une gamme de couleur. Un écran, une imprimante, une tireuse photo, utilisent chacun leur profil ICC spécifique.
Pour le web, le mode couleur doit rester le sRVB ou sRGB, sans gestion de couleur par un profil ICC.
La présence accidentelle d’un fichier graphique contenant un profil ICC dans une page web peut avoir pour effet de l’afficher nettement plus dense et saturé, au point de dénaturer le visuel web (certains navigateurs commencent à intégrer la prise en compte des profils ICC, comme Firefox, Safari, ...). A l'avenir, le monde web devrait prendre en compte ces profil, permettant une meilleure cohérence avec les documents issus de l'impression.

"Deux poids, deux mesures", dans l'univers web, mieux vaut ne pas faire le poids :

Un autre grande contrainte sur internet, c’est le poids des fichiers. Si c’est un petit peu moins vrai aujourd’hui avec des débits devenus confortables, il convient néanmoins de prêter encore attention aux taux de compression des images, animations et video intégrés à une page web. Le webdesigner et l’intégrateur doivent trouver le bon compromis entre qualité d’affichage et légèreté des éléments présents dans la page. Comme évoqué plus haut, l’internaute est rapide, et impatient. Une page trop longue à charger est parfois une page très rapide à fermer !

Prenez de bonnes résolutions ...

En imprimerie, la résolution des images est de 300 pixels par pouce ( 300ppi ou 300 dpi)
Sur internet, la résolution est celle de l’écran : 72 pixels par pouces
Une image web ne peut être imprimée sans laisser apparaitres ses pixels, et une image print est trop lourde pour internet !



Conclusion


En raison des divergences techniques suivantes :

- Caractère figé / caractère évolutif,
- Point d’encrage / pixel sur écran,
- Couleurs CMJN / couleurs RVB,
- Profils ICC / profil sRVB,
- Haute résolution / Basse résolution (écran)
- Qualité maximum des images / Compression des images,

un document print, une belle plaquette, ne peut se transposer directement en site internet, et vice-versa. Le premier peut simplement inspirer le second, et le second, dans sa grande mansuétude, peut offrir le premier en téléchargement ...





La newsletter



L'autre vecteur web

Un vecteur attractif et complémentaire :
la campagne d’emailing.



Les aspect techniques fondateurs d’un site internet se retrouvent dans un email commercial, expédié en nombre, à un carnet d’adresse bien identifié de préférence. Un mail de ce type est à lui seul une page web, codée en language html simplifié, afin d’assurer une bonne restitution de la composition dans le plus d’applications de messagerie possible.

L’emailing est une formule aux contraintes bien spécifiques : la zone d’affichage est réduite en largeur et on doit pouvoir identifier tout de suite l’objet de ce message dans sa partie haute.








DEVIS & RENDEZ-VOUS :