background preloader

Des contre-exemples ergonomiques illustrés

Des contre-exemples ergonomiques illustrés

http://www.doisjeutiliser.fr/

Related:  HTML - CSS - PHPTutoriels, Formations, conseils utiles, bonnes pratiques etcDéveloppement/ErgonomieHTML/CSSweb_techno

Flat Design - What’s it ? Le Flat Design se résume à un sous courant du minimalisme qui suit plusieurs règles. Le design du site est constitué uniquement d’aplats de couleurs ;Les formes du design (boutons, icônes…) sont constituées de formes géométriques ;Les polices du site doivent également être adaptées, il faut privilégier les « sans-sérifs » ;Dans ce type de design, on peut facilement utiliser un minimum de 6 couleurs différentes contrairement à 3 dans un design classique ;Les couleurs doivent être vives (utiliser le bleu, violet, jaune, vert,orange…) ;Pour les puristes, le design ne doit pas contenir d’ombre portée ou de texture. Un Design sans surplus Un design dit « Flat » ne doit pas contenir d’ombre portée, de textures, de biseaux ou dégradé, pour résumer tout ce qui permet de donner de la profondeur à un objet ! Ce mouvement commence à percer de plus en plus sur le Web, mais il est déjà très répandu pour les applications pour Smartphone. Utilisation d’éléments simples

Flat design et skeuomorphisme... Voilà déjà quelque temps que l’on nous parle du flat design comme étant la grande tendance graphique à suivre. À l’inverse, le « skeuomorphisme » serait devenu ringard, passé, « so 2000’s »… . Alors, essayons de démêler tout ça et d’y voir plus clair… Le skeuomorphisme c’est quoi ? Selon Wikipédia : « un élément de design dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine. » En d’autres termes, il s’agit de donner l’apparence d’un objet existant à un élément de design ayant la même fonction que cet objet, le plus souvent dans le but de rendre son utilisation plus intuitive. Doit-on remplacer les textes par des icônes 04 juillet 2014 Doit-on remplacer les textes par des icônes ? "Tiens, et si on remplaçait cet intitulé trop long par une icône ? Ce serait plus court, plus convivial, plus rapide, plus..." Prudence.

Créer son blog facilement Si vous arrivez sur ce blog pour la première fois, vous serez peut-être intéressés par mon guide de 36 pages sur le référencement : je vous explique comment référencer votre blog en 20 étapes. Pour télécharger gratuitement ce guide, cliquez ici. Vous serez redirigé sur un autre onglet et pourrez continuer votre lecture ensuite sur cette même page. Les masques CSS Comme c’est bientôt Noël, nous allons rêver un peu et regarder du coté des évolutions en matière de design web. On se souvient tous de notre première réaction quand on a découvert border-radius ou box-shadow ? Personnellement, ça a du être un truc du style « Oh, purée !

Navigation à onglets fluides avec les transitions CSS - Créer un menu avec display: table-cell Note : ce tutoriel a été initialement publié dans WebDesign Magazine Hors-série 16. Suivez pas à pas les 18 étapes de ce tutoriel. 01 - La structure HTML La première étape de ce tutoriel consiste à créer notre structure HTML. Pour ce menu, nous avons besoin d’une liste de liens. Pour cela, nous utilisons un élément de liste non ordonnée (balise <ul>), lequel contient 5 éléments de liste (balise <li>). Itérer son design avec invision Bienvenue dans cette nouvelle vidéo Hackademy qui portera sur un outil bien pratique que je tenais à vous faire découvrir : InVision. Cet outil vous permet de gérer vos projets de webdesign, de la maquette à l’intégration. InVision se présente comme une solution à plusieurs problèmes auxquels sont confrontés les webdesigners. Nous verrons dans cette vidéo quels sont ces problématiques et comment l’application peut nous aider. Avant de commencer, InVison est un service pensé tant pour un freelance que pour une entreprise et est payant au delà d’un seul projet (ce qui vous permet de l’essayer sans soucis). Sachant qu’un projet est une app mobile, tablette OU desktop vous pouvez oublier la version gratuite pour un site responsive…

Comment sécuriser son WordPress Article invité rédigé par Aurélie, développeuse chez Atchik Services, depuis plus de 8 ans ! Hello à tous !! Comment allez vous ? Aujourd’hui je vous propose un article invité qui vous donnera quelques conseils pour sécuriser votre blog / site WordPress. Pourquoi ce sujet ? Eh bien, il y a 3 ou 4 semaines j’ai reçu un mail de mon hébergeur qui me disais que j’étais en train de subir une attaque sur le blog.

Tutoriel HTML Bootstrap Dans la jungle des sites Web actuels, chacun devrait se démarquer, tout le monde veut attirer le plus de monde et créer l'expérience la plus complète et souple pour l'utilisateur final, en tant qu'intégrateur Web, notre travail est de suivre un cahier des charges établi en fonction des demandes du client, mais dans l'optique d'un site personnel ou d'un site d'agence, les demandes deviennent plus personnelles et différencier le bon du mauvais devient plus difficile, c'est là qu'intervient ce que j'appelle la mise à plat du projet. I-A. Mettre à plat le projet▲ Mettre à plat le projet revient (à mes yeux) à se donner des lignes directrices, un cahier des charges précis, bref, une ligne de conduite.

CSS - Une animation 3D sur un bouton Twitter Là je dis bravo, vraiment bravo. On fait de plus en plus de belles choses avec le CSS et l’HTML, cette réalisation le prouve. Il n’y a pas du tout de JavaScript dans cette , c’est entièrement fait avec du CSS et du HTML. La partie HTML: < section > < div class = "button" > < a href = " class = "twitter-follow-button" data - show - count = "false" data - size = "large" > Follow @ bennettfeely </ a > < script >! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] ; if ( !

Webdesign adaptatif : 5 astuces indispensables Depuis l’année dernière, la tendance est au webdesign adaptatif. Avec la sortie du nouvel iPad et l’explosion du marché téléphone mobile, cette tendance devrait doit devenir la norme d’ici la fin de l’année. Si les travailleurs du web ne plongent pas dans ces nouvelles pratiques, je parie sur un beau IE6 revival pour leurs sites internet. Voici 5 conseils pour vous aider à créer un design de qualité, accessible et adaptable. Vous apprendrez dans cet article : Comment cacher du contenu pour les petits écrans ?

UXPin ou comment améliorer son workflow en webdesign Nous allons nous pencher sur le workflow ou flux de production pour les anglophobes ! Le processus webdesign que j'applique aujourd'hui est bien meilleur que celui que j'utilisais il y a quelque temps et je voudrais le partager avec vous en vous expliquant pourquoi vous allez gagner en efficacité avec cette méthode plus adaptée aux projets d'aujourd'hui. 1- Pourquoi faut-il maquetter ? Les étapes d'un projet webdesign sont très importantes, à commencer par le cahier des charges. Mais ce n'est pas la problématique que je veux aborder aujourd'hui.

Quand, quoi, comment: tout sur le test utilisateur Observer un participant qui pense à voix haute en réalisant une liste de tâches sur votre site? Faites le test utilisateur tôt et régulièrement! Quand tester son interface web? Il n’est jamais trop tôt dans le processus de développement d’une interface web (site, maquette, application mobile, formulaire) pour commencer à tester l’expérience utilisateur. Selon Steve Krug, auteur du livre « Don’t make me think », tester un site avec un seul utilisateur, assez tôt dans le projet et, répéter l’opération régulièrement, serait plus efficace que de le tester avec 50 personnes lorsque le site est presque abouti!

Related:  cydoo