# data[].attributes.body
http://www.dafont.com/fr/
http://www.1001fonts.com/

# data[].attributes.body
https://www.linotype.com/fr/

# data[].attributes.body
www.fotolia.fr
http://www.gettyimages.fr/creative-images/royaltyfree
https://www.shutterstock.com/fr/

# data[].attributes.attachment_link.readable_text
Les langages de balisage, comme HTML, servent à structurer l'information, mais ils sont peu aisés à lire et manier. C'est pourquoi existent des alternatives allégées. Markdown ? DokuWiki ? ReStructuredText ? Les syntaxes légères sont nos amies !

Pour structurer le texte : les langages de balisage
(Markup language)

Les langages de balisage ( markup language) " représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle ". Ils utilisent des balises, unités syntaxiques qui permettent d'organiser les données de manière structurée. Parmi ceux-ci, nous avons, dans l'ordre d'apparition : LaTeX (1983), SGML (1986), RTF (1987), HTML (1991), XML (1998) et XHTML (1999).

Plus descriptifs qu'algorithmiques, ces langages restent relativement simples. Mais il n'est pas aisé de rédiger directement en HTML ou en LaTeX ! C'est trop technique pour les auteur·e·s. C'est surtout trop peu aisé à relire, car le balisage interfère, ne permettant pas une lecture fluide du contenu textuel. Jugez-en par vous-même avec ces deux exemples :
\title{Titre en \TeX}
\paragraph{Paragraphe de texte avec du \textbf{gras} et \textit{italique}. Voici un exemple de \href{http://exemple.net}{lien}.}
et
<h2>Titre en HTML</h2>
<p>Paragraphe de texte avec du <strong>gras</strong> et <i>italique</i>. Voici un exemple de <a href="http://exemple.net">lien</a>.</p>
Le HTML sert à structurer les documents web. Ce langage de balisage permet d'écrire de l'hypertexte, d'où son nom, HyperText Markup Language. Il a plus de vingt ans et s'appuie sur un " langage normalisé de balisage généralisé ", le SGML, dont les prémices remontent à 1969. Savez-vous qu'il existe plus simple, pour rédiger sur le Web ?

Pour rédiger : les langages de balisage léger
(Lightweight markup language)

La rédaction peut être encore simplifiée, par l'usage d'un langage de balisage léger. Un langage de balisage léger est un langage de balisage utilisant une syntaxe simple, conçue pour être humainement aisée à saisir et facile à lire dans sa forme brute. Nous connaissons ce type de langage, sans forcément le savoir, pour avoir tou·te·s utilisé un wiki un jour dans notre vie.

Les plus ancien·e·s d'entre nous se souviennent du BBCode (1998), qui ressemble encore trop au HTML pour être vraiment léger :
[size=150]Titre en BBCode[/size]
Paragraphe de texte avec du [b]gras[/b] et [i]italique[/i]. Voici un exemple de [url=http://exemple.net]lien[/url].
Nettement plus légères et lisibles, les syntaxes de type wiki, dites wikitexte (ou wikicode) émergent vers l'an 2000. Par exemple :
=== Titre en WikiMedia ===
Paragraphe de texte avec du '''gras''' et ''italique''. Voici un exemple de [http://exemple.net lien].
Certains outils de publication web, comme Dotclear ou SPIP (2001), permettent de rédiger avec semblable syntaxe légère. Par exemple :
{{{Titre en SPIP}}}
Paragraphe de texte avec du {{gras}} et {italique}. Voici un exemple de [lien->http://exemple.net].
Avantage des langages de balisage léger : un fichier de ce langage est facile à lire en l'état, dans sa forme non formatée, car exempt de balises, et facile à rédiger dans les éditeurs les plus simples, en texte brut, comme pour les mails.

Pour exemple, citons aussi Asciidoc (2002), Org-mode (2003), Texy ! (2004) et Textile (2004).
h2. Titre en Textile

Paragraphe de texte avec du *gras* et _italique_. Voici un exemple de "lien":http://exemple.net.
Retenons les plus agréables : Txt2tags (2001), ReStructuredText (2002), Markdown (2004) et Creole (2007), dont on apprécie la lisibilité en texte brut. Par exemple :
Titre en ReStructuredText
=========================
Paragraphe de texte avec du **gras** et *italique*. Voici un exemple de _lien : http://exemple.net.
et
## Titre en Markdown
Paragraphe de texte avec du **gras** et *italique*. Voici un exemple de [lien](http://exemple.net).
Il ne s'agit plus de codes compliqués, mais de raccourcis de saisie à base de simples caractères du clavier, balisant le texte en cours de rédaction, de façon parfois très intuitive, comme par exemple des tirets pour constituer une liste, ce que chacun fait déjà de façon spontanée. Un tel langage de balisage léger permet de rédiger plus confortablement.

Le texte ainsi balisé sera ensuite converti dans le format de document adéquat. En effet, un document rédigé dans un langage de balisage léger peut être converti dans différents type de formats comme HTML, PDF, OpenOffice, Word, LateX, EPUB... permettant de publier aussi bien sur papier qu'en numérique, à partir du même document. C'est l'un des points forts de ce type de langage !

Ces langages se distinguent entre eux par des caractéristiques tant techniques (portabilité, formats d'entrée et de sortie) qu'humaines (lisibilité et facilité d'apprentissage). Pour s'y retrouver, on se reportera aux comparatifs liés ci-dessous.

Les syntaxes légères sont nos amies

Bien sûr, il n'est pas possible de faire autant, ni aussi précisément, avec une syntaxe allégée : rédiger directement en LaTeX sera toujours plus puissant qu'en wikitexte. Mais les syntaxes légères répondent correctement aux usages les plus courants. C'est donc ce que l'on préférera utiliser par défaut.

# data[].attributes.attachment_link.description
Les langages de balisage, comme HTML, servent à structurer l'information, mais ils sont peu aisés à lire et manier. C'est pourquoi existent des alternatives allégées. Markdown ? DokuWiki ? ReStructuredText ? Les syntaxes légères sont nos amies ! Les langages de balisage ( markup language) " représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle ".

# data[].attributes.headline
Pour ceux qui veulent se lancer dans le e-commerce et qui n'ont pas la flemme

# data[].attributes.subject
Pour ceux qui veulent se lancer dans le e-commerce et qui n'ont pas la flemme

# data[].attributes.attachment_link.readable_text
Si vous suivez régulièrement le blog, vous avez forcément entendu parlé du tutoriel webdesign e-commerce Fine Cookies. Les 14 heures complètes de formation sont désormais entièrement disponible sur le site Living Tuts.

Quoi de mieux que de suivre des tutoriels pour apprendre et se perfectionner en design de site web ? De la phase de réflexion, au design sous Photoshop, jusqu'à l'intégration statique HTML5 et CSS3, je vous ai concocté un tutoriel très complet. Partagez mes connaissances et mes expériences sont des notions ancrées de la philosophie de Webdesigner Trends. Cette fois-ci, j'écris a nouveau sur le site de tutoriel Living Tuts.

Souvenez-vous, le site propose divers tutoriels dans de très nombreux domaines du digital, comme le digital painting, le webdesign, l'intégration web, mais aussi le son, le Flash, WordPress...

L'objectif de ce tutoriel au niveau intermédiaire est de créer un site complet pour une marque fictive de cookies créée de toute pièce : Fine Cookies. Le tout en 3 grosses étapes bien distinctes :

La phase de pré-projet webdesign durant laquelle j'explique la préparation du site en passant par différentes phases types de conception de projets web. Au programme, rendez-vous client, cahier des charges, réflexion créative, créer le logo, créer un zoning, etc. Extraits en images :

Une fois le projet bien cadré, nous passons à la réalisation du webdesign de la page d'accueil avec Photoshop. Extraits en images :

Si vous avez terminé le design sous Photoshop, vous pouvez passer à l'intégration statique HTML5 / CSS3. Le tutoriel est découpé est 4 étapes précises :

Extraits en images :

Au final, une page d'accueil complète :

Lisez, apprenez, commentez et partagez !

J'espère que maintenant vous prendrez du plaisir a suivre les trois tutoriels ! N'hésitez pas à poser vos questions directement en commentaire sur Living Tuts. Et enfin, j'espère que vous les partagerez un maximum avec vos amis !

# data[].attributes.attachment_link.title
Créer un webdesign e-commerce : tutoriel complet

# data[].attributes.attachment_link.description
Si vous suivez régulièrement le blog, vous avez forcément entendu parlé du tutoriel webdesign e-commerce Fine Cookies. Les 14 heures complètes de formation sont désormais entièrement disponible sur le site Living Tuts. Quoi de mieux que de suivre des tutoriels pour apprendre et se perfectionner en design de site web ?

# data[].attributes.body
idee d ambiance site we

# data[].attributes.attachment_link.readable_text
Je me souviens, les premiers ordinateurs, c'était rudimentaire. Il n'y avait pas assez de touches, sur le clavier, pour saisir tous les caractères nécessaires à rédiger dans un français correct. Il fallait donc saisir des codes - sous la forme d'une suite de chiffres, combinés avec la touche " Alt ", appelés " " -, pour obtenir ces caractères manquants, dits " spéciaux ". Par exemple, pour produire la lettre " É ", il fallait activer 4 touches [ 1] : " Alt+ 1 4 4 ". Quatre !

C'est ainsi qu'au lieu de taper les lettres d'affilé, tout naturellement, comme on le faisait jusqu'alors, à la machine à écrire, il fallait par exemple activer les touches suivantes :

soit un vrai galimatias, juste pour saisir cette phrase simple :

" Ça va, sa sœur, Émilie, s'en charge... À bientôt ! "

Soit 67 touches pour saisir 33 lettres. Vous imaginez la galère ? Et le temps que ça prenait ! Bref, c'était pénible. Parce qu'évidemment, personne ne connaissait ces " Alt codes " par cœur et il fallait s'en référer sans cesse à une table de correspondance [ 1]. Evidemment, la flemme l'emportant, on finissait par taper au plus simple, comme des sagouins, sans plus s'embarrasser avec les accents, les cédilles et autres joyeusetés de la langue française :

Ce qui occasionne quelques fautes, car oui, l'accent a pleine valeur orthographique :

" Ca va, sa soeur, Emilie, s'en charge... A bientot ! "

Les Alt codes existent toujours !

Tels étaient mes débuts en 1995. Je saisis désormais beaucoup plus rapidement au clavier et plutôt agréablement. Côté caractères, j'utilise ceux des alphabets latin français mais aussi phonétique, grec et mathématique. Et j'ai appris à soigner orthographe et typographie au fil du temps, avec plaisir. L'informatique ne cesse de faire des progrès, heureusement.

C'est ce que je pensais, jusqu'à me retrouver avec un PC Windows dernier cri entre les mains. Comment ça, pas de " C " cédille pour répondre tout simplement " Ça va " à ma collègue, Élodie, ni de " E " majuscule accentué, pour ne pas éborgner son prénom... Gneuh ? Et toujours ces vieux codes barbares pour saisir des " caractères spéciaux " ? En 2015. Sérieux. Ça n'a pas évolué en 20 ans ! Je ne m'en remets pas.

Je l'ignorais, mais la saisie sur clavier PC Windows repose toujours sur les Alt codes. Windows est hyper moisi pour les caractères hors clavier témoigne Dascritch. Pire que cela, va savoir pourquoi, il existe PLUSIEURS codes de correspondances ! Ce ne sont plus 4 touches qu'il me faut presser désormais, pour saisir la lettre " É ", mais carrément 5 [ 2] : " Alt+ 0 2 0 1 ". Diantre. Cinq. Plus ça va, plus y'en a... Et ça fait encore plus de charabia dans mon cerveau au moment de la saisie :

Soit 73 touches. Pour comparer, voici comment je saisis cette même phrase aujourd'hui, et depuis des années, sur mon Mac OS :

Soit 57 touches activées. Quinze de moins que sur Windows, pour la même phrase. Ça paraît dérisoire, mais vu la quantité de texte que nous saisissons à longueur de journée, le temps gagné n'est pas négligeable. Et la surcharge cognitive moindre, avec des raccourcis de saisie plus intuitifs que les Alt codes, ce qui laisse le neurone vaillant pour se concentrer sur son job.

Mais comment faites-vous ?

Vu l'incroyable inconfort du truc, je m'étonne n'en avoir pas davantage entendu parler. Les sacrés français que nous sommes devraient râler copieusement, non ? Les PC Windows sont utilisés par des millions de personnes à travers le monde. Comment font-elles ? Y'a-t-il une astuce qui m'échappe ?

Certain·e·s, ignorant sans doute l'existence des Alt codes, demeurent persuadés que l'ordinateur, machine conçue dans une langue dépourvue de caractères accentués, ne permet pas d'écrire avec des accents. L'usage des PC déforme leur perception au point que nombreux sont celleux qui pensent même que les capitales ne s'accentuent plus, désormais, en français !

Sinon, chacun y va de son astuce : saisie par copier-coller (si si) de caractères depuis un clavier virtuel, post-it sur l'écran, antisèches d'Alt-Codes, rustine de clavier comme le kbdfr dk, correcteur en ligne, comme le chouette Typonerd, extension navigateur ... Je n'ose imaginer le temps ainsi perdu, démultiplié par le nombre d'utilisateurices à travers le monde et, en tant qu'ergonome, ma pensée est entièrement monopolisée par la nécessité d'améliorer ce poste de travail, à commencer par, ou à défaut, comprendre au moins la logique qui sous-tend telle interface.

Mais la vraie question, comme dit Bortzmeyer, c'est : en 2015, il y a encore des gens qui acceptent un système où il faut connaître les points de code pour écrire en français ??? Comment, et finalement pourquoi, supportez-vous ça ?

Mon antisèche d'Alt codes...

En attendant, permettez que je note ici les caractères qui me manquent le plus souvent sous Windows, pour me permettre de les retrouver facilement :

Je vous ai mis, en correspondance, les raccourcis de saisie que j'utilise habituellement sous Mac OS, juste pour montrer que si, bien sûr que si, on peut faire plus simple. La question est : pourquoi Windows persiste-t-il à faire aussi compliqué ? Et quand est-ce que vous vous rebellez, les gens ?

# data[].attributes.attachment_link.description
Je me souviens, les premiers ordinateurs, c'était rudimentaire. Il n'y avait pas assez de touches, sur le clavier, pour saisir tous les caractères nécessaires à rédiger dans un français correct. Il fallait donc saisir des codes - sous la forme d'une suite de chiffres, combinés avec la touche " Alt ", appelés " " -, pour obtenir ces caractères manquants, dits " spéciaux ".

# data[].attributes.headline
Pour les flemmards qui veulent se lancer dans le e-commerce

# data[].attributes.subject
Pour les flemmards qui veulent se lancer dans le e-commerce

# data[].attributes.attachment_link.provider_name
Créez un site de vente en ligne | Boutique en ligne | Wix.com

# data[].attributes.attachment_link.readable_text
Nous ne prélevons aucune commission sur vos ventes

Un site attractif

Personnalisez le style de votre site de vente en ligne à volonté. Faites votre choix parmi une centaine de Templates conçus par des designers et modifiez les éléments de design afin de créer votre site professionnel. Aucune connaissance en programmation n'est nécessaire.

Permettez aux internautes de faire leur shopping depuis tous les appareils. Wix optimise automatiquement votre site eCommerce aux écrans mobiles. Personnalisez votre site de vente en ligne à volonté à l'aide de notre plateforme intuitive.

Créez votre site de vente en ligne

Trouvez le Template idéal pour votre entreprise

Des centaines de Templates

Tous les outils nécessaires à la création de votre site eCommerce

Des galeries remarquables

Plateforme intuitive de création de site de vente en ligne

De nombreuses galeries d'articles

Divers moyens de paiement

Bons d'achat et offres spéciales

Version eCommerce optimisée mobile

Assistance 24h/24 et 7j/7

Gérez votre entreprise depuis un seul endroit

Une gestion simplifiée

Définissez les modalités de livraison

Gardez votre inventaire à jour et assurez le suivi de vos commandes.

Acceptez divers moyens de paiement (cartes de crédit, Paypal et autres).

Créez et générez des bons d'achat afin de fidéliser votre clientèle.

Décidez des modalités de livraison de vos produits ainsi que des taxes pour chaque destination.

Un site eCommerce. Une gestion intuitive. Une version optimisée pour écrans mobiles.

Version optimisée pour écrans mobiles

Comment créer une boutique en ligne ?

1. Connectez-vous à votre compte ou inscrivez-vous gratuitement.

2. Sélectionnez un template dans la catégorie "Boutique en ligne".

3. Modifiez les textes et ajoutez le nom de votre entreprise.

4. Cliquez sur "Ma boutique", puis sur "Gérer votre boutique".

5. Ajoutez vos articles à votre boutique.

6. Sélectionnez l'onglet "Configuration" pour ajouter les paramètres de paiement et de livraison.

7. Publiez votre site et connectez votre propre domaine.

# data[].attributes.attachment_link.title
Créez un site de vente en ligne | Boutique en ligne | Wix.com

# data[].attributes.attachment_link.description
Créez votre boutique en ligne professionnelle. Affichez vos produits dans des galeries d'articles. Gérez vos stocks, votre inventaire, connectez des modes de paiement et bénéficiez d'outils avancés. Votre boutique s'affiche parfaitement sur les smartphones pour que vos clients puissent effectuer leurs achats.

# data[].attributes.attachment_link.readable_text
C'est lorsqu'on en change, que l'on se rend compte des habitudes prises et de la difficulté à saisir avec un autre clavier... Cherchant les touches pour les majuscules accentuées, sur un clavier PC Windows, j'eus pour réponse : " non, y'a pas de touche pour ça. " Vraiment ? Vous me direz que le nombre de touches de clavier est limité et ne peut représenter tous les " caractères spéciaux " du français. Spéciaux ? Ça me laissera perplexe. Parce que saisir dans un français correct est pour moi un réflexe, c'est-à-dire une réalité, pas un fantasme. " Y'a bien quelques raccourcis, pour saisir les caractères qu'on voit en plus sur certaines touches. Mais non, on ne peut pas faire ça. Ou alors... peut-être avec un code. " Pardon ? " Mais sur Mac, c'est pire, non ? Y'a qu'un seul caractère par touche ! " Alors... Laissez-moi vous montrer. Voici le clavier de mon Mac OS :

Ça ressemble à n'importe quel clavier français AZERTY. Tout simple. De prime abord. Car simple ne veut pas dire simpliste ni limité. La diversité, et la complexité, sont cachées. Voyons voir ça...

Il y a trois touches magiques à connaître, seulement trois (et aucun code bizarre), pour saisir plusieurs centaines de caractères - c'est plus qu'il n'en faut pour rédiger correctement en français -, à partir des 78 touches du clavier :

Actionner la touche ⇪ (appelée " Verr Maj " ou " Caps lock ") permet, comme son nom l'indique, de passer le clavier en lettres capitales, TOUT le clavier - ça semble éperdument logique, mais comme ça ne l'est pas partout, je précise - y compris ses caractères accentués, transformant bien " é " en " É ", " à " en " À ", " ç " en " Ç "... (là où PC Windows affiche, allez savoir pourquoi, les chiffres) :

Comme partout, presser la touche ⇧ (appelée " Maj " ou " Shift ") en même temps qu'une autre touche permet de saisir le caractère correspondant en majuscule, ponctuellement, mais aussi d'accéder aux chiffres :

Simple, non ? Ce n'est pas tout. D'autres touches permettent d'accéder à d'autres jeux de caractères, comme autant de claviers superposés.

Presser la touche ⌥ (appelée " Option " ou " alt ") en même temps qu'une autre, permet de saisir des caractères moins courants mais indispensables, comme le " œ " (derrière " o "), l'euro " € " (derrière " $ "), le signe différent " ≠ " (derrière " = "), ou encore la lettre " π " (derrière " p ") :

Combiner les touches, ⌥+ ⇧, permet d'obtenir les capitales correspondantes, soit le " Œ ", " ¥ ", " ± " et " ∏ ", des exemples précédents :

Si vous voulez voir ces claviers chez vous, utilisez le " visualiseur de clavier " de votre Mac. C'est aussi un clavier virtuel, qui permet de rédiger sans clavier physique, par exemple, s'il est en panne.

Raccourcis de saisie intuitifs

Rassurez-vous, il n'est pas nécessaire d'apprendre la disposition des touches de ces différents claviers, tels qu'ils se présentent ici afin d'illustrer cette explication. Il suffit de comprendre la logique qui préside cette disposition : les caractères plus rares se cachent - dans la mesure du possible - derrière le caractère courant le plus ressemblant. Et le raccourci de saisie correspondant est d'autant plus complexe que le caractère est rare. J'ai fini par mémoriser quelques suites de caractères qui " s'empilent " derrière telle ou telle touche. Par exemple :

Et c'est ainsi que l'on trouve le pipe " | ", derrière la lettre qui lui ressemble le plus, le " l " et le " ¬ " derrière le " L ". Et, ma suite préférée : parenthèse, crochet et accolade sous la même touche, ce qui est bien pratique pour les équations mathématiques et la programmation.

Caractères accentués en infobulle

Si vous ne savez pas comment accéder à la version accentuée d'une lettre, et que vous ne connaissez pas encore le raccourci correspondant, il suffit d'un appui long sur la touche, oui, comme sur les terminaux tactiles, pour faire apparaître toutes les versions accentuées en infobulle, davantage que celles nécessaires en français :

Vous en voulez encore ?

Ce sont là les caractères que l'on peut faire avec le clavier français AZERTY sous Mac OS X. Je vous laisse en découvrir toutes les possibilités. S'il vous en manque, utilisez le " visualiseur de caractères " ( Ctrl+ Cmd+ Espace), qui permet de saisir des flèches de toutes sortes, des symboles mathématiques, des pictos unicode et des emojis.

Si la disposition des touches ne vous convient pas, essayez les autres claviers français disponibles : belge, numérique (pour les comptables qui souhaitent garder les chiffres en accès direct) ou PC (pour les transfuges nostalgiques), et même en QWERTY : canadien et suisse romand.

Et si vous n'en avez pas encore assez, vous pouvez activer un autre clavier : grec, japonais, hébraïque, khmer, persan, népalais, kurde... Plus d'une centaine d'autres dispositions ( keymap), dans d'autres langues et alphabets, sont disponibles nativement, soit un nombre de caractères vertigineux, permettant d'écrire dans à peu près toutes les langues.

Mais en aucun cas vous n'aurez à retenir des codes compliqués comme les " Alt codes " Windows, où pour la simple lettre " É " il faut saisir le code " Alt+ 0 2 0 1 " !

Bref, libre de choisir

Ce qui m'intéresse ici est - non pas de fanfaronner avec mon clavier de telle marque, mais plutôt - la complétude d'interface proposée, qui sert aussi bien les besoins simples du débutant que ceux avancés du rédacteur multilingue, du maniaque d'orthographe ou de typo. L'utilisateur peut l'appréhender à sa guise, se limiter à l'usage superficiel du clavier physique tel qu'il le voit, ou découvrir progressivement ses possibilités, avec une courbe d'apprentissage accompagnée de plusieurs aides : raccourcis de saisie, infobulle, visualiseur de clavier, de caractères.

Si limitation il y a, elle n'est pas ici imposée par l'interface, car le clavier proposé est plus que complet, mais dépend de la curiosité de l'utilisateur, qui est donc laissé libre de choisir l'usage qui lui agrée.

# data[].attributes.attachment_link.description
C'est lorsqu'on en change, que l'on se rend compte des habitudes prises et de la difficulté à saisir avec un autre clavier... Cherchant les touches pour les majuscules accentuées, sur un clavier PC Windows, j'eus pour réponse : " non, y'a pas de touche pour ça. " Vraiment ?

# data[].attributes.headline
7 fausses-bonnes idées qui ruinent votre site internet

# data[].attributes.subject
7 fausses-bonnes idées qui ruinent votre site internet

# data[].attributes.body
L'essentiel ^.^

# data[].attributes.attachment_link.readable_text
Petit rappel de certains fondamentaux en matière de webdesign et d'expérience utilisateur.

" L'enfer est pavé de bonnes intentions ". Cet adage vaut aussi pour le Web. Au moment de créer votre site internet, votre cerveau entrera en ébullition. Vous aurez envie de tout essayer, tout ajouter. Aujourd'hui, toutes les fonctionnalités - même les plus sophistiquées - sont accessibles au commun des mortels. Alors, pourquoi se priver ?

Tout simplement parce que certaines idées sont de fausses bonnes idées. Géniales sur le papier, elles vont en pratique plomber l'expérience utilisateur (UX) de votre site. Comme ces pop-ups intempestifs, qui révolterontles plus stoïques des internautes. Ou ces pages gavées comme des oies, dont le temps de chargement donnera envie à vos visiteurs de se pendre au fil de leur souris.

Comment être sûr de créer un site qui soit non seulement beau, mais aussi efficace dans la conversion de vos visiteurs (en clients, abonnés ou autres) ? Voici les 7 erreurs de débutant que vous devez impérativement éviter !

1. Les mots-clefs à outrance

À force d'entendre que les mots-clefs ouvrent les portes de Google, les webmasters ont tendance à en glisser partout - quitte à faire violence à leurs textes. Ici comme ailleurs, le mieux est l'ennemi du bien. Les bots des moteurs de recherche arpentent la Toile à longueur de journée. Une fois arrivés sur votre site, ils interrogent plusieurs éléments afin de savoir à qui ils ont affaire. Les mots-clefs en font partie. Avec deux ou trois par page (outre ceux que vous mettez dans vos titres et balises), vous les renseignez amplement. Au-delà, ils pourraient penser que vous avez cherché à les duper - et risqueraient de pénaliser votre référencement au lieu de l'améliorer !

2. Les pages étirées sur la largeur

Certains web designers créent des pages étirées sur la largeur, qu'il faut faire défiler de gauche à droite. Cette habitude, peut-être héritée d'une longue pratique des livres, est à proscrire. En effet, le sens de l'Histoire - et de la lecture - penche clairement vers la verticalité. À ce titre, Internet marque un intéressant retour en arrière, puisque le contenu s'y consomme de haut en bas, comme un parchemin que l'on déroule. En témoignent la forme des molettes ou les caresses digitales que vous prodiguez (amoureusement)à votre smartphone.

Dans l'absolu, étirer vos pages n'est pas une mauvaise idée - à condition que ce soit dans la longueur. Cette pratique porte même un nom, le " long scrolling ", et constitue l'une des grandes tendances du Web design 2016.

3. L'excès de contenu

Vous êtes un vrai passionné - par le yoga, le marketing ou la reproduction des bonobos (on ne juge personne). Du coup, vous avez des tas de choses à montrer ou à raconter. Sur votre site, vous allez devoir modérer vos ardeurs. En effet, ces 15 dernières années, la capacité d'attention moyenne d'un être humain a chuté de 33 % pour atteindre huit secondes seulement (selon une étude Microsoft). Pour info, c'est une seconde de moins qu'un poisson rouge - et vlan l'ego !

Conséquence : pour être lu et assimilé, un message doit être court. Pas question de faire du Proust sur votre page d'accueil ou d'inviter du Bellay à taper le sonnet dans votre galerie de produits. Les experts recommandent de se limiter à 150 mots par page - à l'exception de vos articles de blog, bien sûr. Au-delà, vos poissons rouges de lecteurs n'auront qu'une envie : changer de bocal.

4. La musique en lecture automatique

Qui aime la musique d'ascenseur ? Personne ? C'est bien ce qu'on pensait. Sur Internet, c'est la même chose : les accompagnements sonores, lorsqu'ils sont imposés, sont particulièrement irritants. Alors, à moins d'exercer une activité qui le justifie (DJ, producteur, station de radio, etc.), ne faites pas tourner de chansons en lecture automatique sur votre site.

Comme dit plus haut, la capacité d'attention d' Homo sapiens s'est réduite comme peau de chagrin. Déjà qu'il est difficile de demander à quelqu'un de lire un livre, alors imaginez : lire et écouter de la musique en même temps ? Si vous souhaitez que vos visiteurs soient pleinement concentrés sur votre message, coupez le son.

5. La profusion de pop-ups

Les pop-ups sont de petites fenêtres qui surgissent lors de l'ouverture d'un site internet. Pudiques, certaines vous informent que le contenu que vous vous apprêtez à voir est " réservé aux grands enfants de + 18 ans ". Plus agressives, d'autres vous vantent les mérites d'un quelconque partenaire commercial. Dans tous les cas, il est impossible d'y échapper à moins d'avoir configuré votre navigateur pour qu'il les filtre.

La tentation est grande d'utiliser, vous aussi, ces fenêtres intruses. Il s'agit en effet d'une solution imparable pour faire sauter un message aux yeux de vos visiteurs. Mais comme tous les éléments non sollicités, les pop-ups doivent être consommées avec modération - sous peine de donner de l'urticaire à vos hôtes. Limitez-les aux annonces légales (l'utilisation de cookies), incontournables (l'inscription à votre newsletter) ou temporaires (des soldes à ne pas manquer). Pour le reste, votre site fera amplement l'affaire.

6. Les étapes superflues

Plus une procédure est longue et détaillée, et plus ça fait sérieux ? Pas sur Internet. Si vous souhaitez que vos visiteurs aillent au bout de leur démarche (acheter, télécharger, s'inscrire, etc.), vous devez faire court. Commencez par simplifier votre arborescence. Par exemple, si vous avez un site e-Commerce, les internautes ne doivent pas avoir plus d'un clic à faire pour arriver sur votre galerie de produits.

Allégez ensuite vos formulaires de leurs champs inutiles. En 2016, avez-vous vraiment besoin d'un numéro de fax pour valider une commande ? Glaner des informations sur vos clients est excellent pour votre marketing. Mais vous devez également composer avec cette autre réalité : si vous mettez trop d'étapes dans une procédure, les utilisateurs n'auront pas envie d'arriver à son terme.

7. Les outrages à la police

Des milliers de polices d'écriture sont disponibles sur la Toile. Avec ou sans empattements, avec ou sans ligatures, classiques ou excentriques... Vous en avez pour tous les goûts. Ici comme ailleurs, vous tenterez coûte que coûte de sortir du lot. Problème ? Les polices les plus originales sont souvent les moins lisibles. Limitez leur utilisation à vos titres et votre logo. Pour le corps de vos textes, des polices plus conventionnelles sont de rigueur, comme Arial ou Helvetica.

Par souci d'harmonie visuelle, veillez également à ne pas mêler plus de deux ou trois polices sur un même site. Sinon, ce dernier donnera une impression de fouillis et d'amateurisme qui rebutera les internautes. Ou pour le dire comme Victor Hugo : " police partout, justice nulle part. "

# data[].attributes.attachment_link.title
7 fausses bonnes idées qui ruinent un site internet

# data[].attributes.attachment_link.description
Petit rappel de certains fondamentaux en matière de webdesign et d'expérience utilisateur. " L'enfer est pavé de bonnes intentions ". Cet adage vaut aussi pour le Web. Au moment de créer votre site internet, votre cerveau entrera en ébullition. Vous aurez envie de tout essayer, tout ajouter.

# data[].attributes.attachment_link.description
Polar Vertex is a new display typeface that inspires dreamers and free-thinkers. With a slightly nautical, celestial, and geometric design, it is quite diverse.

# data[].attributes.headline
Création de site internet : qu’est ce qu’un Template ?

# data[].attributes.subject
Création de site internet : qu’est ce qu’un Template ?

# data[].attributes.attachment_link.provider_name
Agence web, création et refonte de site internet, référencement

# data[].attributes.attachment_link.title
Création de site internet : qu’est-ce qu’un Template ? | AntheDesign

# data[].attributes.attachment_link.description
Le Template est très utilisé dans la création de site internet, il permet de diminuer les temps de création et donc le coût du site internet.

# data[].attributes.headline
Du zoning au mockup, itinéraire d’une maquette web

# data[].attributes.subject
Du zoning au mockup, itinéraire d’une maquette web

# data[].attributes.attachment_link.readable_text
Il n'est pas toujours évident de s'y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [**] à avoir déjà vécu une situation d'incompréhension à cause de ce vocabulaire. Les termes " zoning " et " mock-up ", en particulier, ont des significations différentes selon les personnes [**] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de " wireframe "... Pour mieux s'y retrouver, commençons par mettre les bons mots sur les choses.

sketch / croquis

La première chose que l'on fait, c'est de jeter des idées sur papier, sous la forme de croquis.
Outils : papier et crayons, Sneakpeekit, InterfaceSketch

Le sketch est trop peu utilisé : vous êtes peu nombreux à crayonner régulièrement et près de la moitié [**] à ne jamais faire de croquis ! C'est pourtant une façon d'organiser sa pensée, que l'on soit designer ou développeur. Quitter l'écran permet aussi de mieux réfléchir.

Conception ergonomique

zoning

Le zoning, comme son nom l'indique, sert à identifier les principales zones. Ce schéma en noir et blanc permet de lister les contenus, pour ne pas en oublier et à commencer à hiérarchiser l'information dans la page, par la proportion des blocs ou des nuances de gris. Il donne une vue macro.
Outils : papier et crayons, LibreOffice, Wireframe.cc [*], Cacoo, etc.

wireframe / maquette filaire

Il complète le zoning réalisé précédemment, en rentrant dans le détail de chaque bloc, avec du vrai-faux contenu. C'est un dessin informatif, monochrome, qui peut servir de base aux spécifications.
Lire : Zoning vs. Wireframes, par Sylvie Daumal
Outils : papier et crayons, Balsamiq, Pencil, Moqups [*], MockFlow, Mockingbird, iPlotz, etc.

prototype

Ce sont des pages fonctionnelles, qui se consultent donc dans le navigateur, avec des liens cliquables et des interactions. Le prototype peut servir à effectuer des tests d'utilisabilité.
Outils : HTML/CSS/JS, Axure, Jetstrap, Dummy, etc.

Maintenant que nous avons défini ces objets, voici comment ils pourraient s'enchaîner, en une succession de livrables :

Ils sont en noir et blanc ou en nuances gris, en tout cas extrêmement sobres, pour ne pas présumer de la mise en forme et concentrer l'attention sur le fond. Vous êtes de plus en plus nombreux à les utiliser (+ de la moitié d'entre vous les utilisent, souvent ou parfois [**]) et c'est tant mieux. Faciles à réaliser et modifier, zoning et wireframes donnent une bonne vision du site à concevoir et des cas d'utilisation qu'il faudra développer par la suite.

Habillage graphique

moodboard / planche d'inspiration

C'est une planche d'inspiration créative, où on épingle en vrac toutes les idées, au fur et à mesure qu'elles se manifestent.
Outils : panneau d'affichage, Keynote, PowerPoint, etc.

style tiles / planches de style

Plusieurs planches d'échantillons de typo, titraille et palette de couleur, guère plus. Elles permettent de choisir une piste entre différents styles, en prémisse de la charte graphique.
Lire : Les " Style Tiles ", un nouvel outil pour le webdesigner ?, par Marie Alhomme, Le train de 13h37
Outils : Photoshop, The Gimp, StyleTil.es

mockup / maquette graphique

Prévisualisation haute fidélité du rendu graphique. Il permet de valider l'apparence graphique des pages du site.
Outils : Photoshop, The Gimp, Photoshop Etiquette Manifesto

Et voici comment ils pourraient s'enchaîner :

Les étapes de réflexion créa sont souvent trop peu formalisées. Moodboard et style tiles sont trop peu utilisés (respectivement 70 % et 80 % d'entre vous ne les utilisent jamais [**]). Tout repose donc sur le mock-up et lui seul, qui est un goulot d'étranglement. Il pourrait pourtant être déchargé : police et palette peuvent être choisies plus tôt, indépendamment de la composition de la page.

Workflow idéal de conception

Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !

1. Dans un premier temps, le zoning et le moodboard permettent d'amorcer le travail, en collectant l'inspiration et dégrossissant ;

2. Validation par le commanditaire : une première validation peut se faire sur wireframe et style tile, conjointement ou indépendamment ;

3. Tester avant production.

Suivre un tel processus de conception a pour avantages de :

améliorer la communication avec le commanditaire et au sein de l'équipe, en donnant un aperçu de chaque étape ; se prémunir du flou artistique, en rendant ainsi tangible ce qui est souvent abstrait ;

impliquer le commanditaire en amont et corriger le tir au plus tôt, avant la production ;

progresser en parallèle, en séparant ergonomie, fonctionnalités et apparence graphique ; accélérer les phases suivantes ;

ne plus faire l'erreur de penser l'apparence graphique avant les fonctionnalités ; réduire d'autant les surcoûts de développement.

Cependant il n'est pas indispensable, ni même souhaitable, de suivre scrupuleusement chacune des étapes ici présentées. Ce process est à adopter avec souplesse et interprétation, en modulant en fonction des projets, des équipes et des habitudes de travail.

Il est possible, par exemple, de :

passer directement du zoning au mockup, comme pour l'extranet assurés Thélem assurances, par l'agence LunaWeb

travailler zoning et moodboard en parallèle, en préparation de la maquette graphique, comme pour le design d'Indigio [*], par Dean Burney

dessiner toutes les pages en wireframe, pour les habiller graphiquement ensuite, comme pour la refonte de Mattrunks [*]

réaliser le mockup directement dans le navigateur : Make Your Mockup in Markup

travailler zoning et wireframe directement dans le navigateur, en se passant de Photoshop, comme pour la validation du responsive AAHomecare

réaliser un prototype haute fidélité, avec rendu graphique, comme pour Codex Books

etc.

Ce sujet a été traité en conférence à la pizza party d' Alter Way de novembre 2012 et à la Kiwi Party 2013, dont voici la captation vidéo (merci @idsquare).

[**] D'après le sondage préalable réalisé fin juin 2013 auprès de 100 personnes concernées (webdesigners, chefs de projets, développeurs, intégrateurs, etc.).

[*] Comme on peut le constater, dans les intitulés des outils et publications, le vocabulaire déborde parfois sur des notions conjointes.

# data[].attributes.attachment_link.title
Du zoning au mockup, itinéraire d'une maquette web

# data[].attributes.attachment_link.description
Il n'est pas toujours évident de s'y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [**] à avoir déjà vécu une situation d'incompréhension à cause de ce vocabulaire.

# data[].attributes.attachment_link.title
Découper et intégrer une maquette @OpenClassrooms

# data[].attributes.attachment_link.description
L'intégrateur web doit découper des maquettes qu'il reçoit d'un designer. Comment repérer les différentes sections de son site et les intégrer en HTML et CSS ?

# data[].attributes.body
Templates PSD

# data[].attributes.attachment_link.readable_text
Lorsque vous devez créer un site web, le design est une étape obligatoire. Si on veut un design moderne et professionnel rapidement, une solution pratique consiste à utiliser un template.

Un template de site web gratuit est un excellent moyen de gagner du temps tout en ayant un beau design, surtout pour un site qui démarre ou si vous ne voulez pas casser votre tirelire.

Voici donc 20 templates de site web au format Photoshop (PSD). Ces templates ont été crées par des designers experts et triés sur le volet. Ils sont totalement gratuits et vous pouvez les personnaliser entièrement (couleurs, images, polices, textes, fonds...). Cliquez sur les liens correspondants pour les télécharger gratuitement.
Template PSD Gratuit: Modus Versus par Benjie Moss Singolo: Site web complet sur une page par Marijan Petrovski Hexal: Template pour site portfolio par Marijan Petrovski Perth: Template simple Flat Design par Peter Finlan Template PSD e-Commerce par Enzo Li Volti LineCase: Template Élégant par Blaz Robar Apptastico: Template de site pour application par Christoffer O. Jensen Extraordinary Magazine: Template PSD style magazine par Aykut Yilmaz Template PSD de site web pour application par Tomas Laurinavicius Template PSD de site web portfolio sur une page par Nathan Brown Legend: Template de site sur une page par par Akash Bhadange Brushed: template de site gratuit sur une page par Alession Atzeni Blueasy: template PSD de site portfolio par Djordje Vanjek Codester: template type repsonsive / bootstrap par Akash Bhadange Motion: template gratuit de site web sur une page par Mahmoud Baghagho Zebra: template PSD e-commerce gratuit par CSS Author Organic: template gratuit par Blaz Robar Template de site web sur une page par Krishnan Unni Travler: Design de site web PSD gratuit par Blaz Robar FashionPress: template PSD gratuit par Shakil Ali
Et voilà ! Avec ça, vous avez de quoi faire, surtout que, s'agissant de templates PSD, vous pouvez les modifier pour les personnaliser à votre guise.

N'oubliez pas quand même de consulter les licences d'utilisation propres à chaque template. En effet, l'utilisation de ces templates est parfois soumises à certaines conditions (comme celle de citer l'auteur du templates dans les crédits ou le footer de votre site - c'est quand même plus sympa non ?).

# data[].attributes.attachment_link.title
20 templates psd de site web moderne gratuits

# data[].attributes.attachment_link.description
Lorsque vous devez créer un site web, le design est une étape obligatoire. Si on veut un design moderne et professionnel rapidement, une solution pratique consiste à utiliser un template. Un template de site web gratuit est un excellent moyen de gagner du temps tout en ayant un beau design, surtout pour un site qui démarre ou si vous ne voulez pas casser votre tirelire.

# data[].attributes.headline
Première maquette graphique web : comment faire ?

# data[].attributes.subject
Première maquette graphique web : comment faire ?

# data[].attributes.attachment_link.readable_text
Maquettistes affirmés, mais débutants sur le Web, voici les repères élémentaires à connaître pour créer votre première maquette graphique pour le Web : résolution d'écran, pixels, couleurs hexadécimales, page web, scroll, découpe, tout ça. Pour partir sur de bonnes bases.

1. Exprimez tout en pixel : l'unité de mesure, sur le Web, est le pixel, point élémentaire de l'écran, et non pas le pica, le point ou le centimètre pour lesquels il n'existe pas de conversion et qu'il faut donc oublier.

2. Travaillez en bitmap à l'échelle 1:1. Jetez-moi les logiciels vectoriels (Flash, Illustrator) aux oubliettes ! Aucun outil n'est actuellement correctement adapté au graphisme web qu'il conviendrait donc de faire directement en langage CSS. À défaut, n'importe quel logiciel bitmap où travailler en pixel et couleurs web fera l'affaire. Beaucoup utilisent Photoshop, mais il existe d'autres logiciels, comme GIMP qui est libre et gratuit.

3. Un écran d'ordinateur a une résolution d'affichage de 72 dpi environ. Il est donc parfaitement inutile de travailler dans une résolution supérieure. Cela ne s'affichera pas mieux !

4. Choisissez vos couleurs, en RVB, dans la palette des 216 couleurs garanties pour le Web, exprimées en hexadécimal, sous la forme d'un nombre à 6 chiffres. Mais sachez qu'en réalité les écrans actuels savent afficher des millions de couleurs. Ne vous sentez pas limité et osez les aplats et fonds de couleur, tout en maintenant un contraste suffisant avec le texte pour préserver la lisibilité.

5. Commencez par fixer la largeur de la page. On la détermine en fonction de la résolution d'écran majoritaire des internautes concernés par le projet, par exemple : 1024 x 768 pixels.
La composition doit rentrer dans l'écran, en laissant la place à la barre de défilement latérale (d'épaisseur différente selon les navigateurs) et sans afficher de barre de défilement horizontale. Sa largeur doit donc être inférieure à celle de la résolution d'écran majoritaire. Dans notre exemple, vous choisirez donc de composer une largeur de 960 px ou moins.
Centrez votre composition dans la fenêtre.
Sachez qu'il est possible d'afficher en largeur fluide : c'est-à-dire que la largeur des blocs variera en fonction de largeur de la fenêtre. Mais pour simplifier, composez en largeur fixe, constante, exprimée en pixels.

6. Composez dans un format portrait (vertical) car une page web peut être de (très) grande hauteur. Ne confondez pas page et écran : ce qui s'affiche dans la fenêtre rectangulaire horizontale de l'écran n'est qu'un fragment de page web. Pour vous repérer sur votre maquette, signalez la hauteur de l'écran par une ligne de flottaison ou des hirondelles.
Les éléments essentiels doivent être visibles sans scroller, c'est-à-dire qu'ils doivent être situés au-dessus de la ligne de flottaison.

7. Pour les textes, qui constituent le contenu le plus important d'une page web, choisissez une famille de polices de caractères (" font stack ") et non pas UNE police, car c'est l'internaute qui fournira la police au moment de l'affichage de la page. Indiquez donc s'il lui faudra la choisir parmi les polices à empattement ou sans empattement (plus précisément : parmi serif, sans-serif, monospace, cursive ou fantasy). Si vous préconisez une police particulière, indiquez des polices de remplacement approchantes, dans la même famille. Ne vous laissez pas séduire par le rendu des polices dans votre logiciel graphique car elles n'auront pas le même aspect parfait dans les navigateurs web.

8. La taille du texte est variable. La hauteur des blocs aussi. Concevez donc la maquette de façon à ce qu'elle supporte l'agrandissement, possiblement conséquent, des textes : en évitant les colonnes à hauteur fixe ou trop étroites en largeur. Les textes doivent pouvoir s'écouler dans les blocs, lesquels seront étirables en hauteur. Faites des essais d'agrandissement-rétrécissement des textes... Je vous disais plus haut que les logiciels graphiques actuels ne sont pas adaptés à ce genre de manipulation !
Attachez-vous aux proportions, mais pas à un rendu figé et maîtrisé. Cependant, pour donner un ordre de grandeur, retenez que 10 px est un corps de texte minimal en dessous duquel il ne faut pas descendre pour préserver la bonne lisibilité. Adoptez 13 px pour le texte de labeur. Osez 16 px. En fait, plus c'est gros, mieux c'est.

9. Pensez fragmenté, en bloc : tout doit être facilement découpable en rectangles. Calez-vous sur des lignes de guidage horizontales et verticales. Ne débordez pas. Ne tolérez aucun flou, aucune approximation : un filet fait 1 px d'épaisseur, pas " à peu prés ". Ayez toujours à l'esprit que vos éléments graphiques seront prélevés en pièces détachées, découpés au pixel prés, pour être ensuite ré-assemblés à l'écran.

10. Pour finir, n'oubliez pas les différents états d'interaction. La fenêtre du navigateur web est le lieu d'une interaction avec l'internaute : un lien change d'apparence au survol, un formulaire répond par un message d'erreur, etc. Présentez ces variations sur des calques séparés.
On ne peut pas " cliquer " sur une maquette graphique. Pour compenser, mettez-vous le plus souvent possible en situation de navigation active : surfez et observez !

Vous pouvez maintenant commencer à composer votre première maquette web, en partant du bon pied, sur des bases correctes : pixel, bitmap, RVB, 72 dpi, etc.

Un conseil : faites moultes captures d'écrans des sites qui vous inspirent et découpez-les dans un logiciel graphique. Débitez-les en morceaux ré-exploitables. C'est un excellent exercice pour vous mettre les proportions, les résolutions et les formats dans l'œil. Mais n'allez jamais chercher vos modèles dans les annuaires de " beaux " sites réalisés en Flash !
Second conseil : apprenez bientôt à composer une page web en HTML et CSS, via un éditeur WYSIWYG si le code vous effraie. Vous n'y couperez pas puisque c'est le B-A-ba du Web. Comprendre le Web ne fera qu'améliorer vos prochaines compositions.

Que livrer ? On attendra certainement de vous un livrable sous forme de fichier(s) graphiques (PSD ou XCF) à l'échelle 1:1, contenant plusieurs calques distincts, avec indication annexe des familles de police choisies et palette de couleurs. Certains préfèrent s'épargner cette étape fastidieuse, en réalisant les maquettes graphiques directement en HTML/CSS.

# data[].attributes.attachment_link.title
Première maquette graphique web : comment faire ?

# data[].attributes.attachment_link.description
Maquettistes affirmés, mais débutants sur le Web, voici les repères élémentaires à connaître pour créer votre première maquette graphique pour le Web : résolution d'écran, pixels, couleurs hexadécimales, page web, scroll, découpe, tout ça. Pour partir sur de bonnes bases.

# data[].attributes.headline
18 outils gratuits pour faire des maquettes d’interfaces graphiques

# data[].attributes.subject
18 outils gratuits pour faire des maquettes d’interfaces graphiques

# data[].attributes.attachment_link.readable_text
18 outils gratuits pour faire des maquettes d'interfaces graphiques

Aujourd'hui, j'ai cherché une petite application qui me permettrait de réaliser des maquettes d'interfaces graphiques simplement, comme je le faisais sous Linux avec Pencil (mais pour Mac OSX). Puis au fil de mes recherches, j'en ai dégoté plusieurs qui je pense vous intéresseront.

Voici donc une sélection de 18 outils de création d'interfaces graphiques (et de schémas) pour vos projets. J'ai fait un mix entre les outils Mac, Windows et Linux (en précisant à chaque fois) et j'ai listé les outils payants à la fin (en bonus). Bon, par contre, comme ils font tous relativement la même chose, j'ai mis uniquement en avant leurs petites particularités lorsqu'il y en avait, donc à vous de choisir celui qui vous convient le mieux.

1. Balsamiq mockups
Fonctionne sous Mac, Windows et Linux. Gratuit dans sa version web et payante dans sa version client. Associez lui Napkee (outil payant) et vous pourrez générer des fichiers HTML/CSS/JS et Flex 3 en quelques clics

2. Gratuit, uniquement sur le web (Mac, Linux et Windows)

3. Gratuit, sous licence GPL, et les binaires sont dispo pour Mac et Windows. Celui-ci a une petite particularité qui lui permet de calculer la durée que mettra un utilisateur de votre application pour effectuer telle ou telle action. A tester !

4. Crayon et papier + scanner
Petite blague mais si vous vous sentez à l'aise avec un crayon, vous pouvez très bien faire vos petits schémas sur du papier et les numériser... C'est simple mais il fallait y penser.

5. Entièrement en ligne. La version gratuite vous permet d'associer 2 personnes de plus à votre unique projet et de le sauvegarder dans l'espace de 3 Mb qui vous est réservé. Des abonnements payants avec plus d'espace de stockage et la possibilité de créer plus de projets sont également dispo.

6. Celui là, j'ai pas trop accroché car je pense qu'il faut une tablette graphique pour bien l'utiliser. Denim se rapproche plus du crayon et du papier que du soft de maquette mais c'est à essayer. Il est en java et fonctionne sous Mac, Windows, et Unix (Linux, Solaris...etc)

7. Outil en ligne sous licence GPL. Vous pouvez le tester ici.

8. Himalia guilder
Permet d'aller des Uses Cases aux maquettes finales. Fonctionne uniquement sous Windows.

9. Gratuit pour 1 projet (et payant si vous en voulez plus). C'est un outil en ligne.

10. Interface builder, Visual studio windows forms designer et autre...
On trouve Interface Builder dans le pack XCode sur mac qui permet de développer des applications pour OSX. C'est toujours bon à prendre et c'est gratos. Pour Windows Forms Designer, ce n'est pas gratuit car inclut dans Visual Studio mais si vous l'avez sous la main, vous savez maintenant que ça existe. Vous pouvez aussi créer des interfaces à partir des différents outils de développement dont vous disposez en utilisant l'IDE graphique.

11. Iphone mockup
J'en avais déjà parlé ici mais un petit rappel ne fera pas de mal. Cet outil en ligne est destiné uniquement à la réalisation de maquettes pour iPhone.

12. Outil en ligne gratuit pour 1 seul projet. Sa petite touche personnelle est de rendre les maquettes cliquables !

13. Outil en ligne très sympa. Il est possible de placer des actions sur certains boutons ou autre... C'est gratuit et je crois encore en beta.

14. Celui là est assez terrible. Il est dispo online ou via une application Air et permet de designer (avec des templates) des applications Facebook, iPhone, iPad, mobile, web, Android ou même des extensions pour Chrome. Il est dingue j'vous dis et en plus il est gratuit !

15. Mockingbird
Outil en ligne complétement gratuit. Une des références d'après ce que j'ai pu lire à gauche et à droite. A tester donc.

16. Celui-là a longtemps été mon préféré. Il fonctionne soit sous forme d'extension Firefox, soit en solo sous Linux et Windows. Un must que je vous recommande vivement !!!!

17. Prototype composer
Complétement gratuit mais fonctionne uniquement sous Windows.

18. Gratuit en version online pour 1 seul projet et payant (89 $) en version client.

Et les outils payants pour ceux qui ont les moyens : Axure, Designervista, EasyPrototype, Expression blend de Microsoft avec son outil Sketchflow, FlairBuilder (version d'essai de 15 jours), Foreui (avec demo online), Gui design studio, Irise, JustinMind, Justproto, Lucid spec, MockupScreens, Omnigraffle, Petra, Pidoco, Protoshare, Screen Architect, SmartDraw, Visio et pour finir WireFrameSketcher qui s'intègre dans Eclipse. En ce qui concerne ces outils payants d'ailleurs, sachez que si vous êtes blogueurs, certains éditeurs peuvent vous "offrir" l'outil en échange d'un petit article. (venduuuuuuuuus ! lol)

Le casque circum-aural (fermé) avec des haut-parleurs néodyme de 50mm de diamètre

Ce casque gamer dispose également d'une large réponse en fréquence de 20 à 20 000 Hz pour une restitution fidèle des graves et des aigües

Rejoignez les 61567 korbenautes
et réveillez le bidouilleur qui est en vous

Suivez Korben Un jour ça vous sauvera la vie.. Ou celle d'un(e) ami(e)

# data[].attributes.attachment_link.title
18 outils gratuits pour faire des maquettes d'interfaces graphiques - Korben

# data[].attributes.attachment_link.description
Aujourd'hui, j'ai cherché une petite application qui me permettrait de réaliser des maquettes d'interfaces graphiques simplement, comme je le faisais sous Linux avec Pencil (mais pour Mac OSX). Puis au fil de mes recherches, j'en ai dégoté plusieurs qui je pense vous intéresseront.

# data[].attributes.headline
Tutoriel Photoshop - Tuto Web Design - Maquette Web avec Photoshop Partie#01 

# data[].attributes.subject
Tutoriel Photoshop - Tuto Web Design - Maquette Web avec Photoshop Partie#01 

# data[].attributes.attachment_link.entities[].name
Introduction & Best Practices Responsive Webdesign

# data[].attributes.attachment_link.title
Tutoriel Photoshop - Tuto Web Design - Maquette Web avec Photoshop Partie#01

# data[].attributes.attachment_link.description
Tutoriel vidéo Photoshop gratuit en Français. Apprendre à créer un Web Design. Dans cette première partie nous apprendrons à utiliser au mieux Photoshop pour créer le design de notre page d'accueil.

# data[].attributes.attachment_link.readable_text
Ça y est, nous avons tourné la page du webdesign de 2016 et on regarde désormais le futur pour connaître ce qu'il se fera en Webdesign pour l'année 2017. Quelles tendances se dessineront et se confirmeront ?

Le scroll infini

Déjà présent en 2016, le scroll infini continu d'être tendance pour 2017. Il permet aux internautes d'accéder à de nouveaux contenus en faisant défiler leurs souris au lieu de cliquer. Lorsqu'un champ d'informations arrive à sa fin, le suivant est tout de suite chargé. Les réseaux sociaux, comme Facebook ou Instragram, utilisent cette méthode depuis longtemps afin de faciliter la présentation de leurs contenus pour les utilisateurs. Les blogs ont aussi toujours été adeptes de cette méthode et le resteront en 2017.

Si vous souhaitez adopter cette technique, voici quelques règles à respecter pour conserver un bon référencement naturel :

une URL individuelle pour chaque sous-page

pas de contenu qui se chevauche

les éléments recherchés doivent être facilement identifiables

les pages doivent être rapides à charger

Material design

Le Material Design est un ensemble de règles graphiques instituées par Google qui s'appliquent au rendu graphique des logiciels et applications. Caractérisé par son style semi-flat, possédant une ombre portée subtile, de profondeur naturelle et de couleurs vives, le succès du material design est légitime.
Il ajoute à cela des animations et des transitions fluides, pour un résultat final très efficace.

La grande tendance de 2017 : le flat design 2.0. C'est un mix entre le flat design et le material design qui permet de redonner du volume aux interfaces tout en gardant un rendu simple. On y ajoute des ombres portées, des ombres internes et des dégradés.
On redonne un aspect de superposition de couches (qui était la volonté du material design), ce qui permet d' enrichir l'animation mais aussi la compréhension des interfaces.

Ce n'est pas une nouveauté, mais les sites se font de plus en plus épuré et minimaliste tout en privilégiant le contenu.
Sur les pages d'accueil ou les pages intérieures, les webdesigners font très attention à la mise en avant et en relief des titres, des textes et des " call to action ". Le travail typographique prend une vraie valeur : les effets de fond, le choix des couleurs et des contrastes... Ce choix permet de rendre les contenus plus clairs, attractifs et engageants !

La typographie

Élément graphique incontournable, la typographie sonne son grand retour pour l'année 2017. Son atout réside dans le fait qu' elle peut souvent se suffire à elle-même, permettant ainsi de valoriser le texte par une mise en page élégante. Elle consolide ce besoin de lisibilité et s'adapte facilement à l'utilisation mobile en proposant des typographies et des interlignages adaptés aux petits écrans ce qui favorise la lecture.

La typographie manuscrite est particulièrement appréciée pour sa chaleur et son authenticité. Elle redonne vie aux textes et permet de créer un lien entre l'humain et la technologie. On n'hésite donc pas à utiliser des polices modernes et originales pour mettre en valeur un produit ou un événement.

Mobile First

Si ce n'est pas à proprement parler une tendance webdesign, les graphistes doivent désormais décliner leurs maquettes en pensant au support mobile avant tout. Les interfaces sont de plus en plus orientées pour une utilisation nomade. Une partie des internautes n'utilise plus l'ordinateur à la maison, qui le considère même comme contraignant. Les designers doivent donc orienter leurs créations vers cette mobilité avec comme éléments centraux : la facilité d'utilisation, la simplicité de compréhension et l'intégration fluide des apps pour s'adapter à nos usages de tous les jours.

Duo de choc : design et développement front-end

Afin que votre site web est un design réussi, vous devrez être très vigilant sur le travail de vos webdesigners avec vos intégrateurs. En 2017, ces piliers des projets web devront dialoguer et collaborer ensemble. Si le designer propose un site web "statique et ergonomique" , l'intégrateur devra faire en sorte que celui soit animé et devra orienter le parcours utilisateur en créant, par exemple, des micro-interactions profitables pour l'internaute.

Depuis qu' une grande partie du trafic internet se fait via des mobiles, le design des sites fait passer le menu au second plan. La navigation est standardisée grâce à un élément placé sur un coté de la page : l'icône " burger " (ou " navicon ") qui masque ou affiche le menu instantanément. Cela permet de cacher les différentes catégories pour laisser plus de place à la page d'accueil, aux grands visuels ou jolies typographies et aux informations importantes.
Ce type de menu réduit est notamment utilisé par des sites d'informations qui doivent gérer un grand nombre de thématiques.

L'information par l'image

Les informations sont aujourd'hui communiquées d'une façon minimaliste et compréhensible afin d'accrocher l'attention du lecteur. On dit souvent " trop d'information, tue l'information ", la tendance est donc pour l'année 2017 à la clarification. Et cela passe par de big images en full-screen, des vidéos, des infographies, etc.

Les photos HD

Les résolutions et les tailles des écrans augmentant, l'utilisation de belles photos en HD va de pair. En 2017, les images de grande qualité en haute résolution continueront à captiver l'attention de l'internaute.

Le site web de Kenley Event Design, donne vraiment envie de se marier ! Si bien que le texte devient inexistant pour mettre en valeur le travail de ces wedding planners face aux photographies.

La vidéo à la cote depuis quelques années et 2017 marquera un nouveau tournant de cette tendance ! On la voit de plus en plus sur les sites Web, en introduction ou en fond d'écran. Une vidéo bien intégrée sur un site internet est un vecteur puissant pour la promotion d'une activité, elle améliore le trafic d'un site et le rend plus visuel et attractif.
Quelques chiffres révélateurs :

Quand une personne cherche votre nom sur Internet, elle va préférer cliquer sur une vidéo : deux fois plus de chances qu'elle visionne une vidéo plutôt qu'elle lise des contenus écrits.

La vidéo représente 60% du trafic web.

85% des internautes français ont vu au moins une vidéo sur Internet au cours du mois de Janvier (soit 40,5 millions de Français ; c'est 66% de la population).

Une vidéo sur 6 est visionnée sur un équipement mobile, smartphone ou tablette.

Les dépenses en vidéos publicitaires ont doublé en 2 ans et selon les prévisions, elles vont encore doubler en 2 ans.

36% des vidéos regardées sur Internet sont des publicités.

Le site de la solution d'affichage dynamique Neotess, s'est refait une beauté cet été, il possède désormais une vidéo dès l'arrivée sur son site web. L'entreprise qui la commercialise, Dedicast, avait bien senti la tendance de 2017 !

Les cinémagraphes

On assiste depuis quelques temps à l'émergence des cinémagraphes et 2017 signera son exploitation en masse. Grandes tendance de 2017, ils sont considérés comme l'évolution du GIF animé. Ils allient deux grands médias actuels qui sont la photographie et la vidéo. Un bon moyen de faire passer un message ou une émotion.

Le storytelling

Déjà bien présent en 2016, le storytelling continuera d'être tendance en 2017. Son but est de séduire l'internaute en lui contant une histoire. Les sites animent désormais leur interface d'une narration interactive pour faire vivre leurs contenus. Le procédé assure une expérience immersive pour l'internaute qui se retrouve inclut dans l'animation.
Allez visiter le site Joho's, histoire de café pour avoir un bel exemple d'un site web construit en storytelling.

Le web immersif

Lorsqu'un utilisateur se connecte sur un " site web immersif ", il n'est plus question de naviguer mais de vivre une expérience en étant plongé dans un autre univers. Les objectifs sont de susciter la curiosité de l'internaute et de capter son attention en créant pour lui une expérience hors du commun afin de se démarquer et marquer les esprits.
Nous vous invitons à aller voir le site du " Journal de bord d'un conducteur " , un très bon exemple de site web immersif, grande tendance pour l'année 2017.

Le Flat Design

Le Flat Design ou design plat envahit nos écran depuis trois ans et reste une valeur sûre pour un design tendance en 2017. Il est basé sur deux paramètres importants : la hiérarchisation et le placement des éléments. L'objectif du Flat Design est d'obtenir une ergonomie facilitant la navigation tout en offrant une expérience utilisateur intéressante.
Comme exemple, prenons iOs7 avec, désormais, comme maître mot du design : la simplicité. Le Flat design est devenu aujourd'hui incontournable sur tous les écrans web et smartphones.

Pour cette année 2017, les designers accentueront leurs créations avec des couleurs vives, et flashy. Ils oseront également leur apporter des textures et des dégradés. L'utilisation de ces teintes et de ces nuances de couleurs permettra d'immerger toujours plus l'internaute dans un univers stimulant, tout en optimisant l'expérience utilisateur.

Les tendances du webdesign pour réussir.
Le webdesign a été marqué l'année dernière par des tendances très diverses. Tandis que certaines restent d'actualité, comme le scroll infini, le material design, le contenu, la typographie, le storytelling, les photos HD ou encore les vidéos. D'autres nouvelles grandes tendances font leur apparition comme le web immersif, les cinémagraphes, le flat 2.0, les couleurs vives ou encore le menu hamburger.
Maintenant vous avez toutes les cartes en main, pour être au top des tendances cette année !

# data[].attributes.attachment_link.title
▷ Les tendances webdesign qui feront 2017 ▷ Object23

# data[].attributes.attachment_link.description
Ça y est, nous avons tourné la page du webdesign de 2016 et on regarde désormais le futur pour connaître ce qu'il se fera en Webdesign pour l'année 2017. Quelles tendances se dessineront et se confirmeront ? Déjà présent en 2016, le scroll infini continu d'être tendance pour 2017.

# data[].attributes.headline
5 sources d'inspiration pour créer son site web

# data[].attributes.subject
5 sources d'inspiration pour créer son site web

# data[].attributes.body
https://www.presse-citron.net/5-sources-dinspiration-pour-creer-votre-site-web/
Un autre article du même genre

# data[].attributes.attachment_link.readable_text
En panne d'inspiration ? Cet article (et les précédents) pourrait vous aider.

#1 Toujours les animations

Dans le précédent article, nous évoquions la liste d'animations (150) dressée par bypeople.com, sur laquelle vous pouvez piocher des idées. Cette fois-ci, je vous propose une petite visite sur codepen.io qui regroupe également un certain nombre d'animations, avec des démonstrations et du code assez bien présenté.

#2 Toujours les couleurs

Si vous avez du mal à trouver une palette de couleurs pour votre site, vous pouvez chercher via Paleton, qui permet de trouver des combinaisons de couleurs en agissant sur quelques paramètres.

Sinon, si vous recherchez du " tout fait ", il y a pltts.me, qui propose un certain nombre de palettes que vous pouvez utiliser.

#3 Un slogan ?

Désespoir, quand tu nous tiens. Dans le cas où vous auriez du mal à trouver un slogan pour le site que vous construisez (si slogan il y aura), vous pouvez toujours tester les générateurs de slogans, comme slogaanizer. C'est assez simple, vous renseignez votre marque et le site retourne un slogan. Le seul inconvénient, c'est que ces slogans ont certainement déjà été utilisés ailleurs. Mais ils pourraient vous donner des idées.

#4 Un peu de tout

Webdesignerdepot.com est un site qui publie des articles sur le webdesign. Mais il inclut également une section FREEBIES qui contient un nombre incroyable de kits disponibles en téléchargement (template, mockups, vecteurs, icônes, etc.). Qui sait ? Vous y trouverez peut-être votre bonheur.

#5 The Internet Archive

The Internet Archive est une organisation américaine qui propose une machine à voyager dans le temps sur internet. Vous voulez savoir à quoi ressemblait le site du New York Times il y a 14 ans ? Vous serez à la bonne adresse. Assez pratique si vous recherchez un style retro ou si vous souhaitez suivre l'évolution du design d'un site.

Cet article est la suite de 5 sources d'inspiration pour créer votre site web et 5 sources d'inspiration pour créer votre site web (Suite).

# data[].attributes.attachment_link.title
5 sources d'inspiration pour créer votre site web (suite et fin)

# data[].attributes.attachment_link.description
En panne d'inspiration ? Cet article (et les précédents) pourrait vous aider. Dans le précédent article, nous évoquions la liste d'animations (150) dressée par bypeople.com, sur laquelle vous pouvez piocher des idées. Cette fois-ci, je vous propose une petite visite sur codepen.io qui regroupe également un certain nombre d'animations, avec des démonstrations et du code assez bien présenté.

# data[].attributes.body
http://blog.lunaweb.fr/ux-ui-experience-utilisateur-interface/

Icons:
http://www.flaticon.com/
Polices:
https://fonts.google.com/

# data[].attributes.attachment_link.readable_text
Apprenez à créer votre site web pas à pas

Avant de vous lancer dans la création d'un site internet, il est indispensable de bien s'informer pour prendre les bonnes décisions : choix du prestataire, technologies utilisées, méthodes de travail, etc. Très souvent, quelques conseils simples peuvent faire gagner beaucoup de temps et/ou d'argent.

1. Préparation du projet

Avant de chercher un CMS ou un prestataire, vous devez prendre le temps de définir précisement votre projet web, idéalement sous la forme d'un brief ou d'un cahier des charges. Ce travail est indispensable pour choisir un type de logiciel / prestataire vraiment adapté à vos besoins et vos contraintes.

2. Comparaison des solutions

Le choix du prestataire et/ou du CMS utilisé est évidemment un facteur de clé de réussite pour votre projet de création de site internet. Vous devez prendre le temps de mener une comparaison exhaustive et rigoureuse pour choisir un prestataire ou un logiciel vraiment adapté.

3. Conception du site web

Même si vous confiez la réalisation de votre site internet à une agence, il est très utile de s'impliquer sur toutes les phases amont de la conception du site internet, de l'arborescence des pages au design des maquettes. Cela suppose un peu de culture web, et beaucoup de bon sens !

4. Développement et maintenance

Nul d'être besoin d'être programmeur pour suivre le développement d'un site internet. Avec des échanges fréquents et une bonne méthode de travail, vous pouvez grandement limiter les retards et les problèmes à la livraison du site web.

Lexique

La profusion des technologies, des outils et des pratiques dans le monde du web est à l'origine d'un vaste champ sémantique. Connaitre les définitions des principales expressions utilisés lors de la création de site internet peut grandement vous aider à communiquer avec les professionnels du web.

# data[].attributes.attachment_link.title
Guide de la création de site internet | La Fabrique du Net

# data[].attributes.attachment_link.description
Avant de vous lancer dans la création d'un site internet, il est indispensable de bien s'informer pour prendre les bonnes décisions : choix du prestataire, technologies utilisées, méthodes de travail, etc. Très souvent, quelques conseils simples peuvent faire gagner beaucoup de temps et/ou d'argent.

# data[].attributes.headline
Vidéo Youtube - Tutoriel Ps, Créer sa maquette web

# data[].attributes.subject
Vidéo Youtube - Tutoriel Ps, Créer sa maquette web

# data[].attributes.attachment_link.title
Tutoriel Photoshop - Créer une maquette web

# data[].attributes.body
http://www.commentcamarche.net/faq/33416-creer-la-maquette-de-son-site-web-pro-les-bons-outils

https://www.youtube.com/watch?v=LoX0DdlUVvg

https://fr.wikipedia.org/wiki/Wireframe_(design)

# data[].attributes.attachment_link.readable_text
Un logiciel de mockup, pour quoi faire ?

Un logiciel de mockup est un outil bien pratique qu'il faut compter dans sa toolbox au moment de se lancer dans un projet de création de site web. C'est ce type de logiciel qui va vous permettre de concevoir les maquettes fonctionnelles ou wireframes des pages de votre site.

Maquettes fonctionnelles me dites-vous ?? En deux mots, les maquettes fonctionnelles ou wireframes servent à représenter de façon visuelle l'ensemble des éléments qui doivent figurer sur une page (titres, textes, images, boutons, ...), ainsi que leur taille et leur emplacement sur la page.

De l'intérêt du maquettage

Le maquettage fonctionnel est une étape indispensable car elle force à se poser de nombreuses questions pour affiner la structure de votre futur site web, l'organisation interne des pages et leur maillage. Le fruit de votre travail sera ensuite transmis au webdesigner qui s'en servira de base de travail pour réaliser les maquettes graphiques de vos pages.

Fournir des wireframes propres à votre webdesigner simplifiera son travail et lui permettra de se concentrer sur le design graphique où est sensée se trouver sa plus grande valeur ajoutée. Cela vous évitera également quelques mauvaises surprises au moment de découvrir vos premières maquettes graphiques.

Réaliser vos wireframes devient un jeu d'enfant

La majorité des logiciels de mockup est très simple d'utilisation et facile à prendre en main. Vous disposez d'un jeu de composants de base à placer, dimensionner et habiller pour composer peu à peu votre page. Les interfaces se veulent épurées et intuitives et proposent parfois du drag and drop pour vous faciliter la tâche.

Ces logiciels peuvent se présenter en version installable ainsi qu'en version SaaS, exécutable en ligne. Bon nombre de ces logiciels sont gratuits ou bien proposent au moins une version d'essai gratuite (souvent en ligne) pour vous faire votre propre idée.

Pourquoi utiliser un logiciel de mockup pour mes maquettes ?

Vous pouvez certes réaliser vos maquettes fonctionnelles sur papier ou bien faire un usage détourné d'un logiciel comme power point, mais les logiciels de mockup présentent de nombreux avantages :

Ils permettent de travailler à l'échelle et d'avoir une véritable représentation visuelle de l'aspect final des pages du site.

Ils proposent des composants types faciles à personnaliser qui font gagner un temps considérable.

Ils permettent de dupliquer la structure d'un wireframe pour gagner du temps lorsque deux maquettes sont assez similaires.

Le rendu des wireframes étant très proche d'un dessin, le logiciel de mockup oblige à se concentrer sur les aspects fonctionnels de la maquette sans perdre de temps sur son graphisme.

Un wireframe réalisé avec un logiciel de mockup est très simple à faire évoluer.

Du simple wireframe au prototypage de site

Les logiciels de mockup peuvent en fait être plus ou moins riches sur le plan fonctionnel. Certains logiciels de mockup permettent uniquement de réaliser des wireframes très simples, proches du dessin. D'autres proposent une palette de services beaucoup plus étendue, permettant de tout concevoir, de la maquette la plus dépouillée jusqu'à un véritable prototype de site permettant de naviguer d'une page à l'autre !

Personnellement, à La Fabrique du Net, on utilise principalement Balsamiq, un logiciel SaaS de maquettage. La prise en main est rapide et c'est un logiciel idéal pour réaliser des maquettes simples et complètes. Autre plus, la richesse de la documentation sur Balsamiq à destination des utilisateurs.

Trouvez le logiciel de mockup qu'il vous faut

Nos logiciels préférés :

Balsamiq : Un logiciel simplissime à prendre en main, dont l'élégant rendu crayonné permet de se détacher complètement des considérations esthétiques tout en offrant un certain degré de personnalisation.

Cacoo : Un logiciel en ligne très performant et particulièrement adapté aux projets de maquettage collaboratifs. Cacco a également été conçu pour faciliter la création de schémas en tous genres.

Axure : Un logiciel qui couvre tout le spectre du maquettage : des wireframes les plus épurés aux prototypes les plus évolués. Il s'agit d'un des outils les plus complets du marché dont le prix le destine cependant plutôt à des utilisateurs pro.

Petite sélection d'autres logiciels de mockup gratuits ou avec version d'essai gratuite :

Une veille plus exhaustive des logiciels de mockup est proposée sur le site de SocialCompare.

Un glossaire des notions en maquettage et prototypage

Le zoning

Lorsqu'on travaille sur le zoning des éléments de contenus d'une page web, on va schématiser grossièrement l'ensemble des éléments de contenus que l'on souhaite voir apparaitre sur la page finale. C'est une étape déterminante puisque l'on va essayer de déterminer la place définitive de certains éléments, comme l'emplacement du logo, ou bien la disposition des blocs (Ex : Le bloc Actualité sur une page d'accueil de blog). Le zoning peut éventuellement faire l'objet d'AB Tests, afin de tester plusieurs disposition et décider laquelle sera la plus adaptée pour le parcours utilisateur.

Le wireframe

C'est l'étape qui vient juste après le zoning. On va déterminer les contenus qui vont apparaître dans les blocs. Cela va permettre de structurer l'interface. A cette étape, on joue davantage sur l'aspect fonctionnel que sur l'aspect design.

La maquette

Une fois les éléments de contenus disposés, il faut penser à les lier. La maquette va intégrer la dimension interactive dans la page web. Les possibilités sont multiples : liaison de pages entre elles pour simuler la navigation sur le site, insertion de liens externes, caroussels d'image pour se représenter les animations de la page, etc. On intègre petit à petit le design. Lors de cette étape, on va se rendre compte des potentielles incohérences du parcours utilisateur.

Le prototype

Le prototype vise à tester différentes solutions ou technologies permettant la réalisation finale du site web. On va parler de prototype jetable lorsqu'on teste un certain nombre de technologies différentes, ou bien de prototype évolutif lorsqu'il constitue le début de l'application finale.

SITE VITRINE SITE E-COMMERCE

100% gratuit

# data[].attributes.attachment_link.title
Le logiciel de mockup, point de départ des maquettes web

# data[].attributes.attachment_link.description
Un logiciel de mockup est un outil bien pratique qu'il faut compter dans sa toolbox au moment de se lancer dans un projet de création de site web. C'est ce type de logiciel qui va vous permettre de concevoir les maquettes fonctionnelles ou wireframes des pages de votre site.

# data[].attributes.body
http://romy.tetue.net/maquette-web

Concevoir une Maquette
http://pyramyd-formation.com/formations/concevoir-une-maquette-graphique-pour-le-web
Les grilles dans le web
https://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html

Couleur dans le web
https://webdesign.tutsplus.com/fr/tutorials/6-beginner-safety-first-color-guidelines-for-the-web--cms-21462
Signification couleur
http://trinity-advise.com/choix-de-couleurs-pour-mieux-vendre-et-communiquer-sur-le-web/

# data[].attributes.body
https://www.lafabriquedunet.fr/conseils/conception-site-web/creer-maquettes-site-web/

https://www.mockupworld.co/all-mockups/

En informatique, le terme mock-up (qui vient du même mot anglais qui signifie une maquette à l'échelle 1:1) désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un logiciel.

# data[].attributes.attachment_link.readable_text
Vous souhaitez réaliser des maquettes web à l'aide de Photoshop, si vous êtes étudiant ou webdesigner découvrez une sélection de tutoriels qui vous aideront à maîtriser les différents outils de création autour du web design.

Nous avions rédigé il y a quelques mois un premier article basé sur des tutoriels avec Illustrator : 15 tutoriels pour découvrir et maîtriser Illustrator. Aujourd'hui nous revenons avec un nouveau sujet autour du logiciel de Photoshop et de la création de maquettes web.

Si vous êtes débutant ou/et étudiants et que vous souhaitez créer vos premières maquettes web sous Photoshop, nous avons sélectionné pour vous une série de 15 tutoriels complets. Ils vous permettront de voir les différentes étapes de création et les techniques ainsi que les raccourcis sous Photoshop.

Pour les personnes plus confirmées, il reste intéressant de survoler ces tutoriels pour observer et découvrir de nouvelles techniques. Car nous prenons vite des habitudes avec Photoshop et voir d'autres personnes l'utiliser peut nous apprendre certains raccourcis assez pratiques. Il est possible d'obtenir un même effet avec différentes manipulations, le tout plus ou moins rapidement.

La plupart des tutos présentés sont en anglais. Pour bien débuter avec le logiciel Photoshop vous pouvez vous rendre sur , qui présente une sélection de vidéos gratuites (en français) pour découvrir les outils principaux. tuto.com Le premier tuto de notre sélection vous aidera à découvrir Photoshop CS6, avec 1h05 de vidéo gratuite.

Vous trouverez en fin d'article des tutoriels premium en vidéo si vous souhaitez aller plus loin dans la formation.

Découvrez 4 tutoriels vidéos premium pour compléter votre formation

# data[].attributes.attachment_link.title
15 tutoriels pour créer des maquettes web sur Photoshop

# data[].attributes.attachment_link.description
Vous souhaitez réaliser des maquettes web à l'aide de Photoshop, si vous êtes étudiant ou webdesigner découvrez une sélection de tutoriels qui vous aideront à maîtriser les différents outils de création autour du web design. Nous avions rédigé il y a quelques mois un premier article basé sur des tutoriels avec Illustrator : 15 tutoriels pour découvrir et maîtriser Illustrator.

# data[].attributes.body
- Création site -
Tutoriel Maquette Web Photoshop

Projet Maquette Web PDF

Cours: Crée un Site web avec HTML5 et CSS3

Cours: Votre première page Web en HTML

# data[].attributes.attachment_link.readable_text
While a higher screen resolution doesn't necessarily mean better quality, smartphone makers keep adding pixels to their flagship models, for which QHD (1440 x 2560) is now basically standard. Here are the latest stats showing which smartphone screen resolutions are the most popular in 2016 based on real web traffic.

Smartphone screen resolutions used in 2016

The world of smartphones in 2016 is highly fragmented in terms of both screen sizes and screen resolutions used by the most popular phone makers. The screen resolutions vary from as little as 240x320, up to a massive 2160x3840 (4K) used in the Sony Xperia Z5 Premium.

Interestingly, the DeviceAtlas mobile web statistics show that even the smallest screen resolutions still get some share of web traffic in local markets. This is caused by several factors, including differences between regions, user habits, and a longer lifespan for some devices.

Here is the list of smartphone screen resolutions that generated a substantial amount of web traffic in 2016 including some example devices to give you an idea of what types of phones use them.

Screen resolution

Example devices

240 x 320

Nokia 230, Nokia 215, Samsung Xcover 550, LG G350

320 x 480

Alcatel pixi 3, LG Wine Smart

480 x 800

Samsung Galaxy J1 (2016), Samsung Z1, Samsung Z2, Lumia 435, Alcatel Pixi 4, LG Joy, ZTE Blade G

480 x 854

Huawei Y635, Nokia Lumia 635, Sony Xperia E3

540 x 960

Samsung Galaxy J2, Moto E 2nd Gen, Sony Xperia E4, HTC Desire 526

640 x 960

iPhone 4, iPhone 4S

640 x 1136

iPhone 5, iPhone 5S, iPhone 5C, iPhone SE

720 x 1280

Samsung Galaxy J5, Samsung Galaxy J3, Moto G4 Play, Xiaomi Redmi 3, Moto G 3rd Gen, Sony Xperia M4 Aqua

750 x 1334

iPhone 6, iPhone 6S, iPhone 7

1080 x 1920

iPhone 6S Plus, iPhone 6 Plus, iPhone 7 Plus, Huawei P9, Sony Xperia Z5, Samsung Galaxy A5, Samsung Galaxy A7, Samsung Galaxy S5, Samsung Galaxy A9, HTC One M9, Sony Xperia M5

1440 x 2560

Samsung Galaxy Note 5, Samsung Galaxy S6, Huawei Nexus 6P, LG G5

2160 x 3840

Sony Xperia Z5 Premium

Screen resolutions in flagship models

The trend of adding more pixels to the latest releases hasn't stopped in 2016 although it seems that it's slowing down. A year ago it seemed that we may see many 4K phones hitting the shelves in 2016 but in fact it didn't happen. It means that Sony Xperia Z5 Premium is still the only mainstream 4K phone. The upcoming Samsung Galaxy S8 is rumoured to come with a 4K screen for VR purposes although we need to wait at least until February 2017 to find out.

In our 2015 report on screen resolutions we noticed that QHD (1440 x 2560) was gaining ground but it wasn't really a standard yet. We can say that in 2017 QHD is more of a standard given that it was used in many flagship devices.

However, while some phone makers jumped on the QHD bandwagon, such as Motorola and HTC, others stuck with the Full HD (1080x1920). For mid-range phones either Full HD or HD (720x1280) are acceptable.

The following table shows the most popular new phones released in 2016 (or soon to be released) including their diagonal screen sizes and screen resolutions.

Screen resolutions used for web browsing in 2016

Sales statistics don't always relate directly to the amount of web traffic share generated by particular phone models. Actual usage is what matters when it comes to optimising websites to make sure that they look and work great on all mobile phones.

The following statistics are based on web traffic to a global network of partner websites using the DeviceAtlas device detection solution. Feel free to check out which smartphone screen resolutions are the most popular across selected local markets in 2016.

Most used smartphone screen resolutions 2016 part 1

Most used smartphone screen resolutions 2016 part 2

# data[].attributes.attachment_link.title
The most used smartphone screen resolutions in 2016

# data[].attributes.attachment_link.description
While a higher screen resolution doesn't necessarily mean better quality, smartphone makers keep adding pixels to their flagship models, for which QHD (1440 x 2560) is now basically standard. Here are the latest stats showing which smartphone screen resolutions are the most popular in 2016 based on real web traffic.

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.