www.humanside.info Brief pour le design du site Anders Hjorth, 2003 Human SideTM Europe www.humanside.info Brief pour le design du site Anders Hjorth, 2003 ___________________________________________

Brief pour le design du site Cibles Style & look Contraintes Arborescence du site Modèles de page La maquette fonctionnelle Livrables design

Les cibles Human Side est prestataire pour des entreprises, donc situé dans le B to B – prestations de services intellectuelles. Le marché principal est celui des PMEs avec > de 50 employés DRH ou Manager opérationnel, BAC+5 / MBA, Age 35-55, mature, connecté à l’Internet au bureau. Consultant indépendant, mature 40-60 ans, curieux, homme de lettres. Opérationnels des Ressources Humaines Journalistes Chercheurs 07/12/2018 www.humanside.info Anders Hjorth

Style et look Sobre, neutre, sérieux Agréable et abordable Se différencier de Human Side International « Humain » : nous sommes dans le domaine des Hommes avec leurs traits de personnalités, leurs visages, leurs profils. 07/12/2018 www.humanside.info Anders Hjorth

Contraintes Compatibilité avec l’existant Pas de frames Application « help » Application « test » Logo « H » Pas de frames Utilisation de 6 modèles de page figés et intégration de composants variables dans ces modèles Faciliter la lecture sur écran ainsi que l’impression 07/12/2018 www.humanside.info Anders Hjorth

Arborescence des pages Modèles de page  Page d’accueil Qui sommes nous ? Contact    Lecture Solutions   Article Offre Article Offre Article Offre   07/12/2018 www.humanside.info Anders Hjorth

Navigation fonctionnelle Structure de base Identification Zone principale Navigation fonctionnelle Affirmations Ressources / relances Footer Elements de base : Zone d’identification (barre horizontale en haut) Zone principale : le centre de l’écran Barre de navigation fonctionnelle – verticale, gauche en haut Zone ressources / relances – en dessous de la navigation fonctionnelle Colonne d’affirmations – à droite de la zone principale Footer – informations pratiques, copyright Chaque modèle de page variera légèrement de cette trame en fonction des contenus et liens transversaux 07/12/2018 www.humanside.info Anders Hjorth

Modèles de page – 1 & 2 Modèle « Accueil » Image qui illustré la problématique « L’homme dans l’entreprise » Explication et mise en évidence Présentation de la methodologie Human Side Présentation de l’offre commerciale (marge gauche : lecture) (marge droite : affirmations/citations) Modèle libre (Qui sommes nous, contact, nouvelles pages) Reprend la navigation, la zone centrale et la zone « affirmations » 07/12/2018 www.humanside.info Anders Hjorth

Modèles de page – 3 & 4 Modèle « Lecture » – sommaire à concevoir Une page « sommaire » de la section des articles qui doit permettre d’entrer de manière facile dans les articles Doit permettre de comprendre et apprécier le profondeur de cette section (10 articles aujourd’hui, peut-être 50 à terme) Doit donner envie de lire et faciliter le passage d’un article à un autre (3 lignes d’introduction existent pour chaque article) Doit discrètement inviter à une consultation de la section « offre commerciale » Modèle « Solutions » – sommaire à concevoir Une page « sommaire » de la section présentant l’offre commerciale qui comporte maximum 10 pages à tout moment Doit présenter l’offre commerciale dans son sensemble et inviter à la prise de contact Doit faciliter l’approfondissement dans les offres individuelles Doit être attirante et imprimable 07/12/2018 www.humanside.info Anders Hjorth

Modèles de page – 5 & 6 Modèle « Article » Modèle « Offre » Les articles se présentent sur une seule page en longeur Une introduction permet de situer l’article dans son contexte historique et conceptuel (3 lignes) Un sous-sommaire ou une ‘fenêtre pop-up’ permet de passer aux autres articles Une invitation de consultation permet d’aller au sommaire des « Solutions » (voir article « Fumisterie » dans la maquette fonctionnelle plus loin) Modèle « Offre » Présentation de la problématique visé par l’offre individuelle Description de l’offre Le sommaire des étapes dans l’offre Ca vous intéresse ? Affirmations dans la colonne de droite Encadre téléchargement (voir article « Fumisterie » dans la maquette fonctionnelle plus loin) 07/12/2018 www.humanside.info Anders Hjorth

Contenus 07/12/2018 www.humanside.info Anders Hjorth

La maquette fonctionnelle Une maquette fonctionnelle se trouve disponible à l’adresse suivante: http://geniebuilder.com/users/humanside/ Cette maquette a été créé en se basant sur un design quelconque et ce sont les emplacements et types de contenus qui comptes. Il faut faire une complète abstraction du design. La barre de navigation fonctionnelle est complete et les trois pages suivantes représentent du vrai contenu : Page d’accueil Article « Fumisterie » Offre « Manager le changement » La maquette fonctionnelle montre comment sont liées les pages entre elles et quels sont les principes de présentation et de navigation 07/12/2018 www.humanside.info Anders Hjorth

Livrables design Choix de couleurs, polices Elements de mise en page Elements graphiques Les 6 modèles de page en html Code source du graphisme 07/12/2018 www.humanside.info Anders Hjorth