zum Seiteninhalt

beate de nijs
de nijs design
linienstr. 85
d- 82041 oberhaching bei muenchen
germany

t +49-89-64289694
e ddd@denijsdesign.de
w www.denijsdesign.de

 

Beate de Nijs Porträtfoto

Ich habe schon 1995 für Modems ultraschnelle und asketische Webseiten programmiert; seitdem ist das Internet meine große Leidenschaft geblieben – mit allem Für und Wider und sämtlichen Entwicklungslinien, die ich kritisch hinterfrage, so dass ich alles an Erfahrung und Kompetenz gerne an meine Kunden und Interessenten weitergebe.

Hauptsächlich konzipiere, gestalte, programmiere und pflege ich Websites v.a. für kleinere Unternehmen und Selbständige.

Als Designerin und Programmiererin weiß ich die Ansprüche beider Welten, Ästhetik und Funktionalität zu verbinden.

Durchdacht, sinnvoll strukturiert und in jeder Hinsicht benutzerfreundlich; klar, schön, leicht zu aktualisieren, suchmaschinenoptimiert, barrierefrei.

Ich weiß um all die Anforderungen hinsichtlich Funktionalität, echter Benutzerfreundlichkeit, Barrierefreiheit, Responsiveness, Trends und alle damit verbundenen Kompromisse; dabei fungiere ich auch als kompetente Beraterin und konstruktive Kritikerin in allen Belangen rundherum (Corporate Design, Texten, Suchmaschinen, Social Media, Organisation, Sicherheit, visuelle Wahrnehmung, Schulung).

Meist ensteht mit dem Kunden ein Gesamterscheinungsbild – Logo, Visitenkarte, Briefausstattung, Website, Anzeigen, Flyer, Broschüren, Plakate, Buchcover – überzeugend aufeinander abgestimmt. Oft finden sich auch geeignete Fotos aus meinem eigenen großen Fundus dafür.

Wer ein paar Details und Anhaltspunkte mag:

Webdesign

 

Corporate Design / Grafikdesign / Print

 

Foto- / Bilddesign /-bearbeitung

 

Schulungen

Schulungen beim Kunden für Einzelpersonen oder kleine Gruppen
( 1/2 tageweise 300-400 Euro zzgl Mwst. (je nach Vorbereitungsarbeiten und Anfahrtsweg)

Intensivschulungen bei mir für Einzelpersonen am Einzelplatzrechner auch stundenweise (75 Euro).

 

Website Konzeption/Webdesign im Detail

Ein Internetauftritt soll (neu)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. Präsentation - Funktionen wie später online
  10. Anlegen aller Einzelseiten, Fertigstellung aller Bild-, Navigations- und Textelemente, finale Version mit nochmaligen Kontrollchecks
  11. finale Präsentation, Abnahme durch den Kunden, Launch der Website
  12. optional: Anmeldung bei den Suchmaschinen, Rankingkontrollen, Suchmaschinenoptimierung SEO / PR
  13. optional: Websitepflege und -aktualisierungen
  14. Barrierefreiheit
  15. Responsive Webdesign
  16. Weitere Besonderheiten bei der Ausführung
↑

1. Briefing

Firmenprofil Kunde

Voraussetzungen Zusammenarbeit

Vorausetzungen Arbeitsbeginn

Ziele des Internetauftritts z.B.

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 bei allen Seiten, Texten, Grafiken und Fotos bzw. den begleitenden und im Hintergrundcode vorhandenen Erläuterungen, berücksichtigt werden muss.

Unternehmen müssen auf ihr 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 Empfehlung ist, sich sehe gründlich und grundlegend das Konzept und Design zu überlegen und zunächst eine Art Grundgerüst zu programmieren, das sich später flexibel ausbauen lässt. So sind auf jeden Fall die Funktionalität und Gestaltung aller wichtigen Seiten bis zum Launchtermin sichergestellt und weitere Seiten und Rubriken können nach und nach ergänzt werden.

↑

2. Technische Vorausetzungen

Domainnamen

Internet Service Provider (ISP)

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

Internetanbindung Zielgruppe

Flasfaser, WiFi, 5G, LTE oder bisweilen weniger (Downloadzeiten sind hinsichlich Usergeduld und Nachhaltigkeit immer ein kritischer Faktor, also Dateiengröße, Bildergrößen, Animationen, heavy scripts, Anbindung an Bannerservices, Datenbanken abklopfen). Ich habe Webseiten schon für Modems optimiert und achte von jeher auf minimalen, asketischen Code und geschickten Aufbau der Seite hinsichtlich, was in welcher Reihenfolge geladen wird.

spezielle angepasste oder abgespeckte Websiteversionen für Mobiltelefonie können ebenfalls gegen Aufwand erstellt werden

Serverdaten

Standort, Leitung, Betriebssystem, CGI-Anbindung, SSI, Login-Daten, SFTP-Upload, SSL-Zertifkate, etc.

HTML, CMS, JavaScript, Java, Firewalls, Audio-Video, .mp4, etc. Entscheidungen

hängen vom Computersystem / Browser der Zielgruppe ab und vom Zielgruppenverhalten und von der Zukunft der Website (ist sie eine temporäre Aktion oder soll sie auch in 10 Jahren noch funktionieren)

Ausdruckmöglichkeiten von Seiten, Feedbackformulare etc.

ja, manche Leute drucken immer wieder Seiten aus, also sinnvollen Webseitenaufbau gleich mitplanen

etwaige Datenbankanbindung

↑

3. gestalterische Voraussetzungen

Corporate Design, Corporate Identity, Branding

(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 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

Projekte/Produkte/Dienstleistungen/Galerien

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

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. Tabellenlayouts/Mehrspaltigkeit für Webseiten sind unflexibel und sollten tatsächlich nur Datensätzen/Tabellen 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, motorischen und visuellen Einschränkungen 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.

The web is about information, not aesthetics!
(aber als Designer kann ich es trotzdem gut aussehen lassen)

↑

5. Kostenvoranschläge, Beispiele

Gründgerüste, Arbeitsaufwand 50-100 Std.: für ca. 10 Einzelseiten ca. 2.200 Euro (zzgl. 19% Mwst = 2.618 Euro) bzw. mit mehr Rubriken/Hierarchien für 20 Einzelseiten ca. 3.600 Euro netto (zzgl. 19% Mwst = 4.284 Euro)

einzelne weitere umfangreiche Projektmodule je nach Aufwand

Suchmaschinenoptimierung: ca. 1.000 Euro netto (zzgl. 19% Mwst = 1.190 Euro)

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

Eine Vorauszahlung von ca. 1/4 für Konzeption und erste Präsentation ist üblich und gerechtfertigt. Viele Kunden schlagen das sowieso vor, v.a. wenn sie selber wissen, dass sie es mit der Text- bzw. Bildlieferung dauern wird....

↑

7. Brainstorming, Konzepte

Kann auch mit dem Kunden zusammen geschehen, ist oft sehr produktiv, führt zu Weiterentwicklungen, Neuausrichtungen, zumindest aber neuen Sichtweisen und Ideen, v.a. hinsichtlich der Positionierung der eigenen Person, Dienstleistung oder Marke.

↑

8. visuelle Erstentwürfe von Beispielseiten z.B. in Photoshop

Eingangsseite, normale Seite, detailierte Projektseite bzw. ausreichend viele Seiten, um Darstellung, Struktur 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)

Realistische Präsentation und Beurteilung möglichst am Monitor und in verschiedenen Browsern (auf großzügigen weißen Ausdrucken wirken Websites sehr viel ... anders)

Mehrere Besprechungs- und Entwurfsdurchgänge bis zur endgültigen Entscheidung.

↑

9. Ausarbeitung der Website

↑

10. Präsentation

↑

11. Finale Versions-Ausarbeitung

mit nochmaligen Überprüfungen aller Verknüpfungen in verschiedenen Browserversionen und auf verschiedenen Plattformen / Geräten

↑

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, Social Media Platzierung

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

↑

14. optional: Websitepflege und -aktualisierungen

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

↑

14. Barrierefreiheit

Barrierefreiheit bei Webseiten bedeutet die größtmögliche Benutzerfreundlichkeit und erleichtert auch nicht gehandicappten Personen das Surfen, die Lesbarkeit, das Auffinden von Informationen oder Produkten sowie das erfolgreiche Bestellen oder Ausfüllen von Formularen. Zugleich suchmaschinengerecht (für Websuchmaschinen also auch Datenbanksuchen) erreicht man mit barrierefreien Webseiten mehrere Ziele. Und entgegen aller Vorurteile: Webseiten können gleichzeitig ästhetisch ansprechend und barrierefrei sein, wenn man weiß, worauf es ankommt :-)

Viele Firmen oder Content Management Systeme bieten seit 2012 Barrierefreiheit als absolute neuartige Notwendigkeit an. Dabei habe ich die notwendigen Kriterien seit jeher wie selbstverständlich berücksichtigt, meinen Kunden erläutert und mit ihnen abgesprochen, wie streng ich die Umsetzung vornehmen soll.

Definition/Gesetz: Barrierefrei sind gestaltete Lebensbereiche, wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind. §11 des BGG (Behindertengleichstellungsgesetzes), das sog. BITV 2.0 (Barrierefreie Informationstechnikverordnung) gilt für das Internet und verlangt Barrierefreiheit für alle Websites von Behörden, staatlichen Institutionen, etc. bei Einschränkung der Benutzer durch motorische Behinderung, Gehörlosigkeit und Schwerhörigkeit, Blindheit und Sehbehinderung, Lernbehinderung.

Webseiten als auch .pdfs müssen so z.B. ohne Maussteuerung oder Sehvermögen wahrnehmbar sein (Stichworte: Linkspringen durch Tabulatortaste, Cursorsteuerung und Mausklicks durch Kopfmaus, Siff'nPuff-Röhrchen, Wangenpolster, Vorlesesoftware/Screenreader, Voice-Over (iOS), Braille-Zeile, Sprachsteuerung, ...diverse Zoom- und Bildschirmeinstellungen dürfen nicht konterkariert werden). Hinzu kommen Varianten in einfacher Sprache als auch Übertragungen in die Gebärdensprache.

↑

15. Responsive Webdesign

Responsive Webdesign ist ein neumodisches Schlagwort aus dem Jahr 2012, das nichts anderes bedeutet, als dass sich Webseiten dem jeweiligen Benutzergerät anpassen sollen, so dass ein möglichst einfaches Surfen ermöglicht wird. Je nach Inhalt und Ziel der Website können dabei verschiedene Wege begangen werden. Am günstigsten und effektivsten beginnt das bereits bei der Websitekonzeption, damit weder Aussagekraft noch der Look & Feel einer Website verloren gehen.

Historie: Jahrelang konnten Webseiten gar nicht anders als responsiv gemacht werden. Dann kamen Designer mit dem Anspruch Webseiten in ein so starres (Tabellen-)Korsett zu pressen, damit es möglichst den starren Printkonzeptionen entspräche (was aufgrund der unterschiedlichen Proportionen von hochformatigem Seiten und querformatigen Monitoren sowie zig anderen Gründen (die ich Ihnen gerne auf Anfrage erläutern kann...) eh nie ganz möglich sein konnte...). Mit den verschiedenen Browserfenstern verschiedenste – auch mobiler – Geräte ist der Wunsch nach flexibler, automatischer Anpassung wieder gestiegen :-)

Trotzdem muss immer abgewogen werden, auf welchem Device welche Anpassungen tatsächlich sinnvoll für das Ziel des Webseitenbetreibers sind (z.B. sind Miniatur-Vorschaubilder oft unbrauchbar oder viele Videos aufgrund ihrer Dateigröße für Mobilfunkdownloadzeiten nicht unbedingt sinnvoll)

 

↑

16. Weitere 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:

(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)

↑