Conception de contenu Intensif Conseils de mise en page et exemples

Pour créer des mises en page complètes pour le Web, il faut du talent et beaucoup de dévouement. Les concepteurs de sites Web effectuent un travail où ils sont le plus incapables de le faire et de manière très sophistiquée. Au fur et à mesure de l'évolution des pages Web, nous avons constaté la nécessité de disposer de plus d'espace et de contenu que jamais.. Si vous comprenez déjà comment concevoir un site Web, vous gagnerez beaucoup en compréhension de ces méthodes. Les fonctionnalités essentielles d'un site Web changent rarement. Cependant, avec un contenu de page supérieur à la moyenne, d'autres facteurs entrent en jeu, notamment l'espace blanc, la typographie, le positionnement des éléments, etc..

Nous allons entrer dans les détails pour couvrir quelques astuces majeures pour construire des mises en page intensives en contenu. Celles-ci peuvent aller d'applications de réseautage social, de sites Web de grandes entreprises ou d'entreprise, ou de tout autre élément intermédiaire. Il est important de vous demander "qu'est-ce que j'essaie de réaliser avec cette conception?"lorsque vous concevez des pages, cela vous aidera à prévoir une perspective plus large.

Pages Web personnalisées

Quelle que soit votre expérience dans la conception de sites Web pratiques, il est vrai que nous devions tous commencer quelque part. La conception de pages Web personnalisées constitue généralement le premier pas vers une carrière dans la programmation Web avant l'application des spécifications classiques..

Je recommande toujours de créer une petite liste d'éléments de page considérés comme installés dans le modèle. Une fois que tous ces éléments sont écrits, il devient plus facile d'éliminer les mauvaises idées ou de relever les joyaux manquants ou oubliés. Cela ouvre également la voie à une planification facile pour soulager le stress sur la route.

Structure filaire

Pour le site Web générique de 5 pages, vous verrez souvent les mêmes éléments répétés. Un logo dans le coin supérieur, des liens de navigation dans la tête, une zone de contenu principale éventuellement divisée en une barre latérale et d'autres fonctionnalités (login, champ de recherche, etc.).

Envisagez un bon point de départ pour créer des mises en page détaillées. De nombreux concepteurs trouvent qu'il est utile d'esquisser des conceptions filaires possibles afin d'éliminer les défauts qui ne sont pas si évidents. Cela ne nécessite aucun papier de fantaisie et peut même être fait dans un cahier régularisé. Le but d'une structure filaire est de donner une idée approximative de la direction que devrait prendre l'agencement du site avec une marge de manœuvre pour fournir les détails ultérieurement..

Avec des mises en page lourdes en contenu, il convient de prendre en compte tout ce que la plate-forme contiendra. Construire une disposition fermée de 2 ou 3 colonnes pour héberger plus de 100 pages de contenu long et complexe ne laissera pas beaucoup de place pour respirer. En esquissant et en planifiant à l’avance, vous pouvez contrôler l’espace disponible pour le contenu de la page. Cela ne consiste pas seulement à encapsuler du texte ou à bloquer des zones, mais également à traiter des images et des vidéos..

Espace blanc brillant

L'espacement des blancs est peut-être le facteur le plus important à prendre en compte dans les mises en page à contenu intensif. Le contenu du site Web le gouverne plus que tout autre site Web classique. Si les lecteurs sont incapables de comprendre le contenu parce qu'il n'y a pas de place pour digérer vos mots, la circulation sera inégale et contrariée.

Les paragraphes et les en-têtes de page sont un excellent point de départ pour les personnalisations. En utilisant les propriétés CSS, vous devriez être capable de manipuler les marges externes et d’extraire chaque élément de texte de la ligne de bloc. Ceux-ci incluent tous les en-têtes 1 à 6, les paragraphes, les guillemets, les listes, le texte préformaté et quelques éléments mineurs..

Si vous souhaitez retenir l'attention de votre lecteur, il est important d'appliquer un espacement sous les principaux éléments de texte. Les paragraphes et les en-têtes plus petits fonctionnent mieux avec des marges inférieures de 15px-25px en place. Pour les éléments de page plus volumineux tels que h1 ou h2, utilisez 35px + (cela dépend également de la taille de la police). Les espaces entre les éléments verticaux sont importants pour le défilement et la numérisation «en un coup d'œil». toutefois hauteur de la ligne est une autre propriété CSS importante qui influe sur l'espacement des lignes dans un élément de texte. Les paragraphes doivent avoir une valeur de hauteur de ligne beaucoup plus grande par rapport à la taille de la police afin qu'il y ait suffisamment de rembourrage supplémentaire entre les lignes.

Considérer les styles dynamiques

En dehors de l'espacement, typographie numérique devrait être manipulé de manière à le faire sauter de la page. Avec des centaines de millions de sites Web dans le monde, il est courant de voir le même type de police partout..

Si vous concevez une mise en page pour un site Web lourd en contenu, le résultat ressemblera à un autre modèle fade à la fin. Il existe de nombreuses propriétés pour jouer avec les styles typographiques avancés. Ombres de texte, espacement moins / plus grand des lettres, plates-formes d'arrière-plan, icônes… la liste est infinie.

En vérité, vous êtes le concepteur et votre dernier mot est la loi. Concevoir un tracé n’est pas comparable à une autoroute à voie unique sans redressement. Au cours du processus, vous pouvez revenir en arrière et modifier les styles, manipuler de nouveaux éléments ou supprimer complètement un concept. Pensez à quelques autres astuces CSS utiles et amusez-vous pour voir ce qui vous convient le mieux.!

Utiliser les menus déroulants

Avec autant de contenu, il est peu probable que tous vos liens tiennent sur une seule page. Il existe de nombreuses options pour gérer une surcharge de pages. Placer des liens supplémentaires dans des blocs de la barre latérale ou cousus dans des colonnes dans le pied de site est deux options utiles.

Le choix le plus pratique et le plus pratique consiste à créer un schéma de navigation déroulant avec des catégories et sous-catégories de têtes. Il existe également de nombreux scripts open source offrant des sous-sous-catégories si vous avez des sujets extrêmement détaillés..

La stratégie la plus rapide et la moins frustrante est peut-être de commencer par un framework JavaScript. Parmi les plus populaires figurent jQuery, MooTools ou éventuellement Prototype. Toutes ces bibliothèques offrent de la documentation et beaucoup ont des scripts de menu déroulant gratuits disponibles.

Planifier les vues de contenu

En pratique, il est beaucoup plus difficile de créer une zone de corps simpliste pour héberger tout le contenu de votre site Web habituel. Avec les normes changeantes des navigateurs et la prise en charge mobile semi-médiocre, il n’est pas étonnant que nous voyions de tels sites Web à forte intensité de contenu. Soyez sensible à chaque style de page Web affichée. Certains contiennent plusieurs images, d'autres peuvent contenir un graphique ou une vidéo principale ou aucun graphique. Une fois que vous avez fini de coder la mise en page finale, créez plusieurs pages HTML pour héberger différentes vues..

Ceux-ci auront tous le même balisage interne, à l'exception du contenu situé dans la zone de contenu principale. Chaque affichage de page individuel peut être manipulé et fournit un aperçu du produit fini. Activez-le pour qu'il contienne toutes les vues majeures qui, selon vous, seront nécessaires pour chaque page. D'autres exemples d'éléments de page peuvent inclure des zones de commentaire, des vidéos ou des galeries intégrées, ou des liens de page divisés..

Planifier les stratégies à fond

En vérité, il n’est pas tout à fait difficile de créer une mise en page Web puissante. De nombreux concepteurs se familiarisent avec les petits détails tels que la manière de planter des éléments de bloc ou des hyperliens de couleur. Ces détails sont importants car ils transmettent un message de marque. Même à partir d'éléments plus petits, le message doit être associé à l'intégralité de la page. Planifiez mentalement les étapes de votre conception pour déterminer la meilleure approche à adopter pour chaque obstacle. Si vous travaillez avec un client, il serait bon de discuter du type de contenu qui remplira les pages à l’avance. Cela vous donne l’occasion de planifier à l’avance et de définir la meilleure approche pour une mise en page générale..

Un autre sujet particulièrement intéressant concerne le design mobile. Ce nouveau marché connaît une expansion considérable, non seulement des smartphones, mais également des tablettes PC puissantes.. Cela signifie que les utilisateurs peuvent accéder à votre mise en page à partir d'un écran de mobile. Assurez-vous que le contenu ne déborde pas et qu'il est bien présenté..

7 exemples de sites Web à contenu lourd

Vous trouverez ci-dessous quelques exemples de captures d'écran de sites Web populaires à fort contenu. Ce sont principalement des marques bien connues sur les marchés physiques et numériques. Découvrez certaines des idées ci-dessous pour trouver de l'inspiration dans vos propres projets. N'hésitez pas non plus à partager d'autres mises en page lourdes de contenu dans la section commentaires..

Clicker

Clicker est une nouvelle application de réseautage social pour les amateurs de télévision et de cinéma. Vous pouvez vous inscrire pour un nouveau compte et trouver certaines de vos émissions de télévision préférées préférées, archivées par saison et par épisode. Vous pouvez comparer le site à IMDB avec moins d’informations et plus de contenu vidéo.!

L'avenir de la conception Web

Future of Web Design 2011 sera lancé à Londres au printemps prochain. Consultez la page d'accueil pour plus d'informations et un excellent exemple de mise en page à base de texte. Tous les détails sont véritablement partagés et offrent des conférenciers, des horaires, des ateliers, des sponsors et bien plus encore..

Lord Likely

Dans cette mise en page comique, le personnage principal, Lord Likely, a été "cartoonisé" et perforé dans une illustration. Le site est divisé en 3 colonnes avec chaque nouveau contenu sportif, annonces, liens de fil et archives. Le design lui-même est très rétro et une prise intelligente sur les dessins d'illustration.

Microsoft

La plupart des passionnés de technologie connaissent Microsoft. En fait, la plupart des gens qui comprennent ce qu'est un ordinateur peuvent même vous donner une brève description de Microsoft et de Bill Gates. Leur page d'accueil contient du contenu pour des dizaines de progiciels, mises à jour de nouvelles, communiqués de presse et informations de développement. Un peu en bas de la page, vous pouvez repérer un menu à onglets vertical avec commutation de contenu dynamique.

Moteur de recherche

Search Engine Land est un magazine Web populaire axé sur les moteurs de recherche et le marketing Internet. Ils mettent régulièrement à jour des publications de qualité incroyable et conduisent des centaines de milliers de personnes sur leur site chaque jour. La page principale est divisée en 3 colonnes permettant de contenir chaque module de contenu et chaque publicité..

La maison Blanche

La conception de la Maison Blanche aux États-Unis est très propre et professionnelle. Il y a beaucoup d'informations concernant le programme du président et d'autres événements politiques importants. Une astuce pour alléger l'espace de page a été l'ajout d'un petit curseur de contenu vers l'en-tête de page. C'est idéal pour afficher 3-4 gros titres d'actualité lorsque vos visiteurs arrivent sur la page..

Portail Yahoo

En ce qui concerne les grands sites de contenu, Yahoo! doit être tendance vers le sommet. Yahoo! propose à ses clients des centaines de services, notamment des courriers électroniques, des actualités, des vidéos et même des recherches sur le Web. Découvrez quelques-uns des Y! des liens de portail dans la barre latérale pour voir comment leurs modèles se comparent.

Conclusion

Ce ne sont là que quelques-uns des points clés et des étapes à suivre pour créer une mise en page concrète et exigeante en contenu. Les pages Web contenant de grands réservoirs de contenu sont souvent considérées comme un fardeau pour le contenu des sites référencés et rien de plus. Le design est primordial car c'est la première impression qu'un utilisateur obtient de chaque site Web. Avec de gros volumes de contenu, cela peut devenir un désastre avec un fouillis et des généralisations excessives. Ne cessez jamais de vous entraîner et avec seulement quelques projets, vous maîtriserez mieux la conception de présentations à fort contenu..