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

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é. 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

2 outils pour évaluer la visibilité d’une source Si la visibilité est parfois beaucoup trop mise en avant lorsque l’on parle d’e-réputation, il est néanmoins nécessaire de ne pas l’oublier et de l’évaluer de manière précise. Voici deux nouveaux outils gratuits arrivant tout juste sur le web, et qui permettent d’estimer cette visibilité : Allorank et Vrank.com. Ah visibilité quand tu nous tiens… Tellement plus facile à évaluer et à comprendre (si on ne me voit pas on ne me connait pas)… Si une stratégie d’e-réputation passe aussi (et surtout) par les mouvements d’opinions et l’analyse de ceux-ci, avoir recours à des petits outils gratuits pour estimer le positionnement et la visibilité d’une source (la vôtre, celle d’un concurrent ou d’un possible relais) n’est jamais perdu. Les deux outils qui vont vous être présenté ci-dessous permettent de répondre plus précisément à deux questions : quelle est le positionnement d’une source pour une requête donnée sur Google ? Allorank : quel positionnement sur Google ? ==> Visibilité en ligne:

Les microformats et microdata apportés par HTML5 Microformats, microdata, nouvelle sémantique, nouveaux éléments HTML… Tant de nouveautés qui perturbent les intégrateurs web soucieux de se mettre à jour dans leurs compétences ou curieux de savoir ce dont ils peuvent déjà faire usage dans leurs intégrations. Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. Nous allons essayer de nous concentrer sur les microformats et, surtout, les microdata apportées par HTML5. Cet article a été rédigé par Geoffrey Crofte, intégrateur et designer web chez Alsacréations et pour son petit studio Creative Juiz. Également auteur de son propre blog Creative Juiz et de nombreux articles pour la communauté Alsacréations, Geoffrey apprécie les expérimentations sur CSS3 et nous les fait partager sur TryToTry, son laboratoire. Présentation Faisons les présentations avant de nous attaquer à du code. Les microformats Rendu :

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.

Related: