UI Kit

GetUikit

Site: https://getuikit.com/
GitHub: https://github.com/uikit/uikit

Stream Ui Kit

StreamUIkit

Site: https://htmlstream.com/templates/stream-ui-kit

Basé sur Bootstrap.

One Nexus

Nexus
Site: http://www.onenexus.io/

Basé sur Synergy, un framework front-end pour la génération de composant UI et Kayzen, un systeme de grille CSS – tous réalisé par la même équipe.

Milligram

Screen Shot 2018 10 17 at 09 40 40
Simple
Juste 2kb
https://milligram.io/

Tabler

Un des meilleurs UI de dashboard Open Source.
Basé sur Bootstrap
Le code est clean
La logique est claire et bien conçue.

Screen Shot 2018 10 17 at 09 50 01

Site: https://tabler.github.io/
Demo: https://tabler.github.io/tabler/
Source : https://github.com/tabler/tabler

Bootflat

https://bootflat.github.io/

Screen Shot 2018 10 17 at 09 52 20

Semantic UI

Screen Shot 2018 10 17 at 09 55 16

 

https://semantic-ui.com/

PureCSS

Screen Shot 2018 10 17 at 09 58 16

https://purecss.io/

Ink

Screen Shot 2018 10 17 at 09 59 38

Un Kit UI open source du Portugal.

http://ink.sapo.pt/

GrounworkCSS

Existe aussi avec une pré-intégration à Rails – or bien juste le HTML/CSS/JS

https://groundworkcss.github.io/groundwork/?url=docs/home

Materialize CSS

Screen Shot 2018 10 17 at 10 03 38
Google Material Design
Open source
Pas réalisé par Google cependant.

Site: https://materializecss.com/
Source : https://github.com/Dogfalo/materializeE

Existe aussi en package npm

Topcoat

Plutôt fait pour les applications.

http://topcoat.io/

Petal

Réalisé par l’équipe de Shaker
Site: https://shakrmedia.github.io/petal/
Source: https://github.com/shakrmedia/petal

Valou, c’est tout.

Si vous avez des suggestions n’hésistez pas.

Si seulement faire son site était aussi simple que veut nous le suggérer la dernière pub de Wix…

 

Même si des plateformes comme Wix et autre Weebly et même WordPress ont permis de démocratiser le web, et c’est une très bonne chose en soi…. il n’en reste pas moins que la dure réalité de la création de site ne réside pas uniquement (voir même pratiquement pas) dans sa difficulté technique de réalisation mais bien dans sa capacité à vendre.

Un site n’est pas un accessoire de vitrine pour faire in. Ça c’était bien il y a 15 ans quand les comportements de consommation n’avait pas encore changé. Aujourd’hui, même si vous avez un bon réseau personnel les gens vont vous réclamer votre site et/ou un moyen de communiquer avec vous au delà de votre numéro de fax.

Clarté, efficacité et style

3 valeurs sûres qui permettent à un site de réussir:

Clarté 

Être clair visuellement, c’est respecter l’espace de l’écran et ne pas surcharger votre page d’informations. On se détend, vous êtes sur un support digitale, ça ne vous coutera pas plus cher en papier de rajouter une page ou espace supplémentaire pour rajouter de l’information de manière plus espacé.

Efficacité

Présenter l’information dont les gens ont besoin quand ils vont sur votre site c’est toujours apprécié. La valeur du temps économisé à l’internaute est importante.

Attention être efficace ne veut pas dire non plus qu’il faut mettre toute l’information au dessus de la ligne de flot de la première page. Vraiment pas.

Style

Chacun ses goûts et chacun ses couleurs, vous démarquez votre image comme bon vous semble, seulement faite le avec style. La présentation de l’information sur internet définie comme vous serez perçu par vos clients.

Un site pour vendre

Même si vous ne vendez pas directement votre marchandise ou vos services en ligne, il n’en reste pas moins que votre site est là pour faire votre promotion et vous ramener des clients.

Et pour ça, aucun Wix ou aucun WordPress ne pourra vraiment prendre la place d’une réflexion commerciale sur le design et la stratégie marketing de votre site.

 

 

Designers et designeuses! Camarades du pixel! Ne cédez pas à la tyrannie du carousel, ni à la facilité de son coté gadget ou bien parce que un client le réclame.

Les vrais chiffres des sliders

En moyenne, 1% vont cliquer sur une des slides et dans 89% des cas ce sera la slide en première position. Ce n’est pas moi qui le dit ce sont les stats de ND.EDU rapportées par Erik Runyon.

En fait, ce que l’on sait intuitivement (« Mais, mais… arrête de bouger je suis en train de lire ») est démontré scientifiquement par le groupe  Nielsen Norman, qui sont arrivé à la conclusion logique qu’une image qui bouge en permanence dérange l’utilisateur et diminue la visibilité (sans blagues…) (les details de leur recherche sont ici).

Pour ceux qui ne sont toujours pas convaincus, voici un article tester par des marketeurs qui cherchent à améliorer leur taux de conversion, et bien en gros, les slider c’est vraiment pas bon pour les ventes (en détails ici).

Alors pourquoi ils existent

Pour paraphraser Lee Duddel, les carousels marchent bien pour une chose : dire au management que leur dernière idée est sur la page d’accueil du site. Vous pouvez aussi les mettre s’il y a du contenu que vous voulez que vos utilisateur ignore, c’est dans le slider qu’il faut les mettre.

 

En fait les carousels sont un héritage d’un temps ancien pour ce qui avait semblé un jour être un bonne idée mais là c’est bon, on sait que cela n’est plus un bonne idée, ça arrive de se tromper, pas la peine de continuer….

Donc pour le bien de vos utilisateurs, voici un bon conseil, « dites non » aux siders…