Hat Dir schon einmal eine Website so gut gefallen, dass Du das Webdesign am liebsten für Deine Website kopiert hättest?
Falls ja, bist Du hier genau richtig.
In diesem Artikel zeige ich Dir (am Beispiel von 20min.ch), wie Du das Design einer Website nachbauen kannst.
Das Design von 20min.ch würde jetzt vielleicht keine Design Awards gewinnen (so sehen übrigens „Award-würdige“ Websites aus: Awwwards.com), aber es ist ein sehr modernes, schönes und funktionales Design.
Ausserdem wollte ich als Beispiel eine der meistbesuchten Websites in der Schweiz verwenden (laut Wikipedia liegt 20min.ch da übrigens auf dem 16. Platz in der Schweiz).
Bevor wir loslegen, klären wir die vielleicht brennendste Frage dazu:
„Darf man überhaupt das Design einer Website kopieren?“
Du darfst natürlich nicht eine Website herunterladen und dann selber verwenden und wieder veröffentlichen. Das gleiche gilt für Texte, Grafiken und Bilder.
Was Du aber auf jeden Fall darfst, ist den grundlegenden Design-Stil oder einzelne Effekte nachzuahmen bzw. nachzubauen.
Keine Website kann einen bestimmten CSS Effekt oder ein spezielles Website Layout schützen lassen.
Ich halte mich da übrigens ganz an das Zitat von Pablo Picasso (und Philosophie von Steve Jobs bzw. Apple):
Good Artists Copy; Great Artists Steal. (Gute Künstler kopieren, grossartige Künstler stehlen.)
Pablo Picasso
Also: Ideen und Inspiration stehlen? So viel und von wo Du kannst.
Einzelne Design Elemente, Grafiken oder Texte kopieren? Auf keinen Fall (und ist auch überhaupt nicht nötig)!
Und das ist genau das, was wir hier jetzt machen werden: Den grundlegenden Stil, Idee und Konzept zu „stehlen“ bzw. nachzuahmen, nicht tatsächlich konkrete Inhalte, Bilder oder sonstige Elemente herunterladen oder kopieren!
Wenn Du die grossen bekannten Websites anschaust, siehst Du übrigens nämlich genau, dass diese auch nur den neusten Webdesign Trends folgen und sich gegenseitig abschauen.
Und schliesslich einfach noch damit es gesagt ist: Du musst natürlich nicht alles von einer einzigen Website abschauen, wie ich hier in diesem Beispiel.
Lass Dich von verschiedenen Websites inspirieren und kombiniere es so in einem komplett neuem und einzigartigem Webdesign.
Noch ein paar allgemeine Hinweise:
Als Basis nehme ich meine Demo Website GeneratePress.ch, welche Du auch in meinen WordPress Online Kurs erhältst.
Am einfachsten ist das Nachmachen von diesem Artikel also natürlich dann, wenn Du meinen Online Kurs hast bzw. zumindest das von mir empfohlene WordPress Theme (also eben GeneratePress) benutzt (ansonsten kannst Du die HTML/CSS Beispiele natürlich nicht einfach 1:1 übernehmen).
Ich denke aber, auch ohne meinen Kurs oder GeneratePress sollte der Artikel sehr interessant sein um zu sehen, wie Du Dich vom Webdesign von anderen Websites inspirieren lassen kannst.
Was macht ein Webdesign aus?
Im Prinzip besteht jedes Webdesign aus nur 4 Elementen:
- Den Farben.
- Den Schriftarten.
- Den Bildern (bzw. insbesondere das Titelbild oder „Hero Image“).
- Und wie ich es nenne: Dem gewissen Etwas (das können z.B. Icons, Illustrationen oder grafische Effekte/Animationen sein).
Wie Du sehen wirst, ist das eigentlich schon alles.
Mit nur diesen 4 Elementen kannst Du ein tolles Design erstellen und das „Look & Feel“ einer Website nachahmen.
Die Ausgangslage
Auf der linken Seite siehst Du einen Screenshot des 20min.ch Artikels, den ich als Vorlage gewählt habe. Und rechts den genau gleichen Artikel in meiner GeneratePress Vorlage aus meinem Online Kurs (den Text habe ich jetzt nur zur Demonstration kopiert – wie oben gesagt darfst Du Texte ansonsten natürlich nicht einfach kopieren):
Wir haben also einiges zu tun. Legen wir los:
Das grundlegende Website-Layout
Zuerst einmal passen wir das grundlegende Website-Layout an. Das sind insbesondere diese Punkte:
- Der Header: Also der Bereich mit dem Logo und Hauptmenü, das bei 20min.ch auf 2 Zeilen aufgeteilt ist (oben die Bereiche News, Video, etc., unten die verschiedenen Kategorien wie Front, Coronavirus, etc.). Dafür hat es keine Top Bar (der schwarze Balken ganz oben auf der Demo Website, der aber natürlich ganz einfach entfernt werden kann).
- Der Seiten Hero / Titel: Das ist die Darstellung des Artikel Titels plus den sogenannten Metadaten wie Kategorie, Datum, sowie Autor. Also dieser Teil hier:
- Der Body / Inhalt: Dieser ist im sogenannten „Boxed Design“, also der Inhalt ist durch die Weisse Fläche auf dem Hellblauen Hintergrund eingerahmt. Die deutlich häufiger verwendete Alternative wäre übrigens das sogenannte „Stretched“ oder „Full-width“ Design (also z.B. wie bei meiner Demo-Website der graue Balken, der über die ganze Bildschirmbreite geht).
- Call To Action Banner / Blöcke: Die in meiner Demo-Website vorbereiteten schwarzen Call To Action Banner / Blöcke (für die Kontaktaufnahme bzw. den Newsletter) können ebenfalls relativ einfach deaktiviert werden.
- Der Footer / Fussbereich: 20min.ch verzichtet komplett auf den Footer, was diesen Teil natürlich relativ einfach macht.
Das alles ist mit dem GeneratePress Theme grundsätzlich kein Problem:
Der Header: Top Bar deaktivieren, 2. Menü hinzufügen
Um die Top Bar zu deaktivieren, musst Du lediglich alle Widgets rauslöschen:
Da wir 2 Menüs brauchen, aktiviere ich zuerst einmal das „Secondary Nav“ Modul in GeneratePress:
Ich habe die 2 Menüs mit den genau gleichen Einträgen wie bei 20min.ch angelegt, damit man es gut nachvollziehen kann.
Die Position des 2. Menü kannst Du im WordPress Customizer (also unter „Design – Customizer“ im Adminbereich) unter „Layout – Sekundäre Navigation“ anpassen:
Der Seiten Hero / Titel
Das ist jetzt nicht ganz so trivial, da wir die individuelle Vorlage von meiner GeneratePress Demo-Website gemäss dem etwas spezielleren Layout von 20min.ch anpassen müssen.
Ausserdem: 20min nutzt einen Titel und Untertitel. Um den Seiten Hero jetzt ganz genau gleich umzusetzen, müsste man also ein zusätzliches Feld für den Untertitel hinzufügen. Das wäre natürlich machbar, würde jetzt aber den Umfang dieses Artikels sprengen. Darum füge ich den Untertitel dann einfach als normalen Inhalt ein.
Man kommt im Webdesign halt nicht immer ganz ohne etwas HTML und CSS aus (vor allem wenn man relativ moderne und etwas speziellere Webdesigns nachbauen möchte). Und manchmal muss man Kompromisse eingehen, um es einfach zu halten 🙂
Hier kannst Du die Vorlage für den Seiten Hero in meiner GeneratePress Website anpassen:
Ich kann jetzt natürlich nicht den ganzen HTML/CSS Code im Detail erklären.
Aber vereinfacht gesagt: Hier im HTML-Code siehst Du rot markiert der Reihe nach die verschiedenen Elemente, welche angezeigt werden (und im Screenshot darunter, wie es tatsächlich auf der Website aussieht): Titel, Autorenbild, Autorenname, Kategorie, Datum, Kommentar-Zähler und das Artikelbild:
Und diese Elemente müssen wir jetzt einfach etwas umordnen. Wenn Du meine GeneratePress Demo-Website aus dem Online Kurs verwendest, kannst Du den HTML-Code ganz einfach mit diesem Code ersetzen:
<div class="hero-title">
<div class="post-meta"><span class="category">{{post_terms.category}}</span><span class="date">{{post_date}}</span></div>
<h1>{{post_title}}</h1>
<div class="author">
<div class="gravatar">[page_hero_gravatar]</div> <div class="author-meta entry-meta"><span class="post-author">{{post_author}}</span></div>
</div>
</div>Zusätzlich zum HTML-Code musst Du noch die folgenden Einstellungen anpassen:
So sollte es dann auf der Website aussehen:
Die Struktur und Reihenfolge stimmt, jetzt muss das Ganze nur noch mit etwas CSS-Code gestaltet werden.
Gehe dazu auf „Design – Simple CSS“ (für diese Funktion nutze ich das nützliche WordPress Plugin „Simple CSS“). Als Erstes machen wir den ganzen Inhalt einen Tick breiter. Ändere dazu auf dieser Zeile die „max-width“ von 700 auf 800 Pixel:
Als Nächstes springe zum Abschnitt „Blog Post Hero „Featured Image“ Styling“ und ersetze diesen CSS-Code …:
… mit diesem CSS-Code (damit passen wir im Prinzip einfach die Breite und Abstände etwas an):
.inside-page-hero .hero-title {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
width: 800px;
}Und zum Schluss musst Du noch folgenden CSS-Code hinzufügen (mit diesem CSS positionieren wir das Datum rechtsbündig und gestalten den Autor mit den 2 Linien):
.inside-page-hero .post-meta .date {
float: right;
}
.inside-page-hero div.author {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 30px 0 20px 0;
max-width: 50%;
}Ich empfehle diesen CSS-Code hier bei „Blog Post Hero Autoren Bild und Meta Styling“ einzufügen:
Und damit haben wir den Seiten Hero vom Layout her schon ziemlich ähnlich wie bei 20min.ch gestaltet:
Der Body / Inhalt: Das Boxed Layout
Für das „Boxed Layout“ kannst Du im Customizer ganz einfach eine Hintergrundfarbe auswählen (unter „Farben – Body“):
Du siehst dann rechts in der Vorschau, dass der Seiten Hero den wir soeben fertig gestaltet haben, noch vom eigentlichen Inhalt getrennt ist. Das kannst Du jetzt aber ganz einfach unter „Layout – Container“ anpassen, indem Du die Abstände verkleinerst:
Den Abstand zwischen dem 2. Menü und dem Inhalt muss hingegen wieder per CSS gemacht werden. Dazu musst Du nur folgenden CSS-Code einfügen:
/* Abstand zwischen 2. Menü und Content */
#secondary-navigation {
margin-bottom: 80px;
}
Und so sieht das grundlegende Layout dann schliesslich aus:
Call To Action Banner entfernen
Das ist ganz einfach gemacht: Unter „Design – Elements“ findest Du beide Call To Action Elemente (anstatt diese zu löschen, würde ich einfach den Status auf „Entwurf“ wechseln):
Der Footer / Fussbereich
Wenn Du keinen Footer brauchst, kannst Du einfach alle „Footer Widgets“ löschen, dann wird der Footer / Fussbereich nicht mehr angezeigt:
Jetzt wo wir das grundlegende Website-Layout vorbereitet haben, kümmern wir uns um das „richtige“ Design:
Webdesign Element #1: Farben
Die Farbe ist eines der grundlegendsten Design Elemente.
Die Hauptfarbe Blau, welche 20min für z.B. das Menü oder Links verwendet, ist im HTML Hex Code #0d2880.
Die verwendete Farbe auf einer Website kannst Du relativ einfach im Browser Deiner Wahl herausfinden (und übrigens auch die Schriftart):
Klicke dazu z.B. im Google Chrome Browser mit der rechten Maustaste auf das gewünschte Element und klicke auf „Untersuchen“, um den HTML- und CSS-Code anzuzeigen:
Wenn Du nicht die genau gleiche Farbe verwenden möchtest, kannst Du z.B. mit diesem Color Picker den Hex Code #0d2880 einfügen und einfach eine ähnliche Farbe aussuchen.
Und dann kannst Du im WordPress Customizer („Design – Customizer“) durch die Kategorie „Farben“ durchgehen, und überall entsprechend die gewünschten Farbe eingeben:
Da gehe ich jetzt nicht im Detail durch alle Optionen durch (das mache ich im Online Kurs etwas genauer), ist aber alles relativ logisch erklärt.
Aber wenn Du das gemacht hast, sind wir der Sache schon einen grossen Schritt näher gekommen:
Webdesign Element #2: Schriftarten
Schriftarten werden oftmals unterschätzt, sind aber genau wie Farben entscheidend für jedes Design.
Wie oben im Screenshot gezeigt, nutzt 20min die Schrift „Baton Turbo“. Wie Du siehst, ist das eine kostenpflichtige Premium Schriftart.
Wenn Du also kein Geld ausgeben willst, musst Du eine möglichst ähnliche Google Fonts Alternative suchen.
Das ist nicht immer ganz einfach, bzw. findest Du oftmals nur vom Stil her ähnliche, aber keine identische Alternativen.
Für beliebte Schriftarten findest Du in Google schnell einige Vorschläge für ähnliche Google Fonts Alternativen. Für Baton Turbo fand ich keine Empfehlung, aber nach etwas eigener Recherche in Google Fonts fand ich die ziemlich ähnliche Schrift „Roboto“ (oben Baton Turbo, unten Roboto):
Also zurück in den WordPress Customizer, wo wir jetzt unter „Typografie“ die Schriftart überall anpassen können (auch hier gehe ich jetzt nicht im Detail durch alle Einstellungen):
Und hier das Ergebnis:
Jetzt ist die Ähnlichkeit mit dem 20min.ch Design bereits ziemlich offensichtlich.
Webdesign Element #3: Bilder (Hero Image)
Viele Websites arbeiten mit einem sogenannten Hero Image. Also einem grossen, Bildschirm-breiten Foto oder Illustration, das für einen „Wow-Effekt“ sorgen und die passende Stimmung wecken soll.
Hier als Beispiel airbnb:
Jetzt in unserem Beispiel bei einem Online Magazin wie 20min gibt es das nicht. Dafür gibt es im Inhalt den Bilder Slider.
Es gibt einige verschiedene Bilder Slider Lösungen. Und da wirst Du wahrscheinlich einige ausprobieren müssen, bis Du einen findest, mit dem Du klar kommst und der möglichst nah an Deine Vorstellungen bezüglich Aussehen und Funktionalität kommt.
Eine simple Lösung wäre z.B. der „Karussell“ Block, den Du mit dem Gutenberg Addon Plugin „Page Builder Gutenberg Blocks – CoBlocks“ erhältst und den ich jetzt einmal verwendet habe:
Wenn wir schon gleich im Inhalt sind, kümmern wir uns gleich noch um die farbig hinterlegte „Darum gehts“ Box. Das ist im WordPress Editor relativ einfach möglich:
Ich verwende dazu einfach den „Zeile“ Block mit 3 Spalten, wobei ich die mittlere Spalte mit der Hintergrundfarbe einfärbe und noch den „Innenabstand“ vergrössere:
Und schon haben wir 2 relativ markante Design-Details nachgebaut.
Hier der aktuelle Zwischenstand:
Webdesign Element #4: Das gewisse Etwas
Das gewisse Etwas kann wie schon erwähnt z.B. Icons, Illustrationen oder grafische Effekte/Animationen sein.
Also alles, was das Design etwas interessanter macht und den Wiedererkennungswert erhöht.
Ich zeige Dir hier einmal, wie Du 3 simple Effekte von 20min.ch nachmachen kannst:
1. Hover Effekt im 2. Menü
Damit meine ich diesen Hover Effekt im unteren 2. Menü auf 20min.ch:
Dieser Effekt ist mit einigen wenigen Zeilen CSS nachgemacht (bei „background-color“ könntest Du natürlich Deine gewählte Farbe eintragen):
.main-nav .secondary-menu > li::after {
content: '';
display: block;
width: 0;
height: 5px;
background-color: #0d2880;
transition: width .3s;
}
.main-nav .secondary-menu > li:hover::after {
width: 100%;
transition: width .3s;
}Diesen CSS-Code auf der Website einfügen, und fertig:
2. Blaue Linie unter Titeln
Ein weiterer simpler Effekt, der das Design aufwertet. Für diesen brauchen wir diesen CSS-Code, der bei allen H2 Titeln im Inhalt automatisch diese blaue Linie hinzufügt:
.entry-content > h2::after {
background-color: #0d2880;
content: "";
display: block;
height: 5px;
margin-bottom: 20px;
margin-top: 10px;
width: 60px;
}Und so sieht das Ganze dann aus:
3. Links automatisch fett formatieren und externe Links mit Icon ergänzen
Alle Links im Inhalt automatisch fett zu formatieren ist wieder relativ leicht mit etwas CSS gemacht.
Wie Dir wahrscheinlich aufgefallen ist, sind alle Links im meiner Demo Website unterstrichen. Wenn Du wie bei 20min.ch die Links nicht unterstrichen haben willst, kannst Du folgende 2 Zeilen löschen:
Und die erste der 2 Zeilen mit folgendem CSS ersetzen (eben um die Links fett zu formatieren):
font-weight: bold;Also dass es dann so aussieht:
Das Icon, dass automatisch bei allen externen Links (also genau genommen, bei allen Links, welche in einem neuen Fenster geöffnet werden) eingefügt wird, braucht ein paar Extra-Schritte.
Zuerst brauchen wir ein Icon. Ich wähle jetzt den Weg über ein .SVG-Bild, welches ich von hier habe. Das SVG-Format hat den Vorteil, dass es dann direkt im CSS verwendet werden kann (wie Du gleich sehen wirst).
Ich habe das Icon farblich und in der Grösse etwas angepasst und dann den generierten „<svg …“ Code kopiert:
Diesen SVG-Code wandeln wir z.B. mit diesem „URL-Encoder for SVG“ in eine sogenannte „data-URI“ um, damit wir es eben direkt in CSS verwenden können (und nicht zuerst als Datei hochladen und dann wieder via CSS laden müssen). Kopiere also jetzt den „Ready for CSS“ Code:
Diesen „background-image“ CSS-Code nutzen wir dann so auf unserer Website:
.site-content p a[target=_blank] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d2880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8'/%3E%3C/g%3E%3C/svg%3E");
background-position: 0px 7px;
background-repeat: no-repeat;
background-size: auto 20px;
display: inline-block;
padding-left: 22px;
}Kopiere den obigen CSS-Code und füge ihn ein:
Und so sieht es dann aus, oben ein normaler interner Link, unten ein Link der in einem neuen Fenster (also target=“_blank“ ) geöffnet wird:
Und hier nochmals ein kompletter Screenshot von der Website:
Natürlich gibt es noch einige Details und Effekte, die man nachmachen könnte. Aber diese 3 Beispiele sollten das Prinzip veranschaulichen.
Nächste Schritte…
Genau genommen wären wir jetzt natürlich noch nicht 100%ig fertig.
Einerseits habe ich jetzt einmal die Funktion weggelassen, um weitere ähnliche Artikel anzuzeigen (als Tipp: Dazu bräuchtest Du ein Plugin alà „Yet Another Related Posts Plugin (YARPP)„).
Auch habe ich die sogenannten „Breadcrumbs“ weggelassen (die Links unter dem Menü die anzeigen, wo man sich auf der Website befindet – also das:
Front | Digital | iOS 14.5 - Apple schränkt Tracking ein im neuen BetriebssystemFalls es Dich jetzt brennend interessiert wie die Breadcrumbs umgesetzt werden könnten, dann schreib einfach einen Kommentar und ich gebe gerne einen Schubs in die richtige Richtung 😉
Aber grundsätzlich geht es in diesem Artikel schliesslich um das Design, nicht um die ganze Funktionalität. Ein vollständiger 20min.ch Nachbau wäre natürlich nicht in einem Blog Artikel gemacht.
Und ganz generell könnte man sich jetzt um den Feinschliff des Designs kümmern und wie oben erwähnt weitere Details und „gewisse Etwas“ umsetzen.
Aber:
Das grundlegende Design von 20min haben wir damit wie ich finde ziemlich ähnlich nachgebaut. Und vor allem haben wir so ein Design erstellt, dass sich von vielen Standard WordPress Themes und Vorlagen unterscheidet.
Nur noch einmal als Erinnerung:
Das komplette Nachahmen einer einzelnen Website ist natürlich normalerweise nicht der Sinn der Sache, sondern sollte jetzt in diesem Artikel einfach als Beispiel und zur Demonstration dienen.
Aber:
Grundsätzlich ist das Prinzip, sich von aussergewöhnlich schönen Websites und Trends inspirieren zu lassen, der beste Weg, um selbst ein tolles Webdesign zu kreieren.
Das ist zumindest meine Meinung. Aber was denkst Du? Wie hat Dir dieser Artikel gefallen? Hättest Du Interesse an weiteren solchen Beispielen, in denen ich das Design von bekannten Websites nachbaue?
Dann lass es mich gerne in den Kommentaren wissen.