La gestion de projet a ses aléas, la gestion de clientèle ses récurrences
Causes évidentes, effets élémentaires
Gérer un projet peut s’avérer extrêmement difficile, dans la réalité. En théorie, un certain nombre de méthodes et autres documents destinés à cadrer votre projet, foisonnent ci et là, dont l’objet est de vous faire tenir les rennes d’une embarcation créative et productive, vouée aux sommets. Oui mais voilà, dans la réalité, encore une fois, les clients (alias les commanditaires) ne se laissent pas si facilement que ça passer la bague au doigt (je sais, j’ai une vision assez radicale du mariage) et c’est le bébé qui trinque!
1. Au début, tout est génial: Le projet emballe tout le monde et tout le monde il est content de se lancer sur la grande vague de la réussite.
2. Le client vous montre son site, vous riez ensemble de cette horreur que vous allez glorieusement virer des tabloïds de la virtualité.
3. Vous re-designez et développez le site, le client bave de satisfaction et vous… (censuré)
4. Le client se sent d’un coup petit et a un incompressible besoin de se donner plus de contenance: Quelques changements mineurs s’imposeront alors…
5. Changements mineurs, deviendront majeurs.
6. Le client fait appel à des tiers, glorieux inconsistants en matière de Webdesign, qui en rajoutent (malgré eux?) une bonne couche…
7. Euh là, vous pensez à vous suicider ou au mieux, changer de métier.
8. Vous n’êtes plus aussi génial. Vous êtes un curseur de souris radio-commandé par votre client.
9. Frankeinstein est bel et bien re-né. Vous êtes presque-mort.
Causes évidentes, effets élémentaires (suite et fin)
Voilà, vous connaissez maintenant la première cause de mortalité chez les webdesigners et autres concepteurs numériques, en France et ailleurs. Il ne nous reste plus qu’à vous inviter à ne pas signer notre pétition dont l’objet n’est pas de sauver les créatifs et autres concepteurs en détresse. Cordialement. Très.
Tout le monde, y-compris papy (et son chien) semble avoir un site Internet aujourd’hui. Le Web devient de plus en plus bondé chaque jour, avec littéralement des douzaines et des douzaines de sites ajoutés au moment-même ou vous lisez cet article. Il devient logiquement de plus en plus difficile de se faire remarquer, de se distinguer, dans cette masse grossissante (et grossissante) …
« Heureusement » pour nous autres, concepteurs, tout le monde ne semble pas comprendre ce qui fait la richesse de la conception Web, du Webdesign. Soit. Le Webdesign est, dans une large mesure, un processus créatif et peut donc plus être assimilé à une science qu’à un art, de ce point de vue. Mais parce qu’il est intrinsèquement un support de présentation, certaines règles (ou tout du moins certains principes) s’appliquent. En suivant quelques conseils simples, toute personne devrait être en mesure de créer un design agréable, visuellement, et faire un pas de plus vers la gloire. Bon, ce n’est pas si simple, c’est vrai et le talent et l’expérience ont leur importance. Mais n’importe qui peut transformer sa page d’accueil de manière à ce que celle-ci claque un peu plus, en quelques minutes.
La question est donc: Qu’est-ce qui rend bien, qu’est-ce qui est, joli. Qu’est-ce qui claque? Ce n’est pas Flash. Ce n’est pas pour dire que Flash n’a aucun mérite, mais Flash seul, ne fait pas une bonne conception, certains sites Flash, très méchants, ornent la toile en ce moment même. Aussi, il ne faut pas être un grand illustrateur pour faire des dessins « attrayants ». Regardez plutôt la conception Web comme une symbiose des différents éléments. Pas un seul élément ne compte plus que les autres, c’est plutôt la somme de ces éléments, qui fera toute la différence.
Ces éléments sont les 7 principes-clés, qui font qu’un Design claque (ou pas):
Balance
Grille
Couleur
Graphiques
Typographie
Espaces vides
Connexion
1. Balance
La balance, l’équilibre est tout ce qu’il y a à assurer, pour que votre dessin ne bascule pas d’un côté ou de l’autre.
Exemple
Regardez l’image du chien. Cet exemple est tiré de The Principles of Beautiful Web Design par Jason Beaird. Jason Beaird souligne comment la croix à droite de l’image, compense le poids visuel que le chien pose sur la gauche. C’est un petit détail, mais non-négligeable. Voyez vous-même en cachant la croix avec votre main.
C’est ce que nous appelons l’équilibre asymétrique. Si vous ne faites pas attention à comment vous fixez les choses, le projet deviendra vite déséquilibré. Vous pouvez manipuler le poids visuel d’un modèle à bien des égards, comme la couleur, la taille et l’ajout ou la suppression d’éléments. Si vous deviez faire la croix, disons, en orange vif, elle deviendrait plus lourde et peut-être et inverserait probablement le déséquilibre vers la droite. Atteindre l’équilibre asymétrique est une question particulièrement délicate.
Voici ci-dessous, un autre exemple d’équilibre symétrique, celui-ci par The First Twenty. Bien que l’en-tête graphique soit asymétriquement équilibré (Pouvez-vous trouver comment c’est fait?), Le reste de la conception du bas, propose des colonnes symétriques. L’équilibre asymétrique pourrait compliquer les choses, mais il tend à rendre le design plus ludique.
Vous constaterez que chaque dessin, pour lequel vous avez diagnostiqué un « bon teint » (une dessin qui « claque »!), a une balance bien construite… Vous risquez de faire le même type de constat pour les points suivants, alors prenez le temps de scroller un peu du haut vers le bas et voyez un peu ce qui s’y claque…
2. Grille
La notion de grille est étroitement liée à celle d’équilibre. Les grilles sont une série de règles horizontales et verticales, qui vous aident à «compartimenter» un dessin. Pensez colonnes. Les colonnes améliorent la lisibilité, rendent le contenu d’une page, plus facile à absorber. L’espacement et l’utilisation de la règle des tiers (ou Golden Ratio) rend tout, plus facile pour l’œil.
La règle des tiers et Golden Ratio comptent pour expliquer pourquoi les sidebars, par exemple, sont habituellement à environ un tiers de la largeur de la page et pourquoi la section principale du contenu est approximativement égale à la largeur de la conception, divisé par 1,62 (=Phi). Nous n’allons pas trop entrer dans le détail, mais cela semble se vérifier dans la pratique. C’est aussi pourquoi le « sujet » dans photographies pro, est habituellement placé, non pas au milieu, mais à l’intersection d’un imaginaire de neuf carrés de grille (trois par trois, avec deux horizontales et deux lignes verticales).
Exemple
La grille se prête particulièrement bien à la conception minimaliste. 5 Thirty One par Derek Punsalan montre pourquoi:
Bien que la conception ne soit pas visuellement impressionnante en soi, la structuration stricte, claire, des éléments, est facile pour l’œil. La colonne de gauche est à peu près de deux fois la taille de la barre de droite, ce qui est tout simplement bien et c’est une chose à laquelle penser lors de la création de vos propres dessins.
Couleur
Si vous changiez la base rouge sur la première image, à la chaux verte? Ça claquerait? Très probablement pas. Car elle n’appartient pas à la même palette de couleurs (et vert-chaux n’est pas la couleur la plus facile à travailler). Des sites Internet tels que ColourLovers existent pour une raison. Vous ne pouvez pas prendre, que les couleurs de votre style-Rambo, aux pistolets flamboyants. Certaines couleurs vont bien ensemble, d’autres pas. De nombreuses théories sur les couleurs et leurs combinaisons existent, y compris les conventions sur le monochrome et les les régimes contrastés, mais beaucoup ramènent au bon sens et à avoir une idée claire de sa création.
Découvrez par vous-même, ce qui fonctionne bien ensemble. Imprégnez-vous d’autant de conceptions de site Web, que possible, telles que celles présentées sur l’un des nombreux sites vitrine CSS (comme BestWebGallery), pour obtenir une idée de la façon dont les couleurs interagissent, les unes avec les autres. Choisissez deux ou trois couleurs de base, au plus, pour votre design, et ensuite utilisez des teintes (qui seront plus légères, mélangées avec du blanc) et des ombres (qui seront plus sombres, mêlées de noir) de ces couleurs de base, pour élargir la palette. Si nécessaire.
Le choix de couleursagréables est aussi important que le choix de la bonnecouleur (c’est à dire les bonnes couleurs pour l’emploi). Chaque couleur envoie un message, et c’est à vous de trouver le bon message, en fonction de votre projet ou de votre dessin.
Exemple
Le site de Bence Kucsan – Quommunication – a son propre style de jeu de couleurs . C’est essentiellement monochromatique (teintes et nuances d’une couleur unique) et achromatiques (noir et blanc), avec une couleur (rouge) pour se démarquer:
Le noir et blanc, très « chic » transmet un ton très professionnel, tandis que le rouge apporte le piment qui fait que certains éléments ressortent du lot et empêchent la conception d’être terne. Bien sûr, plus qu’un simple rouge rend le design intéressant. Soit dit en passant, une entreprise en particulier, a popularisé ce style…
En parlant de couleur, WebDesigner Wall de Nick La, est du bonheur pur:
Toutes ces pastels tendres, font biller cette conception. À première vue, le choix des couleurs peut paraître arbitraire, à y regarder attentivement, vous remarquerez une palette de couleur strictement définie, nécessaire pour s’assurer que tous les éléments vont bien ensemble. Le site web, et surtout son arrière-plan, montre également une bonne combinaison de couleurs et de graphiques, ce qui nous amène au point suivant…
4. Graphismes
Okay, un superbe design, n’a pas besoin de fantaisie. Mais des graphismes pauvres seront certainement mauvais pour le design d’ensemble. Le graphisme et les graphiques ajoutent au message visuel. Des sites Web comme WebDesigner Wall sont composées d’illustrations impressionnantes, tandis que d’autres sont sous-estimés.
Exemple
Tim Van Damme utilise seulement une poignée de graphiques sur son site Voltar Max, mais il les met en œuvre avec le plus grand soin. Une image de fond non-intrusive et une couronne sophistiquée sont deux de ces graphiques. Visuellement, ils ne sont pas trop impressionnants, mais ils ajoutent à l’aspect et la convivialité du site, et nulle part on est pas à sa place.
Depuis quelques temps déjà, Max Voltar a opté pour une conception différente de celle indiquée ci-dessus. Mais pour les deux mois que celle-ci était en ligne, elle est restée extrêmement intéressante.
Komodo Graphics Media – Rogie King – est beaucoup plus lourd, d’une exécution parfaite, tant d’un point de vue technique que thématique.
Vous n’êtes peut-être pas un grand illustrateur ou photographe professionnel, mais cela ne signifie pas que vous ne puissiez pas mettre beaucoup de graphiques sur votre site. Certaines techniques de base avec Photoshop, quelques images en stock et un peu de bon goût seront tout ce dont vous aurez besoin. Essayez d’utiliser des graphiques qui vont ensemble, et assurez-vous qu’ils incarnent le style que vous aspirez. Nous ne sommes pas tous doués des mêmes capacités naturelles cependant… Parfois vous aurez juste à choisir le style qui vous convient le mieux (comme un style propre, si vous n’êtes pas le plus grand des illustrateurs).
Typographie
L’art de la typographie est un sujet délicat, parce qu’il englobe de nombreux éléments. Même si il peut être considéré comme une branche du design, on peut passer une vie entière à maîtriser l’ensemble de ses aspects. Ce n’est pas le lieu ici, pour fournir une référence typographique complète, et nous allons limiter notre discussion à ce qui vous serait bénéfique, à court terme.
La typographie web est handicapée, par rapport à l’impression typographique. La plus grande différence, c’est notre manque de maîtrise complète, de l’apparence des caractères sur le Web, en raison de leur caractère dynamique. De toute évidence, le rendu dynamique a ses points forts, mais les concepteurs Web ont peu de contrôle sur les résultats, au moins pour l’instant. Les polices manquantes sur l’ordinateur de l’utilisateur, les différences entre les navigateurs et entre les navigateurs et la plateforme de rendu, le soutien général subpar en CSS font de la typographie pour le web, une tâche ardue, sinon frustrante. Mais pendant que nous attendons le CSS 3, pour que la typographie Web puisse enfin atteindre son plein potentiel, nous avons les moyens, aujourd’hui, de faire des choses intéressantes et, plus important encore, jolies.
Polices
Il existe plusieurs façons, assez faciles, d’améliorer sensiblement la typographie de votre site Web, dont trois, que nous allons présenter ici. L’une d’elle est appelée, en anglais, font stacks.
Les font stacks (piles de polices) ne sont que des styles CSS de base. Ils vous permettent de définir l’ordre dans lequel les polices doivent être choisis. Pour être précis, nous parlons de caractères ici, pas de polices. Pour un bon résumé sur ce point, merci de vous référer à Typeface Jon Tan’s! = Police.
body (font-family: « Helvetica », Helvetica, Arial, sans-serif;)
La propriété ci-dessus, donnera au corps du texte la police de caractères «Helvetica Neue. » Toutefois, cela exige que l’ordinateur de l’utilisateur, ait d’installé, ce type de caractère. Les Macs d’aujourd’hui ont tous Helvetica (Neue) pré-installée, mais la plupart des machines Windows non.
La beauté des piles de polices (font stacks, quelqu’un connait le terme francisé?) est que vous pouvez définir le «repli», ce qui signifie que chaque fois qu’une police de caractères définie est manquante, le navigateur cherche tout simplement le prochain en ligne. Bien sûr, cela signifie que le design ne sera pas exactement identique pour tous, et en tant que tel, nous perdons un certain contrôle encore une fois. Mais pour ceux qui ne veulent pas avoir recours à une autre solution (comme le remplacement de l’image), c’est ce que le CSS propose de mieux en ce moment (jusqu’au jour où nous pourrons utiliser ces aspects plus confortablement @ font-face).
Wilson Miner utilise la police que nous avons cité ci-dessus. Helvetica Neue est une amélioration de Helvetica. Et tandis qu’Arial est installé sur presque tous les ordinateurs (au moins sur les machines Windows et Mac) et est donc un choix populaire pour le Web, la plupart des concepteurs préfèrent Helvetica à Arial. De cette façon, vous obtenez le meilleur des deux mondes: Helvetica pour ceux qui l’ont et Arial au cas ou Helvetica est indisponible.
Jon Tan utilise une autre police et un autre groupe de polices:
body (font-family: Baskerville, « Palatino Linotype », « Times New Roman », serif;)
Seul un nombre relativement restreint de visiteurs pourront voir les en-têtes dans Baskerville, mais ce n’est pas un problème. Il donne à la conception un petit supplément de caractère, tout en évitant de blesser ceux qui ne l’ont pas. Encore une fois, les piles de police (font stacks) ne sont pas une solution parfaite, mais elles vous donnent un avantage.
Mesure et Leading
La mesure est la longueur des lignes, et l’attaque est la hauteur (ou l’espacement vertical) des lignes. En CSS, la mesure peut être contrôlée en définissant une largeur de boîte-contenant (par exemple l’élément paragraphe). La lisibilité en est affectée. Si les lignes sont trop courtes ou trop longues, les utilisateurs ne seront pas à l’aise pour lire le contenu, on le voit souvent avec des mises en page fluides. Entre 40 et 80 caractères par ligne semble idéal.
Le premier plan peut être augmenté (ou diminué, si vous le voulez vraiment) en définissant la line-height, une propriété CSS. Généralement, une hauteur de 1,5 fonctionne en ligne, pour les paragraphes. Cela signifie que lorsque la taille du texte est de 12 pixels, la hauteur de la ligne est de 18 pixels (12 × 1,5), ce qui laisse au texte, un peu d’espace propice à une certaine notion de respiration.
Citations et Balles
Un troisième moyen, pour améliorer la lisibilité, est la pendaison (l’accrochage, l’ajustement en fait) des citations et des balles. Plutôt que de laisser les listes à puces telles quelles et des citations avec un alignement par défaut, harmoniser ceux-ci avec le reste du texte, horizontalement.
Nous avons d’ajouté une ligne rouge, pour souligner à quel point l’ensemble du texte a été aligné horizontalement. En fixant simplement le padding-left (propriété CSS) de la liste à puces à 0, vous pouvez obtenir le même résultat.
Retirer la pendaison pour les citations, n’est par ailleurs pas aussi simple. La plupart des concepteurs ont recours à une image de fond, de guillemets, alignent en conséquence, comme cela se fait chez Matthew Buchanan:
La marque de cotation suspendue, ici, ne perturbe pas le flux de texte. C’est un détail souvent négligé mais qui mérite d’être considéré.
Règles Print qui ne s’appliquent pas
Print (impression, le monde du papier) et Web sont différents. Cela semble assez évident, mais beaucoup de gens les traitent comme s’ils étaient les mêmes. L’impression est fixe, et le Web est dynamique. Avoir un contrôle complet sur la manière dans votre conception de site Web, sera, pour tout le monde, impossible.
Rythme vertical, texte justifié (muni de césure et sans rivières) et layouts multi-colonnes, sont quelques-unes des caractéristiques du Print qui sont (presque) impossibles sur le Web. Aussi, avons-nous beaucoup à espérer du CSS 3. CSS 3 ne sera probablement pas, cependant, un alpha et l’oméga de solution, et il faudra probablement encore quelques années, avant que nous puissions pleinement profiter de celui-ci-ci. Nous avons tout simplement à accepter ces différences pour l’instant: ne regardez pas le Web comme une version en ligne de l’impression, mais utilisez plutôt le potentiel intrinsèque du Web, à son maximum.
Un mot sur le remplacement d’image
Et quant au remplacement d’image (la technique de remplacement des polices avec des images)? Nous avons parlé de piles de police (font stacks), mais ne sont-elles pas inférieures au remplacement d’image? Eh bien, cela dépend de ce que vous pensez être le plus important: être capable d’afficher les polices que vous souhaitez ou avoir un contenu dynamique, accessible et ami des moteurs de recherche… Certaines techniques de remplacement d’image sont devenues assez avancées, mais elles ne sont toujours pas aussi souples que le texte brut. Le remplacement de l’image se prête bien aux en-têtes et aux extraits, mais elle ne sera pas une bonne solution, pour le corps du texte.
6. Espace vide
Les espaces vides (ou blancs), ou l’espace négatif, a à voir avec ce qui n’est pas là. Comme la mesure et le leading, l’espace blanc fournit au texte, un espace pour respirer. Vous pouvez faire des éléments se détacher les uns des autres, en ajoutant un espace blanc autour d’eux. Pour assurer la lisibilité, assurez-vous que les paragraphes ont un rembourrage suffisant.
Les pubs de parfum – ou toute annonce pour produit de luxe, d’ailleurs – sont connues pour leur utilisation de l’espace blanc … et une police serif pour faire bonne mesure.
Exemple
La capture d’écran ci-dessus, est celle du propre site de l’auteur, de l’article source de cet article… Shift (px). La conception repose largement sur la typographie et l’espace blanc. L’espace blanc fait probablement ,environ 50% de la page. L’espace blanc est un des plus faciles. Et le plus efficace pour un design agréable visuellement et lisible.
L’espace blanc ajoute beaucoup de classe au dessin. N’ayez pas peur de laisser des trous ouverts, même les plus béants. Les designers inexpérimentés sont tentés de mettre quelque chose, dans chaque petit coin. La conception consiste à communiquer un message. Les éléments de conception, par conséquent, devraient appuyer ce message, pas ajouter du bruit à sa création.
Un autre bon exemple du genre (avec beaucoup d’espaces vides):
Astheria de Kyle Meyer, que trop n’est pas forcément le bienvenu, pour un design agréable. Certaines personnes peuvent confondre «minimaliste» et «simpliste». Mais un tel style n’est ni simple ni facile.
7. Connexion
« Connection » est un terme un peu fabriqué pour le coup, mais il semble pouvoir illustrer ce dont nous allons parler. La connection se réfère ici à une conception Web, qui possède à la fois l’unité et la cohérence. Ces deux attributs démontrent le professionnalisme d’un dessin (et donc de son concepteur). Un dessin ou modèle doit être cohérent dans son utilisation des couleurs, dans sa gamme de polices, avec ses icônes, etc. Un dessin peut avoir fière allure et continuer de souffrir d’incohérences.
Lorsqu’un dessin ou modèle est inconsistant, son unité peut perdre l’utilisateur. L’unité est légèrement différente de la cohérence. L’unité se réfère à la façon dont les différents éléments dans un design interagissent et s’imbriquent. Par exemple, est-ce que les couleurs et les graphiques sont harmonisés? La cohérence, d’autre part, se trouve entre les pages d’un dessin.
L’unité est peut-être la plus importante des deux. Sans unité, avoir un bon design est dur. L’incohérence, cependant, peut donner un air de « bâclé », mais mais ne pas faire de la conception un échec total.
Parmi les sept principes visés dans cet article, la connexion est le plus important. La connexion a à voir avec la façon dont tous les éléments sont réunis: l’équilibre, la grille, les couleurs, le graphisme, la typo et l’espace blanc. C’est en quelque sorte le ciment qui lie le tout. Sans cette colle, la conception tombe en morceaux. Vous pourriez avoir une typo magnifique et un brillant et méticuleux choix de la palette de couleurs, mais si les graphiques sont affreux ou tout simplement ne correspondent pas, ou si tout est entassé sans idée, la conception échouera.
Exemple
Nous avons loué Nick La tôt, en raison de ses beaux graphiques, mais il est aussi un bon exemple de connexion. Lorsque vous regardez de près les graphismes et le style en général, tout a été un dessiné à la main, à l’aquarelle, orienté vers: les images des articles, les images de fond aquarellées, les dessins à la main, les gribouillis et les icônes, le style du scrutin, et ainsi de suite. Le souci du détail rend ce design excellent. Non?
Une bonne conception Web n’est pas limitée aux sept principes clés abordés ici. Des aspects comme l’accessibilité, la lisibilité et la convivialité jouent un rôle non-négligeable par exemple.
C’est la raison pour laquelle le Webdesign est si difficile. Se mouiller les pieds dans la conception est facile, surtout aujourd’hui, avec tant de systèmes de gestion de contenu, outils de blogs et de thèmes facilement accessibles. Mais la maîtrise de toutes les facettes de la conception Web prend du temps et nécessite du talent (qu’est-ce que le talent?). Pouvoir faire de jolis dessins n’est qu’une petite facette, mais une étape peut-être importante.
L’auteur
Juul Coolen est un étudiant en informatique vivant aux Pays-Bas, amoureux du design. Outre l’élaboration et la conception pour le Web, il bloggue à l’occasion sur son site Internet personnel Shift (PX) et « tweets » (gazouille) sur Twitter bien-sûr >> @ juulcoolen.
Traduit et interprété, de l’anglais au français, par N Stefen MASSAMBA-DEBAT – PRO MESS
WordPress est un logiciel pointu, qui peut gérer du contenu, des sites et des blogs. En raison du fait qu’il soit open source, beaucoup disent que ce n’est pas le meilleur choix pour un projet sérieux, en raison de l’insécurité, ou de la grippe H1N1, ou d’une autre quelconque autre absurdité. Pour prouver que ces derniers ont tort et vous montrer que WordPress peut être utilisé, pour des projets sérieux, à grande échelle, Wpbeginner.com met en exergue certaines des marques les plus populaires, utilisant WordPress.
Ebay gère son blog officiel, avec WordPress. Ils l’ont conçu sur mesure et l’ont fait paraître flashy. Même s’il ne ressemble pas à l’idée que vous vous faites d’un blog, qui plus est un blog WordPress, il est bien réalisé avec WordPress.
Il y a probablement une bonne raison, pour que ces grandes marques soient sur WordPress et c’est probablement parce que WordPress tue! Ces marques vous donnent implicitement une autre bonne raison (ou pas) pour laquelle, vous pourriez choisir WordPress. Ça reste votre décision.
La plupart des gens qui ont conçu des sites Web ou des applications avec Photoshop, à un moment ou un autre, ont eu des problèmes en essayant de faire correspondre les couleurs dans les images, avec les couleurs générées par le HTML, le CSS ou le code quel qu’il soit. Cet article, proposé par Smashing Magazine, vise à résoudre ces problèmes une fois pour toutes.
La gestion des couleurs pour les faire correspondre sur plusieurs périphériques
Dans le monde de l’impression, la gestion des couleurs implique généralement l’étalonnage de votre flux de production, de votre scanner ou de votre appareil photo numérique, à l’écran de l’ordinateur et à des épreuves papier, pour la sortie de presse finale. Cela peut se révéler être tout un défi, surtout quand les dispositifs utilisent des espaces de couleurs différentes – Matching RVB et CMJN sont des dispositifs notoirement difficiles.
Lors de la conception ou l’édition, pour la télévision, le calibrage de l’écran d’édition principale et l’utilisation d’un moniteur de diffusion sont courantes; ces preuves en temps réel, de la façon dont l’image sera sur un téléviseur classique, au domicile d’un spectateur, sont relativement incontournables. Dans un tel scénario, la gestion des couleurs offre de nombreux avantages et elle est fortement recommandée.
Lors de la création Web et d’interface d’application, la situation est un peu différente. Le résultat final est le même appareil que vous utilisez pour créer l’oeuvre: un écran d’ordinateur (en mettant de côté pour l’instant les différences de gamma entre Windows, Mac OS X antérieures à 10.6 et l’iPhone, dont nous parlerons plus tard)
Il y a un hic, cependant. Même si vous créez l’interface web ou application sur le même appareil que le produit final, les couleurs vont disposer de sources diverses: les images (en général, PNG, GIF et JPEG), les balisages de style (CSS) et le code (JavaScript , HTML, Objective-C, etc.) … les faire tous marcher comme il faut peut s’avérer extrêmement délicat.
Le but
Lors de la conception du site Web ou de l’interface d’application, nous voulons être en parfaite adéquation avec les couleurs qui s’affichent à l’écran, dans Photoshop, et qui sont enregistrées dans des fichiers, avec ce qui est affiché dans d’autres applications, comme Firefox, Safari et le simulateur de l’iPhone. Non seulement nous voulons que les couleurs aient la même apparence, mais nous voulons que les valeurs réelles soient enregistrées, dans les fichiers, pour correspondre parfaitement à celles que nous avons défini dans Photoshop. Les couleurs ne doivent pas se déplacer ou sembler changer de quelque façon que ce soit, en aucune circonstance.
Pourquoi est-ce si difficile?
Photoshop applique sa gestion de la couleur, aux images affichées dans les fenêtres et pour les fichiers qu’il sauve. Ceci est une mauvaise chose, si vous travaillez exclusivement avec des images RVB pour le Web, ou sur des interfaces utilisateur à l’écran. Avec les paramètres par défaut de Photoshop, # FF0000 seront effectivement affichées comme # FB0018, et # BB95FF seront affichées comme # BA98FD. Les différences sont subtiles mais bel et bien là!
Comment le fonctionnement de Photoshop Diffère t-il de MAC OS X à Windows?
La gestion des couleurs de Mac OS X est appliquée à tout l’affichage, à la fin de la chaîne de traitement, après le tampon principal dans la RAM vidéo. Cela signifie que, bien que la gestion des couleurs soit appliquée, les logiciels utilitaires qui mesurent la couleur à l’écran (comme / Utilitaires / Colorimètre numérique) reporteront les mêmes valeurs que vous avez enregistré dans le dossier, ou inscrit en tant que votre code. Il semblerait que la gestion des couleurs dans Windows Vista et Windows 7 (Windows Color System) fonctionne de manière similaire.
La gestion de la couleur de Photoshop est appliquée uniquement à la portion d’image de ses fenêtres et aux fichiers qu’il sauve. Cette correction de couleur se passe quand Photoshop dessine l’image sur l’écran, de sorte que les logiciels utilitaires qui mesurent la couleur sur l’écran, signalent souvent des couleurs différentes de celles que vous avez spécifié. Il est intéressant de noter que la gestion des couleurs de Mac OS X est appliquée au dessus dessus de Photoshop.
La meilleure solution que qui puisse se trouver serait de désactiver la gestion de la couleur de Photoshop, pour les documents RVB, autant que possible. Faire des forces pour les couleurs RVB qui sont à l’écran et enregistrées dans le fichier, pour correspondre à la valeur de la couleur réelle. Si vous en avez besoin, pour calibrer votre moniteur pour le Web et le travail de conception d’appli, alors vous serez mieux servi par le changer au niveau des OS (systèmes d’exploitation).
Désactiver la gestion des couleurs utilisées, pour être assez plus à l’aise avec Photoshop CS2 et toutes les versions antérieures, mais cela exige désormais encore un peu plus de compétences…
Désactivation de Photoshop RGB Color Management
Ces instructions sont pour Photoshop CS4 sur Mac et Windows. La mise en place CS3 est très similaire. Les images des interfaces sont anglaises, ce qui vous rendra la tâche plus facile si votre version n’est pas en français.
Étape 1: Allez dans Édition → Paramètres couleur et définition de l’espace de travail pour RGB, pour moniteur RVB.
Étape 2: Ouvrez un document et allez dans Edition → Affecter le profil, puis attribuez-lui le travail RVB. Cela doit être fait pour chaque document unique que vous travaillez.
Étape 3: Assurer vous que pour Affichage → Preuve couleurs est désactivée.
Etape 4: Lorsque vous sauvegardez des fichiers avec « Enregistrer pour le Web & Périphériques », veiller à ce que « Convertir en sRGB » soit désactivé. Si vous enregistrez un fichier JPEG, désactivez aussi « Intégrer Profil de couleurs ».
Différence entre «Assigner Profil » et « Convertir profil »
Maintenant ,ce serait le bon moment pour parler de la différence entre « attribuer le profil » et « convertir en profil », de sorte que vous sachiez lequel utiliser plus tard.
Chaque document Photoshop contient un profil de couleur qui est distinct de la couleur réelle, des données stockées pour chaque pixel. Attribuer le profil, change simplement le profil dans le document, sans affecter l’une des données de couleur. Vous pouvez assigner un nouveau profil de couleurs à vos documents aussi souvent que vous le souhaitez, sans faire de dégât. L’attribution d’un nouveau profil peut changer la façon dont votre document s’affiche à l’écran, mais les données contenues dans le fichier resteront inchangées.
Convertir en profil est très différent. Non seulement cela affecte un profil de couleur pour le document, mais ça essaie de laisser paraître votre image sur le même sur l’écran. Ça le fait par traitement des données de couleur, dans le fichier, pour chaque pixel. La conversion à un nouveau profil est plus susceptible de préserver la couleur d’un document à l’écran, mais les données contenues dans le fichier seront modifiées pour toujours. A utiliser avec prudence.
Si vous reproduisez des couches d’un document Photoshop pour un autre, vous voudrez vous assurer qu’aux documents, aient été attribués un profil de couleur identique.
ILLUSTRATOR comme PHOTOSHOP
Si vous voulez des photos enregistrées dans Illustrator ou importées à partir d’Illustrator vers Photoshop, pour faire de même, suivez les étapes ci-dessous. Ces instructions sont pour Illustrator CS4 sur Mac et Windows. La mise en place d’Illustrator CS3 est très semblable.
Etape 1: Allez dans Édition → couleurs des réglages, et l’espace de travail pour RVB pour moniteur RVB.
Etape 2: Ouvrez le document et allez dans Edition → Affecter profil. Puis réglez-le en travail RVB. Cela doit être fait pour chaque document unique vous travaillez.
Étape 3: S’assurer que Affichage → Preuve couleurs est désactivé.
Étape 4: Lorsque vous sauvegardez des fichiers avec « Enregistrer pour le Web & Périphériques, veiller à ce que « Convertir en sRGB » soit désactivé. Si vous enregistrez un fichier JPEG, désactivez aussi « Intégrer Profil de couleurs ».
Gamma Différences
Windows utilise un gamma de 2,2 depuis son introduction. Mac OS X a utilisé un gamma de 1.8 pour toutes ses versions, sauf Snow Leopard (la dernière version), qui utilise du 2.2. Qu’est ce que cela signifie? Avant Snow Leopard, les pages Web étaient plus foncées sur Windows. Heureusement, les deux systèmes d’exploitation sont maintenant en phase, donc une page Web devrait être très similaire sur un Mac et un PC, qui utilise le même moniteur.
Les informations sur le gamma de l’iPhone sont un peu difficile à trouver, il est difficile de savoir si il est de 1,8 ou 2,2. C’est une raison de plus pour tester votre interface sur un iPhone.
Final Check pour iPhone UI
Le calibrage de votre iPhone ou de l’écran de l’iPod seront probablement différents de votre Mac, ou votre écran de PC. Vous importez souvent des images en plein écran de l’interface utilisateur, dans iPhoto et les synchronisez avec un iPhone, pour voir exactement comment l’interface finale va apparaître sur l’appareil (sous Windows, vous pouvez synchroniser des photos à l’aide d’iTunes). Cela vous donne une autre chance de faire des ajustements, avant de trancher des images ou de commettre quoi que ce soit au code.
Cet article (en anglais), explique comment gérer le problème de rendu, plus flou qu’il n’y paraît dans Photoshop.
Et en voici sa conclusion:
Si vous travaillez sur une interface utilisateur iPhone paysage que vous avez besoin de tester, enregistrer comme une image portrait ou le risque de voir une preview assez différente de ce que vous vouliez voir sera réel.
Astuce: Appuyez sur une touche, n’importe où sur l’écran, jusqu’à ce que l’élément de copie semble cesser, de la PPA Photos de rotation de l’image, lorsque vous faites pivoter le téléphone. Cela vous permet de visualiser votre paysage UI qui a été enregistré comme une image portrait en mode paysage.
Notes:Pour une raison étrange, l’application Photos sur l’iPhone n’affiche pas les images de paysage en 1:1. Au lieu de cela, elle les redimensionne ou elle les transfère à un sous-pixel près, en position, rendant les images plus floues. Pour éviter tout problème, toujours enregistrer des images en mode portrait (320 pixels de large par 480 pixels de haut) pour tester vos maquettes d’interface utilisateur (en savoir plus sur cette question – en anglais).
Sur Mac, les couleurs se déplaçant entre Photoshop et le code peuvent être rendues plus facilement maniables avec les déveloper Picker, Hex Color Picker et Colors (tous gratuits).
Conclusion
Maintenant, vous êtes en mesure de déplacer des images bitmap et vectorielles entre Photoshop et Illustrator, sans aucun décalage de couleur du tout, et en utilisant n’importe quelle méthode. Vous êtes également en mesure, de saisir une couleur, en utilisant le sélecteur de couleurs dans Photoshop, puis d’utilise la même valeur hexadécimale que la couleur dans votre code C CSS, HTML, JavaScript, Flash ou de l’objectif. Et il correspondra à vos images à la perfection. J’espère que cet article vous aura été utile. Si vous avez des questions, n’hésitez pas à demander dans les commentaires ci-dessous.
A propos de l’auteur
Marc Edwards (@ marcedwards) est le directeur et chef designer chez bjango (@ bjango), un développeur d’application iPhone.
Au FOWA Londres 2009, Bruce Lawson a donné une introduction au HTML 5 et comment il pourrait être utilisé à l’avenir.
Les 5 spécifications du HTML ont été, à l’origine, appelées « Applications Web 1.0″. La plupart de l’attention a été portée sur le balisage des éléments nouveaux, mais dans sa conférence, il (Bruce Lawson) porte un autre regard sur les applications de la SPEC, couvrant:
1. La dynamique des images et des graphiques avec en toile
2. L’élimination de la validation des formulaires (beaucoup avec WebForms 2.0)
3. Le stockage local pour sauver automatiquement vos données
4. La Géolocalisation
5. La Construction des barres d’outils et de menus.
Note du rédacteur (source Carsonified): Nous aborderons «Comment HTML 5 va changer complètement votre site Web App » à l’évènement The Future of Web Apps à Miami.
Vous pouvez voir directement la vidéo, visionner les diapositives, lire la transcription (merci @ joeloverton pour l’avoir fait! – en anglais), ou consulter les ressources de la démo dans l’exposé.
Nous vous proposons une explication en français, en bas de page. cdlt. PRO MESS
TRADUCTION & EXPLICATIONS Modeste et sélective explication de texte, en français, pour les internautes français
Bruce Lawson, qui travaille pour le groupe OPERA, nous propose donc sa vision (et non celle d’OPERA) d’HTML 5 et introduit son discours, par cet intitulé: HTML 5, le futur des applications web. Il nous explique qu’HTML5, sera bien cette fondation sur laquelle les applications web seront construites.
Voici ce que représentent à ses yeux les HTML 1,2,3 & 4:
Et voici ce que représente à ses yeux le HTML 5:
Selon l’auteur, la plupart des choses qu’apportent le HTML 5, sont des choses que nous faisons et avons déjà. Mais nous les faisons avec JavaScript, Flash ou autres… HTML 5 ne remplace pas le JavaScript, il fait plus que ça, il est à « propos » de JavaScript… Étendre le langage, afin de mieux soutenir les applications web, puisque c’est l’une des directions du Web et l’une des zones les moins bien servies par le langage HTML jusqu’ici. Ce code HTML, mis en concurrence directe avec d’autres technologies, pour des applications déployées sur le Web, notamment Flash et Silverlight. Beaucoup de grandes sociétés ont travaillé sur le projet: D‘Apple à Microsoft en passant par Opera et Google. Et le projet tendrait à aboutir ce mois-ci!
L’auteur évoque ensuite les canvas, ces immédiats modes graphiques, sans plugins.
Ces canvas sont supportés par la plupart des navigateurs, Safari, Firefox, Chrome… Mais qu’en est-il d’Internet Explorer?
Pas de problème, si vous intégrez une librairie JavaScript téléchargeable gratuitement. Si vous ne le faites pas, Les canvas fonctionneront, mais moins parfaitement, sur Internet Explorer.
Aujourd’hui, ces canvas ne sont pas « accessibles ». Les canvas sont comme des images ou des objets dont les informations ne sont pas traitables par les robots des moteurs de recherche ou quelque autre technologie. Même si l’on inclut un texte, ce texte n’est interprété que comme une image, une succession de pixels et n’aura jamais plus de sens.
Une solution alternative pour remédier en partie à ces problèmes peut être vue en la notion d’SVG. Ces graphiques vectoriels adaptables pourront au moins rendre le texte d’une image reconnaissable et les interpréter ensuite, leur rendre une accessibilité.
L’auteur parle ensuite des formulaires. Jusque-là peu agréables à programmer et développer, sous HTML4. Il nous présente quelques nouveautés, nous simplifiant subtilement la programmation de ces formulaires. Dont certaines options nous permettant de ne plus avoir nécessairement recours à JavaScript. Notamment pour la vérification des champs entrées dans le formulaire.
Puis l’auteur enchaine sur une démonstration de fonctionnalités d’HTML 5 nous faisant nous rendre à l’évidence, que celui-ci permettra en effet d’avoir moins recours aux plugins, étant donnée qu’il integrera en son sein de nombreuses fonctionnalités que ne pouvaient opérer que ces plugins jusqu’à aujourd’hui. Une révolution pour les problématiques d’accessibilité et de référencement notamment, étant donné qu’avec ces fonctionnalités intégrées directement dans le HTML, les perspectives de renvoyer les informations plus précisément et plus allègrement aux moteurs de recherche et autres outils ayant besoin d’accéder au contenu d’images, de vidéos ou encore d’animations, seront probablement plus effectives. A suivre!
TRADUCTION BRUTE Via Google translate, sans retouche!
Transcription: L’avenir de HTML 5
Par Bruce Lawson
De la vidéo FOWA09, transcrite par Joel Overton
Je suis de l’Opéra, qui est le norvégien, tas de neige de personnes délicieux, qui apportent le navigateur Opera et Opera Mini, qui est le navigateur le plus largement déployé sur les téléphones portables dans le monde. Mais je ne suis pas ici pour le brancher. Je n’ai pas besoin de dire que l’opéra est très activement impliqués dans la spécification d’HTML 5. Je ne suis pas de ces gens. Jusqu’à il ya un an, j’étais un développeur, et j’ai été regarder du point de vue d’un développeur. Donc tout ce que je dis est mon opinion personnelle et non celle de l’Opéra dans le HTML 5 groupe de travail.
HTML 5, je crois, est le futur des applications web. C’est le fondement sur lequel nous allons créer des applications Web. Alors, qu’est-ce que c’est? Ici, nous voyons HTML1, 2, 3 et 4. Vous pouvez voir que le HTML 4 est un tout formé, Guy totalement évolué. Si vous écrivez des pages statiques qui sont essentiellement du texte, des images et des liens, vous n’avez aucune raison de cesser d’utiliser le HTML 4. De la même manière que le XHTML 1 ne remplace pas le HTML 4, HTML 5 ne sera pas remplacer le HTML 4.
Grossièrement simplificateur, mais très utile pour notre propos, est-ce diaporama. HTML 5 est une version Pimped d’HTML 4. Il a bling supplémentaire qui rend plus facile l’écriture d’applications web. La plupart des choses qu’il apporte sont des choses que nous faisons déjà, mais nous ne le piratage autour d’eux en JavaScript ou des trucs comme ça, ou peut-être un peu de Flash, et ce que HTML 5 vise à préciser est un équipement robuste, espérons-cross-browser façon de faire ces choses qui est une norme, qui n’implique pas de la magie vaudou avec JavaScript. Il ne remplace pas le JavaScript. La majeure partie est sur JavaScript et DOM API.
L’origine, il a commencé sa vie comme ‘applications Web 1.0′. C’est ce que la spécification a été appelée. Il est seulement appelé HTML 5 depuis l’année dernière quand elle s’est mise en pli du W3C. Il est conçu comme un standard ouvert et (je n’hésite pas à lui) elle est en concurrence avec Flash et Silverlight. Parce que, je crois, et peut-être beaucoup d’entre vous gars aussi, je crois que le web est trop vital une plate-forme pour le commerce, pour les entreprises, pour la société, d’être dans les mains de tout vendeur un. [Il s'arrête Applaudissements] Je vais m’arrêter maintenant alors que je suis sur une bonne note!
Tous les fabricants de navigateurs participent au développement de HTML 5, y compris Microsoft. Ils étaient un peu tard pour commencer à participer activement, mais ils participent. Elle a commencé avec Opera, Mozilla rejoint en, puis Apple. Le gars qui a travaillé pour l’opéra déménagé à Google, qui font des chaises Chrome, et l’un des co-du groupe de travail est un employé de Microsoft. Il est encore en développement, la spécification n’est pas encore terminé, mais il va au dernier appel de ce mois.
Prédire l’avenir est dur. Il s’agit d’une prédiction de la chambre à coucher d’une dame en l’an 2000, comme établi en 1900. Il est quelque peu inexact même si c’est très bien comme l’hôtel que Carson m’ont donné pour ce soir, alors … Donc ce que je vais faire est de vous montrer les choses que vous pouvez faire maintenant, et puis déplacer plus loin vers les choses qui sont juste autour du coin, et j’espère que je ne sera donc pas trop imprécises.
Canvas
Donc, une chose cool pour les applications web est Canvas. Toile a commencé sa vie comme une chose de propriété d’Apple. Tous les fabricants de navigateurs ont apprécié, nous avons tous mis en œuvre, et ça a été codifié comme un cahier des charges. Il s’agit d’un mode graphique immédiate sans plug-ins. Si vous voulez faire des graphiques dynamiques maintenant, vous avez, soit de les faire sur le serveur, ce qui est lent, ou si vous utilisez des plug-ins, comme Flash ou Java. Mais toile est une immédiate mode graphique. Je travaille pour Opera, mais je veux le démontrer est de navigateurs, alors voici quelques Canvas in Firefox. Il s’agit d’une application de Nice. Ce texte est un texte réel, mais la substance en toile de fond est simplement faire eye-candy et il n’y a rien de mal à bonbons pour les yeux. C’est vraiment cool.
Bon, voyons voir quelques choses dans Opera. Voici un jeu de First Person Shooter. Ceci est écrit en JavaScript et tiré directement sur l’écran de toile. Si vous êtes comme moi, et non d’un penchant militariste, alors je vous recommande ce donateur première personne, dans laquelle vous flânerez offrir des fleurs personnes. Ceci est supporté nativement en ce moment dans Opera, Safari, Firefox et Chrome. Qu’en est-IE, me direz-vous? Très bonne question, les gars.
Qu’en est-il IE?
Pas de problème. Explorer toile sur sourceforge (exCanvas.sourceforge.net) est téléchargeable gratuitement JS bibliothèque qui se traduira par votre toile à la volée en quelque chose que IE a eu pendant des années âne s’appelle VML. Si vous téléchargez ceci et branchez-le sur votre site, puis en toile travaillera dans IE. Pas parfaitement en très circonstance, mais bien assez.
Qu’en est-il l’accessibilité?
Okay. Vous êtes tous les développeurs de premier ordre, ou que vous ne serais pas ici, alors … Après avoir vu ça pour un peu plus long, vous pourriez penser «ce sujet de l’accessibilité? Ceci est très important. Canevas pour le moment, n’est malheureusement pas accessible. Pensez toile comme une image sans même texte alt. C’est pixels simplement manipulés par script. Ainsi, même si vous mettez du texte dans une toile, il est juste comme une image du texte de fait avec photoshop. Ce texte ne peut être obtenu par le DOM. Il n’y a pas DOM-c’est très bien, parce que c’est vraiment très rapide, mais cela signifie qu’il n’y a rien pour les technologies d’assistance à crochet dans.
La spécification définit le contenu de repli, et qui se trouve juste au-entre les balises toile. Ce n’est pas assez bon. La raison en est, est que le contenu de secours est seulement accordée aux navigateurs qui ne peuvent pas utiliser Canvas. Si votre navigateur peut utiliser Toile, mais vous ne pouvez pas le voir, vous ne pouvez pas accéder à ce contenu de repli pour le moment. Il s’agit d’un problème connu. Il ya un groupe de travail d’accessibilité proposées par le W3C. Je suis heureux de dire que, hier, Opera mis leur soutien dans ce groupe de travail pour être mis en place et j’imagine que les fournisseurs de navigateurs autres le feront également.
Il ya un mec dans Opera, qui je le sais et travailler avec, et je lui ai juste mis en place pour les gars de Adobe qui sont responsables de la rétro-Flash raccord pour l’accessibilité. Donc, j’espère qu’il y aura un certain mouvement à ce sujet, mais pour le moment, Canvas n’est pas accessible. Elle doit compléter stuff qui est déjà sur l’écran.
Voici un bel exemple de cela. Il s’agit d’un plug-in JQuery écrites par des gars, appelé Groupe de Filament. Ce que cela ne se fait-il graphiques les informations de ce tableau de données accessibles. Donc, si par exemple je faire de ce quelque chose comme 450, espérons-vous le voir graphique en temps réel. JQuery le plug-in est d’obtenir les informations hors de ce tableau de données et en faire un graphique. Ceci est un brillant exemple d’utilisation accessible de toile. Parce que bien sûr, si vous utilisez un lecteur d’écran, vous pouvez réellement obtenir ces informations, ainsi que les suppléments Canvas elle.
Si vous avez vraiment besoin d’avoir des graphiques vectoriels dans votre application, et pourquoi pas vous, je recommande d’utiliser quelque chose appelé SVG. Scalable Vector Graphics. Cette spécification est de 6 ans, il est pris en charge dans Opera, Firefox, Safari et Chrome. Qu’en est-il IE? Il ya cette bibliothèque JavaScript qui s’offrent à vous qui traduit votre SVG pour IE. Je pense qu’il utilise Flash. Google sont aussi écrit une application appelée SVG Web qui est actuellement en version alpha. La bonne chose avec SVG est que le texte reste le texte et ne peut donc être consultée par une technologie d’assistance suffisamment habile. Donc: pour le contenu SVG, Canvas pour bling ou des trucs supplémentaire pour l’instant. Pour l’instant.
Formulaires
C’est une autre chose vraiment cool que vous pouvez faire dès maintenant. Tout le monde déteste les formes d’écriture. La raison pour laquelle nous détestons les formes d’écriture que vous avez à faire passer les âges validation des formulaires en JavaScript. Alors, regardons à un formulaire HTML 4. Voici une forme sombre, et si je frappe envoyer (il n’y a pas de validation sur cette page), il se vient de présenter. Alors, naturellement, à l’horloge 5 o ‘un vendredi, vous avez obtenu ce formulaire, et vous allez avoir une ou l’autre d’écrire un peu de validation JavaScript ou obtenir de quelqu’un d’autre et il NAB … et puis, vous n’êtes jamais très bien comment il est robuste … et c’est 5 o ‘clock, et tous les mecs cool d’en haut de commercialisation sont déjà allés au pub, et vous vous sentez un peu grincheux, mais avec la magie de l’HTML 5, votre fée marraine HTML-vous tapez sur votre épaule avec sa baguette magique et dire: «Vous irez au pub, Cindarella ».
C’est le code pour ce formulaire. Trust me, it is. Ajoutons donc quelque 5 Magic HTML. La première chose que je vais faire est d’ajouter l’autofocus attribut. Espérons-le, Si je n’ai pas eu ce tort, quand je rafraîchir, vous verrez que le curseur est allé là-dedans. Une petite chose, mais dans certaines circonstances, ce qui est excellent pour la convivialité et vous économiserez du écrit que peu de JavaScript.
Allons un peu plus loin et nous allons ajouter l’attribut obligatoire. Quand je vais rafraîchir, ce que j’ai ici est une pseudo-classe CSS qui applique un contour rouge à tout champ de formulaire qui est nécessaire. Et maintenant, si je frappe envoyer, par la magie des Pixies Hixie, vous obtenez une validation et que vous devez fournir une valeur. Cela est intégré dans le navigateur. Il n’ya pas de JavaScript requis. C’est super parce que c’est moins pour vous écrire. C’est super si vous êtes sur un téléphone portable ou une connexion plus lente parce qu’il ya moins pour vous à télécharger.
Adresses e-mail et des URL
Nous pouvons aller encore plus loin que cela et je peux dire, par exemple, nom = e-mail, type = e-mail. Notez que dans HTML 5, vous n’avez pas besoin de guillemets. Si vous voulez des citations, vous pouvez les utiliser, mais vous n’avez pas besoin d’eux. Et c’est entre guillemets parce que aucun navigateur jamais vraiment nécessaire. Validateurs XHTML a fait, mais les navigateurs ne se souciait pas d’une manière ou l’autre si elle est facultative.
D’accord ce n’est Opera, qui m’a donné ceci (à mon avis, quelque peu «viande mystère») icône qui me dit que c’est un champ de courriel. Donc, si je tape une adresse email malformé, ça va me dire que c’est pas une adresse email juridique, car à l’intérieur du navigateur, il connaît le format des adresses e-mail. That’s pretty cool, qui vous fait économiser un peu de validation, et je peux aussi dire type = url, et maintenant si je tape sur une page Web malformée, encore une fois, il va dire «ce n’est pas une adresse Web valide.
Vous l’avez fait en 3 minutes, et vous allez dans un bar. C’est un résultat. [Applaudissements]
Et il ya plus. C’est aussi des formulaires HTML. Vous pouvez entendre ce dénommée « Web Forms 2.0» – c’est l’ancien nom, il y avait une spécification appelée « Web Forms 2.0″, qui s’est roulé dans HTML 5. HTML 5 est un peu plus d’une bête en mouvement par la manière, il se divise à la sous-specs comme des amibes, autres spécifications obtenir laminés po .. Pensez à HTML 5 comme un terme qui englobe, comme Ajax, ou quelque chose, une large gamme d’activités nouvelles technologies vous pouvez utiliser.
DataList
Ainsi. DataList. C’est un type cool d’entrée nouvelle. Il ressemble à une sélection, et il vous donne une sélection d’options prédéfinis. Mais je ne veux pas être M., Mme, ou Mad Professor, je veux être Dark Lord. Donc cela me permet de sélectionner certaines options prédéfinies ou mettre ma propre po
Min & Max
Voici
et je l’ai déjà dit min = 18 max = 25 et elle ne permet que moi ces options, et si je tape sur ‘27 ‘il est trop élevé et il me dit haut la main.
Dates
Or celui-ci est vraiment cool. Cela est plus froid que Lou Reed et Bob Dylan avoir un combat de boules de neige en hiver sur Pluton it’s so cool. Okay, so. Nous avons tous eu à solliciter des apports date et on ne sait jamais, est le premier de Mars 03/01 ou 01/03; est l’année 09 ou 2009 … et ainsi, vous voyez ces sélecteurs de date horrible petit flash et tout le monde fait différemment et ils sont une douleur à écrire. Ainsi,
et dans le navigateur vous obtenez un widget calendrier, de sorte que vous ne pouvez pas la date d’entrée en invalidité. C’est vous est donné par les navigateurs HTML 5 conscients.
Sliders
Voici un curseur attractivité. Ceci est
. Si vous avez jamais vu Spinal Tap, vous saurez ce que je fais ici, je me donne une attractivité de 11 ans.
Patterns
C’est vraiment cool. Un attribut pattern. Vous donnez une expression régulière, et le navigateur le validera contre cela. Donc, ici, il veut un seul chiffre suivi d’une majuscule alpha-numériques, 3 d’entre eux. Donc, c’est le mauvais format. Toute expression régulière, directement à partir de JavaScript, ils sont exactement les mêmes, et vous pouvez valider ce genre de choses.
Cross-browser
Donc, je vous l’ai montré dans Opera. Let’s have a look dans les autres navigateurs, parce que c’est un contre-spécification ouverte navigateur. Certains de ces formulaires sont entrée en WebKit-donc, ce que Google Chrome. Et vous pouvez voir que Chrome n’a pas encore transposé la datalist ou la date, mais il se dégrade juste un retour à la normale
. Donc, il est compatible dans ce sens. Maintenant, WebKit n’ont le curseur même si elles n’ont pas la balise de sortie qui produit ce [la sortie de la valeur du curseur].
Une chose que WebKit’s got que nous n’avons pas obtenu dans Opera est encore l’attribut d’espace réservé. Je peux donner une indication que, dans ce domaine, il dit à deux chiffres suivis de 3 lettres majuscules, voilà un indice pour l’utilisateur. Si je clique sur cet aspect, elle disparaît et si je clique sur, il réapparaît. So that’s really really cool.
Téléchargement de fichiers
Vous pouvez aussi avoir plusieurs téléchargements de dossier aussi. C’est le fichier,
, avec l’attribut de multiples. Et là je sélectionner 3 choses, et WebKit m’a dit qu’il ya 3 fichiers sélectionnés. So that’s pretty blummin ‘cool.
Legacy
Mais, je sais que vous pensez, ce que sur les navigateurs héritage? Bon, eh bien je vous l’ai déjà montré que ces types d’entrées nouvelles remontent à
, mais vous pouvez faire la détection de fond sur ce genre de choses. A Guy Called Faruk Ateş et un autre gars appelé Paul irlandais ont écrit cette bibliothèque très froide, appelée Modernizr. C’est 7ko. Il fait une détection fonctionnalité et vous indique ce que le navigateur prend en charge.
Donc, il ya deux choses que vous pouvez faire. Vous pouvez soit utiliser ces nouvelles choses et, si votre navigateur ne les supporte pas, alors il va à la validation côté serveur. Ou alors, utilisez Modernizr, et si Modernizr vous dit que le navigateur ne supporte pas ce genre de choses, et puis simplement revenir à la validation JavaScript que vous avez déjà. Si Modernizr vous indique que le navigateur puisse le faire, alors laisser le navigateur le faire.
Géolocalisation
Ok, je n’ai que quelques minutes et je veux vous montrer des choses un peu plus cool. Cette situation est encore loin maintenant. Ceci est la géolocalisation. Il est disponible dans Firefox 3.5, dans Safari sur l’iPhone, et dans une Labs construire d’Opera. J’espère que cela va marcher maintenant. Ceci est HTML5Demos.com. Elle est maintenue par un ami à moi a appelé Remy Sharp, qui est .. juste … «M. JQuery ‘out of Brighton. Votre géolocalisation est évidemment sensible pour des raisons de confidentialité, de sorte que les navigateurs demandons à vous tous si vous êtes prêt à partager votre emplacement sur le site. Vous dites oui, et j’espère bien que la magie de HTML 5, il va revenir et nous dire où nous sommes. Mon accès Internet a baissé, ce qui est une sorte de vaincre ma capacité à vous montrer certains de ces démonstrations.
Navigateur de stockage
Les cookies sont vraiment très maladroit bêtes. Alors HTML 5 vous donne locales et de stockage de session. Stockage local est la capacité de stocker n’importe quelle quantité de données que vous souhaitez en local sur votre machine. Qui vit jusqu’à ce que vous l’effacer. Session durées de conservation pour la vie de cette session, c’est à dire aussi longtemps que cet onglet est ouvert. La meilleure chose pour moi, est la base de données web. Il ne s’agit que implémenté dans Safari jusqu’ici, bien que j’ai vu de l’opéra construit en interne qui le fais. Il s’agit d’une base de données SQL entière dans votre navigateur. Vous pouvez stocker ce que vous voulez utiliser SQL et vous les recevrez en utilisant JavaScript. Je ne peux pas vous montrer que si nous sommes hors ligne.
Vidéo
Je vais dépassement de piste juste un peu et vous montrer quelque chose qui est vraiment très cool. Il s’agit d’HTML 5 vidéo. Je ne sais pas si vous voulez l’utiliser dans les applications, mais nous avons tous vu des vidéos horribles horribles enrobage stuff que les choses comme YouTube nous donner. En HTML 5, vous pouvez intégrer une vidéo comme ça. Voici mon doctype HTML 5, puis …
Alors, je dois les contrôles parce que je veux le navigateur de me donner stop / play / pause, etc, je veux que ce jeu automatique, et tout ça au milieu est le contenu de repli, où vous devez mettre un lien pour l’utilisateur de télécharger la vidéo . Et, espérons parce que c’est sur ma machine locale, je peux vous montrer. Voici la vidéo, c’est moi et mes enfants déblayage propos là. Ce n’est pas de plug-ins. Il n’ya pas de flash, ou quelque chose comme ça. Cette vie stuff dans le navigateur. Et parce que ces bits et les octets de vivre à l’intérieur du navigateur, vous pouvez au sujet de terres noires avec eux, avec script. Donc, ici, par exemple, je peux en niveaux de gris en temps réel. Si je veux, je peux tracer les contours. Vous pouvez faire toutes sortes de choses. Tout ce que votre imagination fera rêver, tu peux faire, parce que cette vie stuff dans le navigateur, sans plug-ins.
Voilà donc mon temps fini, je crois que M. Carson. Je reste ici ce soir et je suis ici tous demain, donc si vous avez des questions sur HTML 5, je serai ravi d’y répondre. Je vous remercie de votre attention.
La vente en ligne peut ouvrir de nouveaux marchés, parfois énormes, pour de nombreuses entreprises. Lorsque votre magasin peut être ouvert 24 / 7 et que vous pouvez accéder à un marché mondial sans les frais d’envois et les centres d’appels, il peut être un avantage tellement considérable pour l’entreprise.
Mais il y a beaucoup de choses à considérer lors de la conception d’un site eCommerce. Ce n’est pas aussi simple que de vomir des logiciels-panier et « plopping » produits dans une base de données.
Il ya des tonnes d’erreurs que les détaillants en ligne font tous les jours, tous évitables, à une planification minutieuse près. Et même si vous vous engagez déjà dans certaines de ces erreurs, la plupart d’entre elles sont assez faciles à corriger. Les éviter améliorera grandement l’expérience de vos clients, quoiqu’il en soit, alors…
Voici 15 des erreurs les plus communes, proposées par Cameron Chapman et SmashingMagazine, que les sites de commerce électronique font, de même que des conseils sur la manière de les éviter ou de les résoudre…
1. Un manque d’informations détaillées sur le produit
En situation réelle, vous avez l’avantage d’être capable de ramasser un objet, de le toucher, le regarder sous tous les angles, et de lire les informations sur l’emballage ou les étiquettes. Le shopping en ligne supprime cette interaction. Les sites de commerce électronique ont besoin de faire du mieux qu’ils peuvent, pour améliorer l’expérience d’achat en magasin.
Combien de fois sommes-nous allés dans un magasin en ligne et avons-nous constaté que les descriptifs manquaient? Et si un client est à se demander sur les spécificités d’un produit, ils est plus susceptible d’aller chercher l’information, ailleurs. Et à moins que le prix sur votre site ne soit nettement inférieur à celui de vos concurrents, ils iront probablement, aussi, acheter ailleurs!
Quoi faire?
Donnez le plus de renseignements sur le produit, autant que vous le pouvez. Tailles, de matériaux, poids, dimensions, et toute autre information pertinente en fonction de ce que le produit est. Par exemple, dans une boutique de vêtements en ligne, vous pourriez inclure le type de tissu, les tailles et les couleurs disponibles, un tableau de taille (généralement lié à de multiples produits), le poids ou l’épaisseur de l’élément, la coupe et l’ajustement de poste, les soins des instructions et des commentaires sur la marque ou le designer. L’aide de mots descriptifs, plutôt que des termes purement techniques, peuvent avoir un impact plus important sur le consommateur.
Exemples
2. Cacher les Informations de Contact
Les consommateurs veulent savoir à qui ils ont affaire notamment lorsqu’il s’agit pour eux de remettre leurs informations de carte de crédit. Ils veulent savoir, si ils ont un problème, s’ils auront la possiblité de parler à une personne réelle et d’obtenir l’aide dont ils ont besoin. Si votre site ne fournit pas d’informations de contact, ou le cache, de sorte que le consommateur ne puisse pas les trouver facilement, ceux-ci se révèleront moins enclins à faire confiance à votre site, et donc moins susceptibles de faire des affaires avec vous.
Quoi faire?
Mettez vos informations de contact dans un format facile à trouver, placé sur chaque page de votre site. Les endroits les plus évidents sont soit dans votre en-tête, en haut de votre barre latérale, ou dans votre pied de page. Fournir des moyens multiples de communiquer, si possible. Un formulaire de contact, adresse email, numéro de téléphone et une adresse postale peuvent ajouter au niveau de confiance du client. Rappelez-vous aussi, que plus vos produits sont chers ou techniques, plus il sera probable qu’un consommateur veuille vouloir plus d’informations de contact.
Exemples
3. Un processus de validation trop long ou confus
C’est l’une des erreurs les plus encline à endommager un site de commerce électronique… Vous devez le rendre aussi facile que possible et permettre à vos clients de remettre leurs informations de carte de crédit et de terminer leur commande, facilement. Plus il y a d’étapes infligées pour qu’un article dans leur panier soit enfin payé, plus vous leur donnez d’occasions de quitter votre site, sans avoir terminé leur achat.
Quoi faire?
Le processus de commande idéale comprend une page unique. Les consommateurs devraient pouvoir y vérifier leur ordre et saisir leurs informations de facturation et d’expédition. Enfin, une autre page de confirmation devra leur être proposée avant de soumettre leur ordre.
Exemple
4. Exiger un compte pour commander
Il s’agit ici simplement de réagir comme pour le point précédent… Avez-vous besoin qu’un client ouvre un compte, avant de pouvoir passer une commande? C’est un autre obstacle que vous aurez placé sur leur chemin. Le plus important pour vous, c’est: La réception de la commande ou de capturer les informations sur les clients? Rappelez-vous que la deuxième option peut signifier la perte de certains de ces clients.
Quoi faire?
Il y a une solution facile à cet effet. Au lieu d’exiger d’un client de s’inscrire à un compte avant leur ordre, leur offrir l’option à la fin de leur processus de commande. Donnez-leur la possibilité d’enregistrer leurs informations de compte, de passer des commandes futures ou de suivre l’état de leur commande en cours. Beaucoup de clients choisissent de mettre leurs informations, et vous ne ferez pas fuir les clients avant qu’ils n’aient terminé leur commande.
Exemples
5. Un moteur de recherche insuffisant
Si un client sait exactement ce qu’il recherche, il pourrait facilement choisir d’utiliser un moteur de recherche, plutôt que de compulser des catégories et des filtres. Vous devez vous assurer que la fonctionnalité de recherche de votre site fonctionne bien, et a de préférence des filtres, pour laisser les clients affiner leurs résultats.
Quoi faire?
Vérifiez que le logiciel e-commerce que vous utilisez a un bon haut-moteur de recherche, ou cherchez des plugins pour étendre ses fonctionnalités. Idéalement, un moteur de recherche e-commerce devrait permettre aux utilisateurs d’effectuer une recherche par mot-clé, puis d’affiner les résultats selon les catégories de votre site. Permettre aux utilisateurs de trier ls résultats de recherche basés sur des critères standard (le plus populaire, le plus haut ou plus bas prix, dernier élément, etc) ainsi que l’élimination des éléments qui ne cadrent pas avec une certaine catégorie…
Exemple
6. Options du Service-Client trop pauvres
Même logique que pour les informations de contact: Vous avez besoin de faciliter le client dans sa prise de contact avec vous, s’il a un problème ou une question. Faites bien comprendre que le meilleur moyen de vous contacter, si il a une question technique, une question de vente, s’il veut retourner un article, c’est de le faire via votre SAV. Proposer un formulaire de demande d’aide pour les clients à remplir, peut insuffler plus de confiance que juste une adresse email.
Quoi faire?
Utilisez un système de billetterie pour les demandes de service client, surtout si vous ne possédez pas de numéro de téléphone disponible. Assurez-vous que vous affichez une FAQ (aide utilisateur) qui couvre les questions communes que les clients pourraient avoir, comme à ce que votre politique de retour soit clairement détaillée ou encore ce qu’il faut faire si le client a besoin decommander des pièces ou des articles de remplacement.
Exemples
7. De trop petites images de produits
Puisque les consommateurs ne peuvent pas gérer physiquement les produits que vous vendez, avant de passer une commande sur votre site, vous avez besoin ce que vous pouvez pour recréer et améliorer cette expérience de vente. De trop petites images pour vos produits ne le permet pas.
Quoi faire?
Soit fournir des images de taille à droite, sur la page du produit ou permettre aux utilisateurs de cliquer sur une image pour zoomer en avant. Faites en sorte les utilisateurs soient en mesure d’afficher l’image la plus grande possible, sur un moniteur à la résolution moyenne. En somme, une image qui s’agrandit à 1024 × 768 pixels paraît une bonne base aujourd’hui.
Exemples
8. Une seule image du produit
À moins que votre produit ne soit livré numériquement (et parfois même si il l’est), vous aurez envie de fournir des images multiples, à partir d’angles différents. Une image dans chaque couleur, du front, le dos et les côtés, et même des plans détaillés etdes fonctionnalités spécifiques, peuvent tous vous mener vers le chemin, qui rendra le consommateur plus susceptible d’acheter par vous.
Quoi faire?
C’est simple: inclure plus d’images. Quatre ou cinq images de chaque produit est idéal, offrant une vue suffisante pour rendre un consommateur à l’aise.
Exemples
9. Un mauvais Design panier
Votre panier est une partie extrêmement importante de votre site d’ecommerce. Il doit permettre aux utilisateurs d’ajouter plusieurs produits, afin de réviser les quantités ou d’autres options concernant ces produits. Et il doit rester transparent au même moment. Pas exactement la chose la plus simple, non?
Quoi faire?
Assurez-vous que votre panier permette à un utilisateur d’ajouter un élément, puis de revenir à la dernière page. Mieux encore: leur permettre d’ajouter un point à leur panier sans quitter la page qu’ils sont en train de surfer (en utilisant un chariot mini). Permettez à vos clients de modifier les quantités d’articles dans leur panier ou de supprimer un élément de leur charrette. Et les laisser prévisualiser ce port avant de commencer le processus de commande.
Exemple
10. Manque d’options de paiement
Il y a beaucoup de sites qui ne permettent pas aux utilisateurs de payer par Visa ou MasterCard, ou obligent à payer uniquement avec un compte PayPal. Il n’y a aucune bonne raison pour ça. Qu’en est-il de la personne qui a un Amex et n’a pas de compte PayPal? Qu’en est-il la personne qui ne possède pas de carte de crédit et qui veut payer directement depuis sa compte bancaire? Vous devez fournir le plus grand nombre de solutions de paiement pour optimiser le nombre de commandes que vous obtenez.
Quoi faire?
Utilisez un service de paiement qui permet aux clients de payer avec chaque carte de crédit. L’ajout d’une option ACHAT Paypal augmente le choix que les clients ont, en les rendant plus susceptibles d’acheter par vous. Considérant que les différents consommateurs ont des préférences différentes, quand il s’agit de faire des paiements en ligne, envisagez l’élargissement de votre clientèle aussi via cette vérité.
Exemple
11. Ne pas inclure de produits relatifs
Vous avez probablement remarqué que lorsque vous allez dans un magasin de brique et de mortier (vous y allez vraiment?), les produits qu’ils regroupent sont similaires, ce qui rend facile pour vous de trouver des produits liés à votre recherche de départ. La même chose peut être faite sur votre site évidemment, et tend à augmenter les add-on de ventes pour vous d’affaires.
Quoi faire?
Utiliser une plate-forme de commerce électronique qui vous permet d’inclure des produits liés aux pages avec une description du produit. Une plate-forme qui vous laisse choisir manuellement les produits connexes peut aussi vous donner un grand avantage.
Exemples
12. Navigation confuse
Il n’y a rien de pire que d’essayer de trouver un produit sur un site, avec une navigation malaisée.
Quoi faire?
Réfléchissez à vos catégories et aux éléments de navigation avec soin, avant de commencer à mettre des produits dans votre catalogue. Assurez-vous que chaque catégorie possède au moins un petit nombre de produits en elle. Rendez-le facile, ce site.
Exemple
13. Ne pas inclure les tarifs d’expédition
Il n’y a aucune bonne raison de ne pas inclure les tarifs d’expédition sur votre site. J’ai abandonné les achats à de nombreuses reprises parce que l’on ne disait quelque chose comme « Nous vous enverrons un email avec un devis d’expédition exact pour approbation, avant de traiter votre commande. » Lorsque j’achète en ligne, je veux être en mesure de terminer ma commande en une seule fois, sans avoir à attendre un e-mail avant de décider si le port est trop élevé ou pas. Incluez vos tarifs sur votre site, quels qu’ils soient.
Quoi faire?
La plupart des grandes compagnies maritimes et de l’USPS offrent la livraison de calculatrices sur leur site, et il existe des plugins ou des widgets disponibles pour la plupart des systèmes-panier « grandes courses » où peuvent figurer les frais d’expédition sur votre site. Utilisez-en un. Si vous ne pouvez pas utiliser un ordinateur pour une raison quelconque, utiliser un taux fixe de livraison assez élevé, pour couvrir tout ce que vous devez expédier. Pour les éléments particulièrement lourds ou volumineux, vous pouvez toujours inclure une surtaxe de fret dans le prix (juste être sûr d’indiquer que c’est là que les coûts supplémentaires sont en cours).
Exemple
14. Ne pas inclure la politique de magasin
Avant qu’un client achète chez vous, ils va sûrement vouloir connaître votre politique de livraison, les politiques de retour, et les règles des autres magasins. Et il n’y a aucune raison de ne pas publier cette information dans une FAQ ou quelque part d’autre sur votre site. Proposer une politique claire dès le départ.
Quoi faire?
Le faire, tout simplement. Hé.
Exemples
15. Ne pas se concentrer sur les produits
Le but d’un site e-commerce est de vendre des produits (ou, du moins, c’est ce que l’objectif devrait être). Si votre site met davantage l’accent sur des cloches et de sifflets ou de la conception elle-même, c’est ne pas atteindre cet objectif primaire. Assurez-vous que votre site affiche d’abord les produits, et que tout le reste apparaisse comme secondaire.
Quoi faire?
Réfléchissez à la façon dont les produits sont affichés dans les magasins de brique et de mortier (encore!). Alors qu’un en magasin ou en vitrine l’on montre beaucoup plus que juste les produits à vendre, il s’agit notamment de présenter les produits sous un angle des plus flatteur. Faites de même avec votre site web. Assurez-vous que chaque élément de conception fasse en sorte de présenter vos produits sous leur meilleur jour possible.
WordPress
7 principes-clés pour un webdesign qui claque
Samedi, octobre 17th, 20097 principes-clés pour un design qui claque!
Tout le monde, y-compris papy (et son chien) semble avoir un site Internet aujourd’hui. Le Web devient de plus en plus bondé chaque jour, avec littéralement des douzaines et des douzaines de sites ajoutés au moment-même ou vous lisez cet article. Il devient logiquement de plus en plus difficile de se faire remarquer, de se distinguer, dans cette masse grossissante (et grossissante) …
« Heureusement » pour nous autres, concepteurs, tout le monde ne semble pas comprendre ce qui fait la richesse de la conception Web, du Webdesign. Soit. Le Webdesign est, dans une large mesure, un processus créatif et peut donc plus être assimilé à une science qu’à un art, de ce point de vue. Mais parce qu’il est intrinsèquement un support de présentation, certaines règles (ou tout du moins certains principes) s’appliquent. En suivant quelques conseils simples, toute personne devrait être en mesure de créer un design agréable, visuellement, et faire un pas de plus vers la gloire. Bon, ce n’est pas si simple, c’est vrai et le talent et l’expérience ont leur importance. Mais n’importe qui peut transformer sa page d’accueil de manière à ce que celle-ci claque un peu plus, en quelques minutes.
La question est donc: Qu’est-ce qui rend bien, qu’est-ce qui est, joli. Qu’est-ce qui claque? Ce n’est pas Flash. Ce n’est pas pour dire que Flash n’a aucun mérite, mais Flash seul, ne fait pas une bonne conception, certains sites Flash, très méchants, ornent la toile en ce moment même. Aussi, il ne faut pas être un grand illustrateur pour faire des dessins « attrayants ». Regardez plutôt la conception Web comme une symbiose des différents éléments. Pas un seul élément ne compte plus que les autres, c’est plutôt la somme de ces éléments, qui fera toute la différence.
Ces éléments sont les 7 principes-clés, qui font qu’un Design claque (ou pas):
1. Balance
La balance, l’équilibre est tout ce qu’il y a à assurer, pour que votre dessin ne bascule pas d’un côté ou de l’autre.
Exemple
Regardez l’image du chien. Cet exemple est tiré de The Principles of Beautiful Web Design par Jason Beaird. Jason Beaird souligne comment la croix à droite de l’image, compense le poids visuel que le chien pose sur la gauche. C’est un petit détail, mais non-négligeable. Voyez vous-même en cachant la croix avec votre main.
C’est ce que nous appelons l’équilibre asymétrique. Si vous ne faites pas attention à comment vous fixez les choses, le projet deviendra vite déséquilibré. Vous pouvez manipuler le poids visuel d’un modèle à bien des égards, comme la couleur, la taille et l’ajout ou la suppression d’éléments. Si vous deviez faire la croix, disons, en orange vif, elle deviendrait plus lourde et peut-être et inverserait probablement le déséquilibre vers la droite. Atteindre l’équilibre asymétrique est une question particulièrement délicate.
Voici ci-dessous, un autre exemple d’équilibre symétrique, celui-ci par The First Twenty. Bien que l’en-tête graphique soit asymétriquement équilibré (Pouvez-vous trouver comment c’est fait?), Le reste de la conception du bas, propose des colonnes symétriques. L’équilibre asymétrique pourrait compliquer les choses, mais il tend à rendre le design plus ludique.
Vous constaterez que chaque dessin, pour lequel vous avez diagnostiqué un « bon teint » (une dessin qui « claque »!), a une balance bien construite… Vous risquez de faire le même type de constat pour les points suivants, alors prenez le temps de scroller un peu du haut vers le bas et voyez un peu ce qui s’y claque…
2. Grille
La notion de grille est étroitement liée à celle d’équilibre. Les grilles sont une série de règles horizontales et verticales, qui vous aident à «compartimenter» un dessin. Pensez colonnes. Les colonnes améliorent la lisibilité, rendent le contenu d’une page, plus facile à absorber. L’espacement et l’utilisation de la règle des tiers (ou Golden Ratio) rend tout, plus facile pour l’œil.
La règle des tiers et Golden Ratio comptent pour expliquer pourquoi les sidebars, par exemple, sont habituellement à environ un tiers de la largeur de la page et pourquoi la section principale du contenu est approximativement égale à la largeur de la conception, divisé par 1,62 (=Phi). Nous n’allons pas trop entrer dans le détail, mais cela semble se vérifier dans la pratique. C’est aussi pourquoi le « sujet » dans photographies pro, est habituellement placé, non pas au milieu, mais à l’intersection d’un imaginaire de neuf carrés de grille (trois par trois, avec deux horizontales et deux lignes verticales).
Exemple
La grille se prête particulièrement bien à la conception minimaliste. 5 Thirty One par Derek Punsalan montre pourquoi:
Bien que la conception ne soit pas visuellement impressionnante en soi, la structuration stricte, claire, des éléments, est facile pour l’œil. La colonne de gauche est à peu près de deux fois la taille de la barre de droite, ce qui est tout simplement bien et c’est une chose à laquelle penser lors de la création de vos propres dessins.
Couleur
Si vous changiez la base rouge sur la première image, à la chaux verte? Ça claquerait? Très probablement pas. Car elle n’appartient pas à la même palette de couleurs (et vert-chaux n’est pas la couleur la plus facile à travailler). Des sites Internet tels que ColourLovers existent pour une raison. Vous ne pouvez pas prendre, que les couleurs de votre style-Rambo, aux pistolets flamboyants. Certaines couleurs vont bien ensemble, d’autres pas. De nombreuses théories sur les couleurs et leurs combinaisons existent, y compris les conventions sur le monochrome et les les régimes contrastés, mais beaucoup ramènent au bon sens et à avoir une idée claire de sa création.
Découvrez par vous-même, ce qui fonctionne bien ensemble. Imprégnez-vous d’autant de conceptions de site Web, que possible, telles que celles présentées sur l’un des nombreux sites vitrine CSS (comme BestWebGallery), pour obtenir une idée de la façon dont les couleurs interagissent, les unes avec les autres. Choisissez deux ou trois couleurs de base, au plus, pour votre design, et ensuite utilisez des teintes (qui seront plus légères, mélangées avec du blanc) et des ombres (qui seront plus sombres, mêlées de noir) de ces couleurs de base, pour élargir la palette. Si nécessaire.
Le choix de couleurs agréables est aussi important que le choix de la bonne couleur (c’est à dire les bonnes couleurs pour l’emploi). Chaque couleur envoie un message, et c’est à vous de trouver le bon message, en fonction de votre projet ou de votre dessin.
Exemple
Le site de Bence Kucsan – Quommunication – a son propre style de jeu de couleurs . C’est essentiellement monochromatique (teintes et nuances d’une couleur unique) et achromatiques (noir et blanc), avec une couleur (rouge) pour se démarquer:
Le noir et blanc, très « chic » transmet un ton très professionnel, tandis que le rouge apporte le piment qui fait que certains éléments ressortent du lot et empêchent la conception d’être terne. Bien sûr, plus qu’un simple rouge rend le design intéressant. Soit dit en passant, une entreprise en particulier, a popularisé ce style…
En parlant de couleur, WebDesigner Wall de Nick La, est du bonheur pur:
Toutes ces pastels tendres, font biller cette conception. À première vue, le choix des couleurs peut paraître arbitraire, à y regarder attentivement, vous remarquerez une palette de couleur strictement définie, nécessaire pour s’assurer que tous les éléments vont bien ensemble. Le site web, et surtout son arrière-plan, montre également une bonne combinaison de couleurs et de graphiques, ce qui nous amène au point suivant…
4. Graphismes
Okay, un superbe design, n’a pas besoin de fantaisie. Mais des graphismes pauvres seront certainement mauvais pour le design d’ensemble. Le graphisme et les graphiques ajoutent au message visuel. Des sites Web comme WebDesigner Wall sont composées d’illustrations impressionnantes, tandis que d’autres sont sous-estimés.
Exemple
Tim Van Damme utilise seulement une poignée de graphiques sur son site Voltar Max, mais il les met en œuvre avec le plus grand soin. Une image de fond non-intrusive et une couronne sophistiquée sont deux de ces graphiques. Visuellement, ils ne sont pas trop impressionnants, mais ils ajoutent à l’aspect et la convivialité du site, et nulle part on est pas à sa place.
Depuis quelques temps déjà, Max Voltar a opté pour une conception différente de celle indiquée ci-dessus. Mais pour les deux mois que celle-ci était en ligne, elle est restée extrêmement intéressante.
Komodo Graphics Media – Rogie King – est beaucoup plus lourd, d’une exécution parfaite, tant d’un point de vue technique que thématique.
Vous n’êtes peut-être pas un grand illustrateur ou photographe professionnel, mais cela ne signifie pas que vous ne puissiez pas mettre beaucoup de graphiques sur votre site. Certaines techniques de base avec Photoshop, quelques images en stock et un peu de bon goût seront tout ce dont vous aurez besoin. Essayez d’utiliser des graphiques qui vont ensemble, et assurez-vous qu’ils incarnent le style que vous aspirez. Nous ne sommes pas tous doués des mêmes capacités naturelles cependant… Parfois vous aurez juste à choisir le style qui vous convient le mieux (comme un style propre, si vous n’êtes pas le plus grand des illustrateurs).
Typographie
L’art de la typographie est un sujet délicat, parce qu’il englobe de nombreux éléments. Même si il peut être considéré comme une branche du design, on peut passer une vie entière à maîtriser l’ensemble de ses aspects. Ce n’est pas le lieu ici, pour fournir une référence typographique complète, et nous allons limiter notre discussion à ce qui vous serait bénéfique, à court terme.
La typographie web est handicapée, par rapport à l’impression typographique. La plus grande différence, c’est notre manque de maîtrise complète, de l’apparence des caractères sur le Web, en raison de leur caractère dynamique. De toute évidence, le rendu dynamique a ses points forts, mais les concepteurs Web ont peu de contrôle sur les résultats, au moins pour l’instant. Les polices manquantes sur l’ordinateur de l’utilisateur, les différences entre les navigateurs et entre les navigateurs et la plateforme de rendu, le soutien général subpar en CSS font de la typographie pour le web, une tâche ardue, sinon frustrante. Mais pendant que nous attendons le CSS 3, pour que la typographie Web puisse enfin atteindre son plein potentiel, nous avons les moyens, aujourd’hui, de faire des choses intéressantes et, plus important encore, jolies.
Polices
Il existe plusieurs façons, assez faciles, d’améliorer sensiblement la typographie de votre site Web, dont trois, que nous allons présenter ici. L’une d’elle est appelée, en anglais, font stacks.
Les font stacks (piles de polices) ne sont que des styles CSS de base. Ils vous permettent de définir l’ordre dans lequel les polices doivent être choisis. Pour être précis, nous parlons de caractères ici, pas de polices. Pour un bon résumé sur ce point, merci de vous référer à Typeface Jon Tan’s! = Police.
body (font-family: « Helvetica », Helvetica, Arial, sans-serif;)
La propriété ci-dessus, donnera au corps du texte la police de caractères «Helvetica Neue. » Toutefois, cela exige que l’ordinateur de l’utilisateur, ait d’installé, ce type de caractère. Les Macs d’aujourd’hui ont tous Helvetica (Neue) pré-installée, mais la plupart des machines Windows non.
La beauté des piles de polices (font stacks, quelqu’un connait le terme francisé?) est que vous pouvez définir le «repli», ce qui signifie que chaque fois qu’une police de caractères définie est manquante, le navigateur cherche tout simplement le prochain en ligne. Bien sûr, cela signifie que le design ne sera pas exactement identique pour tous, et en tant que tel, nous perdons un certain contrôle encore une fois. Mais pour ceux qui ne veulent pas avoir recours à une autre solution (comme le remplacement de l’image), c’est ce que le CSS propose de mieux en ce moment (jusqu’au jour où nous pourrons utiliser ces aspects plus confortablement @ font-face).
Wilson Miner utilise la police que nous avons cité ci-dessus. Helvetica Neue est une amélioration de Helvetica. Et tandis qu’Arial est installé sur presque tous les ordinateurs (au moins sur les machines Windows et Mac) et est donc un choix populaire pour le Web, la plupart des concepteurs préfèrent Helvetica à Arial. De cette façon, vous obtenez le meilleur des deux mondes: Helvetica pour ceux qui l’ont et Arial au cas ou Helvetica est indisponible.
Jon Tan utilise une autre police et un autre groupe de polices:
body (font-family: Baskerville, « Palatino Linotype », « Times New Roman », serif;)
Seul un nombre relativement restreint de visiteurs pourront voir les en-têtes dans Baskerville, mais ce n’est pas un problème. Il donne à la conception un petit supplément de caractère, tout en évitant de blesser ceux qui ne l’ont pas. Encore une fois, les piles de police (font stacks) ne sont pas une solution parfaite, mais elles vous donnent un avantage.
Mesure et Leading
La mesure est la longueur des lignes, et l’attaque est la hauteur (ou l’espacement vertical) des lignes. En CSS, la mesure peut être contrôlée en définissant une largeur de boîte-contenant (par exemple l’élément paragraphe). La lisibilité en est affectée. Si les lignes sont trop courtes ou trop longues, les utilisateurs ne seront pas à l’aise pour lire le contenu, on le voit souvent avec des mises en page fluides. Entre 40 et 80 caractères par ligne semble idéal.
Le premier plan peut être augmenté (ou diminué, si vous le voulez vraiment) en définissant la line-height, une propriété CSS. Généralement, une hauteur de 1,5 fonctionne en ligne, pour les paragraphes. Cela signifie que lorsque la taille du texte est de 12 pixels, la hauteur de la ligne est de 18 pixels (12 × 1,5), ce qui laisse au texte, un peu d’espace propice à une certaine notion de respiration.
Citations et Balles
Un troisième moyen, pour améliorer la lisibilité, est la pendaison (l’accrochage, l’ajustement en fait) des citations et des balles. Plutôt que de laisser les listes à puces telles quelles et des citations avec un alignement par défaut, harmoniser ceux-ci avec le reste du texte, horizontalement.
Tin Van Damme utilise cette technique pour son dernier remaniement de Max Voltar:
Nous avons d’ajouté une ligne rouge, pour souligner à quel point l’ensemble du texte a été aligné horizontalement. En fixant simplement le padding-left (propriété CSS) de la liste à puces à 0, vous pouvez obtenir le même résultat.
Retirer la pendaison pour les citations, n’est par ailleurs pas aussi simple. La plupart des concepteurs ont recours à une image de fond, de guillemets, alignent en conséquence, comme cela se fait chez Matthew Buchanan:
La marque de cotation suspendue, ici, ne perturbe pas le flux de texte. C’est un détail souvent négligé mais qui mérite d’être considéré.
Règles Print qui ne s’appliquent pas
Print (impression, le monde du papier) et Web sont différents. Cela semble assez évident, mais beaucoup de gens les traitent comme s’ils étaient les mêmes. L’impression est fixe, et le Web est dynamique. Avoir un contrôle complet sur la manière dans votre conception de site Web, sera, pour tout le monde, impossible.
Rythme vertical, texte justifié (muni de césure et sans rivières) et layouts multi-colonnes, sont quelques-unes des caractéristiques du Print qui sont (presque) impossibles sur le Web. Aussi, avons-nous beaucoup à espérer du CSS 3. CSS 3 ne sera probablement pas, cependant, un alpha et l’oméga de solution, et il faudra probablement encore quelques années, avant que nous puissions pleinement profiter de celui-ci-ci. Nous avons tout simplement à accepter ces différences pour l’instant: ne regardez pas le Web comme une version en ligne de l’impression, mais utilisez plutôt le potentiel intrinsèque du Web, à son maximum.
Un mot sur le remplacement d’image
Et quant au remplacement d’image (la technique de remplacement des polices avec des images)? Nous avons parlé de piles de police (font stacks), mais ne sont-elles pas inférieures au remplacement d’image? Eh bien, cela dépend de ce que vous pensez être le plus important: être capable d’afficher les polices que vous souhaitez ou avoir un contenu dynamique, accessible et ami des moteurs de recherche… Certaines techniques de remplacement d’image sont devenues assez avancées, mais elles ne sont toujours pas aussi souples que le texte brut. Le remplacement de l’image se prête bien aux en-têtes et aux extraits, mais elle ne sera pas une bonne solution, pour le corps du texte.
6. Espace vide
Les espaces vides (ou blancs), ou l’espace négatif, a à voir avec ce qui n’est pas là. Comme la mesure et le leading, l’espace blanc fournit au texte, un espace pour respirer. Vous pouvez faire des éléments se détacher les uns des autres, en ajoutant un espace blanc autour d’eux. Pour assurer la lisibilité, assurez-vous que les paragraphes ont un rembourrage suffisant.
Les pubs de parfum – ou toute annonce pour produit de luxe, d’ailleurs – sont connues pour leur utilisation de l’espace blanc … et une police serif pour faire bonne mesure.
Exemple
La capture d’écran ci-dessus, est celle du propre site de l’auteur, de l’article source de cet article… Shift (px). La conception repose largement sur la typographie et l’espace blanc. L’espace blanc fait probablement ,environ 50% de la page. L’espace blanc est un des plus faciles. Et le plus efficace pour un design agréable visuellement et lisible.
L’espace blanc ajoute beaucoup de classe au dessin. N’ayez pas peur de laisser des trous ouverts, même les plus béants. Les designers inexpérimentés sont tentés de mettre quelque chose, dans chaque petit coin. La conception consiste à communiquer un message. Les éléments de conception, par conséquent, devraient appuyer ce message, pas ajouter du bruit à sa création.
Un autre bon exemple du genre (avec beaucoup d’espaces vides):
Astheria de Kyle Meyer, que trop n’est pas forcément le bienvenu, pour un design agréable. Certaines personnes peuvent confondre «minimaliste» et «simpliste». Mais un tel style n’est ni simple ni facile.
7. Connexion
« Connection » est un terme un peu fabriqué pour le coup, mais il semble pouvoir illustrer ce dont nous allons parler. La connection se réfère ici à une conception Web, qui possède à la fois l’unité et la cohérence. Ces deux attributs démontrent le professionnalisme d’un dessin (et donc de son concepteur). Un dessin ou modèle doit être cohérent dans son utilisation des couleurs, dans sa gamme de polices, avec ses icônes, etc. Un dessin peut avoir fière allure et continuer de souffrir d’incohérences.
Lorsqu’un dessin ou modèle est inconsistant, son unité peut perdre l’utilisateur. L’unité est légèrement différente de la cohérence. L’unité se réfère à la façon dont les différents éléments dans un design interagissent et s’imbriquent. Par exemple, est-ce que les couleurs et les graphiques sont harmonisés? La cohérence, d’autre part, se trouve entre les pages d’un dessin.
L’unité est peut-être la plus importante des deux. Sans unité, avoir un bon design est dur. L’incohérence, cependant, peut donner un air de « bâclé », mais mais ne pas faire de la conception un échec total.
Parmi les sept principes visés dans cet article, la connexion est le plus important. La connexion a à voir avec la façon dont tous les éléments sont réunis: l’équilibre, la grille, les couleurs, le graphisme, la typo et l’espace blanc. C’est en quelque sorte le ciment qui lie le tout. Sans cette colle, la conception tombe en morceaux. Vous pourriez avoir une typo magnifique et un brillant et méticuleux choix de la palette de couleurs, mais si les graphiques sont affreux ou tout simplement ne correspondent pas, ou si tout est entassé sans idée, la conception échouera.
Exemple
Nous avons loué Nick La tôt, en raison de ses beaux graphiques, mais il est aussi un bon exemple de connexion. Lorsque vous regardez de près les graphismes et le style en général, tout a été un dessiné à la main, à l’aquarelle, orienté vers: les images des articles, les images de fond aquarellées, les dessins à la main, les gribouillis et les icônes, le style du scrutin, et ainsi de suite. Le souci du détail rend ce design excellent. Non?
Ressources de circonstance
>> Five Simple Steps to Designing Grid Systems
>> he Golden Ratio in Web Design
>> 8 Simple Ways to Improve Typography in Your Designs
>> Fonts and the Web
>> 4 Principles of Good Design for Websites
>> http://www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design/
>> http://sixrevisions.com/project-management/7-things-web-designers-hate-hearing-from-clients/
Conclusion
Une bonne conception Web n’est pas limitée aux sept principes clés abordés ici. Des aspects comme l’accessibilité, la lisibilité et la convivialité jouent un rôle non-négligeable par exemple.
C’est la raison pour laquelle le Webdesign est si difficile. Se mouiller les pieds dans la conception est facile, surtout aujourd’hui, avec tant de systèmes de gestion de contenu, outils de blogs et de thèmes facilement accessibles. Mais la maîtrise de toutes les facettes de la conception Web prend du temps et nécessite du talent (qu’est-ce que le talent?). Pouvoir faire de jolis dessins n’est qu’une petite facette, mais une étape peut-être importante.
L’auteur
Juul Coolen est un étudiant en informatique vivant aux Pays-Bas, amoureux du design. Outre l’élaboration et la conception pour le Web, il bloggue à l’occasion sur son site Internet personnel Shift (PX) et « tweets » (gazouille) sur Twitter bien-sûr >> @ juulcoolen.
Traduit et interprété, de l’anglais au français, par N Stefen MASSAMBA-DEBAT – PRO MESS
17.10.2009 Webdesign/Webdev+ No Comments