Meine Website ist online!

Montag, 12. Juni 2017

Nun ist es endlich soweit. Nach vielen Wochen Konzeption, Umsetzung, Optimierung, Optimierung und Optimierung darf meine Website vom lokalen Testserver ins World-Wide-Web!

Schritt 1 – Inhaltliche Planung

Wie in allen Projekten begann alles auch hier mit einer Planungsphase. Klar, ich habe bereits im Vorfeld verschiedene ansprechende Designs im Web angetroffen, welche ich mir als Inspiration schon mal im Hinterkopf behielt. Dennoch war ich mir auch hier sicher: Ich muss mir zuerst klare Gedanken über den Inhalt machen:

Welche Kerninhalte sollen erscheinen?
Welche Leistungsbereiche biete ich konkret an?
Was ist die Zielgruppe?

Meine Denkweise ist eher visuell geprägt. Also nahm ich kleine Kärtchen, und fing an alle Ideen aufzuschreiben und an die Wand zu kleben. Die Infos ließen sich dann leicht übersichtlich sortieren und schließlich wurde eine erste Struktur (Hauptmenüpunkte) geschaffen:

Schritt 2 - Mockups

Nachdem ungefähr klar war, welche Inhalte auf die einzelnen Seiten gehören, erstellte ich im nächsten Schritt sog. „Mockups“. Das sind im Prinzip nichts anderes als grobe Skizzen, über welche ich meine Webseite schnell und einfach visualisiere. Ich mache mir damit also einen ersten Eindruck von der Funktion und dem Grundlayout. Ein vorweg: Hierfür eignen sich nach längerem Probieren – so blöd es klingt - am besten ein Stift und leere DinA4 Blätter ;-)

Da Mockups immer in erster Linie dazu dienen, die Inhalte optisch funktional zu positionieren, werden zusammengehörende Themen/Punkte auch optisch zusammengefasst.

Schritt 3 – Designentwurf

Anschließend ging es ans die Optik. Hier hatte ich mir wie bereits erwähnt schon einige gute Beispiele recherchiert. Mir ist aufgefallen, dass ich mich im Unterbewusstsein von folgenden Kriterien leiten ließ:

Saubere klarer Aufbau mit kurzen und verständlichen Texten
Lesbare große Schrift
Hellgrün als Grundfarbe - ich weiß nicht warum, aber ich liebe dieses hellgrün ;-)
Abgerundete Kanten – einheitlich auch bei Bildern
Bildschirmfüllende Startseite mit Einleitungstext

Auf Basis der bestehenden Mockups ist der erste Entwurf im Adobe Illustrator schnell realisiert.

Die fertige Webseite

Nur kurz darauf erfolgt die Umsetzung in HTML5 und CSS. Bzgl. Schrift setze ich auf den aktuell im Trend liegenden Schrifttyp "Roboto". Diese Schrift hat mit nach längerem Vergleichen am besten für dieses Projekt gefallen. Um die Seite schlank zu halten, bleibe ich bei dem CSS-Grid "Simple Grid". Bootstrap muss es an dieser Stelle nicht unbedingt sein. Über Font-Awesome werden kleinere Grafiken eingebunden. Zum Schluss noch ein paar leichte Effekte über CSS3 und etwas Javascript (jQuery, was sonst?). Voilá, die Webseite steht! Ich bin zufrieden :-)

Erfahrung aus dem Projekt

Mir ist ziemlich früh aufgefallen, dass die eigene Webseite oft weitaus mehr Entwicklungszeit in Anspruch nimmt, wie Kundenprojekte in der Regel. Das liegt offensichtlich am Hang zum Perfektionismus in eigenen Projekten. Die eigene Website muss perfekt sein, also wird immer wieder unaufhörlich optimiert und optimiert. Die ständigen Korrekturen und Überarbeitungen bringen das eigene Zeitmanagement durcheinander. In meinen Augen ist das fehlende Zeitmanagement (der Blick auf die Uhr und den Kalender) genau auch ein zweiter Grund. Schnell zeigt sich: Auch bei eigenen Projekten muss die Zeit klar im Auge behalten werden. Und eins nehme ich mir ebenso für die Zukunft vor: Auch bei eigenen Projekten werden zukünftig die Zeiten erfasst. Damit lässt sich nach dem Projektende auch konkret nachsehen, wo die ganze Zeit geblieben ist ;-)

zurück zur Übersicht