background preloader

Lisibilité des sites web, font-size : 100% – 16px

Lisibilité des sites web, font-size : 100% – 16px
Dans ce nouvel article je vais présenter les solutions mises en place par les webdesigners pour améliorer la lisibilité de leur contenu textuel. Je ferai une analyse des « bonnes » pratiques typographiques pour optimiser la lisibilité du contenu et présenterai une sélection de sites web affichant leur contenu textuel à la taille par défaut de 100% soit 16px. Trop gros ? Pas esthétique ? Cet article est disponible en Français et en Anglais : EnglishFrançais Le travail des webdesigners est de concevoir et de réaliser des sites web répondant à la problématique de leurs clients. La lisibilité du contenu est donc un point crucial qui doit attirer toute notre attention. Pour une meilleure lisibilité sur le web Bien qu’il n’existe pas de solution toute faite pour optimiser la lisibilité d’un contenu textuel sur le web, il existe cependant quelques rêgles qu’il est bon de connaître : Choisir un corps de texte suffisamment élevé. Optimisation du corps de texte pour une meilleure lisibilité Analog Related:  Indices de lisibilitéexpérience utilisateur

Comprendre la lisibilité du texte : sur écran VS sur papier | Patrick Grégoire Lit-on de la même façon en surfant sur Internet que sur papier? Absolument pas. Et pourtant, bon nombre de textes sur le web sont de vulgaires « copier-coller » de textes imprimés. Quelques principes et règles pour ne pas perdre nos (chers) cyber lecteurs. Des études de comportement ont montré que les techniques de lecture d’un internaute (de recherche et de navigation aussi) ne sont pas les mêmes que sur le papier. Sur papier, on lit de manières linéaires, on feuillette. Sur écran, la couleur est la somme des trois couleurs (rouge, vert, bleu) émises par le tube de l’écran. Les recherches effectuées par John Morkes et Jakob Nielsen pour : Writing for the Web ont démontré que 79 % des visiteurs de pages Web ne lisent pas, mais parcourent (scan) les textes. Quelques règles Le souligné est à proscrire, il est réservé aux liens hypertextes;Le chiffre 12 est magique sur le web. Les techniques « d’écriture » doivent être donc repensées. Sur PAPIER Sur ÉCRAN

Les codes de la Typographie #1 - Structure et vocabulaire de la lettre - typographie Pour ce mois d'avril, nous allons réaliser un dossier complet sur la Typographie. Essentiel dans la réalisation d'un logo ou d'un slogan elle peut véhiculer des messages puissants et différents selon ses formes. Dans ce premier numéro nous allons compre Définitions : Caractère : Désigne une lettre. 1 - Capitale : Appellé grossièrement Majuscule, il existe deux type de capitales : Les grandes ( 1a ) utilisées en début de phrase et les petites ( 1b ) avec la hauteur et la graisse des minuscules. 2- Minuscule ou Bas de case : Lettre de hauteur moyenne, pouvant posséder des parties scendantes et descendantes. 3 - Barre ou traverse : Partie horizontale des lettres 4 - Diagonale ou branche : Représente les parties obliques d'une lettre 5 - Ligne de base ou ligne de pied : Ligne sur laquelle les lettres sont alignées 6 - Hauteur du X ou hauteur courante : Hauteur des lettres bas de case ne contenant aucune ascendante et descendante. 11 - Empattement : Cela représente le pied du Fut ( Montant ).

Qu'est-ce que l'expérience utilisateur ? En 2007, j’ai rencontré Nancy Dickinson, qui était alors Directrice de l’Expérience Utilisateur chez Ebay. Nancy y occupait une fonction régalienne et faisait figure de leader parmi la communauté des designers d’expérience – les « UX » (prononcez « iouhèxe »). Ce groupe s’imposait comme une des castes les plus influentes de la Silicon Valley, volant la vedette aux développeurs. Mais au fond, que signifie le terme de « design expérience utilisateur » ? Pour faire simple, l’expérience utilisateur consiste à s’intéresser d’abord aux utilisateurs finaux plutôt qu’aux clients donneurs d’ordre. [C’est] un design qui se vit, qui s’éprouve, s’expérimente. Bref, cette forme de design répond à une double ambition : aller au-delà de l’aspect formel ou de la simple valeur d’usage pour l’utilisateur, et instaurer une culture du changement au sein des entreprises en plaçant l’écoute de l’utilisateur au centre des valeurs. - D’abord la culture créative. Illustrations par Mathieu Avons

18 règles typographiques pour rendre vos contenus plus lisibles Mise à jour : 08-03-2019 Un des éléments essentiels pour rendre un contenu visuellement attrayant et agréable à lire est de s’assurer qu’il soit correctement mis en forme. En dehors du choix des couleurs, de la structure et des illustrations, la typographie influence la lisibilité et l’efficacité du message. Les possibilités en matière de polices de caractères sont illimitées. Pour autant, il convient de suivre quelques règles pour rendre un texte banal séduisant et efficace. Votre objectif prioritaire : harmoniser fond et forme pour encourager la lecture ! La typographie est cruciale car elle facilite le processus de compréhension et d’assimilation de l’information. Une infographie liste 18 règles valables pour tous les types de textes, web ou print. Typographie, caractères, polices et fontes De manière générale, la typographie fait référence à l’agencement des caractères d’écriture. Les caractères mobiles ou types qui la composent sont la manifestation visuelle de la parole.

Responsive webdesign avangtages et bonnes pratiques Ce n'est un secret pour personne, la navigation mobile sur internet fera mordre la poussière au traffic de bureau classique -plus tôt que vous le pensez. Aux États-Unis, il représente déjà 20% du web global. En Asie et en Afrique, plus de la moitié de tout le traffic provient du mobile. En plus de cela, il y a des milliers et des milliers des millards d'appareils qui peuvent être utilisés pour accéder au web. Concevoir des sites adaptatifs qui fonctionnent correctement dans ce nouvel écosystème est un vrai nouveau défi. Le design adaptatif (aka responsive webdesign), défini par Ethan Marcotte, explique comment construire un site fluide, qui peut se rétrécir ou s'agrandir, pour s'adapter à toute taille d'écran sur n'importe quel appareil. Avec une grille fluide, des images flexibles et des media queries, nous n'avons pas à concevoir, un site mobile dédié séparé. Les avantages d'une conception adaptative Il y a de nombreux avantages au design adaptatif. Prototypes et itérations rapides

Analyseur de lisibilité Introduction Les mots courts et les phrases courtes sont liés à la facilité de lecture et de compréhension. Les mots courts sont généralement plus courants (loi de Zipf). Les phrases courtes demandent une capacité d'abstraction moins importante au lecteur. L'analyse de lisibilité pourrait s'avérer utile pour améliorer un texte et le rendre plus accessible. Pourquoi avons-nous développé ceci? La lisibilité indique dans quelle mesure un texte donné est facile à comprendre. Technologie Lisibilité La lisibilité est déterminée en utilisant l'Indice Gulpease. terminologie Il utilise la statistique de Poisson, la méthode du maximum de vraisemblance et Inverse Document Frequency (Latent Semantic Analysis) parmi les fréquences des mots dans le document et le corpus de textes génériques de 100 millions de mots par langue. Je le veux! Si cette technologie vous intéresse, nous vous invitons à en savoir plus sur les Translated Labs et sur les services pour le Traitement automatique de la langue.

Free Fonts, Best for Posters, Flyers and Logo Designs | Fonts This is the another excellent fonts collection for graphic designers. These fonts are best for posters, flyers and logo designing. Custom designed fonts are a great solution for making your company stand out from the competition. We are understand the requirement of market and gathered best and unique fonts and typefaces for you. You may also like: Recieve our RSS updates via email, simply enter your email address & click subscribe. Typography is one of the most important aspect in modern web designing. This is not the traditional big list with all the available free fonts on the internet but it’s an refined collection of best handpicked fonts for designers. Free Font: Eclectic Download Font Graham Hand Download Font Agilis Download Font Brushy Download Font Genplan Free Typeface Download Font Versa Download Font Bamq Typeface Download Font Mecca Download Font Hiruko Pro (Pay with Tweet) Download Font Aleo free font Download Font Prida61 Download Font Muro Download Font Brasilcao Download Font Moondance Archistico

UX, UI : c’est différent et c’est pas pareil 21 décembre 2012 Dans le jargon des métiers de la conception web, on parle souvent, et de plus en plus d’UX et d’UI, ou expérience utilisateur (User eXperience) et interface utilisateur (User Interface) en bon françois. Si pour vous ces deux notions sont aussi compréhensibles qu’une équation mathématique différentielle du second degré, lisez ce qui suit pour éclairer vos lanternes. UX is not UI but UI is UX Souvent, l’UX est assimilé à l’UI. En effet, l’interface utilisateur, c’est ce qui fait le lien entre l’humain et la machine. Les réflexions sur l’UI font l’objet de nombreuses études : quelles typographies utiliser ? Or, pour qu’une expérience utilisateur soit agréable, que dis-je mémorable, travailler l’UI n’est clairement pas suffisant. En effet, l’UI doit être le résultat d’un travail plus approfondi, celui de l’expérience utilisateur ou la prise en considération globale des besoins de l’utilisateur. Source : illustration Agence LunaWeb Source : aquent.fr Aller plus loin

La mise en forme du texte sur une page web Réussir la lisibilité d'un texte sur un site web demeure souvent un problème, quelle que soit la qualité d'un site. Les éléments essentiels d'une bonne conception visuelle sont le choix de la typographie et de couleurs adaptées. Lire une page web, c'est lire sur un écran. La lecture répétée et prolongée sur écran entraine en général une fatigue visuelle plus importante. Pour faciliter la lecture d'une page web, voici quelques règles typographiques et recommandations utiles. 1. La typographie joue un rôle très important dans l'image donnée par votre site. Des polices fantaisistes ou sérieuses donnent immédiatement le ton. Texte principal : la règle des 10 points. Il n'y a pas de règle absolue pour la taille des polices de caractères, mais il faut s'assurer que le texte principal soit au moins égal ou supérieur à 10 points. Si le texte principal est important, rien ne sert de réduire la taille de la police car votre texte ne sera pas lu. Choix des polices. Polices de caractères homogènes. 2.

Style Tiles: The Flip Side of Wireframes Style Tiles: The Flip Side of Wireframes Style Tiles provide a fresh and productive way to approach the design process. They allow you to specifically hone in and focus on a project’s personality and mood without worrying about specific layout decisions. Today we’re going to show you exactly what Style Tiles are, why you should use them and how to incorporate them into your design process. What Are Style Tiles? Style Tiles are a way to develop a site’s visual identity independent of the complicated logistics that come into play when actually trying to develop a full fledged mockup. Rather than beating around the bush, let’s jump right into what a Style Tile looks like. If you’re driven by visual design, then you should immediately be able to see the usefulness of this tool. The Flip Side of Wireframes The Style Tiles website describes them as a something in between a mood board, which is too vague, and a full mockup, which is too precise. Three Reasons To Use Style Tiles Let’s Make One Logo

Typography legibility | Lisibilité et typographie (réédition d'une note du premier mars 2006) Il arrive un moment dans une suite d'études (sur la lettre, la typographie et la lisibilité) où l'on se sent obligé de descendre dans les profondeurs d'une théorie, au risque parfois de rencontrer des difficultés épistémologiques. L'organisation des savoirs dans les domaines de l'alphabet, de la lettre et de la typographie, tient autant des approches historiques, scientifiques que techniques et artistiques. La question de la lisibilité des alphabets est relativement moderne, si l'on accepte de considérer que cinq cents à sept ans années d'acharnement à rendre les caractères plus lisibles peuvent entrer dans une conception de la modernité. où l'on voit l'irruption de l'écriture manuscrite dans la construction d'une linéale. La lisibilité est donc un thème de recherche inépuisable. les principes qui la fonde: Tout au long de ce blog je les développerai comme j'ai déjà commencé avec les approches, interlignages, histoire de la lettre...

Abstract Fonts (13,707 free fonts) UX: Psychology of great design – part 1 The World Wide Web turned 20 in April 2013. In its first 20 years the web matured from a largely static medium into the rich, collaborative and wonderfully interactive medium we know today. As such, the interactions and relationships between users and systems have become increasingly complex. Consequently, web designers need to understand the experience of the website or app they are making. Designers should consider who is using it, what they need to do and ultimately if the design makes their users’ experience easier or, ideally, more delightful. Essentially, this is what user experience (often abbreviated to UX) is focused upon: studying how a person reacts or feels when using a product or service and how this experience can be improved. The term ‘user experience’ was originally coined by Don Norman while he was Vice President of the Advanced Technology Group at Apple: “I invented the term because I thought human interface and usability were too narrow. > Why is it being made?

Related: