Portfolio-Website-Design
Die Essenz dieses Projekts besteht darin, ein Website-Design für mein Portfolio von Kunstwerken zu erstellen. Als Student des Multimedia Design and Development Programms am Humber College werde ich bald ein Praktikum absolvieren. Als Digitaldesigner dachte ich darüber nach, wie ich mich einem zukünftigen Arbeitgeber präsentieren möchte, und kam auf die Idee, dass ich am besten von mir erzählen kann, indem ich meine beruflichen Fähigkeiten einsetze und meine eigene einzigartige Portfolio-Website erstelle.
Projektziel
Folgende Aufgaben habe ich mir gestellt:
- Erstellen Sie ein Design, das meine Authentizität widerspiegelt
- Beeindrucken Sie den Benutzer, treffen Sie mit meinem Design einen Nerv
- Verkaufe meine Idee und Dienstleistung durch emotionales Design
- Erzielen Sie die Einzigartigkeit der visuellen Komponenten, um diese Website von den anderen abzuheben
- Arbeiten Sie an der richtigen UX
- Wählen Sie den richtigen Stil mit dem Moodboard
Das Hauptwerkzeug bei der Arbeit eines jeden Webdesigners ist eine Prototyping-Umgebung. Es gibt zwei Haupttools – Figma und Adobe XD. Da ich Erfahrung mit jeder dieser Anwendungen hatte, fand ich es aufgrund seiner größeren Funktionalität und Bequemlichkeit relevanter, Figma zu verwenden.
Kreativer Prozess
Stufe 1 – Assoziationen
Ganz zu Beginn der Projektarbeit stellte ich mir als erste Fragen: „Wie soll Ihre Selbstdarstellung aussehen? Welche Gefühle wollen Sie damit hervorrufen?“. Vor diesem Hintergrund habe ich beschlossen, die wichtigsten potenziellen Assoziationen aufzuschreiben, die ich mit meiner Marke in den Gefühlen des Benutzers verankern möchte. Hier sind sie:
- Prämie
- Multilateral (Kombination von Child Core und Old Money-Ästhetik)
- Aufrichtig
- Nostalgisch
- Unerreichbar, aber offen
- Gehoben
- Manchmal verspielt
- Inspirierend
◼️ Zusammenfassend habe ich mir die Hauptaufgabe gestellt, diese beiden Dualitäten (Child Core und Old Money-Ästhetik) zu kombinieren und zu versuchen, sie füreinander arbeiten zu lassen.
Stufe 2 – Typografie
Um den vorherigen Schritt durchzuführen, habe ich begonnen, an der Wahl der Typografie zu arbeiten. Dazu habe ich in meiner dieses Jahr gesammelten Schriftbibliothek sowie in diversen Beständen nach einer geeigneten Schrift gesucht. Um ein passendes Schriftpaar zu erstellen, habe ich diese beiden Schriftarten ausgewählt :
◼️ Ich habe mich entschieden, Grotesk statt Antiqua zu wählen, da ich Sans-Serifs heutzutage viel relevanter finde, insbesondere für dieses Projekt.
Stufe 3 – Farbpalette
Hier war mir alles klar. Da mein Design meine anderen digitalen Design-Kunstwerke enthalten wird, bedeutet dies, dass der Hintergrund auf jeden Fall eine möglichst neutrale Farbe haben sollte, in meinem Fall weiß . Als Akzentfarbe habe ich Orange gewählt , da diese Farbe jetzt sehr relevant ist und gut zu Schwarz-Weiß-Fotografien passt, aber vor allem mit dieser Kombination ein nostalgisches Gefühl und den Wunsch hervorruft, in diese Atmosphäre einzutauchen.
◼️ Hauptfarben – weiß und orange
Stufe 4 – Inspiration
Dies sind einige der visuellen Repräsentanten, die meine zukünftige Idee inspiriert haben.
Stufe 5 – Drahtmodell
Ursprünglich war mein Projekt als Single-Page-Website geplant, daher wurde das ursprüngliche Wireframe für einen solchen Prototyp mit hoher Föderalität erstellt. Während der Arbeit am endgültigen Design wurde mir klar, dass ich jedem Teil des Portfolios mehr Aufmerksamkeit schenken und das Projekt als Ganzes erweitern wollte, sodass das endgültige Projekt mehrseitig (≈ 8 bis 10 Seiten) präsentiert wird ) Website design.
Stufe 6 – Last-Minute-Trendwatching, Gedanken und Ideen
Nachdem ich die oben genannten Punkte analysiert hatte, beschloss ich, noch einmal die verschiedenen Websites für Designer zu durchsuchen, um darüber nachzudenken, was mein Design noch einzigartiger machen könnte, und das kam dabei heraus:
- Fügen Sie meiner Website Bewegung (.gifs, Videos) hinzu, um die Aufmerksamkeit des Benutzers zu erregen
- Minimalismus ist fast immer besser als Maximalismus im Design (mit Ausnahme der spezifischen Trends)
- Versuchen Sie, ein benutzerdefiniertes/ungewöhnliches Raster innerhalb des Containers zu verwenden
- Versuchen Sie, mit der Typografie zu spielen und sie kleiner als gewöhnlich zu machen. Es erregt Aufmerksamkeit (kein Wunder, dass Luxusmarken dies oft auf ihren Websites verwenden)
- Erstellen Sie eine kreative Kopf- und Fußzeile (z. B. Bild hinzufügen)
- Verwenden Sie ungewöhnliche Pakete mit Illustrationen, Elementen, Bildern, Symbolen usw
- Fragen Sie sich während des gesamten Prozesses, ob mein Design an „Seele“ verliert, und überdenken Sie es gegebenenfalls noch einmal
Letztes Schaufenster
Hier werde ich Screenshots zur Verfügung stellen, die die geleistete Arbeit zeigen, aber Sie können jederzeit über diesen LINK auf mein Portfolio-Website-Design zugreifen .
*Das Laden von GIF-Bildern während der Wiedergabe der Prototypdatei kann auf einigen Bildschirmen etwas Zeit in Anspruch nehmen, also warten Sie bitte etwas, bis das Video beginnt.
Startseite
Um
Fusszeile
Kunstwerke — Haupt
Artwork-Seiten
Nochmals, wenn Sie mein Projekt im Detail sehen möchten, einschließlich aller Bewegungen und Schriftrollen, können Sie gerne den oben angegebenen Link verwenden!
*Um ein Projekt in Figma zu starten, klicken Sie einfach auf die Play-Schaltfläche oben rechts.
Reflexion
Dieses Projekt ist für mich zu einer wahren Reise nach innen geworden. Da mir dieses Website-Design daher gewidmet ist, musste ich mir genau überlegen, welche Bedeutungen und Gefühle ich dem Betrachter vermitteln möchte.
Ich habe das Gefühl, dass ich die während der Ideenfindung gestellten Aufgaben bewältigt habe. Ich bin zufrieden mit der visuellen Komponente und der Tatsache, dass ich mich entschieden habe, das Projekt zu erweitern, indem ich viel mehr neue Seiten hinzufüge, als ich geplant hatte. Meiner Meinung nach wird dies den Menschen viel detaillierter über mich und meine Kunstwerke erzählen können.
Es war eine unglaubliche Erfahrung!

![Was ist überhaupt eine verknüpfte Liste? [Teil 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)



































