Création de prototype pour site internet

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.

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 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

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.

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 :