Präsentation des Entwurfs im Browser

Mit diesem Artikel möchte ich einmal meinen Designprozess bei der Erstellung einer Webseite präsentieren. Bei der kreativen Disziplin des Webdesigns kommt es darauf an, Konzept, Inhalt und Gestaltung so zu verknüpfen, dass eine perfekte Einheit entsteht.

Eine weitere Herausforderung beim Design für digitale Medien ist die große Bandbreite und rasante Entwicklung bei den zur Verfügung stehenden Technologien. Auch als Designer investiere ich viel Zeit darin, immer auf dem aktuellen Stand der technischen Möglichkeiten zu bleiben, damit die von mir gestalteten Internetpräsenzen nicht nur optisch auf der Höhe der Zeit sind.

Präsentation des Entwurfs im Browser

Präsentation des Entwurfs im Browser

Der Prozess bei der Erstellung von Websites gliedert sich bei mir in folgende fünf Punkte, welche nacheinander, manchmal aber auch parallel ausgearbeitet werden:

1. Zielbestimmung, Analyse und Recherche

In dieser ersten Phase eines Webseiten-Projekts stecke ich zusammen mit dem Kunden in persönlichen Treffen die Eckdaten ab. Das Anliegen an die Webseite — der wichtigste Punkt — und die möglichen Features der Internetpräsenz werden ebenso besprochen, wie Wünsche an die Gestaltung, Vorgaben durch bereits bestehendes Corporate Design, aber auch Zeitrahmen und Budget. In dieser Phase des Prozesses wird ebenso besprochen, wie die geplanten Inhalte — der Content — und die Gestaltung zu einer perfekten Einheit werden können.

Diese Treffen dienen zusätzlich dem Kennenlernen. Für mich als Designer ist es wichtig den Kunden und die Produkte zu kennen.

Bei der anschließenden Analyse der durch diese Treffen und durch weitere Recherche gewonnenen Informationen wird dann auch klar, welche zusätzlichen Kräfte mit an Bord geholt werden müssen, z.B. Texter, Fotografen, Programmierer, Suchmaschinenoptimierer oder Projektmanager.

An dieser Stelle des Prozesses habe ich dann ein so gutes Bild von den Wünschen an die Webseite und dem Unternehmen dahinter, dass ich ein seriöses Angebot erstellen kann.

2. Designphase/Kreativphase

Die Lieblingsphase des kreativen Designers, der ich bin … Nun geht es daran festzulegen, welchen Inhalt (Content) es geben wird, wie dieser strukturiert und gegliedert werden sollte, sodass ein optimales Navigationskonzept erstellt werden kann, welches dem Benutzer der Seite einen möglichst großen »Joy of Use« bescheren wird. Die Nutzbarkeit oder besser Benutzerfreundlichkeit einer Webseite ist ganz entscheidend für den späteren Erfolg. Inhalt, der vom Besucher nur schwer gefunden wird, bringt wenig. Da sich meine Webseiten grundsätzlich und natürlich durch sogenanntes Responsive Webdesign auszeichnen, muss dieses Navigationskonzept sowohl für große Bildschirme, als auch für Smartphones optimiert sein. Aufgrund des Platzmangels bei der Darstellung auf z.B. Smartphones ergeben sich hier andere Herausforderungen. Die verschiednen Möglichkeiten für responsive (sich dem Bildschirm anpassende) Navigationskonzepte werde ich demnächst in diesem Blog aufzeigen. Dieses Stadium der Designphase halte ich gern mit Wireframes fest, in denen erst einmal nur geklärt wird, wie die einzelnen Seiten aufgebaut werden, wie sie verknüpft sind, aber noch nicht, wie diese endgültig aussehen werden.

Da ich auch programmiere, achte ich an dieser Stelle bereits darauf, dass die Entwürfe optimal umgesetzt werden können und so aufgebaut sind, dass Nutzer sowie Suchmaschinen gleichermaßen zufrieden sind. Die Performance einer Webseite, also die Geschwindigkeit, mit der die Seite geladen und im Browser aufgebaut wird, spielt für Suchmaschinen, wie Google, eine immer wichtigere Rolle. Aber auch der normale Benutzer wartet ungern lange darauf, bis er die Webseite benutzen kann. In der Designphase kann ich diesen Vorgang beeinflussen, indem ich den Inhalt so reguliere, dass die Webseite schnell lädt.

Danach folgen Entwürfe, welche Farbwahl, Formensprache, Typografie und ein Designraster mit einbeziehen. Das eigentliche Gesicht der Webseite entsteht.

Diese ersten Entwürfe sind noch nicht komplett programmiert, werden dem Kunden von mir aber dort vorgestellt, wo man sie später antreffen wird — im Browser. Hier nutze ich z.B. den Dienst Invision, der es mir ermöglicht, die Entwürfe mittels eines Links im Browser zu präsentieren und dort bereits Navigation und Interaktion zu simulieren. Der Kunde kann also bereits durch die Seite navigieren und sieht, wie die einzelnen Seiten verknüpft sind. Der Dienst ermöglicht auch, dass der Kunde direkt in diesen Entwürfen Kommentare und Anmerkungen hinterlassen kann.

Je nach Projekt kann es auch vorkommen, dass ich einen programmierten Grobentwurf präsentiere, gerade wenn Animationen ein Teil des Designs sind.

Am Ende dieser kreativen Phase stehen also die Entwürfe mehrerer Einzelseiten, welche nach Freigabe durch den Kunden nun realisiert werden können.

3. Realisierung

Die von mir gestalteten Entwürfe werden nun nach aktuellem Standard programmiert. Hierbei wird besonders auch auf Suchmaschinenoptimierung, Barrierefreiheit, Performance und Skalierbarkeit geachtet. Da nicht alle Benutzer die aktuellen Browser nutzen, wird ebenso darauf geachtet, dass die Webseite auch auf alten Systemen möglichst optimal funktioniert. Weitere Aufgaben in diesem Stadium sind Bildbearbeitung, das Schreiben bzw. Überarbeiten von Texten sowie das Füllen der Einzelseiten mit Inhalt. Interaktionsdesign gehört hier zu den wichtigsten Punkten, die meine Arbeit als Designer und die eines Programmierers eng verknüpfen. Am Ende dieser Phase steht eine komplette Webseite, welche im nächsten Schritt ausgiebig getestet werden muss, bevor sie live geschaltet wird.

4. Testphase

Die programmierten Webseiten liegen – nur mit Link einsehbar – für Testzwecke entweder auf meinem Server, oder versteckt auf dem Server des Kunden. Je nach Projektgröße werden auch expertenbasierte Tests oder Labortests durchgeführt. Aber auch der Kunde hat die Möglichkeit die neue Webseite gründlich auf Herz und Nieren zu testen, bevor sie dem breiten Publikum zugänglich gemacht wird. Erst wenn alle Projektmitglieder grünes Licht geben, steht der Veröffentlichung nichts mehr im Weg.

5. Inbetriebnahme

Zur Inbetriebnahme der Internetpräsenz gehört neben der Live-Schaltung noch die Anbindung an Soziale Networks, die Anbindung an die bekannten Suchmaschinen sowie die Erstellung der Sitemap, welche z.B. bei Google angemeldet wird, sodass die neue Webseite möglichst schnell indexiert und in den Suchergebnissen gelistet wird. Je nach Art der Webseite gehören Dokumentation, Schulung sowie Pflege zu den weiteren Aufgaben, die ich gern erfülle.

Am Ende des Designprozesses steht also eine frei zugängliche, einwandfrei funktionierende Webseite auf dem Sever des Kunden, welche optimal zum Unternehmen passt und hoffentlich sehr zum Erfolg des Unternehmens, der Produkte oder der angebotenen Leistungen beitragen wird.

Ich würde mich sehr freuen, wenn ich auch für Sie ein Projekt realisieren dürfte. Kontaktieren Sie mich gern unter 05242 9089150 oder schreiben Sie mir eine Nachricht.

Der Formletter

1

Torsten Nienaber

facebooktwitterinstagram

Mein Name ist Tosten Nienaber und als freiberuflicher Grafikdesigner rücke ich gern auch Ihr Produkt, Ihre Marke, Ihre Arbeit in das richtige Licht.

Ein Gedanke zu “Mein Designprozess beim Webdesign

  1. Pingback: Bedeutungsvolles Content First Webdesign | Very!Design