Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Erstellen Sie ein minimales Website-Design für das Portfolio (plus eine kostenlose PSD!)

by
Length:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

In diesem Tutorial werden wir einen klaren minimalistischen Design-Portfolio „Minimum“, erhältlich als Themeforest WordPress-, oder HTML-Theme erstellen.  Wir besprechen auch die Gründe, warum es so gut funktioniert, und wie Sie Ihre persönliche Anpassung aus der Vorlage erstellen können.

Überprüfen Sie das Ende der Nachricht für 3 nette Änderungen dieser Vorlage; die Quelldateien sind vorhanden!

minimal web design portfolio template tutorial

Über den Autor: Curt Ziegler, auch als Cudazi bekannt, ist ein Webdesigner, der sich auf die Entwicklung eines WordPress-Themas mit 10 Jahren Design-Erfahrung spezialisiert hat und für eine Reihe sehr erfolgreicher Produkte und über 6.000 Verkäufe in ThemeForest bekannt ist!  Sie können auch mehr von seiner Arbeit auf cudazi.com finden.

Vor einem Jahr veröffentlicht, wurde das Design des Themas Minimal fast 1000 Mal verkauft und half dabei, den Weg für viele andere minimalistische Vorlagen zu ebnen.  In dieser Vorlage lernen Sie, wie Sie selbst ein Design erstellen. Vor allem aber erläutern wir auch, wie es funktioniert.  Sobald wir fertig sind, hoffen wir, dass Sie Ihre eigene Version dieses eleganten professionellen Designs mit Ihrem eigenen Stil, Schriftarten und Farben erstellen können!


Textbuchdetails

  • Programm: Adobe Photoshop
  • Schwierigkeit: Anfänger
  • Voraussichtliche Bearbeitungszeit: 1 Stunde

Schritt 1

Beginnen Sie mit dem Erstellen eines neuen Dokuments in Photoshop 1020px x 1020px.  Stellen Sie sicher, dass Ihre Auflösung auf 72 ppi eingestellt ist und Ihr Hintergrund auf weiß eingestellt ist.  Wir müssen die Hintergrundebene entsperren, sodass wir mehrere Ebenenstile hinzufügen können, klicken Sie mit der rechten Maustaste auf den Hintergrund und wählen Sie "Ebene vom Hintergrund" aus.  Dann können Sie die Ebene wieder in den Hintergrund umbenennen.

minimal web design portfolio template

Schritt 2

Fügen Sie oben auf der Seite eine Graustufe hinzu, indem Sie auf die neue Hintergrundebene doppelklicken und in den Ebenenstilen die Option Verlaufsüberlagerung (Gradient Overlay) auswählen.  Denken Sie daran, dass Sie immer zum Menü Ebenen gehen und einen Ebenenstil auswählen können, anstatt auf die Ebene doppelzuklicken.

Stellen Sie die Opazität auf 5% ein und verwenden Sie den linearen Farbverlauf -90 Grad.

Klicken Sie einmal auf den Farbverlauf, um den Verlaufseditor zu öffnen, und richten Sie zwei Punkte ein:

  • Schwarz - #000000 an der Stelle von 0% (das sollte standardmäßig eingestellt sein)
  • Weiß - #FFFFFF anstelle von 11%
minimal web design portfolio template

Klicken Sie im Verlaufseditor und in den Fenstern des Ebenenstils auf OK, um den Verlauf auf die Hintergrundebene anzuwenden.  Jetzt sollten Sie einen leichten Blackout am oberen Rand der Seite sehen.


Schritt 3

An Standorten mit sehr hellem oder einfachen Hintergrund mag ich ein Element hinzuzufügen, die der Benutzer zu wissen, ermöglicht es, dass er ganz oben auf der Seite angezeigt werden kann.  Im Fall dieser Gestaltung ist es eine 3-Pixel-Linienbreite des Inhaltsbereich mit einer Lichtlinie durch den Header an den Rest des Weges erstreckt,.

Beim Hinzufügen von Linien und Formen mag ich die Werkzeuge von Vektorformen in Photoshop.  Wenn nicht anders angegeben, wird vorausgesetzt, dass unter dieser Methode alle Zeilen und Rechtecke erstellt werden.  Wie bei jedem Tutorial gibt es mehrere Möglichkeiten, dasselbe zu tun, also zögern Sie nicht, das zu verwenden, was Ihnen am besten gefällt.

Wählen Sie das Rechteck-Werkzeug in dem Vector Shapes-Bereich in der Symbolleiste aus:

minimal web design portfolio template

Zeichnen Sie ein Rechteck über die gesamte Breite der Seite 1020 px und eine Höhe von 3 px.  Doppelklicken Sie im Ebenenfenster auf die Farbminiatur, um die Farbe in #DFDFDF festzulegen.  Verschieben Sie das Rechteck an den Anfang der Seite.


Schritt 4

Mit einer Breite von 940 px des zweiten Rechtecks der Breite unseres Seiteninhaltes entsprechen wird, lassen Sie uns auf der Seite ein paar Führer bitten, wir alles gleichmäßig ausrichten zu helfen.

Gehen Sie zum Menü View > New Guide ...

Wählen Sie Vertikal und stellen Sie den Wert auf 40 px ein.

Fügen Sie eine weitere vertikale Anleitung zu 980 px hinzu.  Das schafft eine Fläche von 940 px in der Mitte für unsere Inhalte.

minimal web design portfolio template

Schritt 5

Fügen Sie der Ebene oberhalb der vorherigen 940-px-Breite und 3-px-Höhe das zweite Rechteck hinzu.  Doppelklicken Sie im Ebenenbedienfeld auf die Farbminiaturansicht, um die Farbe #333333 festzulegen.

Verschieben Sie das zweite Rechteck zwischen den erstellten Hilfslinien und verschieben Sie es an den Anfang der Seite.

minimal web design portfolio template

Schritt 6

Nur ein wenig aufräumen alles zu organisieren, verschieben Sie die beiden Kopfzeilen in einen eigenen Ordner.

minimal web design portfolio template

Schritt 7

Es ist Zeit, ein Logo zu erstellen, das aus zwei Rechtecken und weißem Text besteht.  Wir werden es in Teilen bauen, und dann, nachdem es fertig ist, werden wir es an seinen Platz bringen.

Das Logo ist der oberste Punkt unseres Designs mit einer umgekehrten Pyramide, in die die meisten Menschen beim Besuch dieser Seite zuerst fallen, bevor sie in die unteren Bereiche der Website gehen.

Beginnen Sie mit der Erstellung eines Rechtecks mit einer Breite von 222 px bis 82 px.  Doppelklicken Sie auf das Farbminiaturbild in den Ebenen und legen Sie die Farbe auf #333333 fest.

Erstellen Sie ein zweites Rechteck 14 px x 14 px und platzieren Sie es in der unteren rechten Ecke des vorherigen Rechtecks.  Stellen Sie die Farbe auf #FFFFFF ein.  Das erzeugt den Effekt eines eingeschnittenen Rechtecks, ohne irgendwelche Formen bearbeiten zu müssen.

(Wenn Sie den "Einschnitt" nicht sehen, stellen Sie sicher, dass sich Ihr zweites Rechteck im Ebenenbereich über dem ersten befindet)


Schritt 8

Fügen Sie den von Ihnen erstellten Formen Text hinzu.  Für diese Demoversion sagt der Text: minimal.

Je nach verwendetem Text müssen Sie möglicherweise die Abmessungen für die korrekte Installation anpassen.

  • Schriftart: Arial
  • Größe: 42 pt
  • Tracking: -20
  • Aufschrift: Fett
  • Farbe: #FFFFFF
minimal web design portfolio template

Schritt 9

Verschieben Sie alle drei Ebenen des erstellten Logos in einen eigenen Ordner namens Logo.  Das wird es viel einfacher machen, es auf der Seite zu platzieren.

Das Logo sollte 40 px von der Unterseite der Kopfzeilen, die wir oben erstellt haben, sein.  Wenn Sie sich erinnern, waren sie 3 px hoch, also müssen wir einen neuen horizontalen Führer zu 43 px hinzufügen.  Gehen Sie zum Menü View > New Guide und legen Sie ihn horizontal auf 43 px fest.  Legen Sie eine andere Anleitung auf 125 px, die mit der Unterseite des Logos ausgerichtet sind.


Schritt 10

Verschieben Sie das Logo, richten Sie das obere Ende mit dem oben erstellten neuen Handbuch aus und platzieren Sie es in der Mitte der Seite.  Jetzt können wir fortfahren, ein Menü zu erstellen.


Schritt 11

Das Menü wird mit zwei horizontalen Linien und Text erstellt, die sich auf einer Seite 40 px unterhalb der Unterseite des Logos befinden.

Fügen Sie eine horizontale Anleitung zu 165 px hinzu, dies wird die Spitze unserer Menü sein.  Erstellen Sie eine weitere horizontale Führung in 209 Stück, um mit dem unteren Rand des Menüs auszurichten.

Beginnen Sie mit der Erstellung einer Linie, die zwischen den Hauptinhaltsanleitungen 940 px breit und 1 px hoch zentriert ist.  Setzen Sie die Farbe auf #AFAFAF und verschieben Sie sie in die erste Anleitung, die wir oben erstellt haben.

Duplizieren Sie die obige Ebene, indem Sie auf Layer > Duplicate layer gehen.  Das erstellt eine neue Ebene an derselben Position.  Verschieben Sie diese neue Ebene in die zweite Anleitung, die wir oben erstellt haben.  Jetzt haben wir einen Behälter für unser Menü.


Schritt 12

Fügen Sie Text horizontal und vertikal zwischen den beiden oben erstellten Zeilen hinzu.

  • Schriftart: Arial
  • Größe: 14 pt
  • Verfolgung: 0
  • Aufschrift: Fett
  • Farbe #AFAFAF
minimal web design portfolio template

Fügen Sie Ihr Linien- und Textmenü zu einem Ordner namens Top Menu hinzu, damit alles organisiert ist.


Schritt 13

Als nächstes erstellen wir einen großen Werbetext.  Es wird 40 px unter dem Menü sein, um den angemessenen Abstand zwischen den 40 px-Elementen beizubehalten.

Fügen Sie eine horizontale Anleitung zu 248 px und 324 px hinzu, die als Behälter für unseren großen Werbetext dienen.  Es kann abhängig von Ihrem Text variieren, aber es wird für ein Beispiel unserer zwei Textzeilen funktionieren.

Fügen Sie mit dem Textwerkzeug folgenden Text zu Ihrer Seite hinzu:

Willkommen im Online-Portfolio von Jane B Doe,
Doktor, Student, Designer im Namen der Stadt, Staat.

  • Schriftart: Arial
  • Größe: 42 px
  • Tracking: -50
  • Zeilenhöhe: 45 pt
  • Aufschrift: Fett
  • Farbe: #AFAFAF
  • Farbe (hervorgehoben): #B86443

Zentrieren Sie den Text vertikal und horizontal zwischen den neuen Hilfslinien.

minimal web design portfolio template

Legen Sie diesen Text in einen Ordner namens Promo Text, damit alles organisiert ist.


Schritt 14

Im Layout der Homepage gibt es drei große Geschichten mit einem runden Symbol in der Hauptspalte (links).  Wie Sie wahrscheinlich vermutet haben, werden wir sie 40 px unterhalb des Haupt-Werbetextes erstellen.  Folgendes werden wir erstellen:

minimal web design portfolio template

Schritt 15

Zuerst erstellen wir drei Elemente jeder Geschichte.  Der Titel und der Text werden um 80 px von der Führung auf der linken Seite ausgerichtet und lassen Platz für das Historien-Icon.  Fügen Sie eine vertikale Anleitung zu 120 px hinzu.


Schritt 16

Fügen Sie mit dem Textwerkzeug einen Titel hinzu:Erfahren Sie mehr über mich.

  • Schriftart: Arial
  • Größe: 21pt
  • Verfolgung: 0
  • Aufschrift: Fett
  • Farbe: Weiß # 333333

Wählen Sie den Text mit dem oben erstellten 120-px-Guide aus und platzieren Sie ihn 40 px unter dem großen Werbetext.

Lass uns die Situation etwas ändern.  Es ist nicht so, dass ich etwas gegen die Guides habe, aber es gibt einen schnelleren Weg, um Items wie diesen Titel 40 Stück unterhalb des Textes zu platzieren.

Wählen Sie Verschieben Werkzeug und verschieben Sie den Titel "Erfahren Sie mehr über mich" bis zur letzten Zeile des großen Textes.

Halten Sie nun die Shift-Taste gedrückt und klicken Sie viermal auf den Abwärtspfeil auf der Tastatur. Der Text wird um 40 px reduziert, 10 für jedes Drücken bei gedrückter Shift-Taste.  (Sie können dies ohne Verschiebung tun, aber Sie müssen 40 Mal drücken, was Sie mehr als schön tun).

minimal web design portfolio template

Schritt 17

Erstellen Sie eine Textgeschichte, die etwas kleiner und heller ist.  Richten Sie es auf der linken Seite mit der oben erstellten Kopfzeile aus.  Anstelle eines Intervalls von 40 px, legen wir es neben 15 px unterhalb des Headers.

Legen Sie eine vertikale Führung auf 640 px, so dass sie als den rechten Rand des Textes bedient, ist es innerhalb dieser Grenze zu halten, einen Platz für die beiden Spalten in der Zukunft zu schaffen erlaubt.

Hier sind ein paar unerwünschten Text: Lorem Ipsum - es ist einfach Dummy-Text printsdf sdsg und tycpsum - es standdddard in duasdfsdsdmmy Textview-Format meine Resumen, Industriestandard duasdsdffmmy.

  • Schriftart: Arial
  • Größe: 17pt
  • Verfolgung: 0
  • Zeilenhöhe: 20pt
  • Aufschrift: Fett
  • Farbe: #AFAFAF
minimal web design portfolio template

Schritt 18

Das Symbol ist ein wenig komplizierter, aber im Wesentlichen ist es nur ein Kreis mit dem Photoshop-Formular auf der darüber liegenden Ebene. 

Wählen Sie mit den Vektorwerkzeugen Photoshop das Ellipse-Werkzeug.  Klicken und ziehen Sie auf die Seite und halten Sie die Umschalttaste gedrückt, um den perfekten Kreis zu zeichnen.  Wenn die Ebene ausgewählt ist, drücken Sie Control + T (Command + T Mac), um die Konvertierungseinstellungen aufzurufen.  Stellen Sie die Breite (W) und die Höhe (H) auf 60 px ein. 

minimal web design portfolio template

Doppelklicken Sie auf das Miniaturbild der Ebene, um die Farbe auf #333333 zu setzen.


Schritt 19

Doppelklicken Sie auf den Layer, der oben erstellt wurde, um das Ebenenstilfenster zu öffnen. 

Fügen Sie Schatten, externes Leuchten, Verlaufsüberlagerung und Strich hinzu, indem Sie die folgenden Einstellungen verwenden:

minimal web design portfolio template

minimal web design portfolio template

minimal web design portfolio template

minimal web design portfolio template

Schritt 20

Im obigen Schritt wird ein Hintergrund für die drei Symbole erstellt, die wir verwenden werden. Jetzt ist es an der Zeit, ein echtes Icon für den Hintergrund zu erstellen.

Das erste Icon ist nur das Kleinbuchstabe "i" mit der Schriftart Georgia, 49 pt, die Farbe ist #FFFFFF, benötigt aber mehrere Layer-Stile. 

Erstellen Sie ein "i" auf der Ebene über dem Kreis, den wir zuvor erstellt haben, und doppelklicken Sie auf die Ebene, um die Ebenenarten aufzurufen.  Übernehmen Sie die folgenden Einstellungen für externes Glühen und Strich:

minimal web design portfolio template

minimal web design portfolio template

Schritt 21

Platziere das "i" in der Mitte des Kreises und lege beide in den Ordner, so dass alles organisiert ist.

Verschieben Sie den Ordner so, dass er auf der linken Seite mit einer 40 px-vertikalen Hilfslinie zusammen mit der Kopfzeile und dem zuvor erstellten Text ausgerichtet wird, damit Ihre Seite wie folgt aussieht:

minimal web design portfolio template

Platzieren Sie den Symbolordner, den Titel und den Text in einem Ordner, z. B. Home Story A, so dass alles organisiert ist.


Schritt 22

Duplizieren Sie den oben erstellten Ordner zweimal, so dass Sie drei Geschichten haben.  Bewege die zweite und dritte Geschichte nach unten, so dass sie alle 40 px voneinander entfernt sind.


Schritt 23

Zeichnen Sie eine Linie 1px aus dem Guide mit einem Abstand von 40 px zu 640 px zwischen den neu erstellten Stories.  Die Linie wird eine Breite von 600 px, eine Höhe von 1 px und eine Farbe von #AFAFAF haben. Da die Entfernung zwischen den Geschichten 40 px beträgt, lege aus jeder Geschichte eine Zeile von etwa 20 px, mit Ausnahme der letzten.

minimal web design portfolio template

Schritt 24

Im Bild oben zeige ich Beispiele für andere Symbole, die alle mit einfachen eingeschlossenen Formen im Photoshop-Vektorformularfeld erstellt wurden. Dabei werden die gleichen Ebeneneffekte wie in den obigen Schritten beschrieben verwendet.


Schritt 25

Für dieses Design haben wir eine sekundäre Spalte mit einer Breite von 300 px mit einer 40 px-Rinne zwischen ihm und der Hauptspalte auf der linken Seite.  Beginnen wir damit, einen vertikalen Leitfaden für 680 px hinzuzufügen, mit dem wir Blogposts und Links in sozialen Netzwerken ausrichten können.

minimal web design portfolio template

Schritt 26

Beginnen wir 40 px unter dem Haupt-Werbetext, wie die Geschichten in der Hauptspalte, fügen wir dem Blog "widget" den Titel "Aus dem Blog" hinzu.  Richten Sie es mit einer vertikalen Führung aus, die wir in 680 px platzierten.

  • Schriftart: Arial
  • Größe: 15pt
  • Verfolgung: 0
  • Aufschrift: Fett
  • Farbe: Weiß #333333

Schritt 27

Wenn Sie ein RSS-Symbol benötigen, laden Sie das kostenlose Symbol, das von wefunction.com installiert wurde, unter: http://wefunction.com/2008/07/function-free-icon-set/

Kalibrieren Sie das Symbol auf die gleiche Höhe wie "Vom Blog-Text", und schieben Sie es nach rechts, kombiniert mit der vertikalen Führung in 980 px.


Schritt 28

Die Blogposts bestehen aus einfachen Linien und Rechtecken, der Schlüssel hält alles gleichmäßig verteilt. 

Beginnen Sie mit der Erstellung von 1 px in einer Höhe von 300 px in der Breite von der vertikalen Führung von 680 px auf 980 px, Farbe #C3C3C3. 

Bewege die Linie 10 px unterhalb des Headers des Widgets. 

Lassen Sie 1 px Platz unter der Linie, fügen Sie einen Hintergrund des Rechtecks für den Titel der Nachricht, 300 px breit und 28 px hoch mit der Farbe #F0F0F0. 

Fügen Sie dem obigen Rechteck den Datums- und Publikationsnamen hinzu.

  • Schriftart: Arial
  • Größe: 13 pt
  • Verfolgung: 0
  • Farbe # 333333
minimal web design portfolio template

Legen Sie die Linie, das Rechteck und den Titel in den Ordner, so dass Sie sie leicht duplizieren und verschieben können.


Schritt 29

Duplizieren Sie den obigen Nachrichtenordner, um fünf separate Nachrichten zu erstellen.  Bewegen Sie sie nach unten und lasse zwischen ihnen einen Abstand von 1 px.  Dann ändern Sie den Hintergrund für jedes in #FFFFFF oder löschen Sie das Rechteck.

Fügen Sie dem unteren Element den letzten Rahmen hinzu, um die Liste der Nachrichten zu vervollständigen.

minimal web design portfolio template

Schritt 30

Die Rubrik Social Media ist ziemlich einfach, da sie sehr verständlich und einfach ist. 

Um zu starten, laden Sie die Symbole von: http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/


Schritt 31

Beginnen Sie bei 40 px unter dem Ende der Blogposts, fügen Sie den Header "Social Media" hinzu, der Text ist der gleiche wie im Blog:

  • Schriftart: Arial
  • Größe: 13 pt
  • Verfolgung: 0
  • Farbe: Weiß #333333

Schritt 32

Erstellen Sie einen neuen Ordner für soziale Symbole, er kann sich in einem anderen Ordner befinden, aber stellen Sie sicher, dass dieser neue nur Symbole enthält. 

Stellen Sie den Mischmodus im Ordner Helligkeit ein. Dadurch wird ein einfaches Schwarz-Weiß-Symbol für Sie erstellt.

minimal web design portfolio template

Schritt 33

Gehen Sie zu File > Place und wählen Sie das Symbol aus dem oben heruntergeladenen Ordner mit 32x32 Symbolen. Wählen Sie den Speicherort aus und drücken Sie die Eingabetaste, sobald es auf Ihrer Website angezeigt wird, um es auf der Seite zu korrigieren.


Schritt 34

Bewege dein erstes Icon 10 px unterhalb des Social Network Headers und richte es links mit einer vertikalen Führung auf 680 px aus.

Fügen Sie zusätzliche Symbole hinzu und legen Sie sie 10 px nach links.

minimal web design portfolio template

Schritt 35

Es ist Zeit, die Seite mit Fußzeile, Credits und einem einfachen Menü zu vervollständigen.  Beginnen Sie mit dem Zeichnen der Linie #F0F0F0 entlang der gesamten Site 1 px lang, 80 px unter dem letzten Element auf der Seite, der dritten Story in der Hauptspalte.


Schritt 36

Zeichnen Sie dann ein Rechteck mit der gleichen Farbe #F0F0F0, um alles unter dieser Linie über 1 px zu füllen.  Bewegen Sie das Rechteck nach unten, und lassen Sie zwischen der Linie und dem oberen Rand des Rechtecks einen Abstand von 1 px, um einen guten Doppelzeileneffekt zu erzielen.

minimal web design portfolio template

Schritt 37

Der Text der Fußzeile ist auf der Seite zentriert und wird 20 px unterhalb der Fußzeile platziert.  Die erste Zeile für Copyright-Informationen lautet wie folgt:

  • Arial
  • Größe: 13 pt
  • Verfolgung: 0
  • Farbe #AFAFAF
  • Farbe: #B86443 (hervorgehoben)

Die zweite Zeile, die für das sekundäre Menü verwendet wird, ist um 11 pt etwas kleiner, ansonsten werden die gleichen Einstellungen wie oben verwendet.


Das Endprodukt

minimal web design portfolio template

Warum funktioniert es so gut?

Die minimale Vorlage funktioniert so gut, weil sie einfach alles speichert.  Durch die Beseitigung von Barrieren und Ablenkungen von den Designfaktoren wird jedes kleine Element, das im Design verbleibt, bedeutungsvoller.  Die Entwicklung der visuellen Hierarchie wird ungefähr gleich, wie sich herausstellt - in einem Moment kann der Besucher der Seite sofort die Hauptfragen beantworten:

  1. Logo: Wo bin ich?
  2. Mission Statement: Was bedeutet das?
  3. Navigation: Wohin kann ich gehen?
  4. Inhaltsspalte: Was kann ich hier lernen?
  5. Seitenwand: Wie kann ich mehr erfahren?

Die Reihenfolge, in der der Leser diese Hierarchie entdeckt, ist nicht wirklich wichtig.  Da alle auf einer einzelnen Seite in einer sauberen und geordneten Art und Weise präsentiert, kann der Besucher frei Design erforschen ohne Hindernis oder Verwirrung.  Deshalb ist die Verwendung einer solchen Vorlage wie dies oft fantastisch sein kann, das Design zu beginnen, wenn Sie keine Inspiration haben.  Es ist immer einfach, zusätzliche Elemente hinzuzufügen ... und es ist schwierig, eine erfolgreiche Struktur zu durchbrechen.


Erstellen Sie Ihre eigenen benutzerdefinierten Versionen!

Eine Vorlage wie Minimal wäre nicht so interessant zu verwenden, wenn jeder genau die gleiche Version hätte.  Brandon, den Herausgeber der Website hier, beschlossen, ein paar „individuelle Variationen von“ Minimalvorlage zu machen um zu zeigen, wie vielseitig es sein kann, ohne den Geist des minimalistischen Designs zu verlieren.  Überprüfen Sie sie unten:

minimal web design portfolio template
In dieser Version verwenden wir die Gotham Schriftart, gestrichelte Linien für die Elemente von HR und leuchtend grün für diesen frischen, Minzgeschmack!
minimal web design portfolio template
In dieser Version, die wir die Schrift Museo verwenden, gestrichelte Linien für die Elemente von HR und tiefblauen Akzentfarbe.
minimal web design portfolio template
In dieser Version, die wir Ziggurat Schriftart verwenden, gestrichelte Linien für die Elemente von HR, und wir wandten wir das Farbschema für einen dunklen, schweren Stil.

Schlussfolgerung

Das ist alles!  Ich habe versucht, alles so einfach wie möglich zu erzählen, um ein klares, professionelles, minimales Erscheinungsbild zu erhalten.  Wenn Sie an den endgültigen Versionen von HTML oder WordPress interessiert sind, gehen Sie bitte zu meinem Portfolio ThemeForest!  Vielen Dank für das Lesen, jetzt lassen Sie ein paar Kommentare unten, wenn es Ihnen gefallen hat!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.