In diesem wikiHow zeigen wir dir, wie du eine Website gestaltest, die professionell aussieht und gut funktioniert. Während der Großteil des Designs Ihrer Website letztendlich Ihnen überlassen wird, gibt es einige wichtige Dinge zu tun und zu vermeiden, wenn Sie eine Website erstellen.
Schritte
Teil 1 von 2: So gestalten Sie Ihre Website
Schritt 1. Bestimmen Sie, ob Sie einen Website-Ersteller verwenden möchten
Websites, die von Grund auf neu erstellt wurden, erfordern ein ziemlich detailliertes Verständnis der HTML-Codierung, aber Sie können ganz einfach eine Website erstellen, indem Sie einen kostenlosen Hosting-Dienst wie Weebly, Wix, WordPress oder Google Sites verwenden. Website-Ersteller sind für Erstdesigner in der Regel viel einfacher zu verwenden als HTML.
- Wenn Sie sich entscheiden, Ihre eigene Website zu codieren, müssen Sie sowohl HTML- als auch CSS-Codierung lernen.
- Wenn es nicht attraktiv klingt, Zeit und Energie in die Erstellung Ihrer Website zu investieren, können Sie auch einen Website-Designer beauftragen, Ihre Website für Sie zu erstellen. Freiberufliche Designer können zwischen 30 US-Dollar pro Stunde und weit über 100 US-Dollar pro Stunde kosten.
Schritt 2. Planen Sie Ihre Site
Bevor Sie überhaupt einen Website-Ersteller öffnen, sollten Sie ungefähr wissen, wie viele Seiten Ihre Website haben soll, welchen Inhalt jede dieser Seiten haben sollte und wie das allgemeine Layout wichtiger Seiten wie der Startseite und der "Über" Seite.
Die Seiten Ihrer Website lassen sich möglicherweise leichter visualisieren, wenn Sie von jeder Seite grobe Bilder zeichnen, anstatt nur festzulegen, welcher Inhalt angezeigt werden soll
Schritt 3. Verwenden Sie intuitives Design
Auch wenn es etwas für frische Ideen zu sagen gibt, sollte das grundlegende Design Ihrer Website etablierten Richtlinien wie den folgenden folgen:
- Navigationsoptionen (z. B. Registerkarten für verschiedene Seiten) sollten oben auf der Seite angezeigt werden.
- Wenn Sie ein Menüsymbol (☰) verwenden, sollte es sich in der oberen linken Ecke der Seite befinden.
- Wenn Sie eine Suchleiste verwenden, sollte sie sich oben rechts auf der Seite befinden.
- Hilfreiche Links (z. B. Links zur Seite "Über" oder "Kontakt") sollten ganz unten auf jeder Seite stehen.
Schritt 4. Seien Sie konsequent
Unabhängig davon, welche Textschriftart, Farbpalette, Bilddesign und Designoptionen Sie wählen, stellen Sie sicher, dass Sie auf Ihrer gesamten Website dieselbe Entscheidung treffen. Es kann unglaublich erschütternd sein, eine Schriftart oder ein Farbschema für die "Info"-Seite zu sehen, während für die Startseite eine völlig andere verwendet wurde.
- Wenn Sie beispielsweise ausschließlich kühle Farben für die Startseite Ihrer Website verwenden, implementieren Sie auf der nächsten Seite keine hellen, knalligen Farben.
- Denken Sie daran, dass die Verwendung von lauten oder widersprüchlichen Farben, insbesondere wenn die Farben dynamisch (z. B. bewegt) angezeigt werden, bei einer kleinen Anzahl von Webbenutzern Epilepsie hervorrufen kann. Wenn Sie sich entscheiden, solche Farben auf Ihrer Website zu verwenden, stellen Sie sicher, dass Sie vor allen relevanten Seiten eine Epilepsie-Warnung hinzufügen.
Schritt 5. Navigationsoptionen hinzufügen
Das Platzieren von direkten Links zu wichtigen Seiten Ihrer Website oben auf der Startseite hilft dabei, Erstbesucher auf die wichtigen Inhalte zu lenken. Die meisten Website-Ersteller fügen diese Links standardmäßig hinzu.
Es ist wichtig, dass Sie auf jede Seite Ihrer Website zugreifen können, indem Sie durch die Optionen auf Ihrer Website klicken, anstatt nur über die Adresse der Seite erreichbar zu sein
Schritt 6. Verwenden Sie Farben, die sich ergänzen
Wie jede andere Art von Design basiert das Website-Design auf optisch ansprechenden Farbkombinationen; Aus diesem Grund ist es wichtig, Themenfarben auszuwählen, die zusammenpassen.
Schwarz, Weiß und Grau sind eine gute Kombination, wenn Sie nicht wissen, wo Sie anfangen sollen
Schritt 7. Ziehen Sie in Erwägung, ein minimalistisches Design zu verwenden
Minimalismus fördert kühle Farben, einfache Grafiken, Schwarz-auf-Weiß-Textseiten und so wenig Verschönerung wie möglich. Da Minimalismus nur wenige ausgefallene Elemente erfordert, ist es eine einfache Möglichkeit, Ihre Website ohne viel Arbeit professionell und attraktiv aussehen zu lassen.
- Viele Website-Ersteller haben ein "minimalistisches" Design, das Sie beim Einrichten Ihrer Website auswählen können.
- Eine Alternative zum Minimalismus ist "Brutalismus", der härtere Linien, helle Farben, fetten Text und minimale Bilder verwendet. Brutalismus hat weniger Anhänger als Minimalismus, aber je nach Inhalt Ihrer Website kann er Ihren Designanforderungen besser entsprechen.
Schritt 8. Treffen Sie einzigartige Entscheidungen
Gerade Linien und rastergesperrte Webelemente sind eine sichere Sache. Wenn Sie jedoch ein paar einzigartige stilistische Entscheidungen treffen, verleihen Sie Ihrer Website Persönlichkeit und helfen Ihrer Website, sich abzuheben.
- Scheuen Sie sich nicht, Trends zu trotzen, indem Sie Website-Elemente asymmetrisch platzieren oder überlappende Elemente verwenden, um ein mehrschichtiges Erscheinungsbild zu erzielen.
- Elegante, scharfe Ecken und eckige Elemente (auch als "kartenbasierte" Darstellung bekannt) sind zwar weniger günstig als abgerundete, weiche Elemente.
Teil 2 von 2: So maximieren Sie die Website-Leistung
Schritt 1. Nutzen Sie die Optimierungsoptionen für Mobilgeräte
Mobile Browser machen mehr Web-Traffic aus als Desktop-Browser, was bedeutet, dass die Aufmerksamkeit, die Sie der mobilen Version Ihrer Website widmen, mindestens der Entwicklung Ihrer Desktop-Website entsprechen sollte. Die meisten Dienste zur Erstellung von Websites erstellen automatisch eine mobile Version Ihrer Website, aber Sie sollten die folgenden Informationen für Ihre mobile Website beachten:
- Stellen Sie sicher, dass Schaltflächen (z. B. Site-Links) groß und leicht zu tippen sind.
- Vermeiden Sie die Implementierung von Funktionen, die auf Mobilgeräten nicht angezeigt werden können (z. B. Flash, Java usw.).
- Ziehen Sie in Erwägung, eine mobile App für Ihre Website erstellen zu lassen.
Schritt 2. Vermeiden Sie es, zu viele Fotos pro Seite zu verwenden
Sowohl Desktop- als auch mobile Browser können Schwierigkeiten haben, Seiten zu laden, die eine große Anzahl von Fotos oder Videos anzeigen. Während Bilder im Webdesign wichtig sind, kann die Verwendung von mehr als wenigen pro Seite zu unnötig langen Ladezeiten führen, die den Besuch der betreffenden Seite(n) verhindern.
Im Allgemeinen möchten Sie, dass die Seiten Ihrer Website in weniger als vier Sekunden geladen werden
Schritt 3. Fügen Sie eine "Kontakt"-Seite hinzu
Sie werden feststellen, dass praktisch alle etablierten Websites eine "Kontakt"-Seite haben, die Kontaktinformationen enthält (z. B. eine Telefonnummer und eine E-Mail-Adresse); Einige Websites haben sogar ein integriertes Frageformular auf dieser Seite. Durch das Hinzufügen einer "Kontakt"-Seite erhalten Website-Besucher eine direkte Kommunikationsverbindung zu Ihnen und bieten so eine Lösung für potenzielle Frustrationen.
Schritt 4. Erstellen Sie eine benutzerdefinierte 404-Seite
Wenn jemand eine bestimmte Seite Ihrer Website besucht, die entweder nicht eingerichtet wurde oder nicht existiert, wird eine Webseite mit dem Fehler 404 angezeigt. Die meisten Browser haben eine 404-Standardseite, aber Sie können Ihre möglicherweise in den Einstellungen Ihres Website-Erstellers anpassen. Wenn ja, stellen Sie sicher, dass Sie die folgenden Details angeben:
- Eine unbeschwerte Fehlermeldung (z. B. "Herzlichen Glückwunsch - Sie haben unsere Fehlerseite gefunden!")
- Ein Link zurück zur Homepage der Website
- Eine Liste häufig angezeigter Links
- Ein Bild oder Logo für Ihre Website
Schritt 5. Verwenden Sie nach Möglichkeit eine Suchleiste
Wenn Ihre Website-Erstellungsmethode das Hinzufügen einer Suchleiste zu Ihrer Website unterstützt, wird dies dringend empfohlen. Dadurch wird sichergestellt, dass Benutzer schnell zu einer bestimmten Seite oder einem bestimmten Element navigieren können, ohne sich durch Ihre Navigationsoptionen klicken zu müssen.
Suchleisten sind auch nützlich, wenn Ihr Publikum nach einem allgemeinen Begriff ohne Versuch und Irrtum suchen möchte
Schritt 6. Investieren Sie die meiste Zeit in Ihre Homepage
Wenn jemand auf der Startseite Ihrer Website ankommt, sollte er sofort den Kern des Themas Ihrer Website erhalten. Darüber hinaus sollten alle Elemente der Homepage schnell geladen werden, einschließlich Navigationsoptionen und eventueller Bilder. Ihre Homepage sollte folgende Aspekte aufweisen:
- Ein Call-to-Action (z. B. eine Schaltfläche zum Anklicken oder ein Formular zum Ausfüllen)
- Eine Navigationssymbolleiste oder ein Menü
- Eine einladende Grafik (z. B. ein durchgehendes Foto, ein Video oder eine kleine Gruppe von Fotos mit Begleittext)
- Keywords, die sich auf den Service, das Thema oder den Fokus Ihrer Website beziehen
Schritt 7. Testen Sie Ihre Website in mehreren Browsern auf mehreren Plattformen
Dies ist unglaublich wichtig, da verschiedene Browser Aspekte Ihrer Website möglicherweise unterschiedlich handhaben. Bevor Sie mit der Werbung für Ihre Website beginnen, versuchen Sie, Ihre Website in den folgenden Browsern auf Windows-, Mac-, iPhone- und Android-Plattformen zu besuchen und zu verwenden:
- Google Chrome
- Feuerfuchs
- Safari (nur iPhone und Mac)
- Microsoft Edge und Internet Explorer (nur Windows)
- Der integrierte Browser auf mehreren verschiedenen Android-Telefonen (z. B. Samsung Galaxy, Google Nexus usw.)
Schritt 8. Fahren Sie mit der Aktualisierung Ihrer Website fort, wenn sie älter wird
Designtrends, Links, Fotos, Konzepte und Keywords ändern sich im Laufe der Zeit. Sie müssen also weiterhin Änderungen an Ihrer Website vornehmen, um auf dem neuesten Stand zu bleiben. Dies erfordert, dass Sie die Leistung Ihrer Website zusammen mit anderen ähnlichen Websites mindestens alle drei Monate (vorzugsweise häufiger) überprüfen.
Einfache HTML-Hilfe
Beispiel-Webseite mit HTML
Unterstütze wikiHow und alle Proben freischalten.
HTML-Spickzettel
Unterstütze wikiHow und alle Proben freischalten.
Beispiel einer einfachen Webseite
Unterstütze wikiHow und alle Proben freischalten.
Tipps
- Die Barrierefreiheit von Websites ist ein weiterer wichtiger Aspekt der Website-Entwicklung. Dazu gehören beispielsweise Untertitel für hörgeschädigte Zuschauer, Audiobeschreibungen für blinde Besucher und Warnungen vor Lichtempfindlichkeit, wenn Ihre Website potenziell anfallsauslösende Effekte verwendet.
- Die meisten Website-Ersteller verfügen über eine Reihe von Vorlagen, mit denen Sie das Layout und Design Ihrer Website festigen können, bevor Sie Ihre bevorzugten Elemente hinzufügen.
Warnungen
- Die meisten Website-Ersteller sind kostenlos; Wenn Sie jedoch eine eigene Domain verwenden möchten (z. B. "www. Ihrname.com" anstelle von "www. Ihrname.wordpress.com"), müssen Sie eine monatliche oder jährliche Gebühr zahlen.
- Vermeiden Sie Plagiate und beachten Sie alle Urheberrechte: Fügen Sie keine zufälligen Bilder aus dem Web oder sogar Strukturelemente ohne Erlaubnis hinzu.
