Mon premier projet de portfolio
Application Magazine d’architecture
Design d’application
Projet réalisé dans le contexte scolaire pour le cours de design interactif.
À propos du projet
Ce projet avait pour but la création d’une application de type magazine à thématique libre, pour laquelle il fallait effectuer une curation de contenu afin de partager des informations pertinentes et bien organisées, facilitant la compréhension des utilisateurs et nourrissant leur intérêt pour le sujet.
Le thème sélectionné pour le design a été l’architecture, le magazine ciblant ainsi les passionnés d’architecture et de design architectural souhaitant élargir leur connaissances sur le domaine et rester à jour sur les tendances.
Le design épuré offre une expérience fluide et un accès simplifié aux informations, tout en captivant l’attention de l’utilisateur et en le maintenant sur l’application grâce aux divers visuels (images, vidéos, matériaux et textures) qui complètent les contenus écrits.
Auteurs du projet
Le projet étant individuel, Amyeliya Sulytska est la seule contributrice et la créatrice du design en entier.
Sources des médias utilisés dans le projet
Sources de contenus utilisés dans le projet
Processus créatif
En 6 étapes
Étape 1 – Recherche et planification de contenus
La première étape est la recherche de contenus et la création d’un plan de contenus. Une recherche a été effectuée dans le but de déterminer, dans un premier temps, la thématique, le titre et le slogan du magazine, puis de sélectionner cinq articles sur l’architecture.
Étape 2 – Recherche de comparables
La deuxième étape est la recherche de comparables. Une recherche a été effectuée sur des sites d’inspiration comme Pinterest, Behance et Dribble afin de trouver des idées pour initier le projet.
*Contenus utilisés uniquement à des fins d’inspiration. Les marques commerciales et les droits d’auteur sont la propriété de leurs propriétaires respectifs.
Étape 3 – Moodboard
La troisième étape est la création d’un moodboard afin de définir et visualiser le style et la direction artistique du futur design, puis de s’assurer qu’il correspondra à la thématique et au public cible.
*Contenus utilisés uniquement à des fins d’inspiration. Les marques commerciales et les droits d’auteur sont la propriété de leurs propriétaires respectifs.
Étape 4 – Wireframes
La quatrième étape est la création de wireframes. Elle a pour but de s’assurer que tous les contenus nécessaires seront inclus dans le design et de définir leur emplacement approximatif. Dans ce cas, deux wireframes ont été réalisés, un low-fi pour définir les contenus de chaque page et un hi-fi pour préciser leur emplacement.
Une démarche de création du logo a aussi été effectuée à la fin de cette étape.
Étape 5 – Recherche de médias
La cinquième étape consiste en la recherche de médias (images et vidéos) en fonction des contenus définis dans les wireframes et dans le but d’accélérer la prochaine étape. Cette recherche a été effectuée sur des sites d’images libres de droits tels que Freepik, Unsplash et Pixabay, afin de respecter les droits d’auteur dans le projet.
Étape 6 – Maquettes
La sixième et dernière étape est la création des maquettes, c’est-à-dire le design lui-même. C’est l’étape la plus longue et celle où le plus de défis ont été rencontrés. Ces défis concernaient le positionnement des contenus dans les articles, compte tenu de la grande quantité de texte à intégrer, tout en maintenant un design dynamique pour capter l’attention de l’utilisateur.
Produit final
Crédits
OpenAI. « Interactions avec ChatGPT pour la correction d’orthographe, de ponctuation et de syntaxe. » 2025, https://openai.com/chatgpt.
OpenAI. « Interactions avec ChatGPT pour la reformulation de textes. » 2025, https://openai.com/chatgpt.
Donato, Alexandre. « Fiche de projet d’un portfolio. » Agence TIM, 20 février 2024, https://adonato.dectim.ca/agencetim/fiches-de-projet-dun-portfolio/.
Inspiration: Exemples de portfolios professionnels
Inspiration: Dectim Portfolios des étudiants
Mockup bannière et mise en avant: designwarrior. « Mockup d’un écran d’ordinateur avec une présentation de site web. » Freepik, https://www.freepik.com/free-psd/desktop-screen-with-website-presentation-mockup-isolated_23126508.htm#fromView=search&page=1&position=3&uuid=c27287a4-19f6-42e1-bf8a-17d4a35c8d19&query=Website+Mockup
Mockup: designwarrior. « Mockup d’un écran d’ordinateur avec une présentation de site web. » Freepik, https://www.freepik.com/free-psd/desktop-screen-with-website-presentation-mockup-isolated_23126541.htm#fromView=search&page=1&position=17&uuid=ef5d9b6f-d511-41c7-b56f-a512c3ed9334&query=Mockup+web
Mockup: rawpixel.com. « Set de mockups d’appareils digitaux. » Freepik, https://www.freepik.com/free-vector/digital-device-mockup-set_4122518.htm#fromView=search&page=1&position=12&uuid=7ebc2011-4cd4-46c7-807d-b851c8fa2488&query=mokup+pc
Mockup: designwarrior. « Mockup d’un écran d’ordinateur avec une présentation de site web. » Freepik, https://www.freepik.com/free-psd/desktop-screen-with-website-presentation-mockup-isolated_23126576.htm#fromView=author&page=1&position=12&uuid=9de3ca81-3a5b-4cdc-9562-d4b4962cf7fb
TRAVAIL ÉTUDIANT
Projet étudiant fictif réalisé en techniques d’Intégration multimédia du Cégep Édouard-Montpetit, sans but commercial. Les marques commerciales et les droits d’auteur sont la propriété de leurs propriétaires respectifs.