Persönliches Website-Design
Meine Kreativität, mein Code, mein Projekt - Design auf Webflow
Jahr
2024
Dienstleistung
UX Forschung, UX/UI, Webflow
Kunde
Olga Ilina
Als UX/UI Designerin bin ich immer bestrebt, benutzerfreundliche, ästhetisch ansprechende und durchdachte User Interfaces zu entwerfen. Irgendwann wollte ich von einem Konzept zu einer vollwertigen Website übergehen, die meinen Stil und meine Herangehensweise an Design widerspiegelt.
Zu Beginn meiner Arbeit analysierte ich die Websites anderer UX/UI-Designer, um zu verstehen, welche Abschnitte auf ihren Seiten am häufigsten vorkommen und wie sie ihre Informationen strukturieren. Ich untersuchte ihre Ansätze für die Navigation, die Projektpräsentation und das Design von Fallstudien.
Dann wandte ich mich den stilistischen Lösungen zu: Ich analysierte Farbschemata, Typografie und Designtrends. Dies half mir, die Richtung zu bestimmen, in die ich meine eigene Website lenken wollte, damit sie nicht nur stilvoll aussieht, sondern auch benutzerfreundlich und informativ ist.
Dann wandte ich mich den stilistischen Lösungen zu: Ich analysierte Farbschemata, Typografie und Designtrends. Dies half mir, die Richtung zu bestimmen, in die ich meine eigene Website lenken wollte, damit sie nicht nur stilvoll aussieht, sondern auch benutzerfreundlich und informativ ist.
• Fallstudie
Die Erstellung einer persönlichen Website ist nicht nur eine Möglichkeit, mein Portfolio zu präsentieren, sondern auch eine Gelegenheit, meine Herangehensweise an UX/UI-Design zu zeigen. Ich wollte nicht nur meine Arbeiten an einem Ort sammeln, sondern auch eine benutzerfreundliche, logische und visuell ansprechende Plattform schaffen, die meine Fähigkeiten und meinen Stil widerspiegelt.
Als UX/UI Designerin helfen mir meine HTML- und CSS-Kenntnisse zu verstehen, wie Webseiten strukturiert sind und wie meine Designentscheidungen in Code umgesetzt werden. So kann ich Layouts erstellen, die die technischen Einschränkungen und Möglichkeiten von Browsern berücksichtigen, und effektiver mit Entwicklern kommunizieren.Für dieses Projekt habe ich mich jedoch für Webflow entschieden, weil es mir erlaubt, mit einer visuellen Schnittstelle zu arbeiten und gleichzeitig die volle Kontrolle über Layout und Styling zu behalten.
Meine HTML- und CSS-Kenntnisse machten es mir leicht, die Struktur der Website anzupassen, mit Flexboxen und Grids zu arbeiten und benutzerdefinierte Stile anzuwenden, um die gewünschten Ergebnisse zu erzielen. Webflow war ein großartiges Tool, das visuelles Design mit technischer Flexibilität verband, ohne dass ich mich tief in die Programmierung einarbeiten musste.
Meine HTML- und CSS-Kenntnisse machten es mir leicht, die Struktur der Website anzupassen, mit Flexboxen und Grids zu arbeiten und benutzerdefinierte Stile anzuwenden, um die gewünschten Ergebnisse zu erzielen. Webflow war ein großartiges Tool, das visuelles Design mit technischer Flexibilität verband, ohne dass ich mich tief in die Programmierung einarbeiten musste.
01
Forschung und Analyse
Vor der Gestaltung der Website habe ich eine Wettbewerbsanalyse durchgeführt. Es wurden viele Wettbewerber ausgewählt, darunter die Websites von UX/UI-Designern, Grafikdesignern usw.
02
Wireframing und Prototyping
Während der Prototyping-Phase erstellte ich eine Blockstruktur, um zu visualisieren, wie die Designoberfläche aussehen und wo die verschiedenen Elemente platziert werden würden. Ich begann mit einfachen Diagrammen, um die wichtigsten Bereiche und Komponenten wie Schaltflächen, Menüs und Eingabefelder zu definieren. Dann ging ich zu einem detaillierteren Prototyp über und fügte den Seiten Text, Schriftarten und grundlegende Interaktionen hinzu. Auf diese Weise konnte ich sehen, wie die Benutzer mit der Website interagieren würden. So konnte ich alle notwendigen Anpassungen vornehmen, bevor die Entwicklungsphase begann.
03
UI Design
Als ich die Website für mich selbst gestaltete, versuchte ich, grafische Elemente zu verwenden, um die Benutzeroberfläche ansprechender zu gestalten. Ich habe verschiedene Farben und sorgfältig ausgewählte Bilder verwendet, um dem Design ein abgeschlossenes und harmonisches Aussehen zu verleihen. Dies war nicht nur ästhetisch ansprechend, sondern trug auch zu einer angenehmen und intuitiven Benutzerinteraktion bei, was die Wahrnehmung und Benutzerfreundlichkeit der Website verbesserte.
• Schlussfolgerung
Die Entwicklung meiner eigenen Website war eine wertvolle Erfahrung, bei der ich alle Phasen des UX/UI-Designs anwenden konnte - von der Recherche über das Prototyping bis hin zur endgültigen Implementierung. Das Projekt hat mir geholfen, ein tieferes Verständnis für die Struktur einer Website zu entwickeln, meine Webflow-Fähigkeiten zu verbessern und bis ins kleinste Detail an einer benutzerfreundlichen und ästhetisch ansprechenden Oberfläche zu arbeiten.
[1]
Der Prozess
Ich wollte, dass die Website nicht nur ein Schaufenster für meine Arbeit ist, sondern eine logisch strukturierte, intuitive und visuell ausdrucksstarke Plattform, die meinen Stil und meinen professionellen Ansatz widerspiegelt. Die Farbe Orange, das adaptive Raster und die fließenden Animationen trugen dazu bei, ein dynamisches, modernes und einprägsames Design zu schaffen.
[2]
HTML/CSS
HTML-Kenntnisse halfen mir bei der Organisation der Inhalte, CSS-Kenntnisse bei der Gestaltung, Anpassung und Animation. So konnte ich effektiv mit Webflow arbeiten, seine leistungsstarken Tools nutzen und punktuelle Änderungen am Code vornehmen. Das Ergebnis: eine technisch kompetente, visuell ansprechende Website mit einer durchdachten Struktur und einem anpassungsfähigen Layout.