Entwerfen Sie eine innovative Portfolio-Site mit alternativer Benutzeroberfläche/UX

() translation by (you can also view the original English article)

Was ist die wichtigste Aufgabe Ihrer Portfolio-Site? Auffallen! Heute wird uns Paul J Noble durch die Erstellung seiner eigenen, einzigartig gestalteten Portfolio-Site führen. Er zeigt uns Tipps und Tricks in Adobe Photoshop sowie einige clevere Ansätze, um sich von anderen Portfolio-Sites abzuheben.

Erstellen einer unvergesslichen Portfolio-Site

Stellen Sie sich vor, Ihre Portfolio-Site ist Ihr Online-Sprecher für potenzielle Kunden. Wenn es richtig gemacht wird, sollte es den Leuten sagen, was Sie tun, Ihre beste Arbeit zeigen und ihnen die Möglichkeit geben, mit Ihnen in Kontakt zu treten. Das ist alles ziemlich offensichtlich - was ist also der Unterschied zwischen einer gewöhnlichen Portfolio-Site und einer wirklich bemerkenswerten?

Der Schlüssel zu einer effektiven Portfolio-Site besteht nicht nur darin, großartige Projekte zu haben – sie hinterlässt einen bleibenden Eindruck bei den Besuchern. Sicher, als Grafikdesigner kann dies bedeuten, dass Sie unglaubliche Illustrationen haben - aber für Webdesigner und Entwickler bedeutet dies oft, dass Sie die Grenzen von UI/UX und Codierung verschieben müssen, um unsere Stärken zu zeigen.

In diesem Tutorial zeigt uns Paul J. Noble, wie er auf seiner eigenen Website einige einfache, aber bemerkenswert innovative Ansätze für die UI/UX verwendet hat, um eine Portfolio-Site zu erstellen, die die Erwartungen des Benutzers durch Interaktivität und subtile Lichteffekte erweitert.

Tauchen wir ein!

Schritt 1 Die Canvas

Erstellen Sie in Photoshop ein neues Dokument mit einer Größe von 1400 x 900. Die endgültige, in HTML gerenderte Site wird „flüssige“ (d. h. skalierbare) Elemente enthalten, daher müssen wir bedenken, dass das endgültige Design keine feste Größe hat.

Schritt 2 Legen Sie das Fundament

Das Erstellen eines soliden Hintergrunds ist ein einfacher Weg, um mit den Dingen zu beginnen. Für dieses Design verwenden wir eine Grundfarbe das ist dunkel genug, um Vordergrundbilder hervorzuheben und gleichzeitig reines Schwarz auszugleichen, das in den Foliobildern erscheinen kann. Wir werden auch etwas Blau verwenden, um eine „kühle“ dunkle Farbe zu erzeugen, die sich in die Elemente der Benutzeroberfläche integriert.

Wählen Sie Ebene > Neue Füllebene > Volltonfarbe und weisen Sie die Farbe #252a3b zu.

Schritt 3 Verlegen der Richtlinien

Da wir ein skalierbares Layout verwenden, müssen wir die minimale horizontale Breite definieren. Bei den meisten kommerziellen Websites sind dies etwa 1000 Pixel, um Benutzern mit Bildschirmen mit einer Auflösung von 1024 x 768 gerecht zu werden. Für diese Seite streben wir jedoch 1100 Pixel als Mindestbreite an.

Stellen Sie zunächst sicher, dass Ihre Führungseinheiten auf Pixel eingestellt sind. Dies kann unter Einstellungen > Einheiten & Hilfslinien eingestellt werden.

Gehen Sie dann zu Ansicht > Neuer Leitfaden. Da wir unseren Inhalt in den Mittelpunkt stellen und eine Gesamtbreite von mindestens 1100 Pixeln anstreben, sollten wir vertikale Hilfslinien bei 150px und 1250px platzieren.

Schritt 4 Erstellen Sie das Texturmuster

Dezente diagonale Streifen heben das Design hervor, indem sie eine Trennung zwischen den Vordergrund-Portfolioelementen und dem strukturierten Hintergrund schaffen.

Um dies zu erreichen, wenden wir eine Musterfüllebene an. Zuerst müssen wir jedoch das Muster erstellen.

Erstellen Sie ein neues Dokument 12x12 Pixel mit transparentem Hintergrund und fügen Sie eine neue Füllebene mit schwarzer Füllung hinzu (#000000).

Fügen Sie nun eine neue Ebene hinzu (Ebene > Neu > Ebene). Zeichnen Sie mit dem Bleistiftwerkzeug mit einer Pinselgröße von 1px drei Linien genau so, wie sie in der Abbildung unten erscheinen.

Schalten Sie die Füllebene aus und stellen Sie die Deckkraft der Linienebene auf 6% ein. Um dies als unser Muster zu speichern, wählen Sie Bearbeiten > Muster definieren.

Kehren Sie zu unserer ursprünglichen Leinwand zurück, erstellen Sie eine neue Ebene mit der Textur, indem Sie Ebene > Neue Füllebene > Muster auswählen und das zuvor definierte Muster auswählen.

Schritt 5 Navigation

Nachdem wir nun unsere Basis erstellt haben, können wir einige flache Ebenen ablegen, die die Hauptelemente der Site umfassen

Zuerst unsere Navigation. Da diese Site so konzipiert ist, dass sie kein vertikales Scrollen hat, können wir die Navigation so positionieren, dass sie am unteren Bildschirmrand ausgerichtet ist.

Erstellen Sie eine neue Gruppe in der Ebenenpalette und beschriften Sie diese Gruppe mit "Navigation".

Erstellen Sie dann mit dem Rechteckwerkzeug (U) eine neue Ebene. Zeichnen Sie diese Form bei geöffnetem Infofenster auf 1400 x 61 (die volle Breite des Dokumentfensters und 61 Pixel hoch). Richten Sie diese Ebene am unteren Rand des Dokumentfensters aus.

Wenden Sie nun einen Verlauf auf die Ebene an, indem Sie mit der rechten Maustaste auf die Formebene in der Ebenen-Palette klicken und Fülloptionen auswählen und dann Verlaufsüberlagerung aktivieren (alternativ wählen Sie Ebene > Ebenenstil > Verlaufsüberlagerung).

Klicken Sie im Verlaufseditor auf die untere Farbauswahl, um den Farbwähler zu öffnen. Für die linke Farbe (unten in der Form) verwenden Sie #2f313a. Für die richtige Farbe (Spitze der Form) verwenden Sie #3c3f49.

Als nächstes erstellen Sie eine neue Ebene und beschriften dieses "highlight". Zeichnen Sie mit dem Bleistiftwerkzeug mit einem 1px-Pinsel und der Farbe #ffffff eine Linie, während Sie die Umschalttaste über der zuvor erstellten Rechteckform gedrückt halten. Stellen Sie dann die Deckkraft dieser Ebene auf 6% ein.

Schritt 6 Das Logo

Erstellen Sie eine neue Textebene 20 Pixel von der linken Seite des Dokuments und richten Sie den Text vertikal zentriert auf der Ebene des Navigationsrechtecks aus.

In diesem Beispiel wurde die Schrift DIN Light mit 14px mit einem losen Tracking von 200 verwendet. Um eine Verschiebung zwischen zwei Teilen des Logotyps zu erzeugen, werden zwei Farben verwendet. Für den ersten Teil #dddddd und den zweiten, dunkleren Teil #737375.

Fügen Sie als Nächstes einen subtilen Schlagschatten hinzu, um das Aussehen des Textes zu erzeugen, der in den Hintergrund eingefügt wird. Wählen Sie Ebene > Ebenenstil > Schlagschatten.

Deaktivieren Sie "Globales Licht verwenden", ändern Sie die Richtung auf -45 Grad, stellen Sie die Größe auf 0px, den Abstand 1px und die Deckkraft auf 30% ein.

Schritt 7 Navigationstasten

Für die Hauptnavigationsschaltflächen verwenden wir eine abgerundete Rechteckform.

Erstellen Sie eine neue Gruppe namens "Schaltflächen".

Erstellen Sie eine neue abgerundete Rechteckform mit einer Größe von 279 x 31 und einem Versatz von 20 px von der rechten Seite des Dokumentfensters und vertikal zentriert im Navigationsrechteck.

Klicken Sie mit der rechten Maustaste auf die Ebene in der Ebenenpalette und wählen Sie Mischoptionen. Aktivieren Sie Gradient Overlay und verwenden Sie die Werte #292c33 bis #43464f. Klicken Sie auf OK und aktivieren Sie dann Bevel & Emboss.

Stellen Sie für Bevel & Emboss die Größe auf 0px mit einer Richtung von 122 Grad ein. Stellen Sie dann die Deckkraft von Lichtern und Schatten auf 10 % ein, um einen gleichmäßigen, subtilen Lichteffekt zu erzielen.

Fügen Sie Textetiketten mit denselben Schriftarteinstellungen hinzu, die für den Logotyp angewendet wurden. Da sich die Beschriftungen der Schaltflächen in einem kleineren vertikalen Raum befinden, sollten wir die Größe auf 12 px reduzieren und das Tracking auf 100 erhöhen. Verwenden Sie dieselben Farben wie der Logotyp, wenden Sie jedoch die hellere Farbe für das aktive Seitenetikett an.

Um die Tasten zu trennen und gleichzeitig das sanft beleuchtete Erscheinungsbild der Navigation beizubehalten, sollten wir zwei Linien mit jeweils 1px Breite zeichnen. Das erste sollte schwarz (#000000) und das andere weiß (#FFFFFF) sein. Stellen Sie die Deckkraft für die weiße Ebene auf 6% und die schwarze Ebene auf 12% ein. Duplizieren Sie diese Ebenen, indem Sie bei gedrückter Umschalttaste auf jede Ebene klicken und dann mit der rechten Maustaste auf die Auswahl klicken. Positionieren Sie die duplizierten Ebenen mit gleichmäßigem Abstand innerhalb der Navigation.

Schritt 8 Social-Media-Buttons

Diese Schaltflächen haben eine andere Funktion als der Rest des Navigationssystems, daher wenden wir einen Stil an, der dies vorschlägt. Lassen Sie uns diese Schaltflächen einfügen, um die Hauptnavigation zu ergänzen.

Erstellen Sie zunächst eine neue Gruppe namens „social“ und verschachteln Sie diese Gruppe in der übergeordneten Gruppe „Navigation“.

Verwenden Sie nun das Werkzeug Abgerundetes Rechteck mit einem Radius von 4 px und halten Sie die Umschalttaste gedrückt, um eine quadratische Seitenform von 25x25 px zu erstellen. Zentrieren Sie diese vertikal in der Navigation und positionieren Sie die Form 22 px links neben den Hauptnavigationsschaltflächen.

Klicken Sie mit der rechten Maustaste auf die soeben erstellte Form und wählen Sie Mischoptionen.

Fügen Sie einen Schlagschatten hinzu. Für diesen Schlagschatten verwenden wir Weiß (#FFFFFF) und stellen den Mischmodus auf Aufhellen. Stellen Sie den Abstand auf 1px ein, verteilen Sie ihn auf 0% und die Größe auf 0px. Dadurch wird der Effekt erzeugt, dass der untere Rand beleuchtet und damit die Schaltfläche eingefügt wird.

Überprüfen Sie als nächstes, während Sie sich noch im Ebenenstilfenster befinden, den inneren Schatten. Verwenden Sie Schwarz (#000000) mit einer Deckkraft von 39%, einem Abstand von 1px und einer Größe von 4px.

Wählen Sie schließlich Farbüberlagerung und verwenden Sie #353741. Dadurch wird das Erscheinungsbild der Form abgeflacht und der Kontrast zum Hintergrund erhöht.

Für die Social-Media-Symbole nehmen wir ein vorhandenes Bild und zeichnen die Kanten mit dem Stiftwerkzeug nach, um einen Pfad zu erstellen (stellen Sie sicher, dass Pfade im Werkzeugoptionen-Menü ausgewählt ist).

Nachdem Sie einen Pfad des Symbols erstellt haben, verwenden Sie das Pfadauswahlwerkzeug und klicken Sie mit der rechten Maustaste auf den gerade erstellten Pfad (stellen Sie sicher, dass der Pfad in der Pfade-Palette ausgewählt ist). Wählen Sie Benutzerdefinierte Form definieren... Speichern Sie die Form.

Wir können das Symbol jetzt als skalierbares Vektorobjekt verwenden. Ändern Sie mit dem Stiftwerkzeug die Optionen in Formebenen (oberes linkes Element in der Optionsleiste) und wählen Sie Benutzerdefiniertes Formwerkzeug aus, und wählen Sie dann das gerade erstellte Symbol aus. Halten Sie die Umschalttaste gedrückt und ziehen Sie das Objekt so, dass es in die Symbolkachel passt.

Stellen Sie die Deckkraft des Symbols auf 20% ein.

Wiederholen Sie diese Schritte für alle verbleibenden Social-Media-Symbole.

Schritt 9 Weitere Anleitungen

In diesem Beispiel werden Folio-Bilder mit 640 x 480 Pixel angezeigt.

Da wir das vorgestellte Bild im Bereich über der Navigation vertikal zentrieren möchten, müssen wir weitere Hilfslinien hinzufügen. Wählen Sie Ansicht > Neue Hilfslinie aus und fügen Sie horizontale Hilfslinien bei 180 Pixel und 660 Pixeln hinzu. Dadurch wird unser angezeigtes Bild in der Mitte des vertikalen Raums über der Navigation positioniert.

Wir benötigen auch etwas Text links neben dem vorgestellten Bild, also fügen wir vertikale Hilfslinien bei 400px und 350px hinzu, um einen Rand für den Text zu schaffen und Platz für die Navigation neben dem Bild zu schaffen. Fügen Sie schließlich vertikale Hilfslinien bei 1040px und 1070px hinzu, um den Rand des angezeigten Bildes und den Rand zwischen dem benachbarten Bild zu definieren.

Schritt 10 Erstellen Sie die Bildplatzhalter

Erstellen Sie eine neue Gruppe namens "Projekte". Zeichnen Sie dann mit dem Rechteck-Werkzeug ein Rechteck von 640 x 480 Pixel, das oben links an der vertikalen Hilfslinie bei 400 Pixel und oben an der horizontalen Hilfslinie bei 180 Pixel ausgerichtet wird. Dies dient als Platzhalter für unser Hauptbild.

Klicken Sie mit der rechten Maustaste auf die gerade erstellte Ebene und wählen Sie Ebene rastern.

Halten Sie nun die Alt-Taste gedrückt, klicken und ziehen Sie die Ebene, um ein Duplikat zu erstellen. Verschieben Sie diese Ebene an die rechte Seite der Ebene mit 30px Rand, um sie an der Hilfslinie bei 1070px auszurichten und dieselbe Grundlinie zu verwenden.

Erstellen Sie zwei weitere Duplikate und richten Sie diese jeweils mit 30px Rand dazwischen aus.

Füllen Sie dann mit dem Farbeimer-Werkzeug jede dieser Formen mit der Farbe #252a3a.

Schritt 11 Vignette

Erstellen Sie unterhalb der Gruppe „Navigation“ und oberhalb der Gruppe „Projekte“ eine neue Gruppe namens „Vignette“.

Erstellen Sie eine neue Ebene und verwenden Sie das Farbeimer-Werkzeug, um die Ebene mit der Vordergrundfarbe #0f1219 zu füllen.

Zeichnen Sie mit dem Ellipsenwerkzeug einen Umriss, der sich an den Ecken der Hauptbildhilfslinien schneidet.

Um nun einen Vignetteneffekt zu erzeugen, müssen wir diesen Abschnitt ausschneiden, während wir die Kante des Schnitts mit Federn versehen. Um dies zu erreichen, verwenden wir Select > Modify > Feather. Streichen Sie die Auswahl um 60px und schneiden Sie dann die Ebenenauswahl (Strg-x / Befehl-x).

Schritt 12 Projektmasken erstellen

Da wir Arbeiten präsentieren werden, müssen wir einige Screenshots auf den Platzhaltern platzieren. Gehen Sie zurück zur Gruppe "Projekte" und fügen Sie einen Screenshot ein, während der Hauptplatzhalter ausgewählt ist. Dadurch wird die Ebene über dem Platzhalter eingefügt. Klicken Sie dann mit der rechten Maustaste auf die Ebene und wählen Sie Schnittmaske erstellen.

Fügen Sie drei weitere Screenshots in die anderen Platzhalter ein.

Reduzieren Sie die Deckkraft für alle Screenshots außer dem zentrierten Screenshot auf 20%.

Schritt 13 Text einfügen

Um jedes Projekt mit Anmerkungen zu versehen, verwenden wir drei Textebenen. Erstellen Sie eine neue Gruppe über der Gruppe „Vignette“, um diese Ebenen aufzunehmen.

Für die erste, die Überschrift, verwenden wir eine helle Schriftart. In diesem Beispiel habe ich DIN Light verwendet, aber eine andere ähnliche Schriftart kann auch gut funktionieren. Zeichnen Sie mit dem Textwerkzeug ein Textfeld innerhalb der Hilfslinien links neben dem Hauptbild und 40px unter der oberen Hilfslinie. Setzen Sie die Farbe auf #FFFFFF, Tracking auf -25 für einen engeren Buchstabenabstand und verwenden Sie eine Schriftgröße von 28px.

Außerdem fügen wir eine Zeile für die Projektkategorie und das Datum hinzu. Stellen Sie die Größe auf 14px, das Tracking auf 100 ein, erzwingen Sie Obergrenzen und wenden Sie die Farbe #338966 an, um diese Linie zu betonen.

Dann verwenden wir für den Fließtext eine Systemschriftart wie Lucida Grande oder Lucida Sans Unicode bei 12px mit einer Farbe von #8C8F95 und einer Zeilenhöhe von 18px.

Schritt 14 Maussteuerelemente hinzufügen

Um auf unserer Folio-Site zu navigieren, erlauben wir Maus- oder Tastatursteuerung. Eine intuitive Platzierung der Navigationsrichtungstasten ist entsprechend ihrer Funktion. Zum Beispiel wird die rechte Pfeiltaste rechts neben dem Hauptbild angezeigt.

Für die Schaltflächen verwenden wir durchscheinende Formen, die die Deckkraft bei Hover- oder Klickereignissen ändern können. Erstellen Sie eine neue Gruppe namens "Buttons", die sich über der Gruppe "Vignette" befindet.

Erstellen Sie dann ein neues Dokument mit den Abmessungen 37x37px. Zeichnen Sie mit dem Stiftwerkzeug eine Chevron-Form wie unten. Wiederholen Sie den Vorgang in Schritt 8 mit dem Pfadauswahlwerkzeug, klicken Sie mit der rechten Maustaste auf die Form und wählen Sie Benutzerdefinierte Form definieren. Speichern Sie die Form.

Kehren Sie zu unserer Hauptleinwand zurück und verwenden Sie das Werkzeug „Benutzerdefinierte Form“, um die zuvor erstellte Form einzufügen.

Wählen Sie dann Bearbeiten > Transformieren > Horizontal spiegeln. Dadurch wird der Pfeil nach rechts zeigen. Klonen Sie diese Form und verwenden Sie Bearbeiten > Transformieren > 90 Grad im Uhrzeigersinn drehen, um die nach unten zeigende Form zu erstellen.

Positionieren Sie jede dieser Formen in der Mitte ihrer jeweiligen Richtungsseite. Lassen Sie einen Rand von 15px zu, damit die Schaltflächen die angrenzenden Bilder überlappen und die Deckkraft auf 12% reduzieren können.

Schritt 15 Orientierungskarte

Um dem Benutzer mitzuteilen, wo er sich im gesamten Portfolio befindet, abstrahieren wir das Rasterdesign und verwenden Linien unterschiedlicher Höhe, um Bildspalten darzustellen, und einen Indikator, um die aktuelle Betrachtungsposition zu bestimmen.

Erstellen Sie eine neue Gruppe mit dem Namen „Orientierung“ und platzieren Sie diese Gruppe über der Gruppe „Vignette“.

Wählen Sie mit dem Bleistift-Werkzeug aus dem Flyout-Menü die Option Quadratischer Pinselsatz aus. Zeichnen Sie dann mit der Farbe #FFFFFF und einer Dicke von 5px eine Linie, die an der äußersten linken Begrenzungshilfe und einer Höhe von 60px ausgerichtet ist.

Klonen Sie diese Ebene und positionieren Sie diese 2px nach rechts. Wiederholen Sie dies für bis zu 12 Zeilen.

Stellen Sie die Deckkraft für alle Ebenen auf 12% ein. Eine einfache Möglichkeit, dies zu tun, besteht darin, die Deckkraft für die erste Ebene einzustellen, dann mit der rechten Maustaste auf die Ebene zu klicken und Ebenenstil kopieren auszuwählen. Wählen Sie dann alle verbleibenden Ebenen aus und wählen Sie Ebenenstil einfügen.

Versetzen Sie diese Ebenen mit dem Befehl Bearbeiten > Frei transformieren, um jede Zeile zu kürzen / zu erhöhen.

Erstellen Sie abschließend eine neue Ebene und zeichnen Sie mit dem Bleistift erneut eine Markierung auf der ersten Linie. Dies ist unser Positionsindikator.

Schritt 16 Tastatursteuerung

Oftmals bietet die Tastatursteuerung ein intuitives Navigationserlebnis. Der Benutzer muss jedoch wissen, dass die Tastatur die Navigation steuern kann. Um dies zu erreichen, erstellen wir Tastaturpfeilsymbole.

Erstellen Sie eine neue Gruppe namens "Tastatur" und platzieren Sie diese über der Gruppe "Vignette".

Zeichnen Sie mit dem Rechteckformwerkzeug ein Quadrat (bei gedrückter Umschalttaste) 20x20px mit der Farbe #262a34. Klicken Sie mit der rechten Maustaste auf die Ebene in der Ebenen-Palette und wählen Sie Mischoptionen. Markieren Sie den Strich und tragen Sie außen einen Strich von 1px mit der Farbe #32343f auf.

Verwenden Sie dann das Stiftwerkzeug (stellen Sie sicher, dass der Stil in der Optionsleiste auf Standard eingestellt ist) und zeichnen Sie mit der Farbe #fff einen Pfeil mit einer leicht quadratischen Spitze. Passen Sie dies nach Bedarf mit dem Direktauswahl-Werkzeug an. Deckkraft auf 20% setzen

Wählen Sie in der Ebenenpalette mit der Umschalttaste die beiden gerade erstellten Ebenen aus. Klicken Sie mit der rechten Maustaste und wählen Sie Ebenen duplizieren. Drehen Sie dann mit der Menüoption Bearbeiten > Transformieren die duplizierten Ebenen in ihre richtige Ausrichtung. Wiederholen Sie diesen Schritt, um alle vier Symbole zu erstellen.

Abschluss

In Ordung! Jetzt sind wir mit dem Designteil des Projekts fertig... was bedeutet, dass wir es nur mit einigen grundlegenden HTML/CSS, jQuery-Hotkeys und ein paar zusätzlichen jQuery-Tricks codieren müssen. Wenn jemand sehen möchte, wie Paul dieses Design codiert hat, lassen Sie es uns in den Kommentaren wissen, damit wir es arrangieren können!