portfolio

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

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

 Type : e-commerce

 CDN Bootstrap

 Wordpress (&WooCommerce)

UrbanCash

picture

X

URBANCASH – Projet de site marchand

picture

Page d’accueil : Un carousel sélectionnant des offres promotionnelles défile en tête de page. Deux façons d’accéder aux produits de la boutique en ligne : soit par le header-menu, soit par la sélection automatique de produits mis en avant.

picture

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.

picture

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.

picture

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.

picture

L’historique des ventes et des commandes, ainsi que la messagerie et informations personnelles seront consultables et modifiables dans la partie « compte ».

picture
UrbanCash
portfolio

Association Chalut. Refonte intégrale UI/UX / intégration & développement du site de l'association. (Protection des chats errants et abandonnés.)

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

 Type : Associatif

 CDN Bootstrap

 Wordpress (prévu)

Assoc. Chalut

picture

X

Association Chalut

picture

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.

picture

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.

picture

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 …).

picture

Pages annexes : Plusieurs pages annexes de prévues (essenciellement à but informatif, conseils divers …)

picture
Assoc. Chalut
portfolio

Mon CE-Extranet. Création UI/UX / intégration & développement d'une plateforme "type" Comité d'Entreprise destinée aux salariés.

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

 Type : Extranet

 CDN Bootstrap

 Wordpress
sur-mesure (prévu)

Ce Extranet

picture

X

Etude d’une plateforme Extranet

picture

Ce site est un projet d’étude préalable au développement d’un outil dédié aux salariés, membres de leur comité d’entreprise. 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é.

picture

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).

picture

picture

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.

picture

Toutes les informations relatives au salarié membre sera sauvegardée dans la partie « compte ». (dernières réservations en date, messagerie, informations personnelles …)

picture
Ce Extranet
portfolio

INTERIEUR EXTERIEUR - Maintenance Multi-services. Création UI design. l'Arborescence complète ainsi que le contenu est resté à l'état de projet.

 Type : Catalogue

 CDN Bootstrap (prévu)

 Wordpress (prévu)

Interieur Exterieur

picture picture
Interieur Exterieur
portfolio

Agence MULTIMODAL - Marketing & Communication globale. Création UI/UX / intégration & développement du site portfolio de l’agence.

https://www.agence-multimodal.fr

 Type : Catalogue

 CDN Bootstrap

 Wordpress
sur-mesure

Agence Multimodal

picture

X

Site de l’agence Multimodal

picture

Multimodal, un pôle de compétences en Marketing & Communication globale : Edition, identité visuelle, charte graphique / Multimédia & / Web design / Marketing opérationnel / Audiovisuel. Mode de mise en forme : one-page. 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.

picture

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.

picture

Portfolio de l’agence, illustré de deux manières différentes :
1- 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.
2- Au dessous se place une vitrine de visuels cliquables. (1 par projet, ouvrant chacun une fenêtre plein ecran contenant un descriptif enrichi.

picture
Agence Multimodal
pic pic pic

Serie de photomontages réalisés sur le thème "Art pictural". Ton humoristique et décalé.

La Rotonde

Vladimir

Napoleon 1er traversant les Alpes (à moto)

picture
picture
picture

Art pictural

picture

X

Art pictural

picture

La Rotonde

Nous sommes le 7 mai de l’an de grâce 1517. Après son coup d’étât, Macron 1er, (alias Jupiter pour les intimes), organise en son honneur une petite réception à la Rotonde. Précédée d’amis proches, Dame Trogneux s’empresse donc de rejoindre son prestigieux époux. Cependant, sa calèche, une fois devant l’établissement, ne trouve la moindre place de stationnement ! … Suite à cette déconvenue, Léonard imagina « Vinci Park », qui, près de 500 ans plus tard, continua de proposer les services de stationnement de véhicule que l’on connait …

picture

Vladimir

Arles, 1889. Dans un excès de folie, le peintre Vincent Van Gogh se mutile l’oreille droite, et produit une série de toiles sur le thème « Autoportrait à l’oreille bandée ». Il s’agit ici d’une première version totalement inédite et découverte récemment. Contrairement aux deux représentations connues de l’oeuvre, l’artiste se représenta sous les traits de son ami Vladimir, fraichement débarqué de russie. Le bonnet bleu porté par Van Gogh serait d’ailleurs, selon nos sources un cadeau de son mystérieux visiteur venu du froid !

picture

Napoleon 1er traversant les Alpes (à moto)

An 1800, l’armée française est de retour d’Egypte, et se prépare à franchir le col du St Bernard, dans les Alpes. Qui aurait cru que le Général Bonaparte, futur Premier Consul de France, puisse troquer son mulet pour une « KTM Duke 390 » ? Surement pas nos plus éminents historiens … Il faut dire que cette cylindrée poids plume au grondement rauque a du caractère, et progresse plus vite que n’importe quelle monture, au meilleur de sa forme … Ainsi donc nous connaissons dès à présent l’un des secrets tactiques qui auraient contribué aux nombreuses victoires de front de Napoléon, 1er du nom …

picture
Art pictural
pic pic pic

Serie de photomontages sur le thème "Lieux". Ton humoristique et décalé.

Le Colissimo

Avenue des Champs Inondés

"Nouillorc" si p'tite

picture
picture
picture

Lieux célèbres

picture

X

Lieux celebres

picture

Le Colissimo

Le saviez-vous ? Avant la construction du célèbre amphithéâtre antique, une maquette du monument aurait été expédiée à l’empereur par colissimo. A l’époque, l’acheminement de marchandises transitait par la périlleuse voie appienne. Selon certains récits, le précieux paquet serait tombé du char et son contenu se serait donc brisé au contact du sol … Un moment égarée, la maquette fut retrouvée par des itinérants, et revendue à prix d’or à un patricien de Rome. Contre toute attente, les architectes de la cité chargés du projet auraient reproduit le monument à l’exactitude, dans un style quelque peu.. avant-gardiste !

picture

Avenue des Champs-Innondés

Suite à des innondations sans précédent dans la capitale, la mairie de paris à trouvé une alternative intéressante pour assurer le défilé du 14 juillet prochain … Surplombés par la patrouille de France, vous pourrez admirer prochainement les bateaux de la marine nationale naviguer sur la seine ! Ils remplaceront donc les traditionnelles marches militaires. La décrue étant extrêmement lente et incertaine dans les deux tiers de l’Ile de France, on réfléchit désormais à un nouveau système de « gondoles parisennes », censées remplacer à terme les lignes de métro innondées, pour se déplacer dans les rues de paris … Ce qui pouvait être associé hier à de la fiction ne semble plus être si fou aujourd’hui … De quoi renforcer l’image de ville romantique de la capitale !

picture

Nouillorc si p’tite

La plus grande ville des Etats Unis, première puissance économique mondiale, entre les mains d’un ogre maniaque … ou l’illustration de l’appétit gargantuesque d’un chef d’étât américain mégalomane … Tout un symbole ! A votre avis, finira t’il son assiette avant la fin de son mandat ?

picture
Lieux célèbres
portfolio

Scenario d'étude de la version 2.0 de mon portfolio. Plus de place à l'animation css et aux interactions. Nouvelle mise en forme.

[ Visualiser le nouveau site ]

 UI / UX original

 + d'animation css

 Nouveau thème Wordpress

Fabios beta 2.0

picture

X

Storyboard d’étude préalable au développement

picture

Dans sa version Laptop / Desktop & Mobile, l’interface global est construit sur de grandes courbes obliques orientées à 20 degrés. Sur la home-page, celles-ci succèdent au loader pendant le chargement et précèdent l’apparition des titres & textes d’introduction.

picture

S’en suit l’apparition du menu en tête de page. Il se veut discret, minimaliste & très épuré, et réagira au survol des boutons.

picture

L’interface graphique des pages « portail » répond aux mêmes règles (obliques à 20 degrés). l’écran va, (optiquement) se diviser en deux parties. l’une sera dédiée à des fonds d’écrans chargés dynamiquement au survol des boutons, tandis que la partie droite affichera le contenu des pages (au clic).

picture

Les captures ci-dessus sont une étude préalable d’animation pour une page très spécifique. Celle ci sera dédiée à l’illustration de mes compétences (page « profil »). Elle affichera simultanément trois étiquettes orientées sur l’axe central oblique. Chacun de ses onglets réagira au survol en chargeant un visuel dans la partie gauche de l’écran.

picture

Voici à quoi ressemblera l’adaptation pour mobile. On garde à peu près le même système d’affichage, certaines animations sont succeptibles de disparâitre ou d’évoluer differemment au chargement des pages. (contraintes Responsive & compatibilités oblige).

picture

picture
Fabios beta 2.0

Fabios Porfolio

Création UI/UX design perso / intégration & développement du site - utilisation de Wow Js et Bootstrap. Recherche d'un système de navigation original et dynamique.

[ Voir la nouvelle version du site ]

 UI / UX

 CDN Bootstrap

 Wordpress sur-mesure