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, aber oft auch leidigsten 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 gesichert werden.

Auf dieser seitwärts scrollende Website 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.

Das flexibele Verwaltungssystem (WordPress) macht einfache Textveränderungen und das Hinzufügen von Fotos und handgezeichneten Lageplänen auf der Website physiotherapieaufderinsel.de ebenso möglich wie die Erweiterung um Onlineformulare.
Im Lauf der Jahre wurde die Website zudem nachgerüstet mit einem SSL-Zertifikat, um vertrauliche Daten über eine sichere Verbindung (https://) verschlüsselt übertragen zu können, und ausgestattet mit einem modernen Theme. Auf diese Weise entwickelt die Website sich stetig weiter und ist seit 2011 stets aktuell.

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.

Der junge Unternehmerverband hat sich mit utrecht-noordoost.nl bewusst für eine leicht anpassbare Webseite entschieden. Auf diese Weise kann sie in alle Richtungen ausgebreitet werden, wenn zum Beispiel Raum zum Vorstellen gemeinsam organisierter Projekte benötigt wird. Um den Verwaltungsaufwand für den Vorstand gering zu halten, wurde eine Zahlungsfunktion für die Jahresbeiträge eingerichtet.

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.

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

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.

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.

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.

Eine meiner ersten Webseiten ist naturheilpraxis-rfg.de . Dank des Verwaltungssystems (WordPress) kann die Kundin ihre Webseite jederzeit selbst mit allen aktuellen Informationen versehen. Inhaltlich ist die Seite so seit Jahren auf dem neusten Stand, und auch technisch erweist sie sich als verlässlich. Zudem habe ich die einzelnen Komponenten jeweils aktualisieren und an die technischen Entwicklungen anpassen können, sodass sich die Webseite automatisch anpasst an die Bildschirme von Smartphones und Tablets. Naturheilpraxis-rfg.de ist darüber hinaus eine meiner am schnellsten ladenden Webseiten.

Oder besuchen Sie www.vofhethuis.nl, die Webseite von Hedwig Maes und Michel Jacobs, zwei Innenarchitekten aus Utrecht in den Niederlanden. Wichtig war bei dieser Webseite mit ihren vielen Fotos vor alle eine gute Struktur. Da es sich um die Gestaltung des Inneren von Häusern handelt, lag es nahe, von außen nach innen zu gehen, als ob sich Türen öffnen würden. Dargestellt in einer sogenannten Lightbox kommen die Fotos mit allen Details schließlich auch einzeln gut zur Geltung.

Das Redaktionsbüro tastenfischer. ist eine Gemeinschaft freiberuflicher Journalisten. Ihre Webseite tastenfischer.de 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 um ein System, das die Seite auf unterschiedlichen Computerbildschirmen, Tablets und mobilen Telefonen gleichermaßen gut darstellen konnte. Darüber hinaus lag der Fokus auf Details im Layout, wie der Unterbringung von viel Text auf eine übersichtliche Art und Weise und der Nutzung verschiedener Schriftarten. Dies konnte ich umsetzen durch die damals neue Technik von google fonts.

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.