L’avantage de ce projet pour ma part, la liberté de décision autant sur la partie design et technique, une premiere maquette vu donc le jour avec un site entierement navigable en défilement horizontal utilisant les librairies jquery, c’est à dire une seule et unique page sur laquelle la navigation ce fait par un menu classique mais avec un effet de defilement permettant d’acceder à chaque partie.

Cet effet cumulé à un background établit à 100% quelque soit la résolution donne un effet dynamique, fluide, et apaisé se mariant parfaitement bien au theme de la relaxation.

Un lecteur Mp3 diffusant automatiquement les extraits des 3 Albums de Damien permettent un entrée immédiate dans ce monde de douceur.

Bref plutot qu’un long discours un aperçu du site, ainsi que le lien pour y acceder

h ttp://www.damiendubois.com

]]> http://www.fr3do.info/portfolio/creation-site-internet-damien-dubois/feed/ 0 http://www.fr3do.info/portfolio/web/creation-du-site-internet-de-dilequesi/ http://www.fr3do.info/portfolio/web/creation-du-site-internet-de-dilequesi/#comments Fri, 14 Oct 2011 12:05:15 +0000 Fr3do http://www.fr3do.info/?p=382  

Parmi nos nouveaux clients, j’ai eu le plaisir de travailler avec l’association DileQueSi, une  Association de Salsa sur Grenoble.

Cahier des Charges :

Création d’un site web, simple et épuré, aux couleurs de l’association:

• Partie Blog pour les actualités
• Partie Blog pour les futurs événements
• Rubrique vidéo, récupérant automatiquement les vidéos d’un compte Youtube
• Galeries photos
• Formulaire de contact
• Interaction avec Facebook

Le choix à été porté sur une plateforme WordPress, permettant la gestion simplifiée des parties Blog, mais aussi Galerie Photos.

Le Template WordPress à été réalisé a partir du framework Prototype , par le biais d’un template enfant.

Afin de réaliser le diaporama présent sur la page d’accueil j’ai utilisé SlideJs

Maquette :	Résultat Final :

Le Site Web de DileQueSi

Nous avons donc travaillés sur une page Fan, assez simple permettant de renvoyer les visiteurs & Fans Facebook sur le site officiel de la marque, afin d’avoir les principales informations en accés direct depuis la page Facebook.

Nous avons aussi intégrer un formulaire de contact directement sur la page Facebook, permettant aux utilisateurs de se renseigner directement auprés des interlocuteurs Klytia.

Tout d’abord le logo change, plus sobre, et représentant les valeurs que j’essaye de défendre sur mes réalisations, sobriété et bon gout. Je reste fidèle aux couleurs qui me sont chères, bleu et blanc et noir, nuancé par un gris léger, permettant de mettre du relief dans tout çà.

Nouveau logo Fr3do.info

Le site web lui à subit un sacré coup de jeune, présentant un «Slider» en page d’accueil comme sur la version précédente, mais celui ci plus imposant, et permettant un meilleur aperçu des travaux réalisés. La suite du site est quand à elle très sobre et standard, afin de ne pas perde le visiteur dans une navigation complexe.

N’hésitez partager l’adresse avec vos proches et connaissances, je recherche des nouveaux projets sur lesquels travailler pour les prochains mois.

Ce petit groupe à décidé de faire appel à mes services au cours du mois de Décembre, deux moi plus tard, le site est prêt. Nous n’attendons plus que l’hébergement web.

Tout comme mes dernières réalisations, la base utilisée est le moteur WordPress.

Un thème simple, avec cinq pages, des “widgets” comprenant les futurs dates de concert, un Player mp3, et une présentation succincte du groupe.

La nouvelle version est réalisée à base d’un thème wordpress (Dominate cf image) , plusieurs améliorations ont été réalisée:

Réalisation d’une maquette pour le logo :

Réalisation d’une maquette sous Photoshop

Intégration de la maquette en HTML / CSS

Revu complète des CSS, utilisation uniquement du squelette du Template

Modification du Template pour ajout d’un “footer”avec “widget”.

Finalisation du Header en compagnie du client:

Finalisation du template et mise en place sur serveur de test.

Passage en production le 25 Février 2011

Quelques modifications sont à prévoir pour adapter le thèmes a 100% des besoins de FilGb dans les prochains jours.

Le Résultat est visible sur : Le Fil Grenoblois

Et un très bon Article sur le nouveau design vu par FilGB ici

Nouvelle mode du webdesign

Je me lance donc pour la première fois dans la rédaction d’un billet en bonne et du forme.

Lors de mes sombres nuits de surf et de veille, je parcours comme beaucoup d’entre nous un nombre incalculable de sites qu’ils aient un rapport ou non avec mon métier, mes passions, ou encore une suite de clic névrosée m’ayant même amené sur des sites de beauté (Graindebeauté si tu me lis).

En tant que Freelance j’ai toujours prôné la clarté et la navigation simplifiée pour l’utilisateur final. Aller à l’inverse des sites institutionnels, ceux ci sont pour beaucoup remplis de menu, sous menu, site annexes ou l’utilisateur se perd rapidement, et rend complexe la recherche d’informations.

Le minimalisme (cf Wikipedia ) est il une mode ? Peut-on créer un tel site et promouvoir un produit tout en enlevant les fioritures du web habituel ?

Tout d’abord quels sont ses avantages :

- Mise en valeur du produit

- Clarté de lisibilité et de navigation

- Rapidité de chargement

- Le délai de développement et donc son coût pour le client final.

Ces quelques exemples ont su appliquer ce concept sur la toile avec des design épurés en exploitant leur contenus ou leurs produits et non pas en accablant le visiteur d’informations inutiles, exit les players et les textes serrés en coins de pages.

Les risques du minimalisme :

- Simpliste : la frontière entre minimaliste et simpliste est fine, en voulant en faire trop peu nous pouvons nous retrouver rapidement avec des sites dénués de sens et pauvre en contenus. Nous donnant une impression de site vite fait et pas forcement bien fait.

- Mauvais choix des sources, une mauvaise typo, une photo de mauvaise qualité, l’œil n’accroche pas, en conséquence nous resterons que quelques secondes sur cette page.

Tout et son inverse

Loin de cet esprit nous pouvons prendre un des « gros » du web Myspace, qui depuis sa refonte est devenu un des sites les plus imbitables que je connaisse. Ou tout simplement la plateforme régionale, le nouveau GreNews renommé en CityLocalNews Grenoble.

En conclusion je pense que le minimalisme n’est pas devenu une mode du webdesign 2010/2011, mais bel et bien un courant alternatif, répondant au attentes d’utilisateurs cherchant avant tout la lisibilité et l’accès rapide à l’information.Il permet aussi si il est utilisé de manière correcte et avec les bons outils (css3, html5, jquery..) de mettre en valeur une information ou un produit. Mais comme je le précisais plus haut, il faut faire attention à ne pas tomber dans la pauvreté du contenu, risquant d’ennuyer le visiteur.

Mais chaque projet possède ses besoins, ainsi le minimalisme ne s’accorde pas à toute les sauces, et certains produits nécessitent d’être sublimés par un vrai travail graphique autour.

Ce billet n’est pas innocent, étant actuellement en pleine refonte de mon site web. Il m’a était inspiré par un article d’InspirationFeed :

How to Code a Clean Minimalist HTML CSS Website Layout http://bit.ly/hLoMqo

Quelques ressources pour votre inspiration :
85 Exemples de design minimaliste

NB : Dans ce billet je ne parle ni des blogs, ni des sites de e-commerce. Car à mon sens le blog se doit d’être « à l’image d’un journal de bord ou d’un journal intime ». Et l’e-commerce un étalage des produits proposés avec du gif qui clignote !

Copyright photo badge : http://www.elitalice.com