Hallo und willkommen zu einem neuen Eintrag im Web-Developer-Blog.
Heute möchte ich euch anhand eines eigenen Projekts zeigen wie aus einer Idee ein kompletter Web-Auftritt werden kann.

Es beginnt alles mit einer Idee

Stellt euch selbst die Frage: Was möchtet ihr realisieren? Soll die Seite eine Art privater Blog werden, ein Künstlerportfolio (wie in meinem Fall) oder etwas großes öffentliches wo jeder mitmachen kann? Bleibt dabei aber Realistisch!
Für einige dieser Ideen gibt es quasi „fertige Lösungen“:

• Wer bloggen möchte, dem kann ich nur zu WordPress raten. Es gibt tonnenweise Plugins und (kostenlose) Themes. Wer sich etwas auskennt kann auch selbst tätig werden!
• Wer ein Portfolio oder eine private/kommerzielle Homepage starten möchte, dem würde ich ProcessWire ans Herz legen. Das CMS ist sehr einfach zu handhaben und Templates lassen sich schnell erstellen. Außerdem ist es exzellent Dokumentiert
• Wer etwas komplett eigenes erstellen möchte, dürfte mit einem Framework wie Kohana gut beraten sein.
• Für das eigene Wiki bietet sich entsprechend MediaWiki an.
• …

Sobald ihr eine Idee habt werden bald darauf auch weitere Gedanken kommen wie ihr euch von der Masse abheben könntet:

• Spezielle Features, die bisher keiner bietet?
• Ein interaktives Interface?
• Wer wird eure Zielgruppe sein?
• …

Über solche Dinge solltet ihr euch Gedanken machen, denn natürlich möchtet ihr etwas liefern das gut ankommt und euch hohe Besucherzahlen sichert. Stellt euch selbst die Frage: Was macht euch besser als „die anderen“?

Phase eins – Planung

Diese erste Phase kann durchaus einige Wochen beanspruchen – Wichtig ist, das ihr euch viele Notizen (und ggf. Skizzen) macht. Am besten digital in einer Art „Projektordner“ wo sämtliche Daten hinterlegt werden (Ideen, Screendesigns, …). Redet mit Freunden und Kollegen über eure Idee und sammelt zusätzliche Meinungen und Vorschläge!

Sobald ihr ein solides und durchdachtes Gerüst habt könnt ihr einen Schritt weiter gehen 🙂

Phase zwei – Design

Das Design eurer Applikation.
Wie bereits erwähnt nehme ich als heutiges Beispiel mein Künstlerportfolio – Die ersten Entwürfe habe ich mit meinem Grafiktablett gemacht (das ist natürlich kein „muss“ aber hilft ungemein!). Diese möchte ich euch natürlich nicht vorenthalten!

Was ihr seht ist eine relativ frühe Version, es hat sich im Verlauf der Entwicklung noch einiges geändert – unter anderem habe ich die 3D Animation beim laden eines Bildes durch die Fancybox ersetzt!

Es ist wichtig, das ihr euch ein paar Farben für eure Website zusammenstellt – diese entscheiden nämlich massiv über die „Stimmung“ eures Auftritts. Es gibt es einige Anlaufstellen die euch ungemein helfen können, wie z.B. der Color Scheme Designer 3 oder COLOURlovers.
Es gibt aber weitaus mehr zu beachten: Möchtet ihr eine Seite mit großen einfarbigen Flächen, einen modernen Look mit abgerundeten Ecken und dezenten Farbverläufen oder etwas Detailverliebtes mit vielen Grafiken? Diese Entscheidung kann euch niemand abnehmen – Ich persönlich durchstreife dazu gerne Seiten wie themeforest und schaue mir verschiedene Designs an und lasse mich inspirieren. Besonders gefallen mir „saubere“ und „minimalistische“ Layouts.

Phase drei – HTML Prototyp

Seid ihr erst mal mit eurem (groben) Layout und der Farbgebung zufrieden, so könnt ihr einen ersten HTML Prototyp erstellen. Dieser Prototyp wird benutzt um eure Seite erstmals im Browser darzustellen… Hier könnt ihr bereits Ideen für kleinere Animationen umsetzen und schauen wie das ganze wirkt. Natürlich solltet ihr auch in verschiedenen Browsern testen – idealerweise sogar auf verschiedenen Geräten…

Ob ihr ein Design erstellt, welches sich der Browsergröße anpasst oder eine separate mobile-Ansicht einplant bleibt natürlich euch überlassen – Jede Version hat seine Vor- und Nachteile – Seht dazu auch: CSS Rastersysteme für verschiedenste Bildschirmauflösungen.

Sobald Idee, Design und Prototyp zu eurer Zufriedenheit abgeschlossen sind könnt ihr euch an die technische Seite machen – Darüber werde ich aber erst nächste Woche ein paar Worte verlieren 😉 Ich hoffe ich konnte euch Heute bereits einen kleinen Einblick bieten wie ich persönlich arbeite. Habt ihr vielleicht andere Herangehensweisen oder erweiterte Tipps die ich hier noch erwähnen sollte? Lasst es mich wissen!

Bis zum nächsten Eintrag wünsche ich euch eine angenehme und sonnige Woche!