Rasterlayouts in WordPress-Portfolioseiten: Designtipps und Beispiele

Die häufigste Struktur einer WordPress-Portfolio-Site ist das Raster. Es zeigt eine Handvoll Arbeiten auf einmal, sodass der Betrachter schnell scannen und alles auswählen kann, was ihm ins Auge fällt.

Aber was macht ein starkes Grid-Layout für ein Portfolio aus? Und was sollten Sie beachten, wenn Sie Ihre eigene Portfolio-Site starten?

In diesem Beitrag werde ich einige Tipps und Ratschläge zu den besten Grid-Layout-Designs für WordPress-Portfolios geben.

Enge Gitterdesigns

Wenn Sie ein Raster verwenden, ist es ratsam, das Design straff zu halten. Auf diese Weise sind die Elemente nah beieinander, um schnell zu blättern und die Benutzer zur Interaktion mit den Inhalten anzuregen.

Die Rasterstruktur unterscheidet sich normalerweise je nach Art des Portfolioinhalts. Abhängig von Ihren Fotos und dem Layout müssen Sie möglicherweise die Polsterung erhöhen oder verringern. Zum Beispiel können sich Kunstwerke verschwommen anfühlen, wenn sie nah beieinander liegen, sodass digitale Kunstportfolios von zusätzlichem Platz profitieren.

Aber ein Designer könnte seine Arbeit eng beieinander halten, weil die Screenshots auch aus der Ferne noch gut zu erkennen sind. Ein schönes Beispiel sehen Sie im Ink-Theme für WordPress.

Dies verwendet absolut keine Polsterung zwischen den Gitterelementen. Diese quadratischen Blöcke sind eng aneinander ausgerichtet, sodass der Benutzer alles auf einmal sieht.

Es verwendet auch kleinere Thumbnails, damit sie schnell Aufmerksamkeit erregen. Ich mag diesen Stil sehr und er ist mein persönlicher Favorit, weil er so einen starken Eindruck hinterlässt. Beachten Sie, wie sich jedes Foto deutlich von allen anderen abhebt.

Wenn Sie Arbeiten haben, die von diesem Stil profitieren können, schauen Sie sich das Tintenthema an. Es ist eine einfache Möglichkeit, diese Arten von Portfolio-Rastern zu erstellen, ohne eines von Grund auf neu zu codieren.

Aber eine schöne Alternative ist Bramble, das etwas mehr Platz zwischen den einzelnen Stücken hat.

Dieses WordPress-Theme enthält mehrere Portfolio-Layouts, sodass Sie tatsächlich auswählen können, welche(n) Stil(e) Ihnen am besten gefällt. Einige Portfolio-Layouts haben Miniaturansichten näher beieinander, andere haben viel Abstand zwischen den Elementen in einem Raster.

Aber die wichtigste Sache, die es zu beachten gilt, ist die Analyseparalyse. Dies tritt auf, wenn zu viele Auswahlmöglichkeiten angeboten werden, die dazu führen können, dass jemand das Gefühl hat, keine davon auswählen zu können.

Solange sich Ihre Portfolioeinträge einzigartig anfühlen und genügend Platz (oder Platzmangel) haben, um für sich allein zu stehen, werden Sie viele Klicks erhalten. Und ist das nicht der ganze Sinn eines Portfolios?

Mauerwerksgitter

Nicht viele Menschen wissen über Mauerwerksgitter Bescheid, aber es gibt sie schon seit langer Zeit.

Diese verwenden normalerweise JavaScript, um Elemente basierend auf unterschiedlichen vertikalen Höhen in einem Raster anzuordnen. Anstatt also pixelgenaue Thumbnails in derselben Größe hinzuzufügen, können Sie verschiedene Portfolio-Elemente in unterschiedlichen Größen hinzufügen und sie trotzdem passend machen.

Das Weston WordPress-Theme hat diese Funktion auf seiner minimalistischen Fotografie-Portfolio-Seite. Dies richtet sich natürlich an Fotografen, die ihre Arbeit online stellen möchten, und das Mauerwerksgitter ist eine geeignete Option für die Fotografie mit variabler Höhe.

Jedes Foto findet seinen Weg auf natürliche Weise in das Raster und nimmt genau die richtige Menge an Platz ein. Sie können normalerweise die genaue Anzahl der Spalten und die Spaltenhöhe anpassen, aber denken Sie daran, dass sie je nach Gerätegröße unterschiedlich sind.

Wenn Sie Vollbild-Layouts mögen, werfen Sie einen Blick auf das Notio-Design. Es verwendet ein Mauerwerk-Gitterdesign mit engen Miniaturansichten und benutzerdefinierten Animationseffekten.

Beachten Sie, dass die Raster dieser beiden Themen auch in ihrer Enge variieren. Einer hat zusätzlichen Leerraum zwischen den Bildern, während der andere Thumbnails hat, die eng aneinander ausgerichtet sind.

Rasterlayouts folgen einer Handvoll Trends und Sie haben die Wahl, denen zu folgen, die Ihnen am besten gefallen.

Hover-Details: Yay or Nay?

Viele Portfolios enthalten Hover-Details, die beim Bewegen über dem Miniaturbild angezeigt werden. Dieser Effekt überträgt sich normalerweise nicht auf Mobilgeräte, aber es ist definitiv ein allgemeiner Trend für Desktop-Portfolio-Sites mit großen Thumbnails.

Jedes Thumbnail sollte auf die interne Seite des Portfolio-Elements verlinken oder zumindest eine Galerie mit Bildern öffnen, die sich auf dieses Stück beziehen. Miniaturansichten sollten nicht das gesamte Portfolio ausmachen.

Das Hinzufügen von Details kann jedoch zu höheren Klicks führen und die Leute dazu bringen, sich weiter mit der Website zu beschäftigen. Das Theme „Create WordPress“ verwendet beim Schweben einen benutzerdefinierten Animationseffekt, um die Aufmerksamkeit auf Schwebedetails zu lenken.

Wenn Sie mit dem Mauszeiger über ein beliebiges Portfolioelement schweben, finden Sie zwei wichtige Informationen:

• Der Name/Titel des Portfolio-Elements
• Die Kategorie des Artikels

Manchmal können diese kleinen Details die Benutzererfahrung radikal verbessern. Wenn jemand nach bestimmten Grafikdesign-Arbeiten sucht, kann er nach Kategorien suchen und sich die Titel ansehen, bevor er darauf klickt.

Aber manchmal können diese Details unnötig ausführlich sein und zu viel Platz einnehmen. Aus diesem Grund überspringen einige Designer diese Details, wie Sie sie im WordPress Gather-Theme finden.

Einfach nur Thumbnails mit einfachen Hover-Effekten. Schont die Augen und alle Details befinden sich unter den Miniaturansichten, sodass sie das Bild nicht behindern.

Auf diesen Trend gibt es keine eindeutige „richtige“ Antwort. Hover-Details funktionieren für einige hervorragend, aber für andere kann diese Funktion eine Quelle von geringfügigem Ärger sein.

Finden Sie heraus, was auf Ihrer Website am besten aussieht, und beurteilen Sie es nach Ihrem eigenen Geschmack. Unabhängig davon, ob die Details beim Bewegen der Maus über das Miniaturbild oder unter dem Miniaturbild angezeigt werden, versuchen Sie, sie irgendwo auf der Seite hinzuzufügen.

Schnappen Sie sich Augen mit überzeugenden Fotos

Jedes Rasterlayout verwendet Miniaturansichten, um Aufmerksamkeit zu erregen. Diese Thumbnails verkaufen normalerweise einen Teil Ihrer Arbeit, indem sie die Leute dazu anregen, darauf zu klicken und mehr zu lesen.

Ihre Arbeit kann digitale Kunst, Webdesign, Icon-Design, UX-Architektur oder irgendetwas anderes mit visueller Anziehungskraft sein. Aber der Punkt ist, dass Sie unbedingt einen visuellen Reiz brauchen , um zu verkaufen. Und das kommt von überzeugenden Fotos.

Das minimalistische Mellow WordPress-Theme verwendet eine Vielzahl von Fotos mit jeweils unterschiedlichen Stilen. Dies sind keine „echten“ Projektfotos, da es sich meist um Platzhalter handelt. Aber sie bieten ein klares Beispiel dafür, den Besucher gleich beim ersten Laden der Seite zu verkaufen.

Ich schlage vor, andere Portfolio-Websites zu durchsuchen, um zu sehen, was andere Designer für ihre Galeriebilder verwenden.

Sehen Sie, was Sie für Ihre eigene Website verwenden können und welche Art von Arbeit Aufmerksamkeit erregen könnte. Was zeigt Ihre Fähigkeiten am besten? Welcher Teil jedes Projekts ist optisch ansprechender oder hilft, Ihre Arbeit an andere zu verkaufen?

Auch dies ist eine sehr offene Frage, aber Sie sollten viele verschiedene Strategien ausprobieren. Ich finde normalerweise, dass Nahaufnahmen viel Aufmerksamkeit erregen, besonders in Miniaturansicht. Sie können eine Mischung dieser Beispiele mit dem Beckett-Thema auf der Portfolio-Seite sehen.

In einem Rasterlayout haben Sie nur begrenzt Platz für jedes Projekt. Lassen Sie diesen Platz zählen!

Wenn Sie genau wissen, wie groß Ihre Thumbnails sein sollen, sind Sie bereits im Vorteil. Auf diese Weise können Sie viele verschiedene Miniaturansichten in Photoshop zuschneiden, um zu sehen, welche Kompositionen Ihnen für Ihre Portfolioelemente am besten gefallen.

Vorwärts gehen

Grid-Designs sind ziemlich einfach und viele WordPress-Portfolio-Designs werden standardmäßig mitgeliefert. Aber ein Grid-Layout wird ohne spektakuläre Designarbeiten nicht viel bieten.

Ich hoffe, dieser Beitrag bietet Designern und Kreativen, die ihre eigenen Portfolios starten, wertvolle Tipps. Gitterdesigns sind in Portfolios am häufigsten, sodass Besucher sie erwarten werden. Durch die Anwendung dieser Trends (oder die Verwendung dieser Themen) können Sie mehr Aufmerksamkeit erregen und im Idealfall im Laufe der Zeit mehr Kundenarbeit einbringen.