Wie fange ich an?/Von der Idee zum Projekt

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie wollen eine eigene Webseite erstellen? Einen Blog, in dem Sie über sich oder Ihre Hobbies schreiben? oder nur eine personalisierte Web-Visitenkarte?

Die gute Nachricht:

Everybody can be a publisher!

Tim Berners Lee: abgewandelt

Das Webdesign erlebte seine Blütezeit in den 90er Jahren. Damals wagten sich unzählige Interessierte gemäß dem Motto Everyone is a Publisher! an die Erstellung eigener Webseiten. Die ursprüngliche Fassung aus dem Jahre 2001[1] hatte auch immer im Blick, dies später auch als Beruf zu ergreifen.[2]

Heute ist es durch Social media wie Facebook oder Twitter möglich, Inhalte ins Netz zu stellen ohne sich mit Webdesign beschäftigen zu müssen. Andererseits sind auch komplexe Content Management Systeme wie Joomla! oder WordPress in weniger als einer Stunde installiert. SELFHTML glaubt aber, dass es auch weiterhin wichtig ist, die Technologien dahinter zu verstehen und bei der Veröffentlichung von Inhalten die Kontrolle über diese zu behalten. So löschte Facebook die Seiten vieler deutscher Städte ohne Vorankündigung, weil es unter diesen Namen kommerzielle Portale einrichten wollte. Auch Twitter entzog z.B. einem Nutzer sein Konto nach 15 Jahren, um dessen Handle @music zu „monetarisieren“.[3]

Dieser Artikel soll Ihnen bei der Verwirklichung Ihrer Idee helfen. Wir stellen die einzelnen Planungs- und Entwurfsphasen vor, mit denen Sie Ihr Projekt vorbereiten können. Dabei soll ein Web-Projekt aber nicht nur ein Zeitvertreib, sondern eine zeitlich beschränkte Aufgabe sein, die irgendwann einmal auch vorzeigbar und fertig werden soll. Deshalb ist es wichtig vorher zu überlegen und dann genau zu planen und entwerfen, bevor es (im nächsten Kapitel) an das eigentliche Entwickeln geht.


Vorüberlegungen

Dieser Abschnitt fasst die Überlegungen zusammen, die Sie sich im Vorfeld eines Projekts anstellen sollten. Denn klare Konzepte und überlegtes Vorgehen sind schon mal der erste Schritt für ein gutes Projekt.

Ziel des Projekts

Mögliche Ziele eines Projekts wären …

  • Ich möchte mich mit einer Webvisitenkarte vorstellen
  • Ich als Einzelperson stelle meine Aktivitäten in meinem Fachgebiet/Hobby vor
  • Ich als Einzelperson veranstalte auf diesen Web-Seiten ein persönliches Happening
  • Ich/Wir stelle(n) auf diesen Web-Seiten einen großen Datenbestand aus einem bestimmten Sachgebiet zur allgemeinen Verfügung
  • Wir als Firma stellen uns und unsere Produkte/Dienstleistungen vor (Kommunikation)
  • Wir als Firma bieten eine Dienstleistung direkt über diese Web-Seiten an (Transaktion, Interaktion, Partizipation)
  • …

Diese Liste mit Beispielen will zeigen, dass es erstens sehr unterschiedliche Ziele eines Webprojektes geben und dass auch ein und derselbe Anbieter von Web-Seiten unterschiedliche Ziele verfolgen kann.

Wichtig ist, dass Sie sich in der Konzeptphase eines Web-Projekts über das oder die Ziele des Projekts im Klaren werden, und dass Sie dem Anwender, der Ihre Seiten aufruft, klar machen, welches Ihre Ziele sind.

Zielgruppe des Projekts

Genauso wichtig wie eine Zielsetzung ist es, die Zielgruppe zu bestimmen, die durch das Projekt angesprochen werden soll. Mögliche Zielgruppen sind z.B.:

  • Potentielle Kunden/Käufer
  • Hobbyisten/Liebhaberkreise
  • Wissenschaftler/Experten
  • Kinder und Jugendliche
  • Familien
  • Computerfreaks/Hacker
  • Vergnügungssüchtige
  • Neugierige
  • Sinnsuchende

Natürlich können Sie versuchen, alle Besucher Ihrer Web-Seiten zufrieden zu stellen. Das wird allerdings ziemlich schwer, und es besteht die Gefahr, dass Sie niemanden so richtig zufrieden stellen. Besser ist es, sich vorzustellen, wie bestimmte Leute, die auf Ihre Web-Seiten stoßen, sofort ein Lesezeichen setzen oder ihren RSS-Feed abonnieren, weil sie gleich erkennen, dass dies Seiten sind, die mit ihren eigenen Interessen, ihrem Wissensdurst, ihrer Lebensart oder ihren Wünschen, Gedanken und Hoffnungen zu tun haben. Es gibt beispielsweise Web-Seiten, auf denen Betroffene über eine nicht alltägliche Krankheit berichten, unter der sie leiden. Wer nun selbst von dieser Krankheit betroffen ist, im Web nach Informationen darüber sucht und auf diese Seiten stößt, wird sie verschlingen, und sie werden ihm viel bedeuten. Solche Seiten haben eine ziemlich eingeschränkte Zielgruppe, aber dafür sind sie für ihre Zielgruppe Gold wert.

Ebenso wie die Zielvorgabe Ihres Projekts sollte dem Anwender auch die adressierte Zielgruppe klargemacht werden. Dazu eignen sich explizite Sätze wie: "Allen Fahrradsüchtigen bieten wir auf diesen Seiten technische Neuigkeiten und Tourenvorschläge". Aber auch die Aufmachung der Startseite selektiert das Publikum. Dabei hängt allerdings viel vom Zusammenspiel der Elemente ab. Ein dunkler Sternenhimmel als Hintergrundbild spricht joystickverliebte Cybernauten ebenso an wie entrückte Esoteriker. Erst die Vordergrundsymbolik (z.B. grelle Strahlen aus Laserwaffen, die ein Monster treffen, oder wehender weißer Schleier, der auf eine Pyramide zufliegt) sorgt in solchen Fällen für intuitiv klare Verhältnisse.

Welche Ressourcen stehen zur Verfügung?

„Der Neffe meines Schwagers kennt sich mit Computern aus und könnte uns schnell und kostengünstig eine Webseite für unsere ... programmieren.“ Andererseits verlangen professionelle IT-Firmen auch für kleinere Webseiten vierstellige Beträge.

Eine Webpräsenz gibt es nicht kostenlos. Sie können den finanziellen Einsatz durch Eigenleistung reduzieren, müssen aber abwägen, wie viel Manpower und Zeit (und über welchen Zeitraum hinweg) Sie investieren können.

Was wollen Sie erreichen?

Was können Sie schon?

Wie viel Zeit können Sie in Arbeit und den Erwerb neuer Technologien investieren?

Eine Webpräsenz ist sehr oft eine Baustelle auf Lebenszeit. Entweder müssen Inhalte aktualisiert werden, oder die fortschreitende Webentwicklung weckt durch neue Möglichkeiten die Lust nach Veränderungen.

Wenn Sie feststellen, dass Ihre Ressourcen Ihre Wünsche nicht erfüllen, überdenken Sie Ihr Projekt und teilen Sie es in verschiedene Teile auf.

  • Die unverzichtbare Basis, welche mit wenigen Technologien umgesetzt werden kann.
  • Die optionalen Erweiterungen, welche Sie zu einem späteren Zeitpunkt hinzufügen.

Wer soll später das Projekt weiter betreuen?

Jedes Projekt stellt eine Verpflichtung dar auf permanente Betreuung.

  • Kontrolle der öffentlichen Daten auf dem Server
  • Aktualisierung der Daten (z.B. Mailadressen)
  • Änderung, Aktualisierung oder Ergänzung von Artikeln
  • Betreuung der durch die Website offerierten Interaktionsmöglichkeiten

Ein Knackpunkt der Webentwicklung ist die Frage, ob die späteren Betreuer einer Website diese Aufgabe übernehmen können. Entscheidend dazu sind:

  • Angemessene Instrumente (Ein CMS ist besser)
  • Dokumentation, Hilfe, Beispiele und Vorlagen

Behalten Sie immer im Hinterkopf, für welche Betreuer Sie eine Website entwickeln. Wenn Sie eine Software für einen Blog, ein CMS oder Forum evaluieren, beziehen Sie die Betreuer in die Evaluation mit ein.

Zwingen Sie sich in der Entwicklungsphase zur fortlaufenden Dokumentation.

eigene HTML-Seiten oder ein CMS?

Für eine Webpräsenz gibt es eine Reihe von Technologien. Einigen reicht bereits ein Steckbrief in Sozialen Medien wie Facebook oder Instagram, andere wollen bewusst etwas Eigenes entwickeln.

Für statische Webseiten wie eine Webvisitenkarte kommen Sie an HTML und CSS nicht vorbei. Sie stellen heute die de facto Basis dar. Wenn Sie diese zwei Technologien nicht ausreichend beherrschen, sollten Sie zögern, weitere Technologien bereits anzuwenden.

Umfangreichere Projekte bestehen nicht aus festen (statischen) Webseiten, sondern können per Software erzeugte (also dynamische) Inhalte haben, so dass z. B. die Navigation und die Seiten bei jedem Aufruf auf dem Server erzeugt werden. Die Software kann im Browser ablaufen (JavaScript) und auf dem Webserver (Serverscripte wie PHP, Perl, JS, JSP, ASP, node.js). Dafür gibt es aber mittlerweile bestehende Lösungen in Form eines CMS oder statische Homepage-Generatoren.

Für die grundsätzliche Vorgehensweise bei der Planung und Entwicklung eines Webprojekts ist es erstmal irrelevant, ob die Seite statisch oder dynamisch ist.

Machen Sie sich einen Plan

Ein Projekt verläuft in verschiedenen Phasen:

  1. Konzeptphase
    Das Thema evaluieren und die Techniken sondieren
  2. Entwurfsphase
  3. Entwicklungsphase Das Projekt realisieren, testen und freigeben
  4. Das Projekt veröffentlichen und betreiben

Dabei sind Aspekte der Publikation zeitlich bereits in die Planungsphase vorzuziehen. Zum Beispiel müssen Serverangebote und Domainnamen schon früh evaluiert werden.

Konzeptphase

Sobald die Vorüberlegungen abgeschlossen sind, können Sie ein Konzept erstellen:

  1. inhaltliche Struktur aufnehmen und gliedern
  2. OnePager oder klassische Struktur mit Unterseiten
  3. statische Seiten, Seitengenerator oder ein CMS

Entwurfsphase

Ein gelungenes Projekt erkennt man nicht nur an seinen Inhalten, sondern ebenso an seinem Erscheinungsbild. Häufig gibt es schon ein vorhandenes Logo und einige Farben.


Screenshot einer komplementären Palette von coolors.co
Screenshot einer komplementären Palette von Coolors.co

Ausgehend vom Vorhandenen können Sie Farbklassen und daraus eine Farbpalette erstellen.

→ Hauptartikel: Farbe/Farbkonzept

Screenshot von SVG-Icons
SVG-Icons, die mit custom properties entsprechend formatiert wurden

Oft sind ganze Gruppen von Icons und Symbolen zu erstellen. Er lohnt sich, hierbei eine übergreifende Strategie zu wählen: Sowohl Icon-Fonts als auch SVG-Icons können per CSS individuelle Farben aus der gewählten Farbpalette erhalten.

→: SVG/Tutorials/Icons

Auch für die Typografie können Sie Beispiele entwerfen, die dann mit typischen Rahmen oder anderen Gestaltungselementen zu einem Entwurf werden.

In einer Spielwiese können isolierte Objekte entwickelt, aber auch das Zusammenspiel der Objekte ausprobiert werden.

Usability-Tests

Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen.

Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können.

Heatmaps

Eine Heatmap (englisch heat = ‚Hitze‘, ‚Wärme‘; map = ‚Karte‘) ist ein Diagramm zur Visualisierung von Daten, deren abhängige Werte als Farben repräsentiert werden. Sie dient dazu, in einer großen Datenmenge intuitiv und schnell besonders markante Werte zu erfassen.

Im Webdesign werden heatmaps zum mouse tracking eingesetzt, um zu überprüfen, welche Bereiche mit der Maus überfahren werden. Effektiver ist das eye-tracking, eine Blickbewegungsmessung, mit der der Blickverlauf einer Person sichtbar gemacht werden kann.

Generell sollten wichtige Inhalte entsprechend der Leserichtung in unserem Kulturkreis oben links platziert werden, sodass sie sofort erfasst werden.

Freigabephase

Die Freigabephase beschreibt den Zustand, in welchem ein Projekt alle geplanten Komponenten beinhaltet und diese auch kontrolliert und geprüft wurden. In dieser Phase fallen folgende Arbeiten an:

  • Für alle verwendeten fremden Ressourcen müssen Lizenzen eingeholt werden.
  • Das Angebot wird auf dem Produktionsserver für den allgemeinen öffentlichen Zugriff freigegeben.



  • Content is king!




    Form ohne Inhalt ist leer!

     
  • Arbeiten mit dem Seiteninspektor
    • HTML & CSS mit dem Seiteninspektor untersuchen
    • Usability-Tests
     
  • Web-Hosting

    Das Projekt veröffentlichen und betreiben

     

Weblinks

  1. ↑ SELFHTML-Aktuell: Artikel: Projektverwaltung (web.archive.org)
  2. ↑ In meiner Studienzeit gab es 1999/2000 zwei Studenten, die noch vor dem Referendariat Webdesigner wurden!
  3. ↑ An Interview With the Guy Who Was @Music on Twitter Until Elon Musk’s X Took the Username Away (slate.com)
  4. ↑ Wikipedia: wireframe
    Ein Wireframe oder Drahtmodell gibt einen ersten Eindruck vom Aussehen; anstelle der Farben gibt es nur eine Strichzeichnung
  5. ↑ webschmoeker: 7 kostenlose Mockup-Tools kurz vorgestellt. Bisher benutze ich Nummer 3!
  6. ↑ t3n.de: Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich
  7. ↑ creativebloq: The 18 best wireframe tools
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Wie_fange_ich_an%3F/Von_der_Idee_zum_Projekt&oldid=100363“