Création d'un site internet pour un magazine dans la presse spécialisée

Pack & Label Around.fr

Voir la galerie

Création de sites internet de magazine

Conception et réalisation d'un site internet pour un magasine sur l'emballage et les étiquettes imprimées de l'entreprise Pack Info Presse

Conception et réalisation d'un site internet pour un magasine sur l'emballage et les étiquettes imprimées de l'entreprise Pack Info Presse de Olloweb.com est mis à disposition selon les termes de la licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
Licence Creative Commons

3.7/5 pour 22 notes

Notez cette page
Note sur 5
Je sélectionne des étoiles

Votre note a bien été prise en compte, notre équipe vous remercie pour votre collaboration.

Vous avez déjà noté cette page, encore merci pour votre collaboration !

Après avoir terminé la réalisation du site Pack & Label Around, notre agence vous propose de découvrir quelques étapes de la conception du site, ainsi que les éléments qui le composent.

Pack & Label Around est un site internet d’informations qui a pour objectif de compléter le magazine papier du même nom. Celui-ci propose l'abonnement au magazine papier ainsi que l'achat des numéros déjà parus. En plus des offres d'abonnements, le site internet permet la lecture d'articles organisés par rubriques d'informations avec : les marchés, les étiquettes, les emballages souples, les emballages cartons, les institutionnels, les partenaires ainsi que les événements.

Pour compléter l’offre d’abonnement au magazine papier, le site offre la possibilité de s’abonner à des articles privés. Ainsi chaque article peut être en partie privé et accessible, uniquement aux abonnés qui ont commandé une offre d'abonnement.

Pour assurer l’affichage des articles privés, des pages de compte utilisateur ont été ajoutées au site internet. L'utilisateur se connecte à son compte par un identifiant et un mot de passe, puis un espace client lui permet de voir et de gérer son abonnement ainsi que ses commandes de magazines.

Pour faciliter la commande des offres d'abonnements ainsi que pour les magazines déjà parus, des pages web pour le traitement des commandes ont été adaptées à l'activité du site. Nous avons aussi ajouté le module PayPal pour un règlement en ligne des commandes.

Le CMS Olloweb assure en arrière-plan l'ensemble du site, la gestion des commandes et des abonnements.

Voir le site Pack & Label Around

Pack Info Presse
Pack Info Presse

L'actualité des hommes et des entreprises du secteur, l'amélioration des procédés hélio, flexo, sérigraphie et numérique et leurs équipements de finition. A chaque nouveau numéro, sa carte régionale, son dossier technique et le guide d'achat.

Menu, logo, panier...

La composition du haut du site

Le haut du site est composé d’un menu général qui permet la navigation vers des pages intérieures du site : l’entreprise, l’équipe, les offres d’abonnements. Vient ensuite, plus bas le logo, une phrase de définition d’activité, un menu des réseaux sociaux et enfin deux liens avec icônes pour le panier et l’accès au compte utilisateur.

Pour finir, un menu des rubriques permet au clic d’avoir accès aux articles respectifs. Sans oublier un espace publicitaire réservé entre le menu rubrique et le haut du site.

Détail du haut du site
Détail du haut du site

Le magazine, les rubriques, les partenaires

La composition du bas du site

Le bas de page est composé d'un espace de communication sur le dernier numéro du magazine papier sur la gauche, puis sur la droite la liste des magazines déjà parus avec la possibilité de commander un magazine avec la fonction "ajouter au panier".

Vient ensuite un espace sur l’abonnement au magazine ainsi qu'à la version digitale avec un bouton «je m’abonne » qui ajoute l’offre au panier.

Un plan des pages du site est affiché immédiatement en dessous avec : la liste des rubriques, la liste des pages en relation avec le magazine, les réseaux sociaux et des liens vers des partenaires.

Le bas de page se termine par des informations de droit d’auteur et reprend le nom du site et la définition.

Détail du bas de page
Détail du bas de page

Colonnes, rubriques et derniers articles

La composition de la page d'accueil du site

La page d'accueil est composée de deux colonnes. La colonne de gauche propose un article à la une, puis immédiatement en dessous les rubriques avec pour chacune d'elles les derniers articles. La colonne de gauche est organisée de manière plus dynamique avec de nombreuses combinaisons possibles : les articles les plus lus, les plus vus, l'abonnement au magazine, la dernière vidéo, un script Twitter, etc. Le CMS Olloweb permet d'organiser cette page suivant de nombreuses préférences d'affichages.

Voir la page d'accueil Pack et Label Around

Détail de la page d'accueil
Détail de la page d'accueil

Article à la une, les rubriques d'information, les derniers articles des rubriques...

Détail de la page rubrique
Détail de la page rubrique

Marchés, étiquettes, emballages souples...

La composition des pages des rubriques d'articles

Lors d'un clic sur une des rubriques du menu, ou depuis la page d'accueil, une des page rubrique est affichée. Cette page peut être organisé suivant des préférences d'affichages, avec sur la colonne de gauche, les deux derniers articles de la rubrique, puis viens les six autres articles sur trois colonnes, enfin, les autres articles avec un affichage en ouverture/fermeture (si il y a de nombreux articles). Sur la colonne de droite, il est possible d'organiser des éléments suivant des options d'affichage, avec : les articles les plus récents, les plus lus, des articles Twitter, des espaces publicitaires, etc.

Voir une page de rubrique en ligne

Détail d'article, dans la même rubrique et bien plus...

Le modèle des pages article

La page article, détaille les informations affichées en résumé des articles qui sont visibles ailleurs sur le site. Cette page est composée du titre de l'article, éventuellement d'un sous-titre, de la date de l'article ainsi que de l'auteur.

Vient ensuite un visuel en pleine largeur avec des informations de légende du visuel affichées au survol de celui-ci.

Plus bas, une invitation à l'abonnement à la version digitale du magazine, puis, le corps de l'article avec un texte libre.

Si l'article est privé, une partie sera affichée de manière publique avec en bas de l'article, la possibilité de s'abonner ou de se connecter pour voir l'article dans son intégralité.

La partie droite de la page est organisée en fonction des préférences utilisateur avec de nombreuses options d'affichages possibles : les articles de la même rubrique, sur le même sujet, du même auteur, les plus récents, etc.

Voir une page article en ligne

Détail du modèle de page
Détail du modèle de page

La conception graphique du modèle de la page des articles d'information.

L'abonnement au magazine, les remises...

Composition du modèle de la page des offres d'abonnements

Cette page dynamique affiche la liste des offres d'abonnements en gestion depuis le CMS Olloweb. Ainsi il est possible d'ajouter ou de modifier des formules comme vous le souhaitez. Avec soit l'abonnement au magazine, soit un abonnement à la version digitale, soit les deux. Cette page offre également la possibilité de commander des magazines papier déjà parus. Chaque offre ou chaque magazine peut aisément être ajouté au panier pour une commande en ligne. En complément des offres, sont affichées en bas de page, des remises préférentielles pour les utilisateurs pros ou les personnes retraitées.

Voir la version en ligne

Détail de la page des offres d'abonnement
Détail de la page des offres d'abonnement

Panier, livraison, commande, livraison...

Les pages de commande

Après avoir ajouté une offre d'abonnement ou un magazine, l'utilisateur est invité à ajuster la commande et d'activer une remise si besoin, ensuite, il lui sera proposé de créer un compte client afin de pouvoir suivre sa commande. Puis de suivre les étapes du choix du mode de livraison, du mode de paiement avec, enfin, une dernière étape de confirmation de commande.

Le modèle de la page de présentation
Le modèle de la page de présentation

Les pages de présentation d'activité

À propos de l'entreprise, les mentions légales, ce type de page, utilise généralement un modèle identique avec une présentation généraliste. Ainsi sur la partie centrale sont affichée le titre, le sous-titre, le corps du texte avec des visuels possibles au sein du texte. Ensuite sur la colonne de droite optionnelle, il est possible de faire remonter d'autres articles, ou des espaces publicitaires ou bien encore des articles Twitter.

Formulaire et informations d'entreprise

La page de contact

Cette page permet de prendre contact avec l'administrateur du site internet par le biais d'un formulaire réalisé en Ajax. La colonne de droite est libre et permet de faire remonter d'autres articles en relation avec cette page.

Après avoir complété le formulaire de demande de renseignements, une confirmation par mail est envoyée à l'internaute avec le récapitulatif de sa demande.

Voir la page contact en ligne

Les auteurs, l'équipe du site

Modèle de la page l'équipe

Cette page regroupe les auteurs des articles du site internet. Pour chaque auteur sont affichés suivant les préférences de l'administrateur : un visuel, la fonction de la personne, son nom et prénom, un résumé de son parcours professionnel, puis des liens vers les réseaux sociaux pour en savoir plus.

Voir cette page en ligne

La page des auteurs de contenu ou l'équipe
La page des auteurs de contenu ou l'équipe

Compte client, suivi de commande et abonnement

Les pages de compte utilisateur

Pour suivre les commandes, gérer l'abonnement à la version digitale et télécharger les factures, le site internet dispose de pages privées avec un accès par identifiant et mot de passe utilisateur. Cet espace est composé des pages pour voir et suivre les commandes, modifier les informations utilisateur, modifier les informations d'accès au compte privé, modifier ou ajouter des adresses pour la livraison et la facturation des commandes.

En plus des pages standards est ajoutée une page "mes documents" qui offre la possibilité de proposer des documents à télécharger pour chaque utilisateur.

Espace client
Espace client

L'espace client en accès privé, permet la gestion des informations de compte client avec les commandes, les adresses, les informations d'accès, les documents et l'abonnement au magazine.

Les étapes de création

Le briefing de projet

Avant de démarrer la création d’un site Internet, l’une des étapes les plus importantes et le briefing de projet. En effet, lors du rendez-vous de briefing, le chef de projet va pouvoir échanger avec le client et noter ses attentes et les objectifs. Lors de l’entretien, le chef de projet va soumettre quelques questionnaires sur les orientations graphiques, sur les utilisateurs potentiels, sur les objectifs de l’entreprise, etc. Après avoir noté toutes les réponses, le projet pourra démarrer.

En savoir plus sur le briefing de projet

Briefing de projet
Briefing de projet

Le briefing de projet est un document qui défini les orientations globales du projet avant de lancer la production.

Organigramme de site
Organigramme de site

Un organigramme de site internet pour une vue d'ensemble des pages web.

Le plan du site

S'agissant d’un site d’information avec un faible niveau de hiérarchie, il n’était pas nécessaire de faire un plan très élaboré du site. Nous avons simplement réalisé un plan préparatoire qui nous a permis d’élaborer le projet. Ce type de plan comporte les modèles de pages à réaliser pour le site. Et pour chaque modèle de page tous les éléments qui la composent

Voir la création d'organigramme

Les maquettes

Avec les contraintes du responsive design, il est préférable de tout prévoir en amont, c'est justement l'objectif des maquettes. Celles-ci permettent de tester différentes approches de mises en page. Cette étape est cruciale pour la suite, car, une fois tous les éléments mis en place, il est plus simple ensuite de ne se préoccuper que du design.

Pour ce type de site, nous avons réalisé plusieurs propositions de maquettes par type de page. Et pour la page d'accueil des déclinaisons pour les versions responsives.

En savoir plus sur la création de maquette

Maquette de site web
Maquette de site web

Explorer des possibilités de mise en page afin de déterminer la meilleure configuration possible pour un site internet.

Interface graphique
Interface graphique

La conception d'interface graphique pour une expérience intuitive chez les utilisateurs.

La conception graphique

S’agissant d’un site d’information, il était impératif de concevoir une interface graphique simple et légère, voir discrète pour valoriser le contenu du site. Chaque page a donc été élaborée dans ce sens afin de faciliter la lecture, de simplifier la navigation et aussi de permettre la commande d’abonnement au magazine.

Nos graphistes ont proposé un design propre à l'univers de la presse magazine, s'inspirant de site d’information prestigieux. Reprenant les couleurs du magazine ainsi que celles du logo, l’interface graphique utilise en partie la charte graphique déjà élaborée pour le magazine Pack & Label Around.

Après avoir dessiné toutes les pages modèles dans Photoshop et décliné le graphisme pour mobile et tablette, la création graphique fut approuvée par le client, avec malgré tout quelques modifications mineures, notamment sur la disposition des espaces publicitaires.

En savoir plus sur la création graphique

Le développement HTML et CSS

Après avoir terminé la partie graphique, nous avons donc développé les modèles des pages web en HTML et CSS afin d’obtenir une version codée de la conception graphique.

L'utilisation du HTML5 facilite le développement des pages grâce aux nouvelles balises qui permettent de mieux structurer le code et de gagner en lisibilité. Le CSS3 avec les Média Queries facilite la déclinaison du site en version tablette et smartphone.

Ci-contre, la version tablette du site en responsive design.

Le développement dynamique

Après avoir terminé toutes les pages modèles du site, nous avons ajouté le codage PHP pour rendre le site dynamique et faciliter la mise à jour des pages à l'aide du CMS Olloweb.

Ci-contre une vidéo d'écran de la version responsive design sur smartphone.

La gestion du site

Après quelques heures de formation proposées par notre agence, le client a facilement pris le contrôle de son site Internet. Le CMS lui permet dorénavant d’ajouter, modifier ou supprimer du contenu. Il peut aussi gérer les comptes clients et les abonnements à la version digitale ainsi que les commandes d’abonnements au magazine.

La validation du projet

Avant de procéder à l'ouverture du site, Olloweb lance une vérification complète du site internet afin de garantir le codage. Le site d’information une fois validé est garanti pour une durée de deux ans. Cette garantie couvre ainsi les bugs éventuels et les mises à jour des navigateurs.

Les statistiques
Les statistiques

Suivre une action en image par l'intermédiaire de statistiques aussi riches que possibles.

Les statistiques et le référencement

Pour obtenir des statistiques de fréquentation du site, nous procédons à l'installation de module Google ou Piwik. Un plan de l'ensemble des pages web du site est rendu disponible en ligne et ajouté dynamiquement pour Google et les autres moteurs de recherche.

En savoir plus sur les statistiques

Galerie création d'un site internet pour un magazine dans la presse spécialisée

Conception graphique de la page d'accueil

Conception graphique de la page d'accueil

Graphisme de la page d'accueil en déclinaison tablette

Graphisme de la page d'accueil en déclinaison tablette

Graphisme de la page d'accueil en déclinaison smartphone

Graphisme de la page d'accueil en déclinaison smartphone

Graphisme de la page rubrique

Graphisme de la page rubrique

Conception et réalisation suivant l'offre de création de sites internet d'information

Création de sites d'information

Création de sites d'information

Olloweb CMS

Création de sites internet d'information

La création de votre site internet d'information composé de pages d'articles de presse, classées par rubriques, sous-rubriques et dossiers, des pages de présentation de votre activité, plus un formulaire utilisateur. L'ensemble, conçu, dessiné et développé sur mesure par Olloweb

L'offre de création de sites internet d'information
à partir de 3 980,00 HT - 4 776,00 € TTC OFFRE PRO

Détail de l'offre