play link facebook twitter instagram vimeo dribbble behance github pinterest2 linkedin2 xing2

CMS-Beratung und Web-Entwicklung

Trendschau > Blog > Wie Eine Webseite Entsteht

Wie eine Webseite entsteht

Bei der Neugestaltung dieser Webseite werde ich die wichtigsten Arbeits-Schritte in einer kleinen Blog-Serie dokumentieren.

In Zeiten von Wordpress kann jeder innerhalb kürzester Zeit einen sehr schönen und extrem professionellen Webauftritt "von der Stange" erstellen. Und zumindest als talentierter Blogger braucht man für den Erfolg auch nicht mehr. Allerdings ist mit diesem Komfort auch das Gefühl dafür verloren gegangen, wie aufwändig die Erstellung einer individuellen und auf die persönlichen Bedürfnisse zugeschnittenen Webseite sein kann. Und dabei macht das Coden eher den geringeren Teil aus.

Anhand der Neukonzeption und des Umbaus der Trendschau will ich den Prozess und die Arbeitsschritte mal transparent machen. Ein Behind-The-Stage-Experiment in Progress, sozusagen. Das ganze wird sicherlich auch für mich ein großes Learning sein, und vielleicht zieht ja auch der ein oder andere Leser einen Nutzen daraus.

Die Inhalte stehen noch nicht fest und werden sich Schritt für Schritt mit dem Projekt entwickeln. Aber grob stelle ich mir folgende Themen vor:

  • Analyse und Planung: Wie entwickelt man Ideen und Ziele? Und wie richtet man dann die Webseite danach aus?
  • CMS-Auswahl: Die Seite werde ich wieder mit Statamic erstellen, aber es gibt natürlich noch viele Alternativen. Und muss es überhaupt ein CMS sein?
  • Grundprinzipien: Ein bisschen was zu Mobile First, Responsive Webdesign, vielleicht Progressive Enhancement und co.
  • Umsetzung: Haufenweise Hilfstools und Code. Jeder hat natürlich seine eigenen Vorlieben, ich arbeite beispielsweise sehr spartanisch mit ganz schlichtem CSS und HTML (also keine Frameworks, Grids, Less oder Sass).
  • Optimierung: Ein paar Hinweise zu SEO, Social-Media-Sharing, Assessibility und Co.
  • Publishing und Tracking: Am Ende wird die Seite publiziert und der Erfolg getracked bzw. analysiert.

Bei größeren Projekten könnte man natürlich noch zahlreiche Zwischenstufen einziehen, insbesondere Prototyping, Feedback-Schleifen, Testing und Co. Bei derart kleinen Projekten wäre das allerdings overhead. Einen Zeitplan gibt es nicht, die Serie wird in loser Folge publiziert.

Alle Teile der Serie

  • In Teil 1 haben wir eine Idee für den Relaunch der Webseite entwickelt. Dabei ging es noch nicht um eine visuelle Skizze, sondern allein um die Definition, was die Webseite bezwecken soll. Wie man sieht ist, ist die Webseite im Ergebnis sehr stark auf das Ursprungs-Konzept fokussiert. Das zeigt aus meiner Sicht, dass man diesen wichtigen, ersten Schritt niemals übergehen sollte.
  • In Teil 2 haben wir uns Gedanken über Methoden und Vorgehensweise bei der Webseiten-Entwicklung gemacht. Etwas theoretisch, aber auch das finde ich wichtig.
  • In Teil 3 haben wir mit Stift und Papier ein paar Sketches und Wireframes aufgemalt. Ich finde, das Endergebnis kommt diesen ersten Sketches sehr nah.
  • In Teil 4 haben wir das Design für die Webseite erstellt.
  • In Teil 5 gab es wieder etwas Theorie: Wir haben uns mit den Ansätzen Mobile-First und Responsive Webdesign und einigen Grundprinzipien in der Webseiten-Entwicklung beschäftigt.
  • In Teil 6 haben wir das responsive HTML- und CSS-Grundgerüst erstellt. Die Details sowie das Templating (Integration in ein CMS) sind ein Thema für eine eigene Serie.
  • In Teil 7 haben wir den Launch der Webseite besprochen.
  • In Teil 8 haben wir uns mit Piwik und dem Website-Tracking beschäftigt, um nach dem Launch den Erfolg beurteilen zu können und eine Grundlage für weitere Optimierungen zu haben.