Le tao du design Web Par John Allsopp Introduction Le Tao Te Ching fut aux années 1990 ce que fut le zen aux années 1970 (célèbre surtout en matière d'entretien des motos). Le taoïsme est une philosophie. Au cours des quelques dernières années, pour le meilleur et pour le pire, ma vie a plus qu'un peu tourné autour des feuilles de style. Ce que je ressens, c'est une réelle tension entre le Web tel que nous le connaissons, et le Web tel qu'il devrait être. Le même bon vieux média ? Les hiérarchies bien implantées ne se déracinent pas facilement.Les croyances bien ancrées ne sont pas aisément lâchées.Le rituel asservit ainsi génération après génération. Tao Te Ching; 38 Rituel Si vous n'avez jamais visionné les toutes premières émissions de télévision, sachez qu'il s'agit là d'une activité fort enrichissante. Songez aussi aux premiers vidéoclips (quelques-uns d'entre nous doivent être assez âgés pour cela). Contrôler la page Web Le Sage Tao Te Ching; 2 Humilité D'où vient cette idée ? Pourquoi est-ce important ?
Blog › Guidelines pour produire des PSD adaptés au web Je préparais dernièrement un document pour un boulot afin de montrer à des boîtes de créa print comment faire des PSD propres pour le web. Le but inavouable de la démarche était d’éviter de se retrouver avec des charniers inexploitables en intégration, chose qui arrive encore un peu trop souvent. Pas de règles de ninja ou de gimmicks avant-gardistes ici, juste des bonnes bases saines pour faire un boulot clean. Dernière modification : le 12 juin 2014. Préparer le fichier Quelques règles de base et rappels simples pour préparer un document web-safe : Travailler en RVB et profil sRVB (pas de CMJN !). Adapter la créa aux contraintes web Quelques règles à garder en tête au moment de la phase de création : Tenir compte de la cible du site lors du dimensionnement du layout. Et voilà. Pour finir, Romy me rappelle très justement son billet sur le même sujet, qui peut être un complément intéressant. Je rajoute aussi le lien proposé par Colegram, Photoshop Etiquette (en anglais).
Design et ergonomie d’un site Web Comment faire en sorte que vos visiteurs se sentent à l'aise sur votre site, qu'ils y trouvent leurs repères et qu'ils aient envie d'y revenir ? Ces règles simples peuvent vous permettre d'accrocher et de conserver vos lecteurs. Dans cette page : Les standards - Principes de mise en page - Importance du contraste - Le zapping - L'esthétique - La couleur En bref ... Respecter les standards Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. A lire en complément : Ergonomie d'un site Web par Kreatys En détail ... Quelques principes de mise en page La communication écrite existe à grande échelle depuis plus de 500 ans. Les légendes des belles images sont lues même par les visiteurs pressés ! source image : civilization.ca La mise en page doit être conçue comme une pyramide. Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant. Les paragraphes : Vous devez développer une seule idée par paragraphe. Le zapping
Les 12 tendances webdesign qui se confirment pour 2015 Ça y est, 2015 est à notre porte ! Durant l’année 2014, nous avons expérimenté et avons intégré intelligemment les tendances webdesign dans nos projets. Selon Shiva Sherbaf, lead du pôle DA, certaines tendances ne sont pas prêtes de disparaître bientôt, d’autres vont évoluer… tandis que de nouvelles feront leur apparition. 1 – Multi-device design De plus en plus les gens utilisent leur mobile pour accéder à Internet et le mobile sera bientôt le moyen le plus commun pour surfer. 2 – Des menus cachés à faire glisser ou à afficher Pendant longtemps, les menus et les barres de navigation étaient très voyants et présents en permanence sur les interfaces. 3 – En 2015, moins de clic et plus de scroll Les sites au scroll infini sont agréables esthétiquement parlant, bien que difficiles à optimiser pour le SEO. 4- Les microinteractions Les microinteractions sont des petits détails, qui ont l’air anodins, mais qui améliorent beaucoup l’expérience utilisateur et titillent sa fibre émotionnelle.
Tutorial: Créer le design d'un site web de la maquette photoshop à l'intégration XHTML/CSS Voici un nouveau tutorial réalisé par Sybio pour La Ferme du Web. Il s'adresse à tous les débutants qui souhaitent créer leur propre WebDesign sous photoshop et de l'intégrer ensuite avec du HTML et CSS. Voici sans plus attendre le sommaire de ce tutorial: Création du site sur Photoshop Avant de se lancer... structure et thème du site ! Accéder à ce chapitre: Création de la maquette du site sous photoshop Découpe du design Les blocsAvant de découper ...Découpage du headerDécoupage du menuDécoupage du milieu du corps ! Accéder à ce chapitre: Découpe du design photoshop Mise en place du site en HTML/CSS Organisation des dossiersLe fichier .htmlLes div de notre fichier .htmlPlace au CSSLe fondImages des blocsDesign au centre de la page ! Accéder à ce chapitre: Mise en place du site en HTML/CSS Je vous rappelle qu'en soumettant vos tutorials sur la Ferme du Web, VOS publicités Google Adsense y seront affichées (2 par chapitre). En attendant, bonne lecture, et bravo à Sybio pour son tutorial !
Comment créer un site web remarquable, partie 4: Créer un design — Edicy blog Si vous-même n'êtes pas un designer, nul besoin de vous donner la peine de réaliser le design de votre site. Il y a deux façons de faire qui peuvent être plus sages et plus efficaces -- louer les services d'un vrai designer ou choisir un template générique dans un stock de designs payants ou gratuits. Faites bien attention: un bon design n'est pas nécessairement un feu d'artifice d'effets spéciaux ou de graphismes défiant l'imagination. Qu'est-ce qui rend un design remarquable? Un design est bon quand il vous dispense de penser. L'esthétique est une question de goût(s). Mais le design comme forme, comme ordonnancement de contenu et comme fonctionnalité, est davantage une question de compréhension que de goût. Un bon design est pratique, il n'est pas simplement "beau". Anatomie d'un bon design Il faut tenir compte d'un certain nombre de règles de design quand on crée un site web. Intuitif. Adapté. Convivial. "Faites le vous-même": les designs génériques Personnalisation d'un template
Créer la maquette de son site web pro : les bons outils Une fois réalisés le cahier des charges et l'arborescence de son site web, commence la phase de maquettage, aussi appelée « wireframing ». Une étape indispensable pour se faire une idée plus précise de l'ergonomie du site. De nombreux outils de wireframing gratuits ou payants sont aujourd'hui disponibles pour réaliser cette tâche. Simples d'utilisation, ils sont particulièrement utiles aux professionnels encadrant la réalisation d'un projet web. Présentation. Notre vidéo Le wireframing ou maquettage de sites web : qu'est-ce que c'est ? Le « wireframing » (maquettage) est l'étape consistant à représenter schématiquement l'organisation d'un site web (ex : arborescence), ainsi que son interface graphique (interactivité et ergonomie). Outils et logiciels de maquettage ou de wireframing Les outils de maquettage se destinent à l'ensemble des professionnels réunis autour d'un projet de conception web, qu'ils soient ou non techniciens. Pour quels professionnels ? Pencil Project Lumzy MockFlow Cacoo
StartGraph vous permet de débuter avec GIMP et Inkscape !