background preloader

Du zoning au mockup, itinéraire d'une maquette web

Du zoning au mockup, itinéraire d'une maquette web
Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [**] à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [**] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses. sketch / croquis La première chose que l’on fait, c’est de jeter des idées sur papier, sous la forme de croquis.Outils : papier et crayons, Sneakpeekit, InterfaceSketch Le sketch est trop peu utilisé : vous êtes peu nombreux à crayonner régulièrement et près de la moitié [**] à ne jamais faire de croquis ! Conception ergonomique zoning Le zoning, comme son nom l’indique, sert à identifier les principales zones. wireframe / maquette filaire prototype Habillage graphique

http://romy.tetue.net/zoning-mockup-maquette-web

Related:  Astuces/conseilsWeb - CréationMonSite

Signification des couleurs en E-marketing et en Ergonomie Web . Sur la demande de plusieurs clients et stagiaires, les consultants-rédacteurs de Trinity Advise se sont mobilisés pour vous proposer un dossier complet sur les codes couleurs web et la signification des couleurs pour Internet. Vecteurs de cohérence graphique, les couleurs dictent de nombreux comportements à l’inconscient de l’internaute. Elle génèrent des réactions et des émotions que nous ne savons pas concrètement évaluer et chiffrer en e-marketing, sauf avec les nouveaux outils de test d’ergonomie web (eye tracking, mouse tracking, neuromarketing).

Comment créer une arborescence de site web efficace Ça y est, vous avez finalement décidé d'effectuer la refonte de votre site web. Peut-être avez-vous pris cette décision car votre site n'était plus esthétiquement aussi joli que les sites des concurrents. Toutefois, il demeure que la refonte de votre site web représente pour vous une opportunité non seulement de mettre à jour le côté visuel du site, mais surtout d'en améliorer la navigation et l'efficacité pour mieux répondre aux problématiques de vos visiteurs. Dans cet article, j'expliquerai comment créer une arborescence efficace pour un site web en détaillant les efforts à investir avant de créer une arborescence et aussi en présentant quelques erreurs courantes dans des menus principaux, à la fois au niveau de la stratégie et de l'utilisabilité. Créer une arborescence de site web : de quoi s'agit-il?

Illustrator - Les formes de base - Les rectangles, carrés, tracés centrés - Les ellipses - Le polygone - L’étoile - Le trait - Le crayon Avant même de commencer, il faut comprendre que tous les objets que vous créerez seront dotés d’un contour où d’un fond où les deux. Vérifiez donc bien que vos couleurs par défaut sont bien le noir pour le contour et le blanc pour le fond. Pour rétablir ces couleurs, appuyez sur la touche D de votre clavier ou cliquez sur la case qui affiche les deux petits carrés (en bas à gauche). Construire un fil d'Ariane efficace Quitte à proposer un fil d’Ariane pour mieux se repérer dans le site, autant qu’il soit accessible, cohérent et efficace ! Le fil d’Ariane, ou « breadcrumb trail » en anglais [1], est une aide à la navigation qui permet de mieux se repérer dans le site. Il n’est pas indispensable et vient compléter la navigation principale, mais quitte à le proposer, autant qu’il soit accessible [2], cohérent et efficace, non ? Pour bien faire, il doit refléter l’architecture du site. Il est par conséquent indépendant du chemin emprunté par l’internaute, contrairement à ce que son nom indique. Le fil d’Ariane d’emplacement [3] est statique et montre où la page se situe dans la hiérarchie du site web.

Stylisez votre site avec CSS3 ! Version en ligne Table des matières Stylisez votre site avec CSS3 ! Quel développeur Web ne s'est pas arraché les cheveux sur la conception du design de son site ? Mind mapping pour la gestion de projet Au préalable, il est essentiel de définir la question de départ. (attention à bien identifier le sujet/ question : risque hors sujet / manque de pertinence) Démarche en 6 étapes : Lister en réalisant un brainstorming avec ± 15 mots-clés Valider Créer un site responsive - La maquette Vous souhaitez réaliser un site responsive ? Que ce soit pour un projet en code html/css pur ou bien pour créer un thème sur mesure pour WordPress, Joomla, Drupal ou autres… C’est ici que ça se passe. Pour cette première étape de la création d’un site responsive « from scratch » (depuis zéro), nous allons commencer par l’étape de la création des maquettes graphique. C’est l’essence même de la qualité du résultat final, donc autant faire les choses proprement et ne pas se compliquer la vie. A savoir : Les sites actuels ont un « standard » de 960 pixels de large, même si avec l’évolution des tailles d’écran, la tendance va s’étirer petit à petit vers du 1200 pixels.

Infographie : 6 étapes pour la réaliser Retrouvez-moi sur Facebook ! La représentation visuelle et graphique occupe aujourd’hui une place importante sur internet. L’époque de longs textes, condensés sur plusieurs pages, est révolue ! Désormais, les internautes préfèrent davantage un bon contenu imagé. Simple à réaliser, l’infographie a l’avantage d’être un support attractif et facilement mémorisable, qui se partage très rapidement sur les réseaux sociaux.

Outils pour le referenceur - ameliorer votre referencement De nombreux outils sont proposés gratuitement pour faciliter le travail du webmasters lorsqu’il cherche à optimiser son site web. Je vous propose une liste non exhaustive de quelques-uns de ces outils gratuits que vous pouvez utiliser sans modération. Les modules d’extension Add-ons pour Firefox

Prototyper vos applications : la méthode en 5 étapes Dans ces quelques lignes je vais vous exposer ma méthode de travail de designer pour prototyper mes applications. J’espère vous fournir certaines clefs pour bien mener et réussir vos applications tant d’un point de vue ergonomique que graphique. Le maître mot lors de la création d’une app qu’elle soit mobile ou tablette, est la cohérence. - Cohérence dans l’arborescence de votre projet, vos différentes pages de contenu doivent être organisées de façon logique. 8 conseils pour créer des couvertures percutantes de pages Facebook La couverture de votre page Facebook est l’un des premiers éléments que voit l’internaute. Du fait de sa grande largeur, il est difficile de passer à côté. Il est donc vivement recommandé de s’en servir pour faire passer un message. Cela peut être simplement d’indiquer au visiteur qu’il est bien sur la page de votre entreprise, promouvoir un produit, annoncer un futur événement ou susciter une réaction.

Bien choisir ses mots clés pour le referencement de son site webCréation et Communication Globale Le choix des mots clés est une étape décisif dans la conception d’un site internet, il va définir le choix de votre arborescence, l’architecture de vos pages et de vos contenus, leur rédaction …. Bref pour être certain de concevoir un site internet qui ne sera pas seulement visité par vous et vos amis, mieux vaut définir à l’avance comment va-t-on si prendre pour recevoir du trafic ciblé. Inutile de commencer la fabrication de votre site sans votre fameuse liste, vous perdrez beaucoup d’énergie et de temps et votre référencement ne pourra être efficace. Définition d’un mot clé 3 Conseils pour Créer une Couverture Facebook Efficace Depuis quelques années, les réseaux sociaux ont pris une place importante dans nos sociétés. Aujourd’hui, il y a plus d’un 1,39 milliard d’utilisateurs actifs mensuels sur Facebook. De ce fait, ces plateformes constituent un vivier de clients potentiels non négligeable pour les entreprises. De nombreuses techniques existent pour attirer des prospects vers une page Facebook.

Related: