ExaPrint Exaprint Exaprint

 

Voici un extrait d’axes et propositions d’améliorations du site en ce qui concerne l’UX / UI.

Je suppose qu’il y a des raisons pour que ce qui a été fait ou pas, mais je tenais à montrer comment je pensais pourvoir, entre autres, le faire évoluer.

La bannière

Un bannière qui ne réduit pas assez en hauteur et qui est tronquée, sur les tailles d’écran des mobiles.

 

Exemple de solution proposée pour les petites tailles d’écrans : 
@media (max-width: 767px)
height: 5vh; [ou 5em] par exemple
}
Selon la taille d’écran il faut aussi ajouter un padding plus important. Ci dessous un padding de 5em.

Print

Ou bien :

Changer d’image selon les tailles d’écran.

Cette solution est à privilégier pour une bonne raison.

Pourquoi garder une image lourde à charger pour un petit écran qui ne nécessite qu’une image de petite taille ? Le temps de chargement est un critère primordiale pour le référencement d’une part, mais aussi l’utilisteur.

On aura par exemple 3 formats :
  • large.jpg (1024 x 768 pixels)
  • medium.jpg (640 x 480 pixels)
  • small.jpg (320 x 240 pixels)

Et, par exemple,  avec les attributs srcset et sizes on poura avoir des images responsives.

 

ou bien

@media (min-widht: 769px) {

.classconcernee { background-image: url(‘/img/nomdelimage.jpg’);

}

En vidéo

Les nouveaux produits à découvrir

Un slider qui présente plusieurs produits les uns sur les autres

Sur les écrans de taille tablette il pourrait  avoir entre 2 à 3 produits maximum et un seul sur mobile.

Ci-dessous un exemple où l’image occupe 100% de la colonne, puis 50%.

 

Fonds des sous-menus

Un peu de couleur

 

Les fonds  sont très « bureautiques », pas très modernes (mais très pratiques).

Un background avec un léger dégradé en variant avec les 3 couleurs primaires (1 sous-menu magenta, un autre cyan, voir un jaune), avec une image (trait de coupe ou autre motifs du logo ou des autres visuels), qui serait au bord gauche par exemple apporterait une touche plus moderne.

Du relief

Neumorphism ou ombrages

 

Pour être plus modernes, surtout avec une cible de professionnels du graphisme. 

Et donner plus envie de cliquer !

Des sites réalisés

Geckode

CMS + ajout de code CSS et Jquery

Mot de passe : open
Le site n’a pas été mis en ligne car il devait intégrer une animation à la place du header. Néanmoins, elle était trop lourde à charger et celui qui l’avait réalisé n’est pas resté. Il y a eu manifestement pas mal de changements et mon code a été quelque peu abîmé ! 

Portfolio

Site en « dur »

Je suis entrain d’ajouter un formulaire de contacte (relié à une BDD), ça sera fait d’ici une semaine.

Tous mes sites !

 

Tous mes sites sont réalisés à partir d’une base de thème CMS, mais en général je modifie pas mal de classes CSS.
Si vous le souhaitez je peux réaliser une landing page d’après une maquette pour que vous puissiez voir ce que je peux arriver à réaliser.

Print