Cette semaine en design 12 septembre 2014

Les émotions et les sentiments sont un élément essentiel de la connexion entre le design et quelqu'un. Et ce sont deux choses difficiles à prévoir, à décrire et à concevoir. Mais il y a un peu de science derrière les émotions et les sentiments et pourquoi vous pourriez réagir d'une certaine manière, et c'est notre objectif cette semaine dans le design.

Chaque semaine, nous prévoyons de jeter un coup d'œil aux principales versions et mises à jour de produits, aux outils et astuces, et même à certaines des choses les plus populaires sur les médias sociaux. Et nous aimerions aussi savoir ce qui se passe dans votre monde. Avons-nous manqué quelque chose? Envoyez-moi un message à [email protected].

Comment les polices vous font sentir

Il y a une science à la typographie. Plus précisément, il existe une science sur la façon dont les polices peuvent vous faire sentir. The Next Web examine en détail la manière dont le type peut avoir un impact sur vous et ce que les concepteurs peuvent faire pour améliorer cet impact: La science derrière les polices (et comment elles vous font sentir).

Décomposer la science est plus simple que vous ne pouvez l'imaginer:

  1. Pensez à la façon dont vous lisez. (C'est un motif naturel!)
  2. Pensez à ce que les bonnes polices vous font ressentir. (Ils correspondent au ton de ce que vous lisez.)
  3. Pensez à ce que la mise en page vous fait ressentir. (Si les éléments sont placés de manière à ne pas perturber le flux de texte, vous êtes plus heureux.)
  4. Pensez aux associations culturelles avec des caractères. (Le lettrage peut représenter ou vous aider à vous rapporter à d'autres objets ou éléments.)

Mais que pouvez-vous faire avec cette information? Comment pouvez-vous l'utiliser pour créer des polices de caractères qui associent de meilleures sensations? Comprendre la typographie est le point de départ. Connaître les bases telles que les catégories de caractères (serif, sans serif, script et décoratif) et les principes de lisibilité et de lisibilité est un bon début.

Mais il y a quelques autres choses que vous pouvez faire aussi:

  • Choisissez des tailles de police supérieures à 12 points. "De nombreux concepteurs ont mentionné que la police 16pt était la nouvelle police 12pt."
  • Soyez conscient de la longueur de la ligne. Notez que la longueur de ligne idéale pour un site Web de bureau se situe entre 50 et 75 caractères.
  • Faites attention à l'espacement. Assurez-vous qu'il y a suffisamment d'espace entre les lignes de texte pour faciliter la lecture.

Comprendre les formes CSS

La forme d'une image ou d'un bloc de texte peut vous faire ressentir quelque chose. La forme fournit également des informations supplémentaires sur un élément, son utilisation et sa fonction dans la conception globale. Cependant, créer des formes pour des projets Web n'était pas toujours facile, surtout avec des images complexes.

Les formes CSS créent une solution à ce problème. "La plupart des sites Web s'en tiennent à un moule simple: insérer du contenu à l'intérieur de rectangles dans d'autres, de plus grands rectangles, ce que la plupart des utilisateurs trouveront probablement plus ennuyeux que hallucinant," écrit Zack Rutherford pour UX Magazine. «Les formes CSS, en revanche, offrent une plus grande liberté aux concepteurs qui souhaitent contourner leur contenu à l’intérieur ou autour de paramètres intéressants et visuellement attrayants.

Mais quand devriez-vous utiliser des formes CSS dans vos projets. La réponse se trouve dans l'article "Symétrie, taille, vitesse et formes CSS".
Il existe une liste assez convaincante de raisons pour lesquelles vous devriez travailler avec des formes CSS en plus du plaisir.

  • Nouveauté: «La possibilité de modifier le texte pour s’insérer dans des espaces restreints ou, au contraire, d’agrandir dans des plages plus larges, offrira une plus grande liberté aux concepteurs qui préparent leurs mises en page.
  • Contrôle avancé des flux d'utilisateurs: permet de façonner le contenu en chiffres, de réduire le texte ligne par ligne ou d'utiliser le texte comme forme pour mettre en valeur d'autres éléments de la page.
  • La mise en forme du contenu facilite la narration visuelle: «Les options de variabilité une fois que vous avez abandonné l’idée d’une structure murée pour votre contenu écrit sont renversantes.
  • Symétrie, taille et vitesse: «Les formes CSS peuvent être utilisées pour conserver la forme de votre contenu, quelle que soit la fenêtre d'affichage, ce qui le rend universellement symétrique, sans parler de RWD.

Conception d'une police

Créer des polices n’est pas aussi simple que de dessiner quelques lettres sur une serviette. Le développement de polices et de caractères est un processus en plusieurs étapes auquel vous devez vous engager. Mais même sans beaucoup d'expérience, vous pouvez créer votre propre police.

Le typographe Tyler Finck a récemment réalisé une vidéo de moins de 18 minutes et un article pour Creative Market afin de vous guider tout au long du processus. Comment faire une police? est un bon moyen de créer quelque chose par vous-même (mais vous devez avoir un Mac pour ce tutoriel).

Et bien que presque tout le monde puisse le faire, vous devrez être prêt à faire preuve d'un peu de patience et de dévouement. Créer une police n'est pas aussi simple que 1-2-3.

"Créer une bonne police utilisable demandera de la pratique et de nombreuses heures," Finck a déclaré dans l'article. "Ce n'est pas" difficile "si vous aimez le faire, et les chances sont, vous saurez tout de suite si c'est quelque chose que vous aimez faire. Vous ferez probablement des révisions, incorporerez éventuellement les commentaires d’autres utilisateurs, testerez dans diverses circonstances (applications différentes / imprimées / Web), etc.

Si créer votre propre police de caractères n'est peut-être pas votre tasse de thé, envisagez de télécharger l'une des créations de Finck. Il est designer professionnel depuis 2005 et avait plusieurs polices de caractères disponibles sur Creative Market.

Juste pour le fun

Enfin, une représentation visuelle de ce à quoi les langages de programmation se sentent. (Et un très précis à cela, pour moi.)

Bjorn Tipling jeta un coup d'œil et dessina une petite séquence de fonds dans "Si les langages de programmation étaient des armes." La publication passe en revue chaque langage de programmation et son rapport. Les comparaisons sont assez intelligentes et relatables.

"C ++ est un ensemble de nunchuks, puissant et impressionnant lorsqu'il est manipulé, mais il vous faut de nombreuses années de peine à maîtriser et vous souhaiteriez probablement utiliser autre chose," il écrit. En outre: "JavaScript est une épée sans poignée."

Assurez-vous d'aller prendre une lecture. C'est très amusant et peut-être même une bonne reprise en fin d'après-midi.