Wenn du ein Unternehmen hast, brauchst du eine Website. Da du gerade einen Artikel darüber liest, wie man eine Website erstellt, nehme ich an, dass du das bereits weißt.

modern science website design
von 2ché für sparkingmatt

Dir ist vermutlich klar, dass es zwar ziemlich einfach ist, das Internet zu benutzen, aber verdammt kompliziert, eine Website zu designen und zu erstellen. Sie soll gut aussehen. Sie soll leicht zu benutzen sein. Die Leute sollen sie auf Google finden. Sie soll dir dabei helfen, aus Besuchern Kunden zu machen. Wie aber machst du das alles? Und noch wichtiger, wie machst du es richtig?

Unser ultimative Guide für Webdesign wird dich Schritt für Schritt durch den Prozess führen, wie man eine Website erstellt:

Was du wissen musst, bevor du loslegst

Lerne, wer in der Welt des Webdesigns und der Entwicklung wer ist

web design with grid of diverse faces
von Mike Barnes

Wenn du ein Logo für deine Marke designst, ist es ziemlich einfach, eine einzige Person zu engagieren, die das erledigt und dir ein tolles Logo liefert. Das ist beim Erstellen einer Website nicht unbedingt der Fall. Während es Leute und Agenturen gibt, die eine Komplettlösung anbieten, ist es wahrscheinlicher, dass du mit mehr als nur einer Person zusammenarbeiten wirst. Hier sind ein paar Leute, die dir auf deiner Reise möglicherweise begegnen werden:

Webdesigner sind Designer. Sie nehmen deine Ideen und machen aus ihnen hübsche (oder krasse) Mockups, die zeigen, wie deine zukünftige Website aussehen wird. Dies wird in der Regel in Adobe Photoshop oder einem ähnlichen Programm gemacht.

UX (User Experience) oder UI (User Interface) Designer konzentrieren sich darauf, welche Auswirkungen dein Layout auf deine Nutzer hat. Sie helfen dir zum Beispiel bei der Entscheidung, welche Buttons wo sein sollen, damit mehr Leute sie anklicken, oder wie du deine Navigation so strukturierst, dass der Fluss deiner Seite so nahtlos wie möglich wird. (Es gibt einen Unterschied zwischen UX und UI. Dieser Artikel erklärt ihn ziemlich gut.) Oftmals gibt es Überschneidungen zwischen UX/UI Designern und Webdesignern. Falls du Geld sparen möchtest, sollte es kein Problem sein, einen Freelancer zu engagieren, der beides kann.

Webentwickler – manchmal auch als Programmierer oder Coder bezeichnet – sind magische Leute, die die Sprache der Computer sprechen. Sie nehmen das hübsche (oder krasse) Mockup des Designers und übersetzen es in eine Programmiersprache, damit es im Web angezeigt werden kann. Um die Sache noch komplizierter zu machen, gibt es viele verschiedene Programmiersprachen und die meisten Entwickler spezialisieren sich auf eine oder ein paar.

Frontend-Entwickler spezialisieren sich auf die Dinge, die wir sehen, wenn wir eine Website betrachten (z. B. Bilder, Text. Animationen, Dropdown-Menüs, Seitenlayout etc.)

Backend-Entwickler hingegen spezialisieren sich auf das, was hinter den Kulissen passiert, und sind notwendig, wenn deine Website mit einer Datenbank kommunizieren muss. (Wenn du einen Warenkorb oder Nutzerprofile hast oder selbst Inhalte hochladen willst, wirst du eine Datenbank brauchen.)

SEO-Spezialist, Content Strategist und Autoren oder Content Writer sind auch Experten, die du eventuell für deine Website brauchen wirst. Sie können dir dabei helfen herauszufinden, was auf deiner Seite sein soll, damit die richtigen Leute sie finden (über Suchmaschinen) und sich dazu entscheiden, etwas zu kaufen, wenn sie schon mal da sind. 

Erwerbe einen Domainnamen und Hosting

Als erstes musst du – genau wie bei einem richtigen Geschäft – eine Location mieten, wenn du eine Website aufbaust.

switch data center
Beim Webhosting mietest du einen Server in einem Datencenter wie diesem in Nevada. Via switch.com.

Webhosting ist der physische Ort, wo sich alle Teile deiner Website befinden werden. All die Bilder, Texte und Datenbanken erfordern tatsächlich einen physischen Server, um sie zu hosten. Obwohl du dir auch einen eigenen kaufen und ihn in dein Büro/Haus/Garage stellen kannst, mietet die große Mehrheit der Menschen und Unternehmen einen Serverplatz mittels eines Unternehmens. Für das Hosten bezahlt man in der Regel monatlich. Die meisten Unternehmen zahlen dafür zwischen 5-25 € im Monat. Die Kosten können aber wesentlich höher liegen, wenn du viele Daten hast. Hier ist eine Liste mit empfohlenen Webhosting-Unternehmen, du solltest trotzdem noch mal Rücksprache mit deinem Webentwickler halten, bevor du etwas kaufst (da er möglicherweise einen Anbieter bevorzugt).

Dein Domainname ist das, was die Leute in ihren Browser eingeben, um auf deine Seite zu gelangen (z. B. 99designs.de). Typischerweise handelt es sich um deinen Unternehmensnamen. Um einen Domainnamen zu erhalten, musst du ihn bei einem Anbieter registrieren. Du zahlst dafür eine kleine Gebühr (in der Regel weniger als 10€/Jahr), um den Namen zu kaufen und zu behalten. Die meisten Hosting-Anbieter bieten auch Domainnamen an, daher fährst du mit ihnen grundsätzlich am besten, da es sich dort am einfachsten einrichten lässt.

Und schließlich wirst du deinen Domainnamen auf deine Server verweisen müssen. Das bedeutet, dass du im Grunde dem Internet sagst, dass es auf diesem Server nachschauen soll, wenn jemand deine Domain in den Browser eingibt, um die richtigen Bilder und Text zu finden, die dargestellt werden sollen. Obwohl dieser Prozess nicht all zu kompliziert ist, kann er durchaus verwirrend sein. Diesen Schritt könntest du selbst versuchen (Der Kundenservice deines Webhosters kann dir dabei helfen), aber auch dein Webentwickler kann dir dabei problemlos helfen.

Überlege dir die Struktur und sammle den Content für deine Website

Dein Webdesigner oder -entwickler wird nicht die „Über uns“-Seite auf deiner Website für dich schreiben oder Fotos von deinen Produkten für deinen Store machen. Du musst jeglichen Content sowie die grundsätzliche Struktur deiner Seite bereitstellen.

animation website
von Gil Fadilana

Für die Struktur musst du dir überlegen, welche Seiten du brauchst. Zu den üblichen gehören:

  • Homepage
  • „Über uns“ und/oder Kontaktseite
  • Blog
  • Produktverzeichnis
  • Individuelle Produktseiten
  • Allgemeine Geschäftsbedingungen
  • Galerie
  • Landingpages/Marketingseiten für Werbung

Für jede dieser Seiten muss ein Layout und Design erstellt werden und jede wird Inhalte brauchen.

Zu diesem Zeitpunkt musst du noch keine fertigen Inhalte haben, aber du musst eine Vorstellung davon haben, welche Inhalte du auf deiner Seite möchtest, und einen Plan, wie du sie bekommst. Musst du dir Zeit nehmen, Texte zu schreiben (oder jemanden engagieren dies zu tun)? Solltest du einen Fotografen engagieren, um Produktfotos zu machen? Du musst alle eigenen Bilder (wie dein Logo oder Fotos von deinem Team) für die Seite bereitstellen, aber ein Webdesigner kann dir wahrscheinlich dabei helfen, Stockfotos zu finden, wenn du möchtest.

Was sind Stockfotos (Und wie benutzt man sie richtig?) ->

Pro-Tipp: Dein Designer (besonders wenn er Erfahrung mit UX/UI hat) hat vielleicht tolle Ideen für Inhalt und Struktur, an die du bisher nicht gedacht hast. Es lohnt sich wahrscheinlich schon zu einem frühen Zeitpunkt, mit ihm darüber zu reden.

Bestimme, welche Funktionen du benötigst

Was soll passieren, wenn jemand deine Website besucht? Sollen sie nur Informationen über dein Produkt oder Service wie beispielsweise Telefonnummer oder Öffnungszeiten erhalten? Müssen sie etwas kaufen können? Ist ihr vorrangiges Ziel, Blog-Artikel zu lesen oder etwas zu lernen? Werden sie ein Formular für ein Preisangebot ausfüllen? Sollen sie Nutzerprofile erstellen und ihre eigenen Informationen hochladen können?

Welche Funktionen du benötigst wird darüber entscheiden, wie deine Seite entwickelt werden kann und mit wem du arbeiten musst. Sie werden auch einen großen Einfluss auf dein Budget haben, also musst du sie vorher geklärt haben, um genaue Preisangebote zu bekommen.

Verstehe, was ein CMS ist, und entscheide, ob du eines brauchst

Docly dashboard
Benutzerdefiniertes CMS für Dolcy von SpoonLancer

Ein CMS (Content Management System) ist eine Datenbank und Webanwendung. Im Wesentlichen ermöglicht es Nutzern (wie dir und deinen Kollegen/Angestellten), Inhalte auf verschiedenen Teilen deiner Seite hochzuladen. Wenn du auf deiner Website regelmäßig Text bearbeiten oder Fotos ändern möchtest und du nicht weißt, wie man programmiert, wirst du ein CMS benötigen.

Es gibt viele CMS-Optionen, darunter fantastische, vorkonfigurierte Optionen für gängige Sachen (z. B. WordPress zum Bloggen, Shopify für eine E-Commerce Seite, Six zum Erstellen von Profilen). Wenn du aber eine erweiterte Funktionalität benötigst (wenn du beispielsweise glaubst, das nächste Facebook, Uber oder 99designs aufzubauen), wirst du ein maßgeschneidertes CMS entwickeln lassen müssen.

Wie du deine Website erstellst

Vorlagenseiten und Builder

Plattformen für DIY-Webvorlagen haben in den letzten zehn Jahren unglaublich an Beliebtheit gewonnen. Du hast bestimmt schon von einigen gehört. Zu den bekanntesten gehören: Squarespace, Shopify, Wix und Weebly. Jede Plattform hat ihre eigene Besonderheit (Shopify z. B. konzentriert sich auf E-Commerce Seiten) und ihre eigenen Vorlagen, aus denen du wählen kannst.

wix templates
Eine Reihe von Vorlagen auf Wix.

Vorteile:

  • Günstigste Optionen
  • Alle sind CMS, die dir Kontrolle darüber geben, was auf deiner Seite ist

Nachteil:

  • Du bist auf ihre Vorlagen und ein paar individuelle Änderungsmöglichkeiten beschränkt (deine Seite wird also wie viele andere aussehen, nicht unbedingt zu deiner Marke passen und du hast nicht viel Kontrolle über die Funktionalität)

Engagiere einen Freelancer für eine individuelle Lösung

interior design website
Individuelles Website-Design von Mike Barnes für Designs Direct.

Wenn du mehr Kontrolle über das Aussehen und die Funktionalität deiner Seite haben möchtest, engagierst du am besten einen oder mehrere Freelancer, die dir dabei helfen. Diese Option eignet sich sehr gut, um zu einem guten Preis genau das zu bekommen, was du möchtest, erfordert aber, dass du ein bisschen mehr selbst Hand anlegst. Engagiere freiberufliche Designer für eine Hybridlösung.

Wenn du einen individuellen Look möchtest, aber nicht in eine komplett individuelle Entwicklung investieren möchtest, hast du Glück! Es ist möglich, mit einer vorgefertigten Vorlage zu beginnen und diese mit deiner eigenen Vorlage anzupassen.

wedding video wordpress design
Ein WordPress-Theme von vyncadq für Nick Eilerman Films

Eine der beliebtesten Optionen dafür ist, eine Website auf WordPress zu erstellen. Während es anfangs nur eine Plattform zum Bloggen war, ist WordPress mittlerweile das bekannteste CMS im gesamten Netz (circa 30% aller Seiten laufen über WordPress). Man kann alles nach seinen Wünschen anpassen und es wächst mit deinem Unternehmen. Es gibt Tausende und Abertausende Vorlagen, aber man kann auch seine eigene entwerfen, was es zur perfekten Hybridlösung macht.

Du kannst einen Designer engagieren, der Themes für WordPress entwirft, um dir eine wunderschöne, einzigartige Website erstellen zu lassen, die zu deiner Marke passt, und WordPress für die Backend-Datenbank nutzen.

Dies ist auch auf diversen anderen Vorlagen-Seiten möglich (beispielsweise kannst du individuelle Vorlagen für Shopify oder Squarespace erstellen oder vorhandene anpassen). Wenn du also lieber eine dieser Plattformen nutzen möchtest, ist das auch möglich. Beachte aber, dass in jedem Fall das Design noch in die Programmiersprache übersetzt werden muss, also frage deinen Designer, ob er das tun kann. Ansonsten musst du einen Entwickler engagieren.

Vorteile:

  • Gibt dir eine erweiterte Funktionalität (die bei Plattformen wie WordPress oder Shopify bereits eingebaut sind) zu niedrigeren Kosten
  • Du erhältst ein individuelles Design, daher ist deine Seite wunderschön und passt zu deiner Marke

Nachteile:

  • Du musst eventuell dennoch sowohl einen Designer als auch einen Entwickler engagieren

Engagiere eine Agentur für eine Komplettlösung

Buhv designs portfolio
Buhv ist eine Webdesign-Agentur mit Sitz in Denver.

Agenturen für Webdesign und Entwicklung sind Experten in dem, was sie tun. Sie sind nicht nur in der Lage, dir dabei zu helfen, die richtigen Entscheidungen zu treffen, sondern können dich auch auf dem Weg vom Wireframe bis zur komplett fertig entwickelten Seite begleiten. All das hat natürlich seinen Preis. Es ist eine tolle Option für Unternehmen mit komplexen Anforderungen oder solche, für die die Kosten weniger eine Rolle spielen.

Vorteile:

  • Bereitet am wenigsten Kopfzerbrechen; du arbeitest mit Experten, die dich durch den gesamten Ablauf begleiten

Nachteile:

  • Es wird wahrscheinlich sehr teuer

Wie du eine individuelle Website in 7 Schritten erstellst

1. Bestimme, was du brauchst, und engagiere einen Designer

Hast du sich bereits für einen Domainnamen entschieden? Weißt du, welche Funktionen du benötigst? Hast du eine Liste mit den Seiten, die designt werden müssen? Hast du einen Plan, woher du die ganzen Inhalte bekommst, um deine Seite zu füllen?

Großartig! Dann ist es an der Zeit, einen Designer zu engagieren. Um den richtigen zu finden, musst du dir Portfolios ansehen. Denke über die Persönlichkeit deiner Marke nach und entscheide, ob der Designer vom Stil her passt. (Willst du beispielsweise etwas Ausgefallenes und Modernes oder etwas Lustiges und Verspieltes?) Es ist in der Regel eine gute Idee, nach Designern zu suchen, die Erfahrung mit deiner Branche oder der bestimmten Art von Seite haben, nach der du suchst. Wenn du Fotograf bist, suche nach Designern, welche Galerien in ihren Portfolios haben, wenn du Waren verkaufst, suche nach einem, der Erfahrung mit anderen E-Commerce-Unternehmen hat.

Hier sind ein paar unserer beliebtesten Webdesigner:

Top Level
5.0
( 46 )
  • Webdesign
  • WordPress Design
  • Sonstiges Design
  • Landing Page Design
  • Etiketten
  • Postkarten, Flyer & Printdesign
  • Sonstiges App oder Webdesign
  • Visitenkarte
  • E-Mail
  • Werbeschilder
  • Verpackungen
  • Print- oder Verpackungsdesign
  • Powerpoint Template
  • Sonstiges Grafikdesign
  • App Design
  • Facebook Cover
  • Banner Design
Top Level
5.0
( 43 )
  • Webdesign
  • WordPress Design
  • App Design
  • Sonstiges App oder Webdesign
  • Landing Page Design
Top Level
4.8
( 20 )
  • Webdesign
  • Landing Page Design
  • Verpackungen
  • Etiketten
  • WordPress Design
  • Webseiten Design (kodiert)
  • Logo Design
  • App Design
  • Sonstiges Grafikdesign
  • Banner Design
  • Sonstiges App oder Webdesign
  • Sonstige Werbematerialien
  • Flash Animation
  • Social Media Design
  • Icon- oder Button-Design
  • Flash Banner
  • Button oder Icon
  • Werbeschilder
  • Poster
  • Postkarten, Flyer & Printdesign

2. Beginne mit Wireframes

99designs wireframe
Ein Wireframe für 99designs‘ Designersuche

Du würdest einen Roadtrip quer durchs Land nicht ohne Karte machen. Genauso solltest du nicht ohne Wireframes anfangen, deine Website zu designen. Wireframes sind im Grunde Blaupausen, die zeigen, wo deine Navigation sitzt, wo all deine Bilder sind, wo sich dein CTA-Button befindet und so weiter.

Mit Wireframes zu beginnen wird den restlichen Prozess einfacher gestalten. Du und dein Designer können die Struktur besprechen und Änderungen an diesen Zeichnungen vornehmen, statt es an komplizierten Photoshop-Mockups tun zu müssen. Dies erspart jedem Zeit und Geld.

Du solltest für jede deiner größeren Seiten Wireframes erstellen (z. B. für Homepage, Produktverzeichnis, Blog-Artikel etc.).

Wenn du ein individuelles Design basierend auf einer bestehenden Vorlage erstellst, solltest du dennoch ein Wireframe erstellen. Achte nur darauf, dass dein Designer die mit der Vorlage verbundenen Einschränkungen versteht. 

3. Designe den Look

Deine Website ist das Online-Zuhause deiner Marke. Als solches sollten deine Designentscheidungen (von Schriftarten über Farben bis hin zum Stil) um deine Markenidentität herum gebaut werden. Wenn du einen Marken-Styleguide hast, schicke ihn deinem Designer. Falls nicht, stelle ihm Folgendes zur Verfügung

  • Dein Logo
  • Deine Markenfarben (genauen HEX-Code wenn möglich)
  • Eine Liste mit Schriftarten
  • Sämtliche stilistische Anforderungen (z. B. „lustig und freundlich“ oder „dunkel und luxuriös“)

Es ist auch eine gute Idee, ihm ein paar sorgfältig ausgewählte Beispiele von Seiten, die dir gefallen, zu schicken, zusammen mit ein oder zwei Sätzen, weshalb sie dir gefallen.

Mit diesen Informationen wird der Designer loslegen. Er beginnt in der Regel mit der Seite, die dir am wichtigsten ist (für viele ist dies die Homepage, aber nicht immer).

Wenn der Designer dir den ersten Entwurf vorlegt, ist es an dir, ihm Feedback zu geben. Achte auf deine erste, intuitive Reaktion auf das Design, aber widerstehe dem Drang, innerhalb der ersten 24 Stunden zu antworten. Du musst dir Zeit nehmen, das Design wirken zu lassen, und solltest es vermutlich anderen Stakeholdern zeigen, um auch ihre Meinung zu bekommen. Wenn du Feedback gibts, achte darauf, dass es klar und deutlich ist.

Abhängig von deiner Abmachung mit dem Designer wirst du mehrere Runden durchlaufen, in denen du Feedback gibst, um zu einem finalen Design zu kommen.

Wie man besseres Designfeedback gibt ->

4. Erstelle Vorlagen für alle Seiten

Sobald du den finalen Look deiner wichtigsten Seite hast, sollte es recht einfach sein, Prototypen für all deine anderen Seiten zu bekommen, vorausgesetzt, du hast für all deine Seiten Wireframes erstellt. Es gibt vielleicht noch ein paar kleinere Dinge, die angepasst werden müssen, aber zu diesem Zeitpunkt bist du mit deinem Designer hoffentlich bereits auf einer Wellenlänge.

Angenommen dein Designer ist nicht auch dein Entwickler, sollte er dir an diesem Punkt die Bilddateien zur Verfügung stellen (Branchenstandard sind Photoshop-Dateien, auch wenn Sketch immer beliebter wird.)

5. Arbeite mit einem Entwickler, um dein Design zu programmieren

sailing web design
von arosto for Agency X

Beim Engagieren eines Webentwicklers solltest du dich auf Funktionalität konzentrieren. Du solltest dem Entwickler sagen können, was du möchtest, und er sollte in der Lage sein zu erklären (in verständlicher Sprache, die du auch dann verstehst, wenn du kein Webentwickler bist), wie er es umsetzen wird.

Wenn du ein CMS benötigst, achte darauf, dass er dir sagt, welche Plattform er verwendet, oder zeigt, worüber und wie du Kontrolle über alle zukünftigen Änderungen hast.

Sei misstrauisch, wenn er dir nicht viele Fragen stellt. Dies ist in der Regel ein Zeichen dafür, dass er nicht alle verschiedenen Schritte des Prozesses komplett durchdacht hat.

Ebenso wie Designer werden auch Entwickler einen Prototypen erstellen, nachdem du sie gebrieft hast. Sie werden dir einen Entwurf schicken und du kannst damit herumspielen und Feedback geben.

6. Fülle die Seiten mit Inhalten

educational web design
Die ganzen Lorem-Ipsum-Texte in deinem Design müssen nun ausgefüllt werden!  Von MercClass für Logo

Du hast eine voll funktionsfähige Website. Großartig! Jetzt ist es an der Zeit, sie mit all deinen Inhalten zu füllen, von Mitarbeiter- und Produktfotos über Überschriften bis hin zum Fließtext.

Abhängig von deinen Zielen, kann es sich lohnen, einen Content- oder SEO-Spezialisten zu engagieren, der dir mit dem Text hilft (sie können dir beim Page-Ranking helfen und sprachlich den richtigen Ton bestimmen, um aus Besuchern Käufer zu machen), oder einen professionellen Fotografen einzustellen (besonders wenn du Waren verkaufst).

7. Führe User-Tests durch

Bevor du deine Seite offiziell veröffentlichst, sollten so viele Leute wie möglich damit herumspielen. Höre ihnen zu, wenn sie Feedback geben, stelle Fragen und winke keine Kommentare einfach ab.

Meine grundsätzliche Faustregel bei Feedback lautet, wenn zwei verschiedene Leute (die sich nicht kennen) dieselbe Anmerkung haben, ist wahrscheinlich etwas dran.

Nimm die letzten kleinen Verbesserungen vor und starte deine Website!

Bist du bereit, die perfekte Website für dein Unternehmen zu erstellen?

Eine Website zu erstellen ist zu gleichen Teilen lohnend und einschüchternd. Es gibt viele Aspekte, an die man denken muss (und für viele Menschen viele neue Dinge zu lernen). Aber wenn du es richtig machst, wirst du ein Produkt erhalten, das dir beim zukünftigen Wachstum deines Unternehmens helfen kann.

illustrated website
Bereit dich auf dein Website-Projekt zu stürzen? Von SpoonLancer

Abschließend möchte ich dich noch daran erinnern, dass eine Website beinahe niemals fertig ist. Sie kann und sollte sich regelmäßig weiterentwickeln. Wenn du am Anfang deiner Reise stehst und dich für eine Vorlagenseite entschieden hast, wirst du ihr vielleicht in ein oder zwei Jahren bereits entwachsen sein und das ist okay (falls dem so ist, haben wir jede Menge tolle Designer, die dir bereitwillig bei einer individuellen Lösung helfen). Vielleicht stellst du auch fest, dass sich deine Kundschaft verändert hat und du deine Marke erneuern musst. Oder die Technik ändert sich und fordert von dir, dich anzupassen (momentan sollte alles responsive und für Mobilgeräte geeignet sein. Wer weiß, was in 5 Jahren ist!).

Also los, erstelle deine eigene fantastische Website!

Deine neue Website soll perfekt sein?
Arbeite mit unseren fantastischen Webdesignern, um dies zu erreichen.