Projet E-Commerce Efficom

Un designer-intégrateur, un développeur, “from scratch” et sans CMS. Résultat: une web-app tournant sous Ruby on Rails avec un front-office alléchant et un backoffice user-friendly (En plus, on a fait péter le 18,5/20 au projet; “Alleeeeez !“).Réalisation Thomas Delissen Efficom

Voilà le décor pour notre projet: une site e-commerce et un blog pour une association de paysans. Ouais je sais ça envoie du rêve…

Style accessible & UI conventionnée

C’est un site de paysans okay, mais un super site de paysans! En effet, le site est habillé d’illustrations vectorielles et de textures, donnant ainsi en plus d’une identité visuelle pertinente, une dimension humaine. Ce qui tombe bien pour un site associatif :) Je voulais aussi, casser l’idée reçue des agriculteurs (celle disant qu’ils n’ont pas internet et l’électricité), alors j’ai fait un site simple avec une bonne gueule et des trucs qui bougent. Ça a marché.

e-commerce-web-design

Un aperçu de certaines pages du site. Allez voir en bas pour un aperçu complet ;)

UI-basket

Un dock interactif et ergonomique sert de panier. Il utilise l’espace horizontal (disponible à foison), et disparait quand il est vide.

Interface backoffice & animations

L’interface d’administration a été conçue pour être adaptative; une unique interface se modifiant en fonction des besoins différant selon le type d’utilisateur. Ils peuvent y gérer un tas de trucs, sans être pour autant fastidieux. Des éléments de design récurrents facilitent la familiarisation de l’outil et des animations sous-tendent les actions de l’utilisateur.

Interface design pattern backoffice

Chaque élément est placé selon sa fonction au travers de design pattern. Ces design pattern son répétés sur toutes les pages pour améliorer la cohérence interne

interface-editable

L’édition d’un élément ne se fait pas sur une autre page, mais au même endroit. L’utilisateur associe alors mieux son action au résultat de celle-ci

 Sass + Compass + SMACCS = Intégration maintenable

Gros challenge que de faire un site de cette envergure de zéro; on se perd rapidement dans des milliers de lignes de CSS… Pour éviter ça on s’est occupé de l’intégration avec le préprocesseur SASS et son copain le framework  Compass, le tout respectant le design pattern SMACCS; SMCCS nous a aide à garder tout ça bien organisé (une bonne pratique que j’ai apprise lors de ce projet). Au bout de 10 mois de travaille, je connaissais par coeur le comportement de mon CSS :)

Soyons rigoureux dans notre CSS et nous obtiendrons un comportement prévisible en prod'

Soyons rigoureux dans notre CSS et nous obtiendrons un comportement prévisible en prod’

voir ce design agraire