1. Wie plane ich meine eigene Homepage?
1.1 - Die Grundlagen
Beginne mit den folgenden Fragen. Es geht darum, dass Du Deine Idee oder Dein Projekt klar definierst. Schreibe zu jedem Punkt ein oder zwei Sätze. Nicht mehr!
- Was ist mein Angebot?
- Was will ich auf meiner Website zeigen?
- Was ist mir persönlich wichtig zu zeigen?
- Was ist mein Verkaufs Argument?
- Worin differenziert sich mein Angebot von meiner Konkurrenz?
- Warum soll sich ein Besucher für Dein Angebot entscheiden?
- Wen will ich ansprechen? (Zielgruppe)
- Brauche ich einen Online Shop/e-commerce?
Jetzt hast Du das wichtigste schon geschafft. Denn alle weiteren Punkte basieren auf diesem Grundgerüst.
Domainname:
Jetzt musst Du noch eine eigene Domain für Deine eigene Website finden.
Ich empfehle Dir dafür Godaddy zu wählen.
Und zwar aus folgenden Gründen. Du kannst über Godaddy supereasy ein Microsoft Exchange Postfach eröffnen und die setzten die richtigen Einstellungen für Dich.
Zusätzlich kannst Du aus extrem vielen Domainendungen wählen. Und mit den meisten Homepage Baukastensystemen kannst Du Deine Domain mit einem Klick verknüpfen.
Bewahre die Zugangsdaten zu Deiner eigenen Domain sehr gut auf! Es ist superumständlich, wenn Du diese verlierst.
Hast Du einen tollen Domainnamen gefunden und gekauft, geht ’s zum nächsten Schritt. Nun kannst Du mit der Struktur Deiner Website beginnen.
1.2 - Am Anfang geht es um die Struktur Deiner eigenen Website
Ich rate Dir mit Papier und einem Stift zu beginnen. Alternativ kannst Du auch eine Mindmap erstellen und beginnst einen Stammbaum zu zeichnen.
Die Wurzel deiner eigenen Homepage ist die Einstiegsseite oder Home genannt. Das ist das erste, was die Besucher sehen, wenn sie Deine URL (Uniform Resource Locator) eingeben. Mit der URL bezeichnet man die Adresse, die Du oben im Browser eingibst.
Dann kommen die Äste (Unterseiten) aus dieser Wurzel. Dazu solltest Du Dich Folgendes fragen:
- Wie strukturiere ich mein Angebot und mache es jemandem, der null Ahnung hat, vertraut?
Du bist sicher mit Deinem Projekt vertraut und hast Dir schon Gedanken gemacht, sonst würdest Du ja auch nicht Deine eigene Website bauen wollen.
Doch genau jetzt ist es wichtig, dass Du dich zurücklehnst und Dich fragst, wie erkläre ich diese Idee oder dieses Projekt einem Aussenstehenden, der null Ahnung davon hat. Vermutlich hast Du auch schon in Deinem Freundeskreis darüber gesprochen. Erinnere Dich genau daran, was Dich die Menschen gefragt haben.
- Welche Unterseiten brauche ich zwingend?
Du kannst den ersten Ast zeichnen, der zu einem Kontakt führt. Das braucht jeder.
Dann kannst Du Dir auf die ersten Fragen von Start beziehen. Was ist mein Angebot?
Ich habe Dir ein bespiel gebaut für ein fiktives Massage Studio. Deren Angebot ist Hot Stone Massage, Öl Massage und Sport Massage. Dies könnte dann so aussehen.
Nehmen wir an, Du willst auch noch die Produkte, die im Massage Salon verwendest, gewinnbringend verkaufen. Also kommt nochmals ein Ast mit Shop.
Jetzt bietest Du in diesem Shop unterschiedliche Produkte an. Das könnte dann so aussehen.
Nun willst Du ja auch diese Produkte verkaufen und Deine Website Besucher darauf hinweisen.
In diesem Fall würde ich auf den jeweiligen Produkteseiten gleich einen Link einbauen, der auf das jeweilige Produkt verweist, das passend ist.
Jetzt rate ich Dir noch einen Blog zu erstellen, wo Du mehr Wissen dem Benutzer vermitteln kannst.
Ich komme später noch auf diesen Blog genau zu sprechen.
Zusätzlich brauchst Du noch eine Seite, wo Du Dich vorstellst und dem Besucher Dein Know-how erklärst.
Das würde dann so aussehen:
Sicher cool wäre auch noch eine Seite, wo Du auf die Geschichte der Massage eingehen würdest. Diese könnte ja auch gleich mit den Angeboten verlinkt sein.
Ich glaube Du verstehst, was ich meine. Vermutlich wird Dein Stammbaum noch viel komplexer und umfangreicher. Doch hier geht es mir darum, Dir einen Weg zu zeigen, der Dich erfolgreich ans Ziel Deiner eigenen Website bringt.
Ich habe diese Mindmap mit dem kostenlosen Tool MindMup2 erstellt. Das ist noch cool und integriert sich in Google Drive und man arbeitet im Chromebrowser.
Umso länger Du an dieser Mind Map arbeitest, umso klarer wird der Aufbau Deiner Webseite. Vermutlich kommen Dir dann auch noch coole Ideen an, die Du am Anfang noch nicht gedacht hast. Wenn Du damit zufrieden bist, gehts weiter zum nächsten Punkt.
2. Wie designe ich eine Website?
Jetzt geht’s um die Farben, Schriftarten, Bilder für den Look/Style, die Deine Website bekommen soll.
Farben für Deine Website
Da spielen verschiedene Faktoren eine Rolle. Einerseits kannst Du Dich auf die Frage: Wen will ich ansprechen? (Zielgruppe) von ganz am Anfang berufen.
Anderseits spielt auch Dein Angebot eine wichtige Rolle. Du würdest ja die Website für die Schweizer Armee sicher nicht in Pink gestalten.
Eine superhilfreiche Seite ist hier von Adobe, wo Farben nach den verschiedenen Trends geordnet sind. Ich rate Dir, da mal zu stöbern und Dich zu inspirieren. Ich finde das eine wirklich tolle Seite von Adobe.
Wenn Du ein Collorset gefunden hast, dass Dir und zu Deinem Angebot passt, kannst Du es herunterladen. Wichtig dabei ist, dass Du die Hexadezimalwerte der Farben speicherst. Ich habe sie im unten stehenden Screenshot rot umrandet. Diese brauchst Du später.
Schriftarten für Deine Website
Dazu gehst Du am besten auf die Seite von Google Fonts. Diese Schriften kannst Du bei einem Website Baukasten System sicherlich einbinden. Das ist auch wieder eine Welt für sich.
Hier ist der Link zu Google Fonts. Dies ist auch wieder eine tolle Seite, die Google gebaut hat und macht es easy, eine gute Schrift zu finden. Du kannst auch mit zwei verschiedenen Schriften arbeiten, so wie ich es auf meiner Website mache. Für grosse Titel und Navigation benutze ich die Graduate und für Fliesstexte die Roboto.
Bitte wähle einfach kein Schrift die Handschrift simuliert oder sonst zu verspielt ist. Das ist ganz klar amateurhaft! Achte auch, dass die Schrift in kleiner Schriftgrösse gut lesbar ist. Doch das kannst Du im Google Font Tool unter Type Tester alles ausprobieren. Dort kannst Du auch die Farben in Hexadezimalwerten eingeben und schauen, wie die Schrift auf den von Dir gewählten Farben aussieht.
Wo finde ich Bilder für meine eigene Website?
Entweder hast Du schon Bilder für Deine Website oder Du brauchst noch Bildmaterial. Achte darauf, dass Du Top Bild Material verwendest. Das macht enorm viel aus und Deine eigene Website sieht sofort wesentlich besser aus mit gutem Bildmaterial.
Ich habe einen eignen Blogbeitrag mit dem Titel Bildsprache muss nicht teuer sein geschrieben. Du findest diesen hier.
Envato Market
Eine sehr umfangreiche Sammlung zu vernünftigen Preisen ist der Envato Market. Dieser bietet nicht nur Stock Bildmaterial, sondern auch Video, Grafik und Musik. Sogar tolle Vorlagen und Effekte für Adobe After Effects sind da zu finden. Für relativ wenig Geld bekommt man unglaublich tolles Material und Du bist lizenzrechtlich auf der sicheren Seite. Die meisten Bilder sind schon ab einem Betrag von US$ 5 zu haben. Niemand will eine Klage wegen Urheberrechtsverletzung. Einer der grossen Vorteile bei Envato (Photodune) ist, dass man Serien findet. Also dieselben Sujets in unterschiedlichen Perspektiven oder Anordnungen. Was natürlich extrem hilfreich ist.
Für meine Webprojekte verwende ich auch Elemente aus den Abteilungen Grafik und Video. Ich kann diesen Marketplace nur empfehlen. Ist nicht gratis, doch TOP Material.
Pexels
Als Nächstes möchte ich Dir Pexels vorstellen. Pexels ist eine super Bild- und Video Datenbank und ist absolut gratis. Das Interessante an Pexel ist, wie gut die Bilder sortieren und es wird sogar nach Farbe sortiert. Du findest hier sicher ganz tolles Material, der Nachteil liegt nur darin, dass Serien schwierig zu finden sind oder schlichtweg nicht existieren. Doch für einzelne Bilder auf Deiner Webseite absolute Klasse. Auch supercool ist die Abteilung Videos, diese sind auch in toller Qualität vorhanden und reichen definitiv zum Einbinden auf Webseiten oder zum weiterverarbeiten in Adobe Premier oder After Effects.
Jetzt hast Du schon wieder ein grosser Schritt für Deine eigne Website geschafft.
Kaufe die Bilder noch nicht! Wenn sie was kosten, speichere sie mit dem Wasserzeichen.
3. Welches Programm für Webdesign?
Hier kommt die Frage, wo sich die Meinungen scheiden. Ich gehe davon aus, dass Du keine oder wenig Programmierkenntnisse oder sonstige Vorkenntnisse hast, um Deine eigene Website zu erstellen.
In diesem Fall empfehle ich Dir mit einem Baukastensystem zu arbeiten. Da sind die beiden Marktführer Wix oder Squarespace.
Wix ist ein einsteigerfreundlicher Homepage-Baukasten mit Templates, die sich sehr flexibel anpassen lassen.
Squarespace ist ebenfalls modern, aber nicht so einfach in der Bedienung.
Squarespace hat wiederum ein besseres Blogging-Tool auf als Wix und bietet einen guten Support.
Beide sind drag-and-drop Systeme mit Designvorlagen und die Seiten sind im responsive Design für mobile Geräte ausgelegt. Das Webhosting (Webspace) ist auch mit dabei. Du kannst damit auch einfache Art und Weise Deine Website erstellen. Sozusagen Webdesign für jedermann.
Du hast die Wahl der Qual. Ich persönlich würde auf Squarespace tendieren, doch bitte schaue Dir die beiden Lösungen an. Doch Support und Blog sind zwei sehr wichtige Faktoren für mich.
Nimm mich bitte nicht beim Wort, denn ich kenne beide Systeme nur ganz oberflächlich vom Hören und sagen!
Auf jeden Fall solltest Du einen der beiden Homepage-Baukasten wählen. Beide bieten auch die Möglichkeit, einen Onlineshop/E-Commerce zu integrieren. Erwarte von den Shops nicht zu viel, dafür gibt es spezielle Shop, Webseiten Baukastensysteme wie Shopify.
Die sind 100% auf Shop ausgerichtet, jedoch auch wesentlich komplexer im Unterhalt und zum Einrichten. Doch das ist vermutlich nicht, was Du suchst, wenn Du diesen Beitrag liest.
Wähle entweder Squarespace oder Wix für Dein Content Management System und Du erzielst mit relativ wenig Aufwand ein akzeptables Ergebnis. Klar sind Dir Limitierungen gesetzt, doch anders würde ein Baukastensystem auch nicht funktionieren. Diese Systeme führen Dich in einfachen Schritten an dein Ziel und funktionieren auf allen Endgeräten.
Von WordPress würde ich in Deinem Fall die Finger lassen, da dieses System enorm anfällig für Hacker Attacken ist und Du dies dauernd aktualisieren musst, um sicher zu sein. Auch benötigst Du für WordPress wesentlich mehr Know-how, um das in den Griff zu kriegen.
Ich persönlich arbeite mit Webflow, aber auch dieses System ist nicht easy in der Bedienung und ohne Erfahrung rate ich Dir auch davon ab. Obwohl ich es liebe und alle meine Webdesign Projekte in Webflow umsetze. Doch das ist auch für professionelle Webdesigner gemacht, und nicht, um mal schnell die eigene Website online zu schalten.
Da liegen auch die Unterschiede zwischen einer professionellen Website und eben was selbstgemachten. Bitte verstehe mich nicht falsch. Doch ich verdiene mein Geld mit Webflow Webdesign, das ist mein Beruf.
So jetzt wo Du Dich entschieden hast, welches System Du verwenden willst, geht’s weiter zum nächsten Schritt.
4. Wie beginne ich nun mit meinem Homepage-Baukasten?
Jetzt kannst Du bei Deinem Homepage-Baukasten System ein Template auswählen, das Dir gefällt und das Deinen Anforderungen entspricht. Auch ist die Sitemap, die Du vorhin erstellt hast, hilfreich. Hast Du eine Designvorlage gefunden, kannst Du diese auswählen und mit den Anpassungen beginnen.
Du hast ja schon Deine Farbkarte von Adobe und kannst nun die Hexadezimalwerte bei den Farbanpassungen einfügen. Auch kannst Du die Schriften auf die Schriften von Google setzten und schon bist Du wieder einen grossen Schritt weiter.
Jetzt kannst Du die Navigation anlegen. Dafür hast Du ja auch Deine Mind Map und das sollte nun raz-faz gehen.
Nun rate ich Dir mit einer Inhaltsseite zu beginnen und noch nicht mit der eigentlichen Homepage (Einstiegsseite). Spiele mit den Bildern, die Du hast und werde mit dem Homepage Baukasten vertraut. Du kannst alles immer wieder löschen oder von vorne beginnen. In dieser Phase mache ich mir noch keine Sorgen um die Texte. Ich verwende da Blindtexte. Dann steht was drin, aber der Designprozess wird nicht unterbrochen.
Hier ist eine super Quelle für Blindtexte, die ich verwende.
Ich nehme an, dass Du die Bilder zuschneiden musst. Hierfür empfehle ich Dir Adobe Express, eine kostenlose Lösung von Adobe. Du musst Dich lediglich registrieren.
Einfach dran bleiben und weitermachen ist die Devise.
Baue Deine Kontaktseite mit einem Kontaktformular und die Seite über Dich und kümmere Dich am Schluss um die Einstiegsseite. Das sollte mit dem Homepage Baukasten alles relativ fix vor sich gehen. Und sonst einfach Google fragen, Du bist sicher nicht der Einzige der eine Frage hat, wenn mal was nicht tut, wie es soll.
Dann würde ich mich an die Texte machen. Falls Du nicht gut im Schreiben bist, frage einen Freund oder eine Freundin, die Dir dabei helfen kann. Eine gute Seite, um die Texte auf Fehler zu prüfen, ist die Website von Duden. die ist umsonst für eine beschränkte Anzahl Wörter. Ein monatliches Abo kostet auch nicht alle Welt. Dann kannst Du mehr Text aufs mal überprüfen lassen.
Danach baue Dein Grundgerüst für Deinen Blog auf. Bitte verstehe mich nicht falsch, ich will aus Dir keinen Blogger machen. Doch ein Blog bietet die ideale Plattform, um Deinen Websitebesuchern zu zeigen, dass Du eine Ahnung von Deiner Materie hast.
Und der zweite und fast wichtigere Vorteil vom Blog ist, dass dieser Dir bei der Suchmaschinenindexierung enorm hilft. Nun geht's zum nächsten Kapitel, worin ich genauer darauf eingehe.
Wie wird meine neue Website gefunden?
SEO/Suchmaschinenoptimierung schnell erklärt.
Ich rate Dir, Deine neue Website mit Google Analytics und der Google Search Console zu verknüpfen. Dann hast Du einen besseren Einblick und Du siehst von wo Deine Besucher kommen und wonach sie suchen. Vermutlich kannst Du die jeweiligen IDs in Deinem Baukasten System eingeben.
Dann würde ich die eingebauten Tools von Wix oder Squarespace mal genau unter die Lupe nehmen und die nötigen Anpassungen dort vornehmen.
Danach kannst Du beginnen, an Deinem Blog zu schreiben und Artikel, die die nötigen Schlüsselwörter beinhalten, zu posten. Diese Texte sollten mindestens 1000 Wörter beinhalten.
Ich habe einen eigenen Blogbeitrag über die Suchmaschinenoptimierung geschrieben, wo ich detailliert auf die ganze SEO Geschichte eingehe. Am besten liest Du den mal durch.
Social Media verwenden um deine eigene Homepage zu pushen.
Social Media verwenden, um deine eigene Homepage zu pushen.
Falls Du noch kein Instagram-Facebook Konto hast, empfehle ich Dir eines oder mehrere zu erstellen und diese Social Media Kanäle zu nutzen um Deine neue Website bekannt zu machen. Das sind einfache SEO (Suchmaschinenindexierung) Massnahmen, die relativ schnell erfolgreich sind.
Du siehst, Website erstellen, leichtgemacht.
Beachte, dass Deine eigene Homepage nie fertig ist und Pflege und Wartung braucht. Hier habe ich noch einen Blogbeitrag betreffend Updates Deiner Website.
Falls Du einen Onlineshop eingerichtet hast, kontrolliere regelmässig ob dieser auch noch funktioniert und überprüfe ab und zu die Kontaktformulare, indem Du Dich selber kontaktierst. Schreibe fleissig an Deinem Blog (wird zum Blogger) und schaue, dass Dein SEO passt.
Welches der beiden vorgeschlagenen content-management-system Du schlussendlich verwendest, spielt nicht so eine grosse Rolle. Der Inhalt deiner eigenen Website zählt. Das ist das Fleisch am Knochen.
Ich hoffe, ich konnte Dir hiermit einige Webdesign Tipps für einen erfolgreichen Internetauftritt auf den Weg geben, wie Du Deine Website erstellen kannst.
Hier noch ein Link zu den Webdesign Trends
Zu Meinem Webdesign Angebot
