Conception de site Web de portefeuille

L'essence de ce projet est de créer une conception de site Web pour mon portefeuille d'œuvres d'art. En tant qu'étudiante du programme de conception et développement multimédia au Humber College, je vais bientôt faire un stage. En tant que designer numérique et en réfléchissant à la façon dont j'aimerais me présenter à un futur employeur, j'en suis venu à l'idée que la meilleure façon de parler de moi est d'utiliser mes compétences professionnelles et de créer mon propre site Web de portefeuille unique.

Objectif du projet

Je me suis fixé les tâches suivantes :

• Créer un design qui reflète mon authenticité
• Impressionnez l'utilisateur, touchez un point sensible avec mon design
• Vendre mon idée et mon service grâce au design émotionnel
• Atteindre l'unicité des composants visuels pour que ce site Web se démarque des autres
• Travailler sur la bonne UX
• Choisissez le bon style à l'aide du tableau d'humeur

L'outil principal dans le travail de toute conception Web est un environnement de prototypage. Il existe 2 outils principaux - Figma et Adobe XD. Ayant de l'expérience avec chacune de ces applications, j'ai trouvé plus pertinent d'utiliser Figma en raison de sa plus grande fonctionnalité et commodité.

Processus créatif

Étape 1 — Associations

Au tout début du travail sur le projet, les premières questions que je me suis posées ont été « A quoi voulez-vous que votre auto-présentation ressemble ? Quels sentiments voulez-vous évoquer avec elle ? ». Dans cet esprit, j'ai décidé d'écrire les principales associations potentielles que je souhaite enraciner avec ma marque dans les sentiments de l'utilisateur. Les voici:

• Prime
• Multilatéral (combinant les esthétiques Child Core et Old Money)
• Sincères
• Nostalgique
• Inaccessible mais ouvert
• Haut de gamme
• Parfois ludique
• Inspirant

◼️ En résumant tout ce qui précède, je me suis donné pour tâche principale de combiner ces deux dualités (esthétique Child Core et Old Money), en essayant de les faire fonctionner l'une pour l'autre.

Étape 2 — Typographie

Afin de mener à bien l'étape précédente, j'ai commencé à travailler sur le choix de la typographie. Pour ce faire, j'ai recherché une police adaptée dans ma bibliothèque de polices collectée cette année, ainsi que dans divers stocks. Pour créer une paire de polices appropriée, j'ai choisi ces deux polices :

◼️ J'ai décidé de choisir le grotesque plutôt que l'antiqua car je trouve les sans-empattements beaucoup plus pertinents de nos jours, surtout pour la matière de ce projet.

Étape 3— Palette de couleurs

Tout était clair pour moi ici. Étant donné que ma conception contiendra mes autres œuvres d'art de conception numérique, cela signifie que l'arrière-plan doit certainement avoir la couleur la plus neutre possible, dans mon cas le blanc . Quant à la couleur d'accent, j'ai choisi l'orange , car cette couleur est très actuelle maintenant et se marie bien avec les photographies en noir et blanc, mais surtout, avec cette combinaison, elle évoque un sentiment nostalgique et une envie de plonger dans cette atmosphère.

◼️ Couleurs principales — blanc et orange

Étape 4— Inspiration

Ce sont quelques-uns des représentants visuels qui ont inspiré ma future idéation.

Étape 5— Filaire

Initialement, mon projet était prévu pour être un site Web d'une seule page, donc le Wireframe original a été conçu pour un prototype de fédalité aussi élevée. En travaillant sur la conception finale, j'ai réalisé que je voulais accorder plus d'attention à chaque partie du portfolio et élargir le projet dans son ensemble, ce qui signifie que le projet final sera présenté sous forme de plusieurs pages (≈ 8 à 10 pages ) conception de sites Web.

Étape 6 — Veille des tendances, réflexions et idées de dernière minute

Après avoir analysé les points ci-dessus, j'ai décidé de parcourir à nouveau les différents sites Web de designers, pour réfléchir à ce qui pourrait rendre mon design encore plus unique, et voici ce que j'ai trouvé :

• Ajouter du mouvement à mon site Web (.gifs, vidéos) pour attirer l'attention de l'utilisateur
• Le minimalisme est presque toujours meilleur que le maximalisme dans le design (à l'exception des tendances spécifiques)
• Essayez d'utiliser une grille personnalisée/inhabituelle à l'intérieur du conteneur
• Essayez de jouer avec la typographie et de la rendre plus petite que d'habitude. Il attire l'attention (pas étonnant que les marques de luxe l'utilisent souvent sur leurs sites Web)
• Créer un en-tête et un pied de page de création (par exemple, ajouter une image)
• Utilisez des packs inhabituels d'illustrations, d'éléments, d'images, d'icônes, etc.
• Tout au long du processus, me demander si mon design perd « son âme » et, si oui, le reconsidérer

Vitrine finale

Ici, je vais fournir des captures d'écran montrant le travail effectué, mais vous pouvez toujours accéder à mon Portfolio Website Design en utilisant ce LIEN .
* Le chargement des images GIF pendant la lecture du fichier prototype peut prendre un peu de temps sur certains écrans, veuillez donc patienter un peu et la vidéo commencera.

Page d'accueil

À propos de

Bas de page

Oeuvres — Principal

Pages d'œuvres d'art

Encore une fois, si vous souhaitez voir mon projet en détail, y compris tous les mouvements et les parchemins, n'hésitez pas à utiliser un lien fourni ci-dessus !
*Pour lancer un projet dans Figma, cliquez simplement sur le bouton de lecture en haut à droite.

Réflexion

Ce projet est devenu pour moi un véritable voyage vers l'intérieur. Puisque cette conception de site Web m'est dédiée, j'ai donc dû réfléchir attentivement aux significations et aux sentiments que je voulais transmettre au spectateur.
J'ai l'impression d'avoir fait face aux tâches définies lors de l'idéation. Je suis satisfait de la composante visuelle et du fait que j'ai décidé d'étendre le projet en ajoutant beaucoup plus de nouvelles pages que prévu. À mon avis, cela permettra de parler de moi et de mes œuvres d'une manière beaucoup plus détaillée.

Ce fut une expérience incroyable!