Portfolio Web
Assoc. #Chalut
#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.
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.
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.
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 …).
Mon #Ce-Extranet
#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).
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.
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.
Toutes les informations relatives au salarié membre sera sauvegardée dans la partie « compte ». (dernières réservations en date, messagerie, informations personnelles …)
Projet #Urbancash
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 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.
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.
Agence #Multimodal
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).
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.
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é.
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.
Au dessous se place une vitrine de visuels cliquables. (1 par projet, ouvrant chacun une fenêtre plein ecran contenant un descriptif enrichi.