Web Design: Comment présenter du contenu sur une page Web - les nuls

Lorsque vous créez vos wireframes, n'oubliez pas que vous n'êtes pas limité à une présentation statique du texte et des graphiques. De nombreuses technologies, de l'animation Flash au DHTML, vous aident à optimiser votre espace de pages et à présenter le contenu de manière interactive et interactive.

Indiquer du texte sur une structure filaire

Comme vous partagez des wireframes avec les clients et les membres de l'équipe, indiquez tous les éléments de navigation et les titres des principales sections de contenu avec un texte lisible pour les orienter. Tous les autres composants de copie peuvent être indiqués avec le texte dit grec (qui est en fait du charabia latin) qui reflète leur nombre de caractères alloués (le nombre de lettres, la ponctuation et les espaces) afin que vous ayez une idée réelle taille du bloc de texte.

Vous pouvez rechercher sur le Web lorem ipsum generator pour trouver des sites qui génèrent des paragraphes de texte grec - et même des compteurs de caractères spécifiques - que vous pouvez copier et coller directement dans vos wireframes.

Travailler avec un système de gestion de contenu

Un système de gestion de contenu est un site Web ou une application conviviale qui offre aux administrateurs du site un accès sécurisé à la base de données de leur site Web. En se connectant à un CMS, le gestionnaire d'un site Web peut facilement ajouter, supprimer et mettre à jour le contenu stocké dans la base de données. L'avantage d'utiliser un CMS pour stocker du texte et des graphiques est qu'une fois que vous définissez un tas de types de contenu tels que "description courte", "nom du produit" et "image miniature du produit", créez des instances de ces objets. copie ou des images réelles, puis attribuez-les à une ou plusieurs pages Web. Ainsi, si vous mettez à jour l'instance dans le CMS, le contenu est mis à jour automatiquement, quel que soit son emplacement sur le site. Cette stratégie sépare le contenu de la présentation de la page Web pour vous donner plus de flexibilité pour les futures modifications de conception et de contenu, ce qui facilite la maintenance du site.

Si votre site utilise un système de gestion de contenu, un stratège de contenu travaille en étroite collaboration avec Information Architect (sur des équipes plus petites, cela peut être une seule et même personne) pour identifier les différents types de contenu. site a puis déterminer quels types de contenu vont sur chaque page.

Optimisation de votre espace sur le Web

La plupart des utilisateurs disposent de moniteurs d'ordinateur de petite taille et de nombreuses personnes consultent des sites Web via des téléphones intelligents et des appareils. Si vous tenez une feuille de papier 8-1/2 x 11 pouces horizontalement, vous regardez la taille de la plupart des fenêtres sur le World Wide Web.Après avec tous ses boutons facteur dans l'interface du navigateur dans la partie supérieure, les onglets favoris, et les touches de déplacement, l'espace de visualisation consacré à la web est réduit à une taille de carte postale, ou environ 800 x 600 pour de nombreux utilisateurs. Cette fenêtre maigre est votre toile de conception Web.

Voici quelques stratégies organisationnelles et interactives pour vous aider à mieux présenter votre contenu sur ce petit espace:

Faites défiler pour voir le contenu moins important.

• Vous ne pouvez tout simplement pas tout insérer dans la zone visible - les premiers 800 x 600 pixels de la fenêtre du navigateur. Placez donc les éléments de haute priorité dans cette fenêtre initiale et les objets de priorité inférieure au-dessous du pli. Donnez des indices visuels pour que les utilisateurs sachent que plus de choses se trouvent en dessous de la ligne de flottaison en affichant délibérément les titres ou les sommets des images qui mènent à plus de choses ci-dessous. Les utilisateurs ne dérange pas le défilement, aussi longtemps que la page ne continue pas éternellement. Une bonne règle est de cibler la hauteur totale de la page à deux fois la hauteur visible initiale (donc 1200 pixels pour une page de 800 par 600).

  Utilisez également un espace horizontal.

• Vous pouvez utiliser des technologies telles que Flash ou HTML 5 pour présenter un contenu à défilement horizontal ou un «carrousel» de contenu rotatif. Crédit: © Bohemia Design Ltd.

  

  Couchez votre contenu.

• Une autre façon de maximiser l'espace de visualisation consiste à révéler des couches de contenu en haut de la page Web lorsque l'utilisateur survole ou clique sur quelque chose. Vous pouvez masquer et afficher les couches de contenu à l'aide de technologies telles que JavaScript, DHTML (Dynamic HTML) et Flash. Crédit: © Le rollover de l'utilisateur de DisneyA développe ce module de contenu sur un site Web de Disney pour révéler plus d'informations.

  

  Crédit: © Television Food NetworkDHTML peut produire un menu déroulant «amélioré» qui offre des options organisées lorsqu'un utilisateur survole un élément de navigation.

  

  Concevoir une porte tournante de contenu.

• Parce que l'espace de la page Web est très important, une autre dimension que vous devez prendre en compte est le temps. Si vous ne pouvez pas adapter tout ce que vous voulez dans la zone visible, vous pouvez penser à animer la zone. Annotation de vos wireframes

Parfois, les pages Web contiennent des composants hautement interactifs qui doivent être expliqués dans les wireframes via des annotations.

Les annotations sont simplement des notes de marge qui décrivent le fonctionnement des éléments de la page, ce qui déclenche l'interaction et le contenu affiché dans différents scénarios. En numérotant les zones de la structure filaire et en numérotant vos notes, vous pouvez décrire efficacement les détails de l'interaction. Souvent, vous devez également inclure un diagramme en encart montrant un état différent qui apparaît lors d'une action de l'utilisateur, telle qu'un survol ou un clic. Cette structure filaire annotée avec des légendes numérotées comporte également des encarts qui montrent les différents états de contenu lorsque les utilisateurs interagissent avec elle.