Conception d'un site web Cette page présente quelques considérations sur la conception de sites web. Certaines sont énoncées par des spécialistes et d'autres sont plus personnelles. Je ne prétends pas détenir la Vérité Absolue; je me propose simplement de vous faire profiter de mon expérience en tant que webmaster et surfeur. 1. Il convient tout d'abord d'apporter une précision sur les rapports entre "pages web", "site web" et "page d'accueil": un site web est en quelque sorte une publication constituée d'un certain nombre de pages web. 1. Quel est l'objectif visé? 2. Un éditeur de pages web: Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, .... 3. Structurez, hiérarchisez votre site! Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la réalisation. 4. Deux principes de base - La page d'accueil est la plus importante - Navigation dans le site - Les pages doivent être lisibles - Apparence graphique Deux principes de base Le plus important, ce sont les visiteurs! 5. 6. 7.
10 conseils d’ergonomie basés sur des études de recherche Internet abonde de conseils utiles sur l’ergonomie de sites Internet. Nous prenons au sérieux ceux qui apparaissent être les plus logiques. Mais il est parfois réconfortant de voir certaines théories qui circulent validées par des recherches sérieuses. Cet article traite des résultats de plusieurs recherches sur l’ergonomie, dont, entre autre, la captation du mouvement des yeux sur une page Web, les analyses et rapports sur l’utilisabilité et la convivialité, et enfin, des idées pour améliorer le design. 1. L’idée que les utilisateurs seront frustrés s’ils doivent cliquer plus de trois fois pour trouver le contenu qu’ils cherchent sur votre site Web circule depuis bien longtemps déjà. À la base, cette idée semble tout à fait logique, car, bien entendu, un utilisateur sera frustré s’il passe beaucoup de temps à cliquer ici et là pour trouver ce qu’il cherche. Mais pourquoi une limite arbitraire de trois clics ? Source: User Interface Engineering 2. Le Dr. Source : Alertbox 3. 4. 5. 6. 7.
20 outils pour aider les jeunes développeurs à créer leur site internet Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web. Poser les bases de son projet : Choisir son CMS : Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Créer sa charte graphique : Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. Créer une maquette : Composer une grille : Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Prévoir ses espaces publicitaires Choisir ses icônes Si vous n'êtes pas un pro du webdesign, la création d'icônes personnalisées pour votre site risque de poser problème. La recherche de la typographie idéale est une quête de longue haleine. Développer son site : Débuter en HTML5 : Innover grâce à la CSS3 : Tester et débugger :
écrire pour le web: les règles pour bien rédiger Rédiger pour le web, c’est avant tout écrire pour un lecteur qui cherche une information, qui cherche à apprendre, à comprendre, à se divertir. C’est écrire en lui donnant un contenu riche et intéressant, des liens, qui lui permettent de naviguer dans les différentes parties du site. Si vous pensez qu’écrire de façon concise et précise avec des titres et accroches pertinents, proposer une information riche invitant à l’exploration du sujet vers des liens profonds et populaires, rendre le contenu accessible sur la forme avec des mises en gras, des paragraphes, est une bonne façon de faire vous êtes sur la bonne voie. Mais que cachent les principes de l’écriture pour le web? S’agit-il uniquement de plaire aux SEO et moteurs de recherche ou de trouver le juste compromis pour satisfaire le lecteur et donner la visibilité optimale à vos articles? La nécessité d’adapter son langage: les faits 15 ans après les principes sont toujours d’actualité et pour cause: 1 règle pour les gouverner toutes
Mon premier site: les 10 erreurs à éviter | Le Site Internet Des fichiers trop lourd Il est très important de faire attention à la taille des fichiers que l’on utilise sur son site. . Hors l’internaute s’attend à avoir l’information rapidement, si votre page ne s’affiche pas immédiatement ou presque vous perdrez beaucoup de visiteurs. Attention à ne pas tomber dans un piège: tester l’affichage de son site chez soi n’est pas représentatif de l’expérience que vivra un autre internaute. Si vos fichiers sont déjà stockés sur votre ordinateur une page pourra se charger rapidement chez vous alors que le visiteur, lui, devra télécharger ces fichiers, ce qui prend plus de temps. De plus tout le monde n’a pas la même connection internet. Il est possible de tester le poids des pages de son site sur www.websiteoptimization.com/ . Les images L’erreur fréquente du débutant consiste à prendre une photo avec son appareil photo et à l’utiliser telle quelle sur son site. Les blogs et CMS font souvent ce travail sur les photos automatiquement. Les autres fichiers
Retrouvez le plaisir de lire à l'écran Pendant ses dix premières années, le web a su séduire le grand public avec uniquement du texte et des images. Puis vint l’avènement de la vidéo avec YouTube. Puis vient la révolution des terminaux mobiles avec l’iPhone et l’iPad. Nous sommes maintenant en 2012 et plus personne ne veut lire à l’écran : trop fatigant, trop long, trop… ringard. Heureusement, certains éditeurs de site relèvent le défi en proposant une expérience de lecture à l’écran beaucoup plus agréable. La mise en page (lignes pas trop larges, photos et vidéos bien intégrées, pas d’éléments parasitant l’attention) ;La densité d’information (avec un interlignage optimisé et des paragraphes pas trop longs) ;La typographie utilisée pour le texte, les titres et intertitres… Je précise au passage que tout ceci est maintenant grandement facilité avec les navigateurs récents qui savent correctement afficher les CSS3 qui autorisent des choses tout à fait intéressantes : Vers une scénarisation des contenus textuels.
Les sites de référence dans le webdesign Sources d'inspiration et compiles de Webdesign Css Nous vous proposons de découvrir ici des sites qui ne manqueront pas de vous apporter de l'inspiration pour construire le vôtre. Css-design est une large vitrine de sites web classés par catégories où les designs sont très riches et très variés. Il y en a pour tous les goûts! En voici d'autres du même genre: Cssmania, Bestwebgallery, Mydesignaward, Webcreme, Cssimpress, Cssburst Si vous cherchez des idées pour présenter un formulaire, un lecteur vidéo ou encore une boutique E-commerce etc... Technique CSS et autres éléments de Webdesign Un aspect plus technique pour mieux comprendre l'articulation Css + XHTML et autres éléments du webdesign. Css 4 design est un site intéressant et agréable à lire pour mieux comprendre le Css. Alsacreations est certainement un incontournable pour celui qui cherche à approfondir la technique du Css. Webdesign.2803 nous propose de nombreux trucs et astuces sur le webdesign et autres techniques d'intégration.
10 blogs et sites sur l’ergonomie pour vous remettre à l’anglais En France on parle souvent de Ergonomie ou Conception d’Interfaces, mais de l’autre côté de l’Atlantique (ou du Channel), on parle plutôt de User Experience, UCD, ou Interaction Design. Peu importe le terme choisi, l’important c’est de rester informés des nouvelles techniques et méthodologies qui font partie de notre métier : la conception centrée utilisateur. Que ce soient les bonnes pratiques sur l'étude terrain, le maquettage d'interfaces ou sur le design graphique, on partage ici nos coups de cœur de la blogosphère anglophone avec vous. Enjoy! 1st Web Designer Spécialiste du web, ce blog vous permettra de trouver des informations concernant le code web (PHP, HTML, Ruby, etc.) ou le graphisme (illustration, photographie, iconographie). Smashing Magazine – UX Design Définitivement LA publication incontournable dans le monde de l’ergonomie et la conception d’interfaces. InfoDesign – Understanding by Design Pas un blog à proprement parler, mais un curateur d’informations. Partager :
Le webdesign en blocs - Exemples et ressources Suivant l’avènement des grilles dans le webdesign, la mise en page basée sur des blocs de contenu peut s’avérer une bonne stratégie pour certains design. Petit tour d’horizon des sites du genre, puis des ressources nécessaires pour créer votre site sur une grille modulable. Webdesign en blocs ? La mise en page basée sur des blocs de contenu modulable est devenue incontournable pour les portfolios, les sites d’inspiration, bref ils s’agit souvent de sites présentant un lot important d’images. Le responsive webdesign y joue également un rôle crucial : par définition un bloc modulable va s’adapter à la taille du viewport de l’utilisateur. Aujourd’hui massivement utilisée, je vous propose une petite sélection de sites bien réalisés avec cette mise en page, pour ensuite vous inviter à tester différents outils et plug-ins pour créer votre propre site à blocs modulables ! Quelques exemples : Pinterest Pepsized Usain Bolt Red Interactive Agerman Etchapps Everlovinpress Depthcore Bernd Kammerer Daily Joy
Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab 5 outils en ligne pour tester vos sites Si vous êtes web designer ou développeur Web, alors vous devez savoir à quel point il est important de s’assurer que le produit final est dépourvu de tous bugs ou erreurs. Les cinq sites que voue je vais décrire dans la suite de cet article, vont aider les développeurs et les concepteurs de sites Web à valider et vérifier le code du site Web et ce, afin de déceler toute sorte d’erreurs. Le W3C Markup Validation Service permet aux utilisateurs de valider leurs sites Web soit en fournissant un lien en ligne vers le fichier HTML, XHTML, SMIL, MathML ou soit par le téléchargement du fichier, dans le même format que mentionné précédemment. Si vous avez juste besoin de vérifier une partie spécifique du code, vous pouvez manuellement coller votre portion de code depuis l’onglet « Validate by Direct Input » pour le valider. Note : Un autre service, W3C CSS Validation Service, va réaliser à l’identique le traitement offert par le service « Markup », mais concernant la CSS.