background preloader

Première maquette graphique web : comment faire ?

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. 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. Un conseil : faites moultes captures d’écrans des sites qui vous inspirent et découpez-les dans un logiciel graphique. Que livrer ? Related:  HTML

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

PHP : Le tutoriel pour grands débutants pressés Pour l'instant, on a manipulé des variables que l'on entrait "à la main" soi-même. Il nous faut maintenant voir comment manipuler véritablement des variables, entrées par l'utilisateur. III-1. Vous le savez, un formulaire en HTML, c'est la suite de balises suivante : un formulaire typique sur la page saisie.php Sélectionnez <form name="inscription" method="post" action="saisie.php"> Entrez votre pseudo : <input type="text" name="pseudo"/><br/> Entrez votre ville : <input type="text" name="ville"/><br/><input type="submit" name="valider" value="OK"/></form> Ici, ce formulaire présente une zone de saisie pour entrer son pseudo, va à la ligne, une zone de saisie pour entrer sa ville, va à la ligne, et enfin un bouton pour valider sur lequel sera écrit 'OK'... Le but, vous l'aurez compris, c'est de récupérer, via PHP, les infos entrées par n'importe quel usager. Voici comment les choses vont se découper : Ah, tout ça sera donc dans une condition, voyons donc immédiatement la syntaxe du si : III-2.

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 ?

Droit d'auteur : à qui appartient un site Internet ? Une récente jurisprudence du TGI de Paris Une récente décision du Tribunal de grande instance de Paris (10 novembre 2011) a rappelé la plus élémentaire des évidences en termes de droit d'auteur : un site appartient à celui qui l'a créé. Du fait même qu'un prestataire a crée un site, il en est l'auteur. Dans le cas soumis aux juge, un site avait changé d'hébergeur et apparaissait dès lors comme ayant été créé par le propriétaire du site. Droit moral et droit d'exploitation S'il n'est pas douteux que le droit moral, notamment le droit à la paternité de l'oeuvre incombe à l'auteur de manière inaliénable (comme tout droit moral), cela ne veut pas dire que le droit d'exploitation continue à demeurer entre les mains de son créateur : par définition, un site est créé pour être exploité par son propriétaire qui a payé la prestation de service. Une pratique professionnelle inacceptable Les bonnes pratiques Les sous-traitants Droit moral et agence web personne morale En savoir plus

PXtoEM.com: PX à la conversion EM en toute simplicité. HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents Exemple minimal L'en-tête <header> Le <footer> Remarque

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. Beaucoup de ces conseils, tel que mentionné précédemment, semblent de mise, mais ils sont enfin soutenus par des statistiques. D’autres, par contre, vous surprendront peut-être et changeront votre opinion sur certaines coutumes actuelles. 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à. Mais pourquoi une limite arbitraire de trois clics ? 2. Le Dr. 3. 4.

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

Related:  wedesign