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.
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:
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.
Es gibt viele verschiedene Typen von Webseiten, zum Beispiel:
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.
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".
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:
Für unser Beispiel mit den Handwerkern heißt das nun folgendes:
Zur Idee ist letztendlich zu sagen, dass es wichtig ist einen Plan zu haben.
Diesen kann man in folgenden Fragen definieren:
Wenn du diese Fragen ausführlich beantworten kannst, bist du definitiv bereit mit dem Design zu starten.
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:
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.
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.
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.
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.
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.
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:
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:
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.
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.
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!
Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein Feedback!
Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Von der Idee zur fertig programmierten Webseite"!
