Von der Idee zur fertig programmierten Webseite
Netzwerk Offline
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte k├Ânnten veraltet sein!
F├╝r aktuelle Inhalte aktiviere bitte dein Internet!
Alter Browser
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschlie├člich auf aktuelle Technologien setzen, unterst├╝tzen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen f├╝r dich passenden modernen Browser!

Wie du aus einer Idee heraus eine Webseite umsetzt!

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGesch├Ątzte Lesezeit ca. Minuten

Ich werde oft von Freunden gefragt: Wie entsteht eigentlich eine Webseite? In diesem Artikel möchte ich dir zeigen wie du am besten vorgehst, wenn du eine Webseite erstellst. Also wie gehst du vor wenn du ein Kunden vor dir Sitzen hast oder eine grobe Idee in deinem Kopf?

In meinem Kopf ist der Prozess in 3 wichtige Schritte aufgeteilt: Am Anfang steht eine Idee im Raum, danach folgt ein Design und zuletzt der Code - wobei manche Codeteile schon bei der Idee feststehen, je nach zukünftiger Funktionalität der Webseite.

1. Eine Idee entsteht

Meistens steht am Anfang keine Idee, sondern ein Kunde. Aber bei beiden ist es ein ähnlicher Ablauf, außer dass man sich die ständige Kommunikation mit dem Kunden sparen kann, wenn man aus einer eigenen Idee heraus beginnt. Diese macht den Prozess einfacher, weil weniger Abstimmung erfolgen müssen, sondern ziemlich Effektiv durchgearbeitet werden kann. Gute Webdesigner könne eine Webseite in 3 Tagen schaffen, wenn entsprechend alles gut organisiert ist.

Für diesen Artikel habe ich mir einen Beispielkunden ausgedacht, eine grobe Definition folgt:

  • Handwerker: Fenster und Türreperatur
  • Standort: Düsseldorf
  • Leistungen:
    • Fenster
    • Türen
    • Rolläden
    • Wartungsarbeiten
  • Ziel: Kundengewinnung durch die Webseite

Was du dich am Anfang fragen solltest

Wichtig ist vor allem, dass du den Kunden nach seinen Eckdaten fragst, damit du alle wichtigen Kontaktdaten hast die präsent auf die Webseite sollen, bzw. dich selbst fragst was du an Informationen auf der Webseite haben willst, falls du z. B. deine Portfolio-Webseite anhand dieses Leitfadens umsetzen willst.

Ein weiterer wichtiger Punkt ist das Logo. Ein Logo sollte immer vorhanden sein, denn eine Firma bzw. eine Marke wird immer über das Logo mit Gefühlen und Gedanken verbunden. Ein starkes Logo hilft, um beim Kunden im Gedächtnis zu bleiben. Ohne Logo geht's auch ist aber schwieriger und hinzukommt, dass ihr über ein Logo später einen Einstiegspunkt für das Design.

Was für eine Website wird es?

Es gibt viele verschiedene Typen von Webseiten, zum Beispiel:

  • Blog / Magazin - Im klassischen Sinne ist es ein Online-Tagebuch mit Beiträgen eines Autors über einen bestimmten Themenkomplex - Wie bei HelloCoding.de zum Beispiel "Coding und Webdesign".
  • Online-Shop - Eine Online-Shop ist dazu da Produkte aktiv an Kunden zu verkaufen.
  • Unternehmenswebseite / Corporate Website - Du möchtest dein Unternehmen vorstellen, was ihr macht und welche Leistungen ihr anbietet? Dann wird es wahrscheinlich eine Unternehmenswebseite! Oft wird diese auch mit einem Corporate Blog verknüpft (Unternehmensblog), um mehr hochwertigen Content über unternehmensnahe Themen bereitzustellen und so mehr potenzielle Kunden über die Suchergebnisse anzusprechen.
  • Web-App - Das Web besteht inzwischen nicht mehr nur aus klassischen statischen Anwendungen. Immer mehr moderne Applikationen laufen nur noch im Browser. Zum Beispiel komplexe Anwendungen wie Google Drive, Docs, Sheets oder Discord.
  • Landingpage - Eine Landingpage ist eine zusätzliche Seite auf der bestehenden Webseite eines Unternehmens, die ein bestimmtes Produkt bewirbt und direkt zur Handlung auffordert.
  • Microsite - Eine Microsite ist eine komplette Webseite zu einem neuen Produkt / einer neuen Kampagne. Diese läuft meistens parallel zu einer weiteren Unternehmenswebseite, unterscheidet sich aber grundlegend im Design.

Nun musst du für dich entscheiden was du machen willst, oder was dein Kunde genau benötigt.

In unserem Beispiel sind keine Kapazitäten für einen Corporate Blog da Primär auf die Leistungen des Unternehmens aufmerksam gemacht werden, also wird es eine Corporate Website.

Die Art der Webseite definiert grob welche Bereiche benötigt werden und welche Funktionen sie später braucht. Eine einfache Unternehmenswebseite braucht z. B. keinen Blog. Ein Online-Shop braucht wahrscheinlich keine Übersicht für Standorte oder einen Adresshinweis im Footer, das reicht im Impressum.

Was für eine Struktur wird benötigt?

Nach dem man einen Webseiten-Typ festgelegt hat, sollte festgelegt werden was für Seiten benötigt werden und welche Informationen auf welcher Seite präsentiert werden sollen. Damit ist später beim Design schon klar, welche Bereiche dargestellt werden sollen.

Braucht es auf der Startseite Testimonials oder Videos? Welche Seiten werden benötigt?

Weiteres zur Struktur gibt es im Abschnitt "Wireframe".

Was ist meine Zielgruppe?

Deine Zielgruppe ist eine Gruppe an Personen, die ein besonderes Interesse an deiner Webseite haben soll. Willst du Männer oder Frauen ansprechen? Eine Webseite für Damenrasierer wird für einen Mann uninteressant sein, also ist es sinnvoll die Gestaltung auch auf Frauen auszurichten.

Du machst eine Webseite über Spielwaren für Kinder, aber willst eigentlich Eltern ansprechen, die für ihre Kinder Spielzeug kaufen? Dein Design sollte also etwas verspielt sein, da es ja um Spielzeug geht, aber nicht zu sehr, weil die Eltern die Personen sind die letztendlich überzeugt werden sollen. Optisch könnte das vielleicht so Umzusetzen sein das es zwar Klare Linien gibt alles sehr Eckig, aber dafür mit einer Großen Farbpalette und Illustrationen Gearbeitet wird.

Eine Zielgruppe kann durch Merkmale aus den folgenden vier Bereichen definiert werden:

  • Geografisch
    • Wohnort / Region; z. B. "In ländlicher Region, weit weg von der nächsten Großstadt"
  • Demografisch
    • Alter
    • Geschlecht
    • Familienstand
    • Bildung
    • Gehalt/Einkommen
  • Psychografisch
    • Lebensstil
    • Wünsche / Träume
    • Affinitäten
  • Verhaltensorientiert
    • Produktwahl / Markenorientierung
    • Preisverhalten
    • Mediennutzung

Für unser Beispiel mit den Handwerkern heißt das nun folgendes:

  • Zielgrupe
    • Alter zwischen 30 und 50, da Fenster, Türen und Rolläden in der Regel nicht in Mietshäusern vom Mieter behoben werden müssen.
    • Einkommen -> Mittelstand
    • (Natürlich kann man hier noch viel mehr ins Detail gehen und auch Daten von Google Analytics oder anderen Quellen verwenden.)

Zusammengefasst der Plan für die Ideenphase

Zur Idee ist letztendlich zu sagen, dass es wichtig ist einen Plan zu haben.

Diesen kann man in folgenden Fragen definieren:

  • Was ist das Thema?
  • Was für einen Webseiten-Typen brauche ich? (Siehe: "Was für eine Website wird es?")
  • Welche Zielgruppe will ich ansprechen?
  • Welche Elemente will ich auf jeden Fall haben?

Wenn du diese Fragen ausführlich beantworten kannst, bist du definitiv bereit mit dem Design zu starten.

2. Ein Design wird aus einer Idee geboren

In diesem Abschnitt wollen wir für unseren Kunden ein Screendesign erstellen. Zuerst überblicken wir, was wir über unserem Kunden bisher an Informationen zusammengetragen haben:

  • Handwerker: Fenster und Türenreparatur
  • Standort: Düsseldorf
  • Leistungen:
    • Fenster
    • Türen
    • Rolläden
    • Wartungsarbeiten
  • Ziel: Neue Kundengewinnung über die Webseite
  • Webseiten-Typ: Corporate Website
  • Zielgrupe:
    • Alter: 30-50
    • Einkommen: Mittelstand

Sobald alle Informationen über den Kunden gesammelt wurden, kann die Erstellung eines Wireframes beginnen. Dieser ist vom Vorteil, wenn dem Kunden vorab ein Eindruck vom Design verschafft werden soll. So muss er bei Unstimmigkeiten nicht das Design abändern lassen, sondern kann diese schon früh erkennen und im schneller erstellten Wireframe korrigieren lassen.

Wireframe

Ein Wireframe (Deutsch: "Drahtmodell") ist ein Modell der Webseite, reduziert auf die nötigsten Formen ohne Farbe und Details. Ein Bild kann zum Beispiel durch ein Rechteck mit einem Kreuz darin ersetzt werden. Durch die Einfachheit ist es auch möglich diesen Wireframe per Hand zu erstellen, sollte es für dich und deinen Kunden wichtig sein, dass der Grundaufbau schnell klar wird.

Wireframe
Wireframe

Screendesign

Das Screendesign kommt nach dem Wireframe und sollte erst gemacht werden, wenn alle Rahmenparameter feststehen und alle Bildmaterialen vom Kunden vorhanden sind. Gewünschte Schriftarten sind, falls vorhanden, festgelegt und das Logo wurde auch übermittelt.

Screendesign Software

Für Screendesign gibt es viele verschiedene Programme, aber am Ende ist es eine Frage der persönlichen Präferenzen und des nötigen Aufwands, für welches Programm man sich entscheidet. Manchmal ist es notwendig Hovereffekte oder Navigationselemente darzustellen, oder sogar Animation einzubauen, aber diese Vorrausetzungen sind stark vom Kunden und dem Programmierer abhängig. Für ein eigenes Design werden in der Regel keine Animation im Layout benötigt, diese könenn später direkt im Code erstellt und getestet werden.

Um dir nun einen Eindruck eines Screendesigns zu geben, zeige ich dir hier das Design von HelloCoding, wobei sich seit dem Erstellen des Designs in Affinity Designer schon einiges geändert hat.

Nun möchte ich dir verschiedene Programme auflisten, die du für Screendesign verwenden kannst. Ich unterteile diese in 2 Gruppe: Statische Programme, die keine Animationen, Hovereffekte oder kompliziertere Events und Slider zulassen und die Programme, die dynamische Elemente anbieten. Diese Programme nennt man auch "Prototyping" Programme.

Statische Programme

Dynamische "Prototyping" Programme

Mein derzeitiger Favorit ist Affinity Designer, weil das Programm kostengünstig ist und für meine Anforderungen alle notwendigen Funktionen bietet.

3. Das Design wird zu Code

Nachdem wir ein Design im Programm unserer Wahl erstellt haben, können wir zum Coding übergehen. Als erstes muss entschieden werden, ob ein Framework oder ein CMS verwendet werden soll.

Ein CMS (Content-Management-System) ist ein System, mit dem Inhalte einer Webseite dynamisch verwaltet werden können, ohne den Code ändern zu müssen. CMS Systeme finden zum Beispiel Verwendung, wenn nicht Code-Affine Personen eine Webseite veränden können sollen.

Auswahl des Frameworks / CMS

Ein CMS macht zum Beispiel dann Sinn, wenn man eine große Webseite mit vielen Funktionen (wie einen Blog) umsetzen will. Da kommt dann vielleicht Wordpress in Frage. Wenn du nur ein kleines Portfolio für einen Kunden erstellst, der hin und wieder mal einen Text ändern will, könnte "October CMS" die richtige Wahl sein. Es geht natürlich auch nur mit HTML, CSS und Javascript. Frameworks für zum Beispiel PHP machen dann Sinn, wenn viele individuelle Wünsche des Kunden bestehen, die nicht mit einem fertigen System abzudecken sind. Die Auswahl ist sehr groß und sollte gut überlegt sein. Das Framework hängt zu sehr vom Projekt ab, um dort eine Empfehlung aussprechen zu können.

Um euch die großen "Player" der PHP Frameworks zu nennen:

  • Laravel
  • Symfony
  • CakePHP
  • Laminas

So wie es für PHP Frameworks gibt, gibt es auch für CSS Frameworks. Wenn du ein individuelles Design verwendest, macht aber es keinen Sinn so eins zu verwenden, da du dadurch mehr Code in deine Webseite bekommst als du eigentlich brauchst und zum Teil sind CSS Anpassungen schwerer mit einem Framework umzusetzen als ohne.

Falls du doch Interesse an einem CSS Framework hast, die bekanntesten sind hier aufgelistet:

  • Bootstrap
  • Foundation
  • Tailwind
  • Bulma
  • UiKit

Von einer Sache möchte ich dir abraten sie zu werwenden, da es in der heutigen Zeit nicht mehr notwendig ist und zwar jQuery, ein JavaScript Framework. Alles was jQuery kann war früher in älteren ECMAScript Versionen deutlich schwieriger umzusetzen, aber inzwischen ist es leicht diese Funktionalitäten auch mit JavaScript ohne Frameworks umzusetzen. Ein Nachteil von jQuery ist, dass, durch das viele JavaScript was geladen werden muss, die Lade sowie Ausführungszeit deiner Webseite verschlechtert wird.

Als Letzten Punkt will ich dir CSS Präprozessor empfehlen. Ich persönlich bevorzuge SASS mit SCSS Syntax, aber es gibt auch andere wie Stylus oder Less. Vorteile von diesen sind, dass du Funktionen für wiederkehrende Elemente erstellen oder Selektoren verschachteln kannst.

Umsetzung vom Design

Nachdem du ausgewählt hast welches CMS oder Framework du verwenden willst, kannst du damit fortfahren das Design umzusetzen. Dabei will ich dir einen Tipp geben, falls es dein erste Webseite ist.

Öffne vor dem Start des Codings das Design und überlege, welche Elemente welchen HTML Aufbau benötigen. Falls es dir hilft, kannst du auch ein neues Wireframe vom fertigen Design machen und darauf schreiben, was der Header, der Footer und der Slogan sind und welche HTML-Elemente du für welchen Bereich benötigst.

Grundsätzlich empfehle ich dir von "klein" nach "groß" zu arbeiten, wenn dein Design responsive sein soll. Das heißt du fängst bei vielleicht 320px Breite an und arbeitest dich immer weiter hoch, bis du bei den üblichen Desktop Monitoren von einer Breite von 1920px angekommen bist.

Desweiteren empfehle ich dir, immer von oben nach unten zu arbeiten. So ist es leichter die Struktur beizubehalten als wenn du von a nach b springst. Also mit der Navigation starten, dann der Header, Content und zuletzt der Footer.

Falls du an einer Stelle nicht weiter weißt, solltest du eine Pause machen oder erstmal an einer anderen Stelle weiter machen. Meistens kommt dir dann zu einem späteren Zeitpunkt eine bessere Idee zu Umsetzung des Bereiches.

Schlusswort

Du solltest beachten, dass du dich beim erstellen einer Webseite immer an eine Struktur hältst, denn das macht dir das Arbeiten einfacher als wenn du durcheinander an verschiedenen Baustellen versuchst weiterzukommen.

Jetzt bleibt mir nur noch zu sagen: Viel Spaß beim erstellen einer Webseite!

Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Von der Idee zur fertig programmierten Webseite"!

Kommentar Schreiben

Verwante Beitr├Ąge

keyboard_arrow_up
Home Men├╝ Suche
close