Prototype pour site web

Prototype pour site web

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

Création de prototype pour site internet

Un étape clé pour la réussite de votre site internet

4.2/5 pour 80 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 !

Menus, boutons, textes, images, vidéos, logo… comment disposer tout cela sur une feuille blanche et surtout pour quel usage? C’est ce que nous allons aborder dans cet article.

Quel type de projet nécessite la création de prototypes ?

Comme pour un architecte qui va créer votre maison à l’aide de plans, il en va de même pour la création d’un site internet. En effet, vous pouvez installer votre site internet avec des solutions tout-en-un : CMS plus interface graphique déjà prêt à l’emploi. Cela peut convenir si vos besoins sont limités. Mais quand il s’agit de concevoir un site internet spécifique ou d’avoir les meilleures performances en termes de SEO, là il est préférable de penser votre site en amont à l’aide de prototypes. Des prototypes peuvent être réalisés pour la création de site sur mesure : site de présentation, site d’information, site de catalogue et e-commerce

Vous l’aurez compris, la création de prototypes est une étape clé, si vous souhaitez que votre site soit réussi et qu’il vous soit profitable.

Avant cela, il convient de faire un point sur l’étape précédente car pour disposer les éléments d’un site internet sur une page, il faut déjà déterminer lesquels. C’est justement ce que nous allons détailler maintenant.

Définir les besoins

e-commerce, site vitrine, site d’information…, chaque projet a des objectifs particuliers auxquels il faut réponde pour apporter la meilleure solution au client. Cela passe par de nombreux échanges avec tous les intervenants du projet, pour recueillir toutes les informations nécessaires afin d’en définir le périmètre.

À l’issue de cette première étape de définition de projet explicitée dans notre méthodologie, comme pour l’architecte avec les pièces d’une maison, il convient de créer un plan des pages du site internet.

Le plan d’un site internet

Le plan d’un site peut être réalisé très simplement, sous la forme d’une liste dans une application de traitement de texte ou dans l’application Note sur Mac. Dans ce cas, on parlera plutôt d’un plan préparatoire. Ce plan préparatoire peut être complété par une liste des éléments envisageables à l’intérieur de chacune des pages. 

Ensuite, si le projet est de plus grande envergure il faudra poser cela de façon plus formelle avec un plan sous la forme d’un organigramme. Ce plan pourra fournir des indications sur les liaisons entres les pages et offrir une vision d’ensemble du travail à réaliser.

Pour réaliser un plan, il vous faudra une application spécifique, celui-ci pourra être réalisé avec Indesign ou encore d’autres applications dédiées. Photoshop, n’est pas la meilleure application pour réaliser ce type de tâche, mais si vous ne souhaitez pas multiplier vos applications et que vous travaillez et maîtrisez Photoshop, cela peut-être un bon compromis pour effectuer cette tâche.

Voici un plan préparatoire réalisé dans l’application Note sur Mac.

La compatibilité de l’application Note sur Mac permet de travailler aussi bien sur la version bureau, tablette et téléphone. Cela peut-être un plus lors des rendez-vous ou en collaboration.

Voici un plan plus abouti réalisé avec Photoshop

Quelle application choisir pour créer des prototypes 

Comme pour la réalisation d’un plan, il existe de nombreuses applications, en ligne notamment pour créer des prototypes. Mais si vous avez déjà Photoshop, voici les avantages dont vous pourriez bénéficier. Photoshop va vous permettre de gagner du temps car vous le maîtrisez parfaitement. Le graphiste en charge de conception graphique n’aura aucun difficulté à reprendre le fichier pour le retravailler ensuite. Le résultat obtenu pourra facilement être exporté au format PDF pour le présenter au client. La pratique régulière de cette application vous permet de cumuler des pictogrammes, des couleurs, des polices de caractère, style, etc. qui pourront être facilement utilisés pour créer des prototypes. Attention toutefois, le prototype n’a pas pour vocation à présenter une version aboutie du projet mais de tester le positionnement des éléments au sein d’une page qui sera ensuite retravaillé par le graphiste.

Quelle est la bonne dimension pour créer un prototype 

Comme pour l’interface graphique, il s’agit de travailler en fonction des différentes tailles d’écrans utilisés par les internautes. Mais dans le cas des prototypes, il n’est pas nécessaire de réaliser des déclinaisons. Car celles-ci -ci seront directement créés lors de l’étape suivante. 1366 pixels de largeur semble la dimension la plus adaptée pour la création de prototypes car cela correspond à la taille d’un ordinateur portable, une des résolutions les plus utilisées. Pour en savoir plus sur cette partie consultez notre page sur la conception d’une interface graphique.

Une fois cela établi, il faudra créer un document dans votre application et attribuer des limites correspondant à la taille déterminée, puis poser chacun des éléments du futur site internet. Pour cela, il faudra reprendre les indications de votre plan préparatoire et placer en premier les éléments les plus importants : logo, menus de navigation, boutons, etc. Cela pour le haut de page, puis après le bas de page. Ensuite disposer les autres éléments : textes, images, pictogrammes sur le corps de page. 

Voici un exemple de prototype abouti :

Après avoir créé un premier prototype pour la page d’accueil, il s’agit maintenant de proposer une seconde version de cette même page. Pour cela, il faudra reprendre l’ensemble des éléments déjà disposés sur le premier prototype et d’imaginer une autre présentation peut-être plus appropriée pour le projet. Une fois les deux prototypes de la page d’accueil finalisés, il conviendra ensuite de les présenter au client pour échanger sur les avantages de chacun. Le meilleur prototype peut-être validé directement, mais parfois, il peut s’avérer pertinent de prendre des éléments d’un premier prototype et d’autres éléments d’un deuxième pour en réaliser un troisième qui conviendra mieux au projet.

Maintenant que le prototype de la page d’accueil est terminé, attachons-nous à réaliser les autres prototypes des pages intérieures. Il s’agit pour cela de reprendre le haut de page et le bas de page déjà validé pour ensuite les disposer dans de nouveaux prototypes et de compléter par les éléments nécessaires en fonction du type de modèles de page : rubrique, détail d’article, résultat de recherche, page de présentation, etc. Et cela en fonction du type de projet : site vitrine, site d’information, site e-commerce.

Une fois les prototypes réalisés, puis validés, le projet pourra être transmis au graphiste en charge de la conception graphique. Celui-ci sera à même d’ouvrir chaque prototype, à commencer par celui de la page d’accueil pour créer une interface graphique originale pour le futur site internet. Voir la conception d’interface graphique.

Auteur : L'équipe Olloweb

Commentaires(3)

Vous souhaitez pouvoir ajouter un commentaire à l'article Création de prototype pour site internet , ou faire profiter de votre expérience avec les internautes, ajoutez votre commentaire il sera mis en ligne après validation par notre équipe

Indiquer votre commentaire
Indiquer votre nom
Indiquer votre prénom
Indiquer votre adresse email (utilisateur@domaine.com)

*Champs obligatoire
Conformément à la loi informatique, aux fichiers et aux libertés n°78-17 du 6 janvier 1978, vous disposez d'un droit d'accès et de rectification relatif à toutes informations vous concernant sur simple demande à notre adresse.

Votre commentaire a bien été prise en compte, notre équipe vous envoi un mail de confirmation une fois mis en ligne.

Votre commentaire est en attente de modération. Voir votre commentaire

Derniers commentaires

AN
Audrey

Bonjour, vous avez mentionné la taille de la hauteur en pixel mais pas celle de la largeur du coup je ne sais pas comment remplir cette case. Merci

WA
Web

1920x1080 c'est les tailles de résolution standards.

OS
Olloweb

Bonjour, il s'agit bien de la dimension pour un écran de type bureau c'est bien cela. Bureau : 1920x1080 pixels. Mobile : 1366x768 pixels. Tablette : 768x1024 pixels. Téléphone : 360x640 pixels.