logo

Portfolio Web

Assoc. #Chalut

logo

#CHALUT : Présentation

[ https://www.associationchalut.com ]

L’association Chalut a pour but de protéger les chats errants et abandonnés. Cela correspond à : Les nourrir / Leur apporter les soins nécessaires / Les faire stériliser / Leur trouver une famille ou les relâcher / Réaliser un suivi / Sensibiliser le grand public.

Demande : Refonte intégrale du site de l’association.
Type de site : Associatif.
Contenu : Actualités de l’association via fil actu Facebook, informations , Chats pour adoption.
CMS : WordPress.
CDN(s) : Bootstrap / GoogleFont / FontAwesome
Langages : Html5 / Css3 / Javascript / PHP / MysQl.

Mon rôle

• Création de la charte graphique & maquettage du site (UI/UX design).
• Front-Développement (réalisation de la beta-démonstration intégrale du site (en dur) & intégration WordPress.

 

Benchmarking pdf

 

Espace adoption : Liste des chats à adopter / parainner.
Formulaires : Contact & Adhésion.
Particularités : Intégration du Plugin Page Facebook / API Paypal pour des dons ponctuels.

Home-page : Mise en avant des actualités Facebook au centre de la page. L’un des objectifs principaux à été de rendre beaucoup plus visible et attractif le bouton d’appel au don.
Association-Chalut
Mise en avant des actions de l’association. Zoning indentique pour l’ensemble du site / 3 colonnes principales dont menu, contenu de page, visuel de fond plein ecran fixe & informations annexes. Sur toutes les pages internes du site, le plugin-Page Facebook se déclenche via un bouton disposé à l’écart du container principal.
Association-Chalut
Espace adoption : Liste déroulante des chats disponibles pour adoption. Un code couleur et typographique met en avant les cas urgents. Il sera possible de classer les fiches des animaux par date d’ajout ou par priorité d’adoption.
Association-Chalut
Détail d’une fiche : Le détail d’une fiche animal se compose de la photo en plan large suivi des caractéristiques en détail (bio / date d’entrée / race du chat / Age / Sexe …).
Association-Chalut

Votre avis m'intéresse !

Mon #Ce-Extranet

logo

#CE-EXTRANET : Présentation

[ Version demo « en dur » (html brut/js) ]

Sur cette plateforme, le salarié pourra gérér son espace en ligne, réserver des bons de réductions sur différentes prestations, bénéficier d’autres avantages, consulter les dates des évènements internes, et accéder librement aux publications relatives au Comité.

Demande : Etude d’une plateforme Extranet pour salariés de PME
Type de site : Extranet.
Contenu : Offres partenaires / Formulaires de commande / Compte personnel …
CMS : WordPress.
CDN(s) : Bootstrap / GoogleFont / FontAwesome
Langages : Html5 / Css3 / Javascript / PHP / MysQl.

Mon rôle

• Création de la charte graphique & maquettage du site (UI/UX design).
• Front-Développement (réalisation de la beta-démonstration intégrale du site (en dur).

Pages commande : Sont munies de formulaires à choix multiples.
Formulaires : Bons de réductions (tickets cinema / chèques vacance …).
Compte client : Paramètres / suivi des commandes / messagerie.
Particularité : Paiement par chèque à réception des formulaires de demande. (pas de paiement en ligne).

Home-page : Les trois onglets principaux de la page d’accueil renvoient vers des pages dédiées aux offres de base du C.E., telles que la commande de tickets de cinema, la réservations de chèques vacances, ou la participation financière à des évènements de type sports/ loisirs (donnant droit à des tarifs préférenciels).
ce-Extranet
La section « partenaires », quant à elle , redirige vers des offres de prestations plus ciblées, notament soins du corps / parfumerie / soins du visage / Alimentaire / loisirs ect … Toutes les pages partenaires sont dotées de formulaires dynamiques assistés, dans lesquels le salarié pourra préciser ses choix, ses quantités (dans la limite autorisée …). Aucun système de paiement en ligne n’est prévu dans cette version, le règlement se fait exclusivement par chèque, après réception et validation de la commande par formulaire.
ce-Extranet
Détail d’une page partenaire : La page partenaire dédiée est munie d’un formulaire à choix multiples (commande de tickets cinema / Participation sports – Loisirs / Commande de chèques vacances et autres avantages.
ce-Extranet
Toutes les informations relatives au salarié membre sera sauvegardée dans la partie « compte ». (dernières réservations en date, messagerie, informations personnelles …)
ce-Extranet

Votre avis m'intéresse !

Projet #Urbancash

logo

URBAN-CASH - Projet de site marchand

[ Version demo « en dur » (html brut/js) ]

Achat / Vente de produits d’occasion depuis 10 ans. Téléphonie, Informatique, Jeux vidéos, Image & son, Maroquinerie, Culture, Aménagement, Services.

Demande : Création d’un site marchand pour la marque.
Type de site : E-commerce.
Contenu : Boutique en ligne (Achat & Vente).
Sites concurents : Easy-Cash / Cash-converters …
Style graphique prédominant : Flat-Design.
CMS : WordPress (avec WooCommerce à implémenter).
CDN(s) : Bootstrap / GoogleFont / FontAwesome
Visibilité : XML SiteMap à prévoir.
Langages : Html5 / Css3 / Javascript / PHP / MysQl.

Mon rôle

• Création d’un logotype, de la charte graphique & maquettage du site (UI/UX design).
• Front-Développement (réalisation de la beta-démonstration intégrale du site (en dur).

Cette demo simule les différents aspects d’un site marchand destiné à un développement WordPress WooCommerce :
Home-page : Avec loop de la boutique en ligne
Page produit : avec filtres de recherche avancée
Hub-produit : Fiche detail du produit
Compte client : Paramètres / suivi des commandes / liste des ventes …
Particularités : Deux espaces dissociés «Achat*» et «Vente**»

*Le client souhaite acheter un produit en vitrine : Il accède à la boutique en ligne via la page d’accueil directement (produits mis en avant) ou en se rendant dans l’espace Achat (code couleur bleu). Des filtres de tri selon critères affinés ont été prévus.
urbancash-achat
urbancash-portail-achat
**Le client possède un article qu’il souhaite vendre : Il pourra simuler en ligne une estimation de rachat (selon des critères spécifiques à chaque produit – code couleur orange), ou directement passer en magasin.
urbancash-vente
Détail d’un produit : Le détail d’un produit fonctionne globalement comme le « permalien » d’un article. La boucle récupèrera respectivement les variables « image » / « titre » / « nom de produit » / « détail » ext … A partir de cette étape, il est possible d’ajouter le produit à la liste de vente, si l’on possède déjà cet article / ou l’ajouter à la liste d’achat si l’on souhaite l’aquérir. Ces deux listes figurent dans la partie Compte client. Un carousel de suggestions de produits similaires est prévu en bas de la page.
urbancash-produit

Votre avis m'intéresse !

Agence #Multimodal

logo

MULTIMODAL - Site web de l'agence

[ https://www.agence-multimodal.fr ]

Multimodal, un pôle de compétences en Marketing & Communication globale : Edition, identité visuelle, charte graphique / Multimédia & / Web design / Marketing opérationnel / Audiovisuel.

Demande : Création du site portfolio de l’agence.
Type de site : Catalogue.
Contenu : Vitrine de l’agence (One-page – Ancres vers sections).
CMS : WordPress.
CDN(s) : Bootstrap / GoogleFont / FontAwesome
Langages : Html5 / Css3 / Javascript / PHP / MysQl.

Mon rôle

• Déclinaison de la charte graphique & maquettage du site (UI/UX design).
• Front-Développement & Création d’un thème wordpress dédié.
• Mise en ligne & suivi du site.

Frameworks : Bootstrap / fontawesome / animate css / woo.js.
Fonctionnalités : Suivi des E-mails via Backoffice.
Resolution : Desktop max 1300px / Mobile 100% (responsive).
Compatibilités : -Webkit- navigateurs /Edge + Explorer 11 (Minimum).
Intégration des polices : Google-Font.
Protocole : Sécurisé (HTTPS).

header / Haut de page : Menu « smooth-scroll effect » lié aux aux ancres de section de page. Niveau de lecture par défaut : fond d’ecran fixe & logotype de l’agence.
agence-multimodal
Première section : Texte d’introduction, accompagné de pictogrammes présentant brièvement les principales activités de l’agence. On privilégie ici les grands espaces photos afin de véhiculer rapidement un concept ou une émotion.
agence-multimodal
Deuxième section : Plus de détails sur les prestations de l’agence. Courtes descriptions sous forme de liste sur fond noir transparent. L’image d’arrière plan reste en position fixe, afin d’attirer l’oeil sur le contenu scrollé.
agence-multimodal
Troisième section : Portfolio de l’agence, illustré de deux manières différentes : un carousel défilant, placé stratégiquement en tête de section, décrivant rapidement des ambiances. Les différentes slides pointent directement sur un site web.
agence-multimodal
Au dessous se place une vitrine de visuels cliquables. (1 par projet, ouvrant chacun une fenêtre plein ecran contenant un descriptif enrichi.
agence-multimodal

Votre avis m'intéresse !

backgrounds

X