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. Et vous n'avez pas forcément vocation à séduire tous les apprentis-designers qui pourraient être amenés à visiter votre site. 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 Intuitif. Adapté. Convivial. Personnalisation d'un template Conclusion
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. 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 Balsamiq iPlotz
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
Première maquette graphique web : comment faire ? 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. 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. 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. Commencez par fixer la largeur de la page. 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. Que livrer ?
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). Du monde de Porcinet et Winnie l'ourson à celui de la physique et vice-versa, nombreux sont ceux qui se sont mis en quête de sens en appliquant le tao à quelque chose (le tao de la physique), ou quelque chose au Tao Te Ching (le tao de Winnie l'ourson). La démarche est peut-être un peu facile, mais récemment il m'est apparu que la compréhension du design Web pouvait être beaucoup plus vaste qu'il n'y paraît, lorsqu'on l'observe à la lueur du Tao. 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 ? Tao Te Ching; 38 Rituel Contrôler la page Web Le Sage Tao Te Ching; 2 Humilité La Voie
StartGraph vous permet de débuter avec GIMP et Inkscape ! Wireframes Magazine Wireframe : faire un croquis avant de se lancer dans le design | Calexo Le concept Le Wireframe en Web design consiste à réaliser un schéma définissant les zones d’un site Web, ou d’une page Web. Il peut être réalisé par une personne non technique (client, graphiste, …). Souvent en noir et blanc, seuls la dimension, l’emplacement et la nature des différentes zones importe.Ce n’est pas le design lui-même ! Le wireframe n’apporte pas de notions de couleurs, d’harmonie, ni de détail des éléments. Si couleurs et images il y a, elles ne doivent être utiliser que pour améliorer la lisibilité et la compréhension du schéma, et ne correspondent pas aux couleurs du site définitif. A la base, la technique du Wireframe consiste à griffonner ses idées au crayon de papier, sur une feuille. Les cas d’utilisation – Equipe projet Dans le cas d’un projet, commencer un site par un Wireframe permet de définir l’aspect global du site, des pages, de voir comment on peu positionner les différents éléments nécessaires. Client Les outils Voici deux sites qui en contiennent une liste :
Bend 2 Squares Font 1001 Free Fonts first opened its doors in December 1998 and has since grown to become the most popular free fonts archive online. We receive more than 50,000 visitors daily and have received 150,000,000 visitors since 1998. Over 3,000,000,000 free fonts have been downloaded since 1998. We would like to thank you all for your continued support and hope you return shortly. Font Links Signature Fonts - Turn your signature into a signature font and sign documents digitally. Handwriting Fonts - Handwriting fonts offers a personal handwriting fonts service. Ultimate Font Download - Download 10,000 Fonts with one click. Font Search Engine - Didn't find the font you are searching for? Free Mac Fonts - If you are a Macintosh user then this website is for you. Font News Google Fonts now fully accessible to design enthusiasts (Cnet)Google Fonts, the search giant's repository for typefaces, has inked a deal with Monotype to make it easier to preview those fonts.
La mise en forme du texte sur une page web Réussir la lisibilité d'un texte sur un site web demeure souvent un problème, quelle que soit la qualité d'un site. Les éléments essentiels d'une bonne conception visuelle sont le choix de la typographie et de couleurs adaptées. Lire une page web, c'est lire sur un écran. La lecture répétée et prolongée sur écran entraine en général une fatigue visuelle plus importante. Pour faciliter la lecture d'une page web, voici quelques règles typographiques et recommandations utiles. 1. La typographie joue un rôle très important dans l'image donnée par votre site. Des polices fantaisistes ou sérieuses donnent immédiatement le ton. Texte principal : la règle des 10 points. Il n'y a pas de règle absolue pour la taille des polices de caractères, mais il faut s'assurer que le texte principal soit au moins égal ou supérieur à 10 points. Si le texte principal est important, rien ne sert de réduire la taille de la police car votre texte ne sera pas lu. Choix des polices. Polices de caractères homogènes. 2.
Ergonomie du site web : confort des visiteurs - DE VISU on web La définition classique de l'ergonomie regroupe les aspects de confort, de sécurité et d'efficacité, tous à prendre en compte lors de la création d'un site web. Les critères d'efficacité et de confort de navigation étant développés dans la rubrique consacrée à l' utilisabilité d'un site web, la présente rubrique traitera essentiellement du confort de lecture des visiteurs. Le respect des habitudes : ergonomie élémentaire S'il n'y a pas de véritables normes ergonomiques à respecter lors de la création d'un site web, avec l'usage, des standards d'ergonomie se sont peu à peu mis en place en matière d'occupation de l'espace, de répartition de l'espace, de typographie et d'agencement des textes. Les internautes s'étant habitués à certains schémas, il est préférable, lors de la création d'un site web, de respecter ces pratiques afin de ne pas perturber vos visiteurs, sans que cela ne doive nuire à la créativité. L'occupation de l'espace : ergonomie de la mise en écran Le site fixe : obsolète