Web-Development Guide Part 2 – Vom Mockup zum fertigen Frontend

0
427

Nach dem ich euch in Part 1 meines Web-Development Guides alle wichtigen Dinge vor dem Projektstart gezeigt habe, möchte ich euch heute zeigen, wie mein Vorgehen bei der eigentlichen Umsetzung eines oder mehrerer Frontends ist.

Bevor wir loslegen …

Früher habe ich Mockup Tools wie Balsamiq Wireframes eingesetzt. Heute wähle ich mit dem Kunden ein HTML Template aus und setze HTML Mockups direkt ein. Hierzu gehe ich später noch mal genauer ein.

Interessant: Mein Hard- und Software Development Setup

  1. Entwicklungsumgebung festlegen

Bevor wir loslegen, müssen wir uns – sofern notwendig – für eine Entwicklungsumgebung entscheiden. Mein Hard- und Software Setup habe ich euch oben verlinkt. Daher gehe ich hier nicht weiter darauf ein.

2. System festlegen

Da wir bis auf Template Anpassungen beim Einsatz von CMS-System keine anderen Entscheidungen treffen müssen, gehe ich im Folgenden nur auf Eigenentwicklungen ein.

Als PHP-Framework verwende ich CodeIgniter. Das Projekt versioniere ich mittels GIT.

3. Die Auswahl des HTML-Templates

Ich verstehe mich als Entwickler und nicht als Designer. Daher liegen meine Stärken definitiv in der Backend und nicht in der Frontend Entwicklung.

Wir versuchen daher, ein geeignetes HTML-Template für unser Projekt zu finden. Die Anforderungen an ein HTML-Template ergeben sich aus Part 1. Werden Formulare, Tabellen etc. benötigt, muss dies im HTML-Template verfügbar sein. Ein weiterer Vorteil für den Einsatz eines HTML Templates: Ihr Projekt hat auf allen Web-Seiten das gleiche Erscheinungsbild und alle Formular- sowie HTML Elemente sind farblich abgestimmt.

4. Die Mockup Phase – die wichtigste Phase!

Wir haben nun alle Vorbedingungen, die wir als Entwickler für die Entwicklung benötigen, geklärt.

Nun müssen wir mit dem Kunden klären, was das Projekt bzw. die einzelnen Webseiten darstellen sollen. Diese kritzeln wir mit dem Kunden im Gespräch direkt auf und lassen uns diese abnehmen. Anbei ein paar Beispiele zu einem möglichen Newsletter Versand-Tool, die ich mit meinem iPad erstellt habe:

Dieses Mockup zeigt, den grundsätzlichen Aufbau der Webseite. Im nächsten gehen wir zur Anmeldung für den Benutzer für den Newsletter:

Ich möchte euch jetzt nicht weiter langweilen mit meinen Zeichenkünsten ,-)

5. Übertragen und Erstellen der HTML-Mockups

Jetzt können wir anfangen mit den, das Projekt in HTML Mockups zu übertragen. Mit dem bereits vorausgewählten HTML-Template gelingt uns dies recht schnell. Vergessen sie an dieser Stelle nicht die System Meldungen sinnvoll zu platzieren.

Nach Abschluss dieser Phase, sollte das Ergebnis direkt mit dem Kunden besprochen werden.

6. Start der Implementierung – Die Datenbank Architektur

Wenn das HTML Mockup vom Kunden abgenommen ist, kann das DB Modell geplant werden. Tips zur Modellierung einer DB Architektur verlinken wir in einem späteren Zeitpunkt.

7. Start der Implementierung – Vom Mockup zur Funktion

Wir arbeiten im Backend dem beliebten PHP-Framework CodeIgniter. CodeIgniter ist nach dem MVC-Prinzip aufgebaut. Bis zu dieser Phase, haben wir die Views (also die HTML Dateien) erstellen können.

Als nächsten erstellen wir die Javascript Logik. Somit können wir bereits die erste Interaktion der HTML-Dateien sicherstellen.

Sobald unsere Webseite mit dem Backend über Javascript und AJAX kommunizieren kann, kann die Controller Logik finalisiert werden. Beispiele zur Kommunikation mittels AJAX mit einem CodeIgniter Backend finden Sie im PHP / AJAX Bereich.

8. Finalisierung des Frontends

Sie haben nun alle Schritte abgeschlossen. Das Frontend sollte jetzt mit allen Paramethern getestet werden.

9. Vorstellung des Frontends beim Kunden

Sobald ich mir sicher bin, dass ich bei der Entwicklung alle benötigten Funktionen implementiert, alle Fehler die im Frontend auftreten können getestet habe wird das Projekt dem Kunden zum Testen vorgestellt. Nimmt der Kunde das Frontend ab, begeben wir uns in die nächste Phase

10. Benutzertests einleiten

In dieser Phase treten erfahrungsgemäß nur noch wenige Fehler auf. Trotzdem ist diese Phase einer der wichtigsten. Sie können nun Feedback über Usability Tests einholen. Wichtige Grundsätze bestimmen die User Akzeptanz ihres Frontend: Das UX / UI Design.

Habt ihr eine ähnliche Vorgehensweise bei der Umsetzung von einzelnen Web-Seiten oder ganzen Web-Projekten? Oder Vorschläge / Anmerkungen zu meinem Vorgehen?

Ich würde mich über eure Informationen über die Kommentar-Funktion sehr freuen.