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 ).
La Typographie #4 Place à l'animation et au Motion Design ! - typographie Voici le 4eme numéro de notre dossier sur la typographie, on commence à avoir vu en grande partie ce qui compose une police. Mais il nous reste maintenant à s'intéresser à son utilisation en animation, dans des clips, teasers, etc. On sait que la typographie fait partie intégrante de tout projet créatif qu'il soit un logotype, une affiche, un visuel, un site internet mais également une vidéo ou une animation. Dans cette article nous allons essayer de faire un tour rapide sur son utilisation dans les teasers, clips musicaux, sur les sites web, mais également dans des livres ! En quelques mots je dirais que c'est l'art de créer une animation, avec comme seul élément principal "la typographie", ensuite c'est un jeu de mouvements, de compositions et de constructions avec les caractères. La déclaration des droits de l’homme Intelligent Design Petite animation bien réalisée qui explique comment créer un design réfléchi et qui fonctionne, réalisé par Chrisitian Bramsiepe. Hocus pocus - Hip hop
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
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
Les codes de la Typographie #2 Histoire et Familles - typographie Voici le deuxième volume de notre dossier sur "La Typographie", après avoir vu "La structure et le vocabulaire de la lettre" dans le premier numéro, aujourd'hui nous allons nous intéresser à son histoire et son évolution. Le terme "typographie" est arrivé avec la naissance de l'imprimerie vers 1440, avec la technique d'impression. On disposait des caractères mobiles (en plomb) pour former des mots et des phrases. Celui-ci à fait connaitre un essor à la typographie, la création et l'utilisation de celle-ci se fait beaucoup plus facilement. La typographie nous aide en tant que graphiste à connoter et donner des valeurs à nos projets quels qu'ils soient, elle fait partie intégrante de notre métier. Afin de mieux appréhender la richesse offerte par les différents caractères, des typographes ont tenté de regrouper les caractères présentant des caractéristiques graphiques similaires en familles. Les Humanes (Vénitiennes Old Style) Les Garaldes Les Réales Les Didones Les Mécanes (Égyptienne)
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
10 Excellent New Free Fonts Here at WDL, we know how important it is for our readers to have as many good resources as possible in their design library. That’s why we do our best to gather what is new out there and deliver it to you. So today we have a new round of free fonts to give you plenty of typography options for your upcoming designs. Enjoy! Nexa Maven Pro Corki Mission Script Balls Family Bouwen Pixa Type Family Frontage NeoDeco Signika About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 892 shares 10 Best New Free Fonts We’ve been on the prowl for some new free fonts to share with you. Read More 1136 shares 9 Free & Useful Fonts for your Designs Whether it’s PSD’s or icons, we love finding high quality free files and sharing them with our readers.
Signification des couleurs dans les sites web La façon dont les couleurs influencent notre état d’âme, notre moral et notre corps est une chose vraiment passionnante. Le sujet du billet d’aujourd’hui concerne donc notre perception des couleurs dans le design web et de la manière elles sont utilisées par différentes compagnies dans leur site Internet. « Le billet suivant est une traduction d’un article paru sur le site web de 1stwebdesigner.com écrit par Anastasia Miles ». À la base, les couleurs sont divisées en 2 catégories. Les couleurs situées dans la zone rouge (sur le dessein à gauche) sont les couleurs chaudes (rouge, orange, jaune) et les couleurs situées dans la zone bleue sont les couleurs froides (bleu, mauve, vert). Dans les temps anciens, les gens croyaient que les couleurs pouvaient guérir de différentes maladies. Voici quelques analyses de quelques sites web de grandes marques connues à travers le monde. 1. 2. Habituellement, McDonalds utilise le jaune et le rouge (suscite l’excitation chez les enfants). 3. 4. 5.
Prototype et style tile Retours sur un processus de webdesign tout nouveau pour moi Avec la multiplication des tailles d’appareils (tablettes, TV connectées, smartphones, phablette, Google Glass, etc.), des outils de design (Photoshop, Fireworks, Sketch, etc.) et d’intégration (Sass, LESS, Grunt, etc.), nos métiers de webdesigner n’ont jamais été aussi riches et complexes qu’aujourd’hui. Une maquette statique, quelque ce soit son format ou l’outil avec laquelle elle a été générée, n’est qu’une étape pour arriver à un produit final qui sera le site web/application dont les utilisateurs pourront se servir. J’ai eu la chance lors d’un projet avec un client en freelance de pouvoir tester l’utilisation des Style Tiles combinés à un prototype fonctionnel du site. Les classiques : prise de contact, brief créatif et wireframe. Le projet a commencé comme n’importe quel projet « classique » : une première prise de contact avec le client pour définir les besoins. Le prototype fonctionnel Les Style Tiles et illustrations
Typography in Mobile Design: Important Aspects and Examples What makes mobile typography special is the restrictive nature of mobile screens; they are small and used in brightly lit areas so that it is difficult to see anything. Therefore, when it comes to typography for mobile devices you have to be very careful about how you go about it. Most people would agree that there are three big components that help making mobile typography great: size, contrast and spacing. Readability Readability is defined as the amount of effort a user has to put in, in order to read and understand text. This is a very important usability issue that should never be underrated as text is the number one way in which information is communicated online – by a big run. Size If a user cannot read what you are displaying because the text is too small, it’s a very big problem. Contrast Just like a blue text on a red background is a no-no on a typical website’s design, it too is a no-no on mobile devices. Spacing Some great examples Blog Bamboo Responsive Mobile Landing Page Mooday
[WEBDESIGN] Comment bien choisir ses couleurs pour créer un site Vous êtes nombreux à créer des sites internet, ou des supports de communications avec des choix de couleurs judicieux. Mais nous ne sommes pas tous experts, et certains ne savent pas comment allier les couleurs entre elles. Nous allons voir quelques exemples qui seront illustrés à l’aide d’un cercle chromatique. Nous allons également voir comment fonctionnent les couleurs. Les couleurs primaires sont les couleurs principales, toutes les autres couleurs découlent de celles-ci. Elles sont le rouge (Magenta), le bleu (cyan) et le jaune. Les couleurs secondaires, appelées également couleurs binaires sont un mélange direct des couleurs primaires. Les couleurs tertiaires également appelés couleurs intermédiaires sont réaliser grâce au mélange d’une couleur primaire et d’une couleur secondaire. Les couleurs complémentaires sont la base de la création d’une charte graphique, on ne peut pas, ou alors avec beaucoup de mal créer une charte avec des couleurs qui ne s’accordent pas.
TODO page Le magazine de la NBA Très jolies couvertures typo pour le magazine officiel de la NBA en Italie :-) Plus ici