Webdesign

Drei Punkte zur Webseitenerstellung

VORBEREITUNG

Auftragsdefinition

Sie bildet den Ausgangspunkt von allem. Hier lerne ich das Projekt kennen, Ziele und Zielpublikum werden definiert. Es wird geklärt, wer für die verschiedenen Teile der Webseite verantwortlich ist.
Dieser Punkt stellt oft einen überraschend großen Anteil bei der Entstehung einer Webseite dar, doch je genauer hier alle Einzelheiten vorbesprochen und geklärt werden, desto weniger Fragen und Missverständnisse sind zu erwarten, und umso besser lässt es sich arbeiten und wird das Ergebnis sein.

· Gibt es schon eine Domain?
· Wer kümmert sich um einen Host/Server?
· Ist schon ein Logo vorhanden?
· Neben den Grafischen Elementen gehören zu einer Webseite gute und suchmaschinenfreundlich geschriebene Texte – von wem werden diese verfasst?
· Und bis wann werden sie angeliefert?
· Meist sollen auch Fotos auf die Webseite – wer macht diese?
· Oder sucht nach Stockfotos?

Analyse

Diese kommt dann zum Einsatz, wenn es sich um das Umgestalten oder sogar um den Neubau einer bestehenden Webseite handelt oder es um das Beurteilen der Webseiten der Konkurrenz geht.

Konzept

Nach einem ausführlichen Briefing mit klarer Zieldefinition mache ich mich an die Konzeption der Seite. Aufbau der Webseite, Navigationsstruktur, Seitenelemente und Inhalte werden skizziert.

GESTALTUNG

Inhaltserstellung

Auch ohne das fertige Design kann und sollte bereits mit der Erstellung des Inhalts angefangen werden. Der Inhalt ist das Wichtigste einer Webseite, hierfür wird sie besucht. Alle Texte, Fotos, Grafiken, Videos oder sonstiger Inhalt sollten qualitativ hochwertig, sinnvoll, auf den Punkt gebracht und für Suchmaschinen optimalisiert sein.

Grafische Gestaltung

Vor einem konkreten Entwurf erstelle ich das Design der Webseite anhand von ein oder zwei Beispielseiten als Skizze auf Papier oder grob in einem Grafikprogramm. Wenn die Entwürfe freigegeben sind, erfolgt die Grundgestaltung im Browser.

Technische Umsetzung

Für viele der Webseiten, die ich gestalte und erstelle, nutze ich WordPress, damit sie mit einem Verwaltungssystem (CMS – Content Management System) ausgestattet sind. Ohne viel technische Kenntnis hat der Besitzer so Zugang zu seiner Seite und ist in der Lage, diese jederzeit selbst zu aktualisieren und zu verändern.

REALISIERUNG

Zusammenführen aller Elemente

Noch fehlende Inhalte werden spätestens jetzt in das CMS eingegeben und das Design bekommt seinen letzten Schliff.

Testen

Die Seite wird von Testpersonen mit bestimmten Aufgabenstellungen durchgeklickt (Usability Testing). Alles wird so lange optimiert, bis man zufrieden ist.

Launch

Die Webseite wird veröffentlicht.
Nach ein paar Wochen mit gesammelten Erfahrungen und Rückmeldungen werden ggf. letzte Verbesserungen durchgeführt.

Dieser Schritt ist fortlaufend!
Irgendwann kommen neue Inhalte dazu, und es werden vielleicht wieder Anpassungen nötig. Das geht so lange, bis die Webseite den gegebenen Anforderungen nicht mehr entspricht oder schlicht visuell oder technisch veraltet ist. Dann beginnt der Prozess von neuem.

Drei Punkte zur Webseitenpflege

WARTUNG

Eine Webseite ist nicht nur komplex im Entstehungsprozess, sie entwickelt sich auch nach ihrer “Fertigstellung” immer weiter.

· Die Zusammenstellung eines Mitarbeiterteams verändert sich,
· Kunden wünschen mehr Service,
· technische Veränderungen stellen neue (und teilweise unvorhergesehene) Ansprüche von außen.
· Neue Texte, Links oder Fotos werden gebraucht.

Mindestens einmal monatlich sollte eine Webseite aktualisiert oder sollten neue Inhalte veröffentlicht werden. Die Attraktivität von Webseiten wird durch regelmäßige Pflege und Aktualität erhöht – nicht nur für die Besucher, sondern auch für Suchmaschinen.

Die Wartung und Pflege von Webseiten betrifft vor allem aber auch die Aktualisierung aller technischen Elemente (Content Management System und alle anderen Softwareelemente wie Theme und Plugins). Dies ist unbedingt notwendig für die Sicherheit und Funktionsfähigkeit einer Webseite.

QUALITÄTSSICHERUNG

Qualitätssicherung ist ein Prozess. Eine hochwertige Webseite erhält man durch die ständige Prüfung alter Inhalte, das regelmäßige Ergänzen mit neuen Inhalten, das Testen der Dokumente, das Hinterfragen aller gemachten Aussagen und des Designs.
Ihre Webseitenbesucher sind Ihre größten Kritiker oder auch ihre zufriedenen Kunden.

DATENSICHERUNG

Eine regelmäßige Datensicherung gehört schließlich zu den wichtigsten Aufgaben bei der Pflege einer Webseite.
Dabei sollte in festen Abständen (und zusätzlich immer nach größeren Umbauten oder dem Einpflegen von viel neuem Inhalt) alle Seiten, Dateien und zugehörige Datenbanken gespeichert werden.

Website Traxxys

Auf der Webseite traxxys.com werden die unterschiedlichen Kundenarten und Herangehensweisen der Unternehmensberatung in übersichtlichen Tabellen dargestellt und in kurzen, persönlichen Interviews beschrieben. Die Videos werden in einem Wechsler präsentiert, versehen mit Thumbnails aus Standbildern, die an die Gesamtgestaltung der Website angepasst wurden.

Website Bewegungaufderinsel

Neue Praxis, bekannter Standort, bekannter Name, neue Webseite: Auf bewegungaufderinsel.de werden Räumlichkeiten und Angebot übersichtlich und ansprechend präsentiert. Logoentwurf, Symbole und Farbpalette ziehen sich auch durch die zugehörigen Produkte wie Fensterbeklebung, Visitenkarte und Flyer.

Website Naturheilpraxis Raum für Gesundheit

Wieder einmal wurde es höchste Zeit, eine Webseite von Grund auf zu modernisieren. Vor 12 Jahren habe ich naturheilpraxis-rfg.de (damals noch unter anderem Namen) entworfen und gebaut und seitdem betreut. Die neuen Komponenten bringen die Webseite technisch auf den neusten Stand und werden von mir weiterhin regelmäßig aktualisiert. Eine gründlich überarbeitete Struktur sorgt zudem für eine bessere Übersicht und klarere Zusammenhänge.

website VOF Het Huis

Dies ist die völlig neu gestaltete Webseite www.vofhethuis.nl von zwei Innenausstattern in den Niederlanden. Nach 10 Jahren haben sie ihren Internetauftritt überdacht und grundlegend verändert. Ausschlaggebend dafür waren die Sozialen Medien und insbesondere ihre Instagram-Seite; hier können sie schnell und unkompliziert Fotos ihrer Arbeit posten, Einblicke in Gestaltungsprozesse geben und auf Inspirationsquellen verweisen. Die Website dagegen liefert gut strukturiert und komprimiert alle wichtigen Informationen.

versionfrancaise

Die Übersetzerin Emmanuelle Tardif benötigte eine dreisprachige Webseite. In der Desktop-Version von versionfrancaise.nl wurde dies gelöst durch die Nutzung von Seiten in Karteikartenoptik mit Reitern; dadurch sind die Sprachen gleich im Bild und einfach auszuwählen.

Website franksorge.de

Auf dieser seitwärts scrollenden Webseite präsentiert Frank Sorge eine Auswahl seiner Bilder in einer Galerie. Zudem fungiert franksorge.de als Verteiler zu den anderen beiden Websites des Fotografen und Imkers. Gebaut als HTML5-Template ist sie recht statisch, vor allem jedoch leicht, stabil und so gut wie pflegefrei.

Mit vielen Fotos wird auf casa-brava.com die gleichnamige, ruhig gelegene Spanische Finca vorgestellt. Neben Bildern des Hauses und im Besonderen des Gästebereichs gibt es einen Lageplan und Fotos der näheren und weiteren Umgebung, die zusätzlich mit Entfernungsangaben versehen sind.

In diesen Zeiten erschien es mir wichtig, einem aktuellen Thema Raum zu geben. www.less-co2.nl ist einer von vielen Ansätzen, ein weiterer, aktiver Schritt gegen das Gefühl der Ohnmacht. Ein Platz für Ideen und Initiativen.

Auf der Webseite xeniaruhrig-psychotherapie.de stellt sich eine Psychotherapeutin aus Berlin vor. Die Fotos tragen dazu bei, einen Eindruck von sowohl der Therapeutin als auch den Räumlichkeiten der Praxis zu vermitteln. Besonderes Augenmerk wurde darauf gelegt, häufig gestellte Fragen in visuell übersichtlicher Form zu beantworten.

Diese Webseite ist ein sogenannter One Pager. Da tevreede.nl eine relativ kleine Webseite ist, habe ich ein zum Inhalt passendes Foto mit einer attraktiven Gestaltung und einer guten User-Experience (UX) kombiniert, was man auf Deutsch wohl am ehesten mit Nutzererfahrung, Bedienerlebnis oder Bedienungsfreundlichkeit übersetzen würde.
Startseite bienenschwarm-berlin.de
Bei der Webseite www.bienenschwarm-berlin.de handelt es sich um eine kleine, eher statische Seite. Deshalb habe ich eine HTML5-Vorlage gewählt, die ich mit den Fotos und Texten meines Kunden versehen habe. Davon ausgehend, dass Menschen im Freien einen Bienenschwarm finden und auf der Stelle einen Imker suchen, der sich darum kümmert, wollte ich eine Webseite, die auf Mobiltelefonen ebenso wie auf Computern und Tablets (auch im Hochformat) gut lesbar und leicht zu navigieren ist und zudem optisch ansprechend ist. Um sie noch benutzerfreundlicher zu machen, wird Besuchern der Seite beim Anklicken der Telefonnummer automatisch angeboten, diese in den eigenen Kontakten zu speichern (iPads und Kindles) oder sie direkt zu wählen (Androids und iPhones).
Startseite marthacastaneda.nl

Dies ist die Webseite marthacastaneda.nl. In diesem Fall wurde ich gebeten, die von einem anderen Designer begonnene Webseite fertig zu stellen. Auch wenn es eine ziemliche Herausforderung sein kann, die Arbeit eines Anderen weiterzuführen, so ist es doch immer ein gutes Gefühl, wenn das Ergebnis schließlich der Vorstellung des Kunden entspricht.

Startseite studio-danse.de
Die Webseite www.studio-danse.de gehört zu einem Tanzstudio in Berlin, das hauptsächlich Modernen Tanz sowie Ballett für Kinder und Jugendliche anbietet. Ich hatte das Logo und einige andere grafische Elemente bereits für die Gestaltung von Studio-Danse-Postkarten und -Broschüren kreiert und konnte diese nun anpassen für die Nutzung im Internet. Thematisch habe ich die Bewegung des Tanzes aufgegriffen und in der Art der Navigation der Webseite, in der fortlaufenden Galerie am Ende und in den Verschiebungen und Überlagerungen der Fotos im Hintergrund genutzt.
OVNO website

Der Unternehmerverband hatte sich bewusst für eine leicht anpassbare Webseite entschieden, sodass diese in alle Richtungen ausgebreitet werden konnte. Um den Verwaltungsaufwand für den Vorstand gering zu halten, war zudem eine Zahlungsfunktion für die Jahresbeiträge eingerichtet worden.

physiotherapieaufderinsel.de

Neben vielen Fotos und Texten wurde das Erscheinungsbild dieser Website mitbestimmt durch dekorative Grafiken, handgezeichnete Lagepläne und Onlineformulare. Bis zur Schließung der Physiotherapiepraxis habe ich diese Website elf Jahre lang betreut und im Laufe der Zeit nachgerüstet mit einem SSL-Zertifikat und einem modernem Theme.

Startseite naturheilpraxis-rfg.de
Eine meiner ersten Webseiten war gabrieledziemba.de. Dank des Verwaltungssystems (WordPress) konnte die Kundin ihre Webseite jederzeit selbst mit allen aktuellen Informationen versehen. Inhaltlich war die Seite so jahrelang immer auf dem neusten Stand. Auch technisch habe ich die Website aktualisieren können, als Smartphones und Tablets auf den Markt kamen.

Erst vor Kurzem habe ich die Website komplett modernisiert (siehe oben).

Tastenfischer Website
Das Redaktionsbüro tastenfischer. war eine Gemeinschaft freiberuflicher Journalisteninnen. Ihre Webseite brachte damals neue technische Herausforderungen mit sich und sorgte wieder einmal für den Ausbau meiner fachlichen Kenntnisse: Erstmals ging es bereits beim Bau der Webseite darum, sie für alle Bildschirme (Computer, Tablets und mobile Telefone) zu optimieren. Beim Layout musste zudem sehr viel Text auf eine übersichtliche Art untergebracht werden, und es wurden zwei verschiedene Schriftarten eingefügt. Dies war erstmals möglich durch Google Fonts.
Startseite optimaal-gewichtsenvoedingscoach.nl

Im Entwurf dieser Webseite wollte die Niederländische Ernährungsberaterin ihre Südafrikanischen Wurzeln sichtbar werden lassen. Sie nutzte die Blog-Seite, um ihre Rezepte zu veröffentlichen, die mithilfe eines Systems von Kategorien und Schlagwörtern durchsucht werden konnten. Darüber hinaus beinhaltete die Webseite die Funktion zur Erstellung und Versendung ein saisonalen E-Rundschreibens.

Startseite mijn berlijn

Zum Schluss noch meine beiden „Sandkästen“. Auf diesen Seiten kann ich ungehindert Neues ausprobieren oder mich an technische Herausforderungen wagen.
Auf der Webseite mijn berlijn konnte ich vor allem auch einige Entwurfsideen realisieren.

Gekriggel & Gekrabbel ist nach dem Umzug auf einen neuen Server auch wieder online. Auf dieser Webseite befindet sich die einzige Audiodatei, die ich je benutzt habe.