Webdesign Prozess: Wie designen wir Responsive Wesites?
Wie schaut eigentlich so ein Webdesign Prozess aus und wie kann man ein Responsive Webdesign erstellen? Wie gestalten wir Websites und wie planen wir Webdesign Redesigns? Hier ein kleiner Einblick.
Strategie
Im ersten Schritt klären wir das Vorhaben des Unternehmens: Was soll die neue Seite erreichen? Was haben Erfahrungswerte gezeigt und wo will das Unternehmen hin? Als Webdesign Agentur müssen wir immer klar wissen: Was will das Unternehmen mit der Website bezwecken, ob Responsive Webdesign oder nicht. Klare Ziele sind Dinge wie „Die Zielgruppe aus den sozialen Medien holen“ oder „mehr mobile Zugriffe“. All diese Ziele sammeln wir und werden fester Bestandteil des Konzeptes für die neue Website. Im Tourismus Webdesign herrschen zum Beispiel ganz andere Ziele als in E-Commerce Websites. Wir sammeln, was der Kunde mit der Seite erschaffen möchte und helfen ihm dabei.
Tools:
Analyse
In der Analyse vereinen wir die Strategie mit einem weiteren wichtigen Faktor: Die aktuelle und zukünftige Zielgruppe. Wer wird die Website besuchen? Welche Endgeräte wird er benutzen und was sind Use-Cases? Wird überhaupt ein Responsive Designer benötigt oder werden die sozialen Medien gar nicht zu sehr benötigt? Mit der Analyse haben wir passend zu den Infos des Unternehmens auch die Informationen über die Zielgruppe und können dem Kunden so helfen, eine effektivere Website zu schaffen.
Tools:
Wireframes
In den Wireframes werden die ersten Pixel gesetzt. Mithilfe von Sketch erstellen wir einen zweiteiligen Prozess: Erst schaffen wir mithilfe von „Low-Fi“ Wireframes ein grobes Konstrukt der Seite, um dem Kunden unser Vorhaben und die resultierende Zielsetzung zu verdeutlichen. Beim Verlassen dieser Phase geht es an die klassischen Wireframes: Das Design der Seite wird quasi bereits in Schwarz/Weiss dargestellt, um inhaltliche Zuordnungen zu schaffen. Auf diesen Weise können wir vor dem „Bau der Seite“ einen architektonischen Plan schaffen und festsetzen, wo welche Box und wo welcher Titel hinkommt. Hier geht es noch nicht um Grafik, es geht um die Content-Strategie!
Tools:
Moodboarding
Dropmark for Mac – Moodboard Tool
Ist die inhaltliche Planung und somit die Marschroute geplant, geht es nun an das Design! Also fast: Um eine gestalterische Welt zu schaffen, werden mithilfe mithilfe von einem Moodboard App Design Welten geschaffen. Auf diese Weise lässt sich der Charakter und eventuelle Interaktionen planen. Wirken die Beispiele zu verspielt? Raus damit! Beim Moodboarding ist alles erlaubt und mit geringen Mitteln lassen sich Ideen und Interaktionen integrieren und Verwerfen. Das geht mit Pinterest, Dropmark und anderen Anbietern. Ein Ordner voller Screenshots und auch Evernote tun es auch. Ist ein fester Stil gefunden, hat der Designer alles, was er braucht: Moodboards, Wireframes und hoffentlich genug Kaffee. Denn nun geht es los!
Tools
Design
Agentur für Webdesign und WordPress in Hamburg
Nun wird mit dem Design begonnen. Auf Basis der Wireframes wird das Responsive Webdesign gestaltet. Als Sketch Designer setzen wir natürlich auf Sketch. Benötigt es das Projekt, machen wir auch Webdesign mit Photoshop und anderen Tools. Das Webdesign wird beim Responsive Webdesign Erstellen gleich mehrfach designed: Für Mobil, Tablet und Desktop-Geräte. Begonnen wird je nach Projekt mit der Desktop-Version und dann mit den Mobil-Versionen. Dies hängt aber immer von der Strategie des Kunden ab. Mithilfe mehrerer Schulterblicke schaffen wir als Responsive Design Agentur möglichst viel Einblick für den Kunden und lassen ihn mithilfe von InVision natürlich am Geschehen teilhaben. Am Ende des Design-Projektes stehen dann folgende Übergabe-Dokumente: Das Webdesign in Sketch und das für drei Geräte und ein UI Kit, dass allgemeine Elemente wie Formulare und Co. beinhaltet.
Tools:
Frontend-Entwicklung
Nun geht es an HTML und CSS aber auch das Design wird „responsive“. Den Designs wird nun Leben eingehaucht und sie werden „Frontend Designs“. Hier wird darauf geachtet, dass alles für die Browser und Endgeräte der Zielgruppe optimiert wird und auch in den verschiedenen Bildschirmgrößen gut umgesetzt wird. Auch Ladezeiten und die Lesbarkeit werden vom Frontend-Entwickler optimiert und umgesetzt. Mit Schulterblicken lassen wir auch hier die Kunden dran teilhaben. Denn als nächstes kommt schon ein weiterer spannender Punkt im Responsive Webdesign:
Backend-Entwicklung
Möchte der Kunde seine Website selber bepflegen, sucht er sich im Regelfall eine Agentur, die auch ein CMS (Content Management System) mit anbietet. Als WordPress Agentur arbeiten wir im Regelfall mit dem CMS „WordPress“. In diesem Schritt nehmen wir im Regelfall das Frontend und bauen daraus ein WordPress Design. Beim WordPress Theme erstellen arbeiten wir mit dem Konzept des Kunden und erstellen das Theme vom Grunde auf. Hier wird nicht mit vorgefertigten Designs gearbeitet, sondern immer mit dem Erfolg und den Zielen des Kunden im Hinterkopf. Am Ende der Entwicklung ist die Seite Suchmaschinen-optimiert, mit Inhalten befüllt und bereit für den großen Erfolg. Ist die Seite online, gibt es ein Nachgespräch mit dem Kunden: Was lief gut, was kann optimiert werden? Auf diese Weise optimieren wir unser Design stetig. Und wir freuen uns auf jedes Projekt!
Wie können wir Ihnen helfen? Suchen Sie eine Webdesign Agentur in Hamburg? Wir freuen uns auf Ihren Kontakt und erstellen mit Ihnen Web App Design, WordPress Theme Design, Blog Design und mehr. Schreiben Sie uns!
