Dans une série d’articles nous allons ensemble réaliser un site internet portfolio pour photographe. Ce site répondra aux exigences suivantes:
- Avoir une interface simple et épurée
- Proposer 2 thèmes : un clair et un foncé
- Mettre en avant des photos qui seront organisées en sous galeries
- Présenter des articles, des trucs et astuces
- Posséder une interface d’administration protégée par mot de passe permettant de gérer tout le contenu du site (Photos, galeries, articles, pages, etc…)
Stratégie et cadrage
Quoi et pour qui ? Ce site servira uniquement à présenter quelques de mes photos ainsi que quelques trucs et astuces que j’ai plu glaner ici et là.
Sa monétisation n’est pas une question actuellement.
Les fonctionnalités nécessaires au site, en plus de celle énumérées en début d’article, sont :
- Utilisation de https://www.lightgalleryjs.com/ pour la galerie d’image
- Une page d’accueil avec une grande photo en arrière plan, utilisation d’une animation probablement, ainsi que les dernières photos ajoutées (ou les plus populaires) et les derniers articles
- Des pages génériques (A propos, GPDR, etc…)
- Une page de contact
Architecture (UX Design)
L’UX Design c’est l’expérience utilisateur. Notre site sera relativement simple, donc pas grand chose à penser ici. Les photos seront atteignables en 3 cliques maximum.
La maquette (UI Design)
Le Wireframing c’est le fait de concevoir des maquettes fonctionnelles grossières. C’est dessiner le squelette de chaque page, la structure, la hiérarchisation du contenu, le placements des éléments, etc…
Je ne suis pas designer dans l’âme. Aussi j’ai un peu triché en m’aidant de Stitch de Google. Stitch permet de concevoir des maquettes à l’aide de l’IA. Avec quelques prompt bien optimisé, je suis arrivé à un résultat qui me satisfait pleinement. Ensuite je les exporte dans Figma qu’on ne présente plus pour apporter les dernières modifications.
Plusieurs étapes d’e conception’affinage peuvent suivre dans la conception d’un Wireframe jusqu’à la version finale, prête à être exportée pour le développement. Ici je me satisfait pleinement de ma maquette, aussi je vais en rester là.
Préparation au développement
C’est la passerelle entre le design et le code. Cette étape consiste à organiser nos ressources pour un développement efficace.
Les bases de données
L’application online https://dbdiagram.io/ nous permet de dessiner la structure de notre futur base de données. Encore une fois ici pour notre site, ce n’est pas très complexe, nous aurons uniquement 4 tables. La table user (déjà définie par laravel), la table galleries (qui contiendra toutes les sous galeries), la table photos et la table articles. Suivant la taille du projet, cela peut cependant vite devenir une vrai usine à gaz.
La préparation des assets
Ici on va préparer tous les ressources nécessaires : logo (idéalement en svg), images (optimisées pour le web), icônes (aussi svg), etc…
Le découpage de la maquette
C’est la dernière étape avant de passer au code de notre site. Il va falloir ici identifier tous les éléments réutilisables. Nous aurons le header, le footer, les cards et les thumbs des images. Chaque élément sera enregistré dans des fichiers séparés afin d’en faire des composants pour Laravel (je reviendrai dessus plus tard en détail).
Une fois cette dernière étape terminée, la conception est officiellement finie. Nous avons un plan clair, des maquettes validées et tous les éléments nécessaires. Alors…
… c’est parti !
- installer Laravel 12 et les templates Blade (partie 1)
- mettre en place des routes pour notre projet (partie 2)
- créer des tables avec Eloquent et les remplir avec des données tests (seeders) (partie 3)
- communiquer entre la base de données et les vues avec les Controller (partie 4)
- installer une interface d’administration avec Filament (partie 5)