Adobe Adobe Originals About the foundry The Adobe Originals program started in 1989 as an in-house type foundry at Adobe, brought together to create original typefaces of exemplary design quality, technical fidelity, and aesthetic longevity. Today the Type team’s mission is to conduct original research and development for type at Adobe, making sophisticated and even experimental typefaces that explore the possibilities of design and technology. Typefaces released as Adobe Originals — fully-featured families and smaller “Concept” projects alike — are the result of years of work and study, regarded as industry standards for the ambition and quality of their development. Visit the Adobe Originals website Meet Adobe Type The in-house type foundry at Adobe Enter your own text... ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 ¿ ? 50px Featured Name Newest Introducing Typekit Marketplace Introducing Typekit Marketplace Find and buy great fonts from some of the biggest names in the type world. Learn more Browse Fonts
Beautiful web type — the best typefaces from the Google web fonts directory Lucius Annaeus Seneca60 AD Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. Introduction à Canvas Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de grandes avancées pour rendre ce média attractif : audio, vidéo et Canvas pour disposer de fonctionnalités de dessin en 2D et 3D dans le navigateur. L'élément qui nous intéresse ici est <canvas>. Il s'agit d'un espace de pixels initialement transparents, armés de JavaScript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu'aux animations et jeux vidéo. Flash est-il mort ? De nombreux parallèles avec la technologie Flash ont été réalisés et diffusés. Voici quelques avantages de Canvas : De quels outils dispose-t-on ? L'inconvénient encore actuel de Canvas est que ses usages sont si variés et modulaires (dépendant de librairies, d'images chargées, d'interactions) qu'il n'existe pas d'outil miracle ou d'IDE (Environnement de Développement Intégré) pour produire le code nécessaire sans devoir toucher directement au code JavaScript.
8 gratuit Adobe Icons produit | Télécharger PSD gratuitement Best 20 webfonts from Google Web Fonts and @font-face embedding At the moment there are several ways to use non-system fonts on a website. We will focus on the two least complicated, least expensive systems, Google Web Fonts and the @font-face rule. Fear not, we have not ruled out other paid methods such as Typekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK or Fontspring for future posts as they certainly offer high quality typefaces and deserve to be considered. Basically, there are two implementation models: 1. 2. Web font embedding services Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. Implementation It really is quick and simple: 1. 2. 3. Here you can consult a extended manual for styles, script subsets, and using multiple fonts. Top recommended fonts from Google Web Fonts You will find many unfavorable reviews about the quality of GWF’s fonts and the amateur nature of many typefaces. Open Sans Josefin Slab Arvo Lato Vollkorn Abril Fatface Ubuntu PT Sans + PT Serif Old Standard TT Droid Sans
Les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé. Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. Anatomie d'une grille Elle sert d'armature pour organiser la page et son contenu. On obtient alors une page plus lisible et plus homogène.
Intégrer les réseaux sociaux sur son blog 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. Des boutons sociaux pour son blog Un blog sans réseaux sociaux, c’est comme une voiture sans roues : ça roule quand même un peu moins bien. Si je regarde mes résultats du mois d’avril, je vois que 24% de mon trafic vient des réseaux sociaux tels que Facebook, Twitter, Pinterest, et 44% vient de Hellocoton, que je considère comme un réseau social (je dis ça car ce n’est pas le cas pour Google Analytics). D’où l’importance d’avoir des profils sur les réseaux sociaux les plus connus, et de les intégrer sur son blog, de 2 manières : Faciliter le partage sur les réseaux sociaux Tout va très vite sur Internet. Un lien vers ses pages de réseaux sociaux
Nice Web Type Une feuille de styles de base pour bien démarrer vos projets Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet. Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. Quels objectifs? Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux: Gommer certaines différences entre les styles par défaut des navigateurs. Notre feuille de styles de base Le code CSS suivant constitue la partie "reset" de la feuille de styles que nous utilisons chez Alsacréations pour nos projets professionnels. L'ensemble de ce projet de "framework CSS" minimaliste se nomme KNACSS est est disponible en libre téléchargement. Rappel : n'employez pas ce reset CSS sans avoir parcouru au minimum les indications laissées dans le code complet commenté. Où placer ces styles? Bonus
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. Je suis sûr que pour certains, vous sautez directement sur votre logiciel de PAO favori (Photoshop, Illustrator ou encore GIMP) après avoir récupéré les besoins du client. Vous venez de griller une étape ! Attention là encore je ne parle pas de couleurs et vous allez me dire "Dur d'imaginer des éléments en noir et blanc alors que nous vivons dans un monde où les couleurs n'ont jamais eu autant de place"... 2- Le web évolue et les clients aussi ! 1) Le zoning Source: www.youtube.com avec Wirefy 2) Le mockup . . . . .
CSS Regions Module Level 1 Abstract The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions, fragmented as defined in [CSS3-BREAK]. This module also defines CSSOM to expose both the inputs and outputs of this fragmentation. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction This section is non-normative. The core concept behind CSS Regions is the ability to say, "Display this content (a named flow) over there (a region chain)." <article> ...some content... <article> ...some content... Note