Accueil Médias sociaux Web Design: Comment présenter du contenu sur une page Web - les nuls

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

Table des matières:

Vidéo: Créer la PAGE D'ACCUEIL PARFAITE 2025

Vidéo: Créer la PAGE D'ACCUEIL PARFAITE 2025
Anonim

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.

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

Le choix des éditeurs

Spotify Mobile Service avec un compte Premium - Les nuls

Spotify Mobile Service avec un compte Premium - Les nuls

Les deux principaux avantages des abonnés Spotify Premium sur Spotify Free ou Les détenteurs d'un compte illimité ont la capacité d'accéder au catalogue de diffusion en continu de Spotify via un appareil mobile et d'écouter des pistes en mode hors connexion à l'aide de votre application mobile ou informatique. Ce sont les deux caractéristiques qui justifient le fait que Spotify ...

Spotify Listes de lecture de Mobile - mannequins

Spotify Listes de lecture de Mobile - mannequins

Comme sur votre ordinateur, vous pouvez gérer les listes de lecture Spotify sur votre téléphone. Toute modification apportée à votre liste de lecture est synchronisée sur tous les appareils auxquels vous êtes connecté, en temps réel. Lorsque vous démarrez l'application Spotify, toutes vos playlists sont affichées immédiatement, mais vous pouvez y accéder à tout moment en appuyant sur ...

Spotify vous permet de vous lier à peu près n'importe quoi - les tuls

Spotify vous permet de vous lier à peu près n'importe quoi - les tuls

Spotify vous permet de copier des liens Web et des URI vous pouvez coller où vous voulez: dans les blogs, les e-mails, les réseaux sociaux, même les documents de traitement de texte. Cliquez avec le bouton droit de la souris sur ce que vous voulez partager et choisissez une option de copie dans le menu contextuel qui s'affiche généralement. Dans certains cas, si vous savez comment un lien est construit, ...

Le choix des éditeurs

Médias sociaux et marketing par e-mail - nuls

Médias sociaux et marketing par e-mail - nuls

Réseaux sociaux clients potentiels via des sites Web et des e-mails. Rappelez-vous, la suppression des e-mails pour gagner du temps est le mode opératoire pour les gens connectés en ligne dans les affaires ces jours-ci. Certaines entreprises estiment avoir le droit d'envoyer des offres quotidiennes et des promotions accompagnées de fanfares. Est-il même possible pour une entreprise de ...

Social Media Commerce: Enregistrement client par Mobile App - dummies

Social Media Commerce: Enregistrement client par Mobile App - dummies

Certains médias sociaux Les applications récompensent leurs utilisateurs pour l'enregistrement depuis les smartphones au fur et à mesure qu'ils passent d'un endroit à un autre dans le monde des briques et du mortier. Cette activité d'enregistrement mobile est populaire auprès de ceux qui se connectent en ligne. Vous pouvez encourager les gens à se présenter à votre lieu de travail. Le leader actuel sur le marché est Foursquare, un ...

Social Media Commerce: Blog pour votre entreprise - dummies

Social Media Commerce: Blog pour votre entreprise - dummies

Quand vous vous sentez prêt Pour passer à l'étape suivante dans le commerce des médias sociaux et faire quelque chose au-delà d'un site Web d'entreprise, vous pouvez développer un blog pour communiquer avec les clients. Les blogs offrent un espace à votre entreprise pour améliorer son message et répondre aux commentaires des lecteurs. Un blog (à partir du web-journal) peut ...

Le choix des éditeurs

Comment traduire votre réseau Ning en une langue non prise en charge - les nuls

Comment traduire votre réseau Ning en une langue non prise en charge - les nuls

Bien que Ning supporte 18 langues , avec autant de langues dans le monde, vous devrez peut-être traduire votre réseau en un réseau que Ning ne prend pas en charge. Créer une nouvelle traduction:

Comment syndiquer le contenu de votre réseau Ning - des nuls

Comment syndiquer le contenu de votre réseau Ning - des nuls

Votre réseau Ning vous offre de nombreuses façons d'utiliser Flux RSS pour syndiquer le contenu que vous et vos membres contribuent au réseau. Si les titres des éléments des flux RSS de votre réseau sont suffisamment informatifs et convaincants, les internautes qui visitent d'autres sites Web qui affichent le flux RSS de votre réseau peuvent cliquer sur les titres ...

Comment utiliser le mur de commentaires de Ning - mannequins

Comment utiliser le mur de commentaires de Ning - mannequins

Votre page de profil Ning a un mur de commentaires, où autre Les membres de Ning peuvent vous laisser des messages. Le mur de commentaires permet aux membres de vous écrire quelque chose, d'inclure un lien vers un autre site Web, d'intégrer de la vidéo à partir du réseau ou d'autres sites, ou de poster une photo pour que vous puissiez la consulter. N'importe qui dans le réseau peut partir ...