• 1
  • 1
  • 1
  • 1
  • 1

Website Konzeption/Webdesign im Detail

Ein neuer Internetauftritt soll konzipiert werden. Wie geht man dabei vor?

  1. Briefing
  2. technische Voraussetzungen
  3. gestalterische Vorausetzungen
  4. Erstüberlegungen zu Struktur, Umfang, Navigation
  5. Kostenvoranschlag Grundgerüst, Einzelmodule,
  6. Annahme/Vertrag
  7. Brainstorming, Konzepte
  8. Erstentwürfe von gewünschten Beispielseiten, Konzeptveranschaulichung
  9. Ausarbeitung der Website
  10. Präsentation - Funktionen wie später online
  11. finale Version mit nochmaligen Kontrollchecks
  12. finale Präsentation, Abnahme durch den Kunden, Launch der Website
  13. optional: Anmeldung bei den Suchmaschinen, Rankingkontrollen, Suchmaschinenoptimierung SEO / PR
  14. optional: Websitepflege und -aktualisierungen
  15. Besonderheiten bei der Ausführung
↑

1. Briefing

Firmenprofil Kunde

  • allgemeine Unternehmensinformationen und -aktivitäten,
  • gibt es schon eine Form eines Internetauftritts, gibt es ein Intranet im Unternehmen welche Mitarbeiter haben Internetzugang

Voraussetzungen Zusammenarbeit

  • Projektleitung
  • Kommunikationswege?
  • Ansprechpartner
  • Vertragsbedingungen

Vorausetzungen Arbeitsbeginn

  • gibt es bereits Entwürfe, Konzepte für einen Internetauftritt, was genau soll de Nijs Design machen
  • gibt es ein Webteam im Unternehmen des Kunden

Ziele des Internetauftritts z.B.

  • ständige Repräsentation und Kundengewinnung, -information
  • schnellere, gezieltere Aktualisierung der Daten
  • Erreichbarkeit der Zielgruppe ohne Orts- und Zeitbeschränkungen
  • Projektvorstellung auf den Webseiten in Ergänzung zu Prospekten und anderen Printsachen wie Anzeigen
  • alles, aber vor allem farbige Grafiken und Fotos kostengünstiger darzustellen als in teueren Printmedien
  • Unabhängigkeit von Druckverfahren, Formaten, Umfang
  • Reduzierung der Zeit und Kosten, die bisher anderweitig für Erstanfrager bzw. Information und Support aufgewendet wurde
  • Bereitstellung von herunterladbarem Informationsmaterial
  • Erhalt gezielter Kundendaten, um diese künftig besser informieren zu können (Stichworte: e-mail-Newsletter, Mailingaktionen, Messeeinladungen)
  • Verfügbarkeit grosser Archive, Datenbanken, Fotogalerien
  • weitergehende Ziele: Vorteile gegenüber der Konkurrenz, Erhöhung des Gesamtumsatzes, Expansion

Zielgruppenformulierung

Mit einer Website kann man entgegen aller anderweitigen Behauptungen und Bemühungen nie wirklich allen gerecht werden, deswegen ist eine Eingrenzung auf den primär wichtigsten avisierten Kundenkreis nötig, je nach Priorität können andere Kundenkreise mitbedient werden bzw. die Websitestruktur später entsprechend angepasst werden.

Wichtig ist gerade bei Websites für eine breite Besucherschaft (Gesundheits-, Einkaufs-, Hobbyportale, Politik, Öffentlichkeitsarbeit, Ämter, Gemeinden, Touristik, Suchmaschinen, Schulen, etc.) die sogenannte Barrierefreiheit, die durchgängig sein muss.

Unternehmen müssen auf Ihre Corporate Design und Branding achten und viel mit visuellen Elementen arbeiten. Eine barrierefreie Navigation und Aufbereitung der Seite ist dennoch möglich, ohne dass der Look+Feel beeinträchtigt wird.

Budget/Zeitrahmen

Je genauer die Wunsch- und Zielformulierungen sowie Informationen über Verfügbarkeit von Ressourcen und Material desto genauer können Kosten und Zeitaufwand abgeschätzt werden.

Es ist meist so: es muss eine optimale Lösung für das vorgesehene Budget bzw. in dem Zeitraum bis zum Launch der Website gefunden werden.

Meine Vorgehensweise ist deshalb: falls sich aus irgendeinem Grunde Verzögerungen ergeben (z.B. der Kunde liefert die Daten nicht vollständig, Ansprechpartner sind in Urlaub, Änderungen nehmen mehr Zeit in Anspruch als vorgesehen, etc.) bzw. das Budget nur teilweise freigegeben wurde, so sind auf jeden Fall die Funktionalität und Gestaltung aller wichtigen Seiten bis zum Launchtermin sicherzustellen und weitere Seiten in den darauffolgenden Tagen auf den Server hochzuladen.

↑

2. Technische Vorausetzungen

Domainnamen

  • gibt es schon einen oder mehrere Domainnamen
  • gegebenenfalls Namenssuche
  • sorgfältige Überlegungen des/r Domainnamen

Internet Service Provider (ISP)

gibt es schon einen ISP, wie ist die Zufriedenheit mit ihm, oder soll ein neuer Host gefunden werden

Internetanschlüsse Zielgruppe

v.a. Kabel/VDSL, DSL, ISDN, Modem, mobil 3G, etc.
(Downloadzeiten sind trotz DSL Verbreitung immer kritischer Faktor, also Dateiengröße, Bildergrößen, Animationen, heavy scripts, Anbindung an Bannerservices, Datenbanken abklopfen)

Browserversionen

  • in der Regel Optimierung für Firefox, Microsoft Internet Explorer 6.x/7.x, 8, Camino, Mozilla, Safari, Opera
  • Websiteversionen für alte/5. Browsergenerationen können gegen Aufwand zusätzlich erstellt werden
  • spezielle abgespeckte Websiteversionen für Mobiltelefonie könnten ebenfalls gegen Aufwand erstellt werden

Optimierung für folgende Plattformen

für Windows (zu 92% vermutlich Windowsnutzer von Windows 95, 98, NT, XP) und Apple Macintosh (ca. 8% User), Linux

Monitorauflösung

  • die Mehrzahl der Internetsurfer besitzt 17” Monitore mit einstellbaren Auflösungen von 1024x768/1280x1024 Pixeln
  • trotz immer größerer Monitor am Schreibtisch surfen immer mehr User nicht direkt am Schreibtisch und haben Laptops mit oben genannter Auflösung; bei Meetings, bei denen auch ins Internet gegangen wird ist per Laptop/Beamer eine nicht so hohe Auflösung eingestellt ist, damit alle gut lesen können
    die Website wird deshalb in der Regel für sie optimiert
  • Besitzer von kleineren Monitoren werden die Website mit Scrollbalken dennoch ansehen können, Nutzer, die eine höhere Auflösung eingestellt haben, werden mehr Fensterinhalt ohne Scrollen sehen können- falls nicht sowieso ein scrollloses Konzept gewählt wird

Anzahl Monitorfarben

  • Tausende von Farben sind längst gang und gebe, Millionen von Farben fast schon Standardeinstellung
  • die altberühmten sog. 256 websafe colours braucht man nicht mehr zu berücksichtigen, aber Farb- und Bildoptimierung so zu machen, daß die Darstellung auch bei 256 Farben akzeptabel ist reduziert Dateigrößen bei Grafiken, und schafft bessere Kontraste
  • auch bei ungünstigen Lichtverhältnissen (bei den meisten Usern also...) muss alles ohne Anstrengung erkennbar sein (feinste Farbabstufungen und noch dazu in helleren Tönen finden zwar Designer oft toll, sind aber wegen der unterschiedlichen Gammawerte der Bildschirme und unvorhersehenbaren Lichtverhältnissen (Abendsonne Flughafen, Neonbeleuchtung Büro, Blendlicht Deckenbeleuchtung, etc.) kritisch zu bewerten

Serverdaten

Standort, Leitung, Betriebssystem, CGI-Anbindung, SSI, etc.

HTML, JavaScript, Java, Flash, QuickTime, Firewalls etc. Entscheidungen

hängen vom Computersystem / Browser der Zielgruppe ab und vom Zielgruppenverhalten

(i)Frames, Ausdruckmöglichkeiten von Seiten, Feedbackformulare etc.

muss siteübergreifend oder pro Rubrik einzeln entschieden werden je nach Funktionalität, Nutzen für den Surfer, bzw. bei Bedeutung für das Listing in den Suchmaschinen

etwaige Datenbankanbindung

  • erst sinnvoll, wenn sehr viele Projekte/Produkte online sind, die wirklich oft geändert oder ergänzt werden (viele Kunden oder Programmierer meinen, es müsste alles datenbankfähig sein, weil leichter zu pflegen oder man brauchte immer ein CMS, um effizienter arbeiten zu können; ich berate Sie gerne dahingehend)
  • CMS oder Datenbanksysteme bedeuten einen ziemlichen finanziellen und personellen Aufwand, es müssen darauf spezialisierte Programmierer hinzugezogen werden
  • für jedwege Datenbankanbindung kann ich natürlich die Templates gestalten.
↑

3. gestalterische Voraussetzungen

Corporate Design, Corporate Identity, Branding

  • liegen Logo, Firmenfarben, z.T. die Typographie fest
  • welche Gestaltungsrichtlinien gibt es national / international
  • welche Informationen, Materialien gibt es bereits in welcher Medienform und
  • in welcher Dateienform

(wenn auch beim WWW mit seinen vielen kleinen Unzulänglichkeiten v.a. in Bezug auf Typographie, Browserfenstergrößen und Proportionen und damit verbundenen Layoutbeschränkungen bzw. browserspezifischen Eigenarten (Art, Fabe der Scrollbalken, Bullets, etc.) immer nur Kompromisse gefunden werden können, so kann immer eine Lösung gefunden werden, die das Corporate Design auch im Web bestmöglich berücksichtigt)

Zielgruppe

die Zielgruppe will eine übersichtliche, komfortable Struktur, die ohne Gimmicks, aber vielleicht mit eleganter zurückhaltener Finesse schnell zu den gewünschten Informationen führt

hat der Kunde besondere Wünsche zum Erreichen der Zielgruppe?

↑

4. Erstüberlegungen Struktur, Umfang, Navigation

Grundgerüst, Beispiel

  • Gestaltungselemente, Seitenaufbau, Buttons, evtl. Hintergrundbilder, Einzelseiten, Festlegung der Rubriken, allgemeines Menü z.B.:
  • Eingangsseite (nötige Infos, Aktuelles, Introfilm (wovon ich meist abrate...), Kurzbeschreibung, worum geht es für wen warum von wem und wo)
  • Aktuelles (z.B. aktuelle Projekte, Marktanalysen, Trends, Adressänderungen, neue Prospekte, Messeteilnahme, etc. Pressmitteilungen)
  • Über Uns (Firmenhistorie, Zusammenhang mit evtl. Haupt/Elternfirma, Firmendaten (Gründungsjahr, Mitarbeiterzahl, Umsatzgröße, Standort), Firmenziel, Kunden Philosophie (evtl. unter Rubrik “Über Uns”)
  • Team (Gesamtteam, Abbildungen, Biografien, email-Adressen)
  • Kontakt (Adressen, Kontaktformular, Wegeplan, evtl. Umgebung, Standortbeschreibung)
  • Impressum
  • evtl. Sitemap, evtl. Feedback (Awards, Meinungen, Presse, Gästebuch)

Projekte/Produkte/Dienstleistungen/Galerin

Je nach Projekt und Umfang, werden das die aufwendigen und wichtigsten Teile der Website, logisch strukturiert, sinnvoll verknüpft, mit klarer, geschickter und eindeutiger Navigation.

optionale Archivmodul:

abgeschlossene Projekte, Geschichte, Pressearchiv in kompakter Form, weniger Bilder und Details, abgeschlossene Fotoserien, besonderer Augenmerk auf gute Übersichlichkeit und (fast endlose) Erweiterbarkeit

Funktionalität und Userfreundlichkeit im Vordergrund!

Feedback/Roll-Over-Effekte

großes Augenmerk muß auf eine ausgefeilte klare und vielschichtige Navigation gelegt werden, so daß der User von jedem Punkt aus alle anderen oder zumindest anderen wichtigen Seiten erreichen kann, und bei Projekten z.B. nach Rubriken blättern kann, oder sich von vorne nach hinten durch das Projekt blättern kann, aber jederzeit auf kurzen Wegen zu allen vorhergehenden Seiten zurück kann
Nicht jeder User kommt über die Startseite auf die Website, sondern z.B. über Google, Lesezeichen, Links von anderen Sites, Foren, emails, etc. und muss sich sofort zurechtfinden können

Sitestruktur, Hierachien, Navigation

  • eine gute Sitestruktur ist das a&o einer Website und braucht intensive Beschäftigung mit der Materie und dem Unternehmen, dessen Zielen und dem Zielgruppenverhalten
  • der User soll immer die Wahl der Fenstergröße, der Browsermenuleiste, des Überspringens haben, also echte freie Interaktivität
  • Möglichkeit der multiplen Navigation
  • etwaiges Scrolling der Seiten muß berücksichtigt werden, damit User mit größerem Monitor mehr Inhalt in einem Fenster sehen können
  • ein ganz bestimmtes Format mit ganz bestimmten Abfolgen festzulegen, heißt den User zu gängeln, der lieber so herumsurfen möchte, wie es ihm am liebsten ist
  • die Rubrik oder Einzelseite zu kennzeichnen/markieren, zeigt dem User, auf der richtigen Seite gelandet zu sein, und wo er sich im Verhältnis zu den anderen Menüpunkten befindet
  • bei großen Websites bieten sich zusätzlich sog. breadcrumb Menüpfade oder Sitemaps an
  • Benutzer sollte man aber auch nicht die Zeit mit allzu vielen oder sehr langen Menüs rauben oder gar mit auf/zuspringenden Menüfeldern, deren Inhalt er immer wieder neu durchsehen muss

Farben, Typo, Layout

Verwendung der Farben der Broschüren, Firmenfarben, bzw. deren ähnliche für optimale Darstellung im Internet

Verwendung von ausgeklügelten sinnvollen CSS (Cascading Style Sheets), quasi der Layoutsprache für die Browser.

Anlage eines schlichten Gestaltungsrasters (machbar mit Hilfe von StyleSheets und gegebenfalls (unsichtbares) Tabellenlayout für Webseiten, letztere ist aber unflexibler bzw. umständlicher anzupassen und zu optimieren pro Seite je nach Inhalt und sollten tatsächlich nur Daten vorbehalten sein.

Das Gestaltungsraster muss flexibel genug für verschiedene Browser und Monitore sein, damit alle Browser das Layout gleich handhaben, aber starr genug, dass es Corporate Design- und Layoutansprüchen gerecht wird.

Das ursprüngliche Ziel der Webstandards ist es allen Usern alle Inhalte des WWW zugänglich zu machen, unabhängig von Monitor/Betrachtungsmedium, Browser, Farben, Sehfähigkeit und Sprache (letzeres mit Hilfe automatischer Übersetzungssoftware - aber davon ist das WWW zur Zeit noch weit entfernt...)

Obwohl Webseiten exakt gleich aussehen können, kann die dahinterliegende Seitenkonstruktion und Programmierung jeweils ganz anders sein. Man kann den Code geschickt aufbauen und vieles im Hintergrund berücksichtigen, was der Funktionalität, dem User und auch der Suchmaschinenoptimierung und weiteren Websitepflege entgegenkommt.

↑

5. Kostenvoranschlag, Beispiel

Gründgerüst, Beispiel, 20 Einzelseiten, 3.600 Euro netto (zzgl. 19% Mwst = 4.284 Euro)

  • Einzelseiten und Grundseiten / Masterpages für die Projektanlage, Navigationsseiten / Sitemap
  • Briefing, Consulting (darf im Aufwand nicht unterschätzt werden; ist ausschlaggebend für die Zukunft/Erfolg der Website)
  • Konzeption (ebenso wichtig, eine Website ist nicht nur Herumschieben von Text und Abbildung; es unterscheidet sich in der Funktionalität total vom Print)
  • Skizzen (die die Abfolge, sprich: was passiert wenn der User dort oder dort klickt) bereits berücksichtigt
  • drei Gestaltungsvarianten mit ausgefeilter Navigation
  • komplette Ausarbeitung der Gestaltung und HTML-Programmierung Besprechungen, Korrespondenz
  • zwei Präsentationstermine mit etwaigen anschließenden zweimaligen Änderungen
  • ausführliche Beschreibung der Vorgehensweise (Konzept, Erläuterung der Umsetzung, etc.)
  • Hochladen auf den Server bzw. Überspielen der Site auf Kundenrechner bzw. CD/DVD
  • Aufwand insgesamt ca. 80-100 Stunden

einzelne weitere umfangreiche Projektmodule je nach Aufwand

Optimierung für die Suchmaschinen: ca. 1.000 Euro netto (zzgl. 19% Mwst = 1.190 Euro)

  • beeinhaltet stategische Planung von Layout, Bildbenennung, Seitentitelbenennung
  • Metatags bei den einzelnen Seiten bzw. Seiten einer Rubrik (keywords, tilte, description, robots, revisit, ocntant, language, date, expire, etc)
  • Check von Websites der Konkurrenz
  • Auswahl von zehn wichtigen Suchmaschinen (in D vornehmlich Google, 95 %)
  • Anmeldung der Seiten
  • Überprüfung nach einigen Wochen und gegebenenfalls verbessertes ‘Finetuning’, auch als Reaktion auf neue oder veränderte Konkurrenzwebsites

verfeinerte Resonanzaufforderung und -kontrolle: 750 Euro (zzgl. 19% Mwst = 892,50 Euro)

variantenreiche Aufforderungen an den Kunden Kontakt aufzunehmen, Prospekte anzufordern, ein Mail zu schicken (und dabei schon Betreff und Anfangssatz vorzugeben, und zwar entsprechende der Seite oder dem Projekt, wo die e-mail Aufforderung steht)

ausgefeiltes Kontaktformular (inkl. umfangreichem Austesten, Aufwand 1/2 - 1 Tag)

sonstige weiteren Arbeiten, Änderungen nach Stundensatz bzw. pauschal nach Angebot

↑

6. Annahme/Vertrag

dabei ist darauf hinzuweisen, dass eine Vorauszahlung von ca. 1/4 für die Konzeption und erste Präsentation üblich und gerechtfertigt ist

de Nijs Design hat ausreichend unter Beweis gestellt (Ansprechpartner der Referenzkunden werden Ihnen gerne zur Überprüfung genannt), dass der Kunde ausgezeichnete, funktionierende, saubere Websites zuverlässig und innerhalb des vereinbarten Zeitrahmens erhält, so dass eine Kundenhaltung wie 'Abwarten bis zum Launch und 'Gucken wir mal, ob dieses Büro überhaupt unsere Erwartungen erfüllt' nicht mehr akzeptiert wird.

↑

7. Brainstorming, Konzepte

ähnlich wie bei 9. Ausarbeitung, jedoch noch nicht im Detail
(bereits erste Ideen konzipiert, skizziert, Konkurrenzsites und Südhausbau Site durchsurft)

↑

8. visuelle Erstentwürfe in Photoshop von Beispielseiten

Eingangsseite, normale Seite, detailierte Projektseite bzw. ausreichend viele Seiten, um Darstellung, Strukutur und Navigation deutlich zu machen.

Präsentation dieser Seiten und Berücksichtigung noch etwaiger Änderungswünsche
(ähnlich wie bei 9. Ausarbeitung, jedoch noch nicht im Detail)

↑

9. Ausarbeitung der Website

  • Sitestruktur, Dateienbenennung, Seitenbenennung
  • mit/ohne Frames, dynamic boxes je nach topic, scrolling/noscrolling je nach topic, evtl. Pop-Up-Fenster
  • Meta-Tags, andere Headeritems, Force-Frame-Scripts, Resize-Window, etc
  • Navigation, Lesbarkeit, Augenfreundlichkeit, Übersichtlichkeit (Layout)
  • Barrierefreiheit / SEO
  • Schrift/Typo, Farben, Topic-Codierungen, Markierungen, Hervorhebungen, Roll-Over (Feedback)
  • Seitengrundgerüste
  • Anlage von Masterpages und Einzelseiten (Abmessungen, Verknüpfungen, Feedbacks,
  • Erstellung, Bearbeitung, Optimierung von Navigationselementen und Grafiken/Fotos
  • Textformatierungen, - optimierung, z.T. -redigierung (mit Erlaubnis des oder durch den Kunden)
  • Kontrollchecks von angelegtenTestseiten
  • Anlage aller Einzelseiten unter Berücksichtung aller Detailwünsche (z.B. e-mail-Fenster Vorgaben Betreff und Inhalt, suchmaschinengerecht)
  • etc. etc. etc.
  • wie später online (aber nur für den Kunden einsehbar) - nur noch kleine Änderungswünsche möglich im Rahmen des vereinbarten Budgets
↑

10. Präsentation

  • Terminabsprache mit allen Entscheidungsträgern
  • Präsentation in voller Funktion „quasi-online“
  • nur noch kleine Korrekturen möglich im Rahmen des vereinbarten Budgets
↑

11. Finale Versions-Ausarbeitung

mit nochmaligen Kontrollchecks aller Verknüpfungen in verschiedenen Browserversionen und auf verschiedenen Plattformen

↑

12. Finale Präsentation

Abnahme durch den Kunden, Launch der Website (durch FTP Upload auf den Server durch den Kunden oder die Agentur)

Champagner, Konfetti, Feuerwerk ;-)

↑

13. optional: Suchmaschinenoptimierung SEO / PR

  • und Anmeldung bei den Suchmaschinen, mehrmalige Rankingkontrolle innerhalb der ersten drei Monate, etwaiges geändertes Finetuning der Seiten
  • andere PR Maßnahmen für die Website wie Googlemaps, Verlinkung mit anderen, Anmeldung bei geeigneten Portalen, Bannerentwicklung u.a.
  • Für manche Kunden ist Suchmaschinenoptimierung ein absolutes Muss und bedarf zusätzlichen Aufwandes, für die anderen mache ich es in der Regel selbstverständlich mit beim Aufbau und Anlegen der Dateien und Seiten.

Hier habe ich noch eine extra Seite bzgl. SEO angelegt ;-)

↑

14. optional: Websitepflege und -aktualisierungen

  • pauschal, nach Aufwand oder nach Projekt,
  • Webseitenabrufe-Statistik erstellen, etc. (kann ich dem Endkunden zeigen, dann kann er diese selbst auswerten)
  • Verbesserungs-, Erweiterungsvorschläge machen

bei vielen kleinen Änderungen kann ich später auch einen Mitarbeiter beim Endkunden darin schulen, wie er sich mit einem entsprechenden Programm Dokumente vom Webserver holt, ändert und wieder hochlädt

Details siehe Websitepflege

↑

Besonderheiten bei der Ausführung

Folgende Details halte ich für sehr wichtig, auch wenn sie nicht so offensichtlich sind, sondern in der Funktionalität, der Navigation und im Hintergrund wirken, allerdings natürlich Zeit kosten und deshalb auch die Stundenzahl in die Höhe treiben:

  • absolut wasserdichte eindeutige, für den Aussenstehenden sofort klare Sitestruktur
  • Userfreundlichkeit auf allen Ebenen, in allen Elementen
  • ausgeklügelte Navigation mit vielen Querverknüpfungen
  • Berücksichtigung von Bookmarking, Einstieg in Einzelseiten, Zurückgehen in den Seiten, Übersichtsmöglichkeiten, Ausdruckmöglichkeiten
  • Sorgfalt bei der Typografie (z.B. Layout, Lesefreundlichkeit, Kerning)
  • Sorgfalt bei der Optimierung der Navigations- und Gestaltungselemente
  • Sorgfalt bei der Bildoptimierung (individuell, kein Batching, evtl. günstige Bildauschnittwahl, günstige Bildgrößen, bestmögliche Qualität bei gleichzeitig geringer Dateiengröße)
  • Sorgfalt bei der Verwendung von Seitentiteln, Dateinamen, und Metatags in den Headern
  • Beschriftung aller Bilder im Hintergrund (so daß der User sehen kann, was anstelle des Grafiksymbols geladen wird, falls der Server langsam arbeitet, der User mobil surft, oder der User gar ‘Grafiken ausschalten’ aktiviert hat, um schneller surfen zu können, sowie gute Dateinamen, um Bilder auf für (Google-)Bildersuche zu optimieren

(sollte der Kunde darauf keinen Wert legen, reduzieren sich die Kosten – aber dann würde die Gestaltung nicht mehr dem hohen Anspruch eines guten Unternehmens, dessen Image und den Erwartungen der User gerecht, und ich würde sie dann nur noch ungern bzw. gar nicht machen, da es mir schlichtweg widerstrebt, qualitativ schlechtere Arbeiten zu machen.)

↑
SOON
SOON
SOON