Merkmale einer modernen Portfolio-Site
Von allen Arten von Websites muss die Portfolio-Website einige der schwierigsten Hürden überwinden. Sprechen Sie mit fast jedem Designer und sie werden zustimmen, dass der Start Ihrer eigenen Portfolio-Website ein schmerzhafter Prozess ist. Am häufigsten umfasst dieser Prozess zahlreiche Versionen und oft einen Start aus reiner Frustration.
Der Vorteil ist meiner Meinung nach, dass die Portfolio-Website ein Fenster in die Zukunft des Webdesigns sein kann. Ich schlage das vor, denn wenn ein Individuum seine eigene Website entwirft, geschieht dies nur unter selbst auferlegten Beschränkungen. Es gibt keinen Kunden, der Dinge diktiert, keinen Ausschuss, der das Design zerstören könnte, und keinen Genehmigungsprozess, um Dinge hinauszuziehen und die Dynamik zu zerstören.
Aber nicht alle Portfolioseiten sind gleich. Trotz der wahnsinnigen Menge an verfügbaren Sample-Portfolio-Sites gibt es überraschend wenige, die sich so deutlich und interessant genug fühlen, um darüber zu sprechen. Es sind diese Websites, die die Messlatte höher legen und aufzeigen, was die Zukunft für das Webdesign bereithält.
Lassen Sie uns in eine große Auswahl an atemberaubenden Portfolios eintauchen und nach einigen gemeinsamen Elementen suchen, die sie zum Funktionieren bringen. Einige dieser Elemente zeigen branchenweite Trends, während andere einfache und gemeinsame Design-Schnörkel zeigen. Nicht alle haben eine große Bedeutung, aber sie alle addieren sich zu fantastischen Designs, die Sie herausfordern, eine wirklich außergewöhnliche Portfolio-Website zu erstellen.
Eine Geschichte erzählen
Einer der interessantesten Aspekte einer modernen Portfolio-Site ist der Versuch, eine Storytelling-Umgebung zu schaffen. Die Idee besteht darin, einen Fluss von Inhalt zu erzeugen, der im Wesentlichen die Erfahrung und die Nachricht an den Benutzer steuert. Dieses Steuerelement erstellt einen Fluss des Inhalts in einer gewünschten Reihenfolge.
Viele Websites versuchen, dies zu tun, indem sie die Hauptnavigation in eine gewünschte Reihenfolge bringen. Aber diese Seiten nehmen die Annäherung an ein ganzes bekanntes Niveau und machen es zu einem unvermeidlichen Teil der Erfahrung.
Jan Ploch
Die Verwendung einer einzelnen Seitenwebsite ist nichts Neues und zwingt einen Benutzer nach seiner Definition, die Seite nach unten zu scrollen. Dies erzeugt einen natürlichen Fluss von Inhalten, der unzählige Male verwendet wurde. Auf dieser Seite finden wir jedoch einen selten verwendeten Ansatz mit einem animierten Hintergrund. Wenn Sie die Seite nach unten scrollen, ist es, als ob die Soda im Hintergrund das Stroh aufgesaugt wird.
Dieses einfache, dekorative Element macht etwas wirklich Kraftvolles; Es ermutigt dich, den ganzen Weg auf der Seite zu machen. Dies ist grundlegend ein kritischer Aspekt der Website mit einer einzelnen Seite: Sicherstellen, dass die Benutzer das Ende der Geschichte erreichen. Das Ende der Geschichte ist typischerweise der Umwandlungspunkt der Website (wie in diesem Fall).
Tam Cai
Die Seite dieser Person zeigt auch das Storytelling-Modell mit nur einer Seite. Was ich an dieser speziellen Seite interessant finde, ist, dass die Geschichte mit zwei starken Bildern abgeschlossen ist, mit all dem Fleisch in der Mitte. Die große Reihe von Abbildungen oben auf der Seite sorgt für Stimmung, demonstriert die Persönlichkeit des Künstlers und lädt Sie generell dazu ein, in seine Welt einzutauchen. Die Seite wird dann mit einem Kontakt Optionen (Umwandlungspunkte) und einem dramatischen Foto von dem, was wir annehmen, der Schöpfer ist abgeschlossen.
Sicherlich kein Stil für alle, aber wenn ein thematischer Ansatz auf eine so polierte Art und Weise produziert wird, können die Ergebnisse großartig sein. Und obwohl die Seite nicht alle Besucher ansprechen mag, wird sie die richtigen Leute ansprechen und dem Schöpfer helfen, die Art von Verbindungen zu schaffen, die er schätzen wird.
MacMillan Lynch
Dieses Beispiel erfordert ein etwas anderes Vorgehen. Der Story-Teil dieser Website ist kurz und alle enthalten in der Haupt-Homepage-Grafik. In diesem Fall ist die Geschichte ziemlich irrelevant, außer dass es ein Gefühl für ein Mysterium zu verstehen schafft. Nach der Landung auf der Website fragte ich mich, was zum Teufel diese Person war. Manchmal möchten Sie Ihre Besucher mit einem Löffel füttern. Zu anderen Zeiten kann es wirklich gut funktionieren, um sie mit einer interessanten Geschichte oder einem Mysterium anzusaugen. Dies hat auch den Vorteil, eine ziemlich eigenständige und hoffentlich unvergessliche Seite zu schaffen.
Sallee Design
Auf der Sallee Design Site finden wir einen typischen Ansatz für die Struktur der Site. Logo oben links, Hauptnavigation oben und die Standard-Homepage-Diashow. In vielerlei Hinsicht ist dies eine sehr normale Seite (mit einem schönen Design).
Was ich jedoch interessant fand, war, dass ihre Homepage-Diashow nicht nur eine automatisch rotierende Serie von Flash-Bildern war. Stattdessen wird die Diashow vom Benutzer gestartet und beginnt mit einer Einladung, eine Tour zu beginnen. Sobald Sie eintauchen, werden Sie durch eine Reihe von Folien geführt, die zusammenfassen, was Sie bekommen würden, wenn Sie stattdessen die verschiedenen Seiten der Website durchsuchen würden. Und es ist alles mit Schlüsselabstiegspunkten zum Rest der Seite abgeschlossen.
Ich denke, dass dieser Ansatz schlau ist. Für Anfänger ist es erfrischend zu sehen, dass ein Element wie der Homepage-Schieber einen gründlich geplanten Zweck hat. Ich liebe auch, dass sie den Vorteil einer einzelnen Seite Verkaufsgespräch erhalten, und die Bonus-SEO durch eine größere Anzahl von Seiten zur Verfügung gestellt.
Sich anpassendes Design
Das Thema von sich anpassendes Webdesign ist, gelinde gesagt, ein extrem heißes Thema. Es sollte daher nicht überraschen, dass dieser Ansatz in neuen Portfolios zu finden ist, die gerade produziert werden. Ungehindert haben diese Personen die neue Technik angenommen. Und nicht überraschend, alle drei Beispiele hier sind für Portfolio-Sites von Front-End-Entwicklern, genau die Art von Ort, an dem wir so etwas erwarten sollten.
Ryan Taylor
Ryans Website folgt der Standard-Formel für ein persönliches Portfolio. Dieser Ansatz funktioniert hervorragend, wenn reaktionsfähige Techniken in die Site integriert werden. Mit nur einer Seite kann es viel einfacher sein, eine Website wie diese zu testen und zu bauen. Aber glaube nicht, dass es einfach ist. Es braucht viel Aufwand und Planung, um eine saubere und schöne Website zu schaffen, die sich auf diese Weise transformiert.
Aaron Shekey
Als nächstes kommt das Portfolio von Aaron Shekey. Diese schöne kleine Website umfasst viele bewährte Techniken für eine Portfolio-Website. Es ist halb-minimalistisch, hat gedämpfte Farben, damit die Bilder platzen können, und es basiert größtenteils auf Typografie. Wie diese Website funktioniert wunderbar und ist äußerst effizient bei der Präsentation der Arbeit des Künstlers. Aber mit dem zusätzlichen Bonus eines ansprechenden Layouts sieht die Website auf vielen verschiedenen Geräten gut aus. Dies stellt sicher, dass der Benutzer eine positive Erfahrung macht, ohne das Zoomen und Scannen zu stören.
Andrew Cohen
Schließlich finden wir in der Responsive-Kategorie die persönliche Seite des Frontend-Entwicklers Andrew Cohen. Ähnlich wie die anderen hat es eine einzelne Seitenstruktur mit etwas, das ich als hintergrundgesteuertes Design bezeichnen würde. Auf diese Weise kann sich der Hintergrund ohne große strukturelle Veränderungen verschieben und verändern. Dies macht die Website zu einem perfekten Kandidaten für die Einführung von responsiven Techniken.
Creative-Layouts
Manchmal ist der beste Weg, einen Eindruck zu hinterlassen, einzigartig und anders zu sein. Und was wäre besser, als dies mit einer ungewöhnlichen Layout-Struktur zu tun, die die Normen und Erwartungen, die wir alle haben, übertreibt. Zu einem gewissen Grad zeigt fast jedes Beispiel in dieser Sammlung dieses spezielle Attribut, aber ich habe dieses kleine Unterset ausgewählt, um es zu demonstrieren.
Und bevor ich eintauche, möchte ich darauf hinweisen, dass diese Seiten keine kreativen Layouts verwenden, nur um der Kreativität willen. Sie sind immer noch funktionale Websites, die extrem klar und einfach zu bedienen sind. Dennoch haben sie ihre eigene Persönlichkeit, die es ihnen ermöglicht, sich abzuheben. Dies bezieht sich genau darauf, was eine Portfolio-Website tun sollte: helfen Sie ihrem Schöpfer, sich von der Masse abzuheben.
Krichewtsowa Alexandra
Was ich an diesem Beispiel zum Thema Creative Layouts wirklich liebe, ist, dass es sich nicht um ein radikal anderes Layout handelt. Ja, die Seite folgt nicht dem normalen Logo oben links, Navigation über den oberen Ansatz. Das Layout ist nur ein paar kleine Schritte von dort. Ich denke, das zeigt den Punkt sehr gut.
Das Ziel ist nicht, ein Layout zu erfinden, um kreativ zu sein. Aber, um kreativ zu werden mit dem Auslegen der Seite, um die Informationen bestmöglich zu kommunizieren. In diesem Fall funktioniert der Fluss, der durch das leicht atypische Layout erzeugt wird, wunderbar.
David Desandro
In diesem Fall fühlt sich das Layout völlig ungewöhnlich an. Auf einer gewissen Ebene fühlt es sich unvollständig an und fühlt sich gleichzeitig vollständig organisiert und einfach zu bedienen an. Grabe dich jedoch in das Portfolio und andere Seiten ein und du wirst leicht beeindruckt sein von der Vielfalt, die diese Seite bietet. Es hat definitiv einen Appell an die kreativen, aber technisch versierten.
Deidre Bain
Diese einseitige Scroll-Seite bricht auch die Normen der Layout-Struktur. In diesem Beispiel basiert fast das gesamte Design auf seitenspezifischen Layouts und Illustrationen. In der Regel ist dies ein Ansatz, der nicht gut funktioniert und zu Wartungsproblemen führt. Aber im Falle einer persönlichen Portfolio-Website ist es tatsächlich eine gute Möglichkeit, einige nützliche Fähigkeiten zu demonstrieren. Vor allem gibt es die Gründlichkeit auf der Website, die Sie erwartet, dass dieser Designer von der Art ist, die auf Dinge folgt. Es ist diese Art von subtilen Nachrichten, die sehr mächtig sein können, um in Ihrer eigenen Portfolio-Website zu kommunizieren.
Siddharth Arun
Auf den ersten Blick hat diese Seite das Gefühl eines, das dem Standardprotokoll folgt. Aber interagieren mit der Website ein bisschen und es fühlt sich total einzigartig an. Manchmal muss man nicht immer alles neu erfinden. Ändere einfach genug, dass die Ergebnisse überraschend (und funktional) sind.
Fett geschriebener Text
Als ich Thumbnails der Websites sah, die gesammelt wurden, um hier zu erscheinen, sticht eine Sache wirklich hervor: die Verwendung von extrem großem und fettem Text. Die unten aufgelisteten Samples verfügen über einen riesigen Text, der auf der Website auffällt. Der Hauptgrund, warum ich für diesen Ansatz aufkommen kann, ist Klarheit.
Dieser große fett gedruckte Text stellt sicher, dass mindestens eine primäre Nachricht kommuniziert wird. In manchen Fällen fühlt es sich funktioneller an als andere, aber letztendlich ist das Ergebnis immer dasselbe. Die Aufmerksamkeit des Benutzers wird fast garantiert auf diese großformatige Kopie gerichtet. Sehen Sie sich die Beispiele an und beachten Sie die verschiedenen Möglichkeiten, mit denen Creatives dieses Element implementiert haben.
Garth Humphrey
Justin Verbrennungen
Amman, Jordanien
Ross Angus
Alex Pierce
Trimm oben
Wie ich bereits erwähnt habe, sind einige der Muster weit weniger funktional und bedeutungsvoll als andere. In diesem Fall fühle ich mich fast schlecht, wenn ich die folgenden Proben in solch einen frivolen Satz setze. Die unten aufgeführten Websites sind absolut großartig; Bitte nimm diese Einstufung nicht als irgendeine Art von Beleidigung. Tatsächlich sind zwei meiner Lieblingsseiten aus diesem Artikel hier zu finden.
Grundsätzlich ist das Muster, dass eine Art von dekorativen Streifen, eine durchgezogene Linie oder Zick-Zack-Muster über die Oberseite erscheint. Ich habe diesen Satz auf drei Seiten beschränkt, aber wenn Sie einige der anderen Beispiele durchsuchen, werden Sie das gleiche Element bei der Arbeit finden.
Warum ist so ein kleines Detail so üblich? Vielleicht ist es bei der Single-Page-Methode schön, den oberen Rand der Seite zu bezeichnen. Auf diese Weise erhalten Benutzer einen kleinen visuellen Hinweis, wo die Seite beginnt.
Mathieu Weiß
Berühre Nerds
Danilo Giagnoli
Textur Textur Textur
Ein weiteres visuelles Detail, das auf Portfolio-Sites extrem häufig vorkommt, ist Textur. Dies gilt insbesondere für Hintergrundelemente. Ein Teil des aktuellen visuellen Stils integriert subtile Texturen in den Hintergrund.
Ich finde, dass dieses Element sehr gut darin ist, ein bisschen organisches Element in die Seite einzubauen, das dabei hilft, es von seinen technischen Grundlagen zu entfernen. Dieses einfache Element kann eine warme Note hinzufügen, die einem Design eine Menge Leben einhaucht. Durchsuche viele der zuvor behandelten Beispiele und du wirst zahlreiche Beispiele für dieses Element bei der Arbeit finden. Hier sind ein paar Beispiele, die das sehr gut machen.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Weitere erwähnenswerte Portfolio-Sites
Es gibt unzählige Kandidaten für diese Art von Sammlung. Es ist verlockend, in diesem Fall fast zu viele Samples einzubeziehen. Stattdessen habe ich mich auf eine zusätzliche Sammlung von Websites konzentriert, die eine ziemlich breite Palette von Stilen, Strukturen und allgemeinen Ansätzen präsentieren.
Eine Sache, die Sie beachten werden, ist, dass einige dieser Aufstellungsorte nicht für Entwerfer sind. Ich fand es sehr interessant zu sehen, wie andere Branchen das Internet genutzt haben, um ein Individuum zu verkaufen. Schließlich soll eine Portfolio-Site genau das tun. Aus Gründen der Inspiration und frischen Ideen habe ich ein paar außerhalb der Webdesign-Community aufgenommen.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Fazit
Eine Website zu erstellen, die Sie online repräsentiert, ist kein kleines Unterfangen. Hoffentlich werden die hier gesammelten Seiten Sie inspirieren und herausfordern.
Einige der hier vorgestellten Elemente stellen sehr absichtliche Mechanismen dar, um die Benutzererfahrung zu kontrollieren und das Individuum zu verkaufen. Andere zeigen mehr oder weniger visuelle Designtrends. Ich glaube, dass beides nicht außer Acht gelassen werden sollte und auch nicht im Alleingang die Dinge kontrollieren sollte. Indem man die Normen herausfordert, funktionale Muster umarmt und dein Image online in einem neuen Licht beurteilt, kann das zu revolutionären Ideen führen, die dir dabei helfen, dich abzuheben.
In Bezug auf das Thema "Abheben" fühle ich mich gezwungen, die Leute daran zu erinnern, dass das Ziel hier nicht ist, die originellste Schnittstelle zu erfinden. Stattdessen ist es das Ziel, innerhalb der Grenzen, die wir haben, kreativ zu denken.
Aus diesem Grund hoffe ich immer, dass wir die kreativen Lösungen finden, die uns mit erstaunlich funktionalen Ergebnissen hervorheben. Wenn man sich die hier gesammelten Proben anschaut, sind sie nicht nur schön, sondern sie funktionieren erstaunlich gut.
Was sind einige der besten Portfolio-Websites, die Sie gesehen haben? Irgendwelche anderen Trends, die Sie in Designer Portfolios in letzter Zeit bemerkt haben? Lass es uns in den Kommentaren wissen!