Ernst Luftig
Abschlussprojekt
Die Startseite der Ernst Luftig-Webseite auf einem stehenden MacBook Pro-Mockup

Ernst Luftig

Web • 2018

Diese Webseite, inklusive Konzept, entstand im Winter 2017/2018, im Rahmen meiner Abschlussprüfung zum Mediengestalter Digital & Print (Fachrichtung: Gestaltung und Technik) vor der Handelskammer Hamburg, für den fiktiven Kunden “Windparkwartung Ernst Luftig GmbH”.

Zum Konzept-PDF
Zur umgesetzten Webseite

Aufgabenstellung

Ernst Luftig, der jahrelang bei einem Hersteller von Windkraftanlagen die Wartung und Pflege übernommen hat, startet selbstständig das kleine Unternehmen „Windparkwartung Ernst Luftig GmbH“.

Das Leistungsspektrum umfasst die Wartung von Windkraftanlagen anderer Hersteller sowie zusätzliche Serviceleistungen für die Betreiber der Windkraftanlagen.

Aktuell sucht das Unternehmen nach einem Profil auf dem Markt. Um Hersteller und Betreiber von Windkraftanlagen und neue Mitarbeiter anzusprechen, gibt das Unternehmen eine Website in Auftrag.

Für die Webseite stellt das Unternehmen Texte zur Verfügung und gibt eine Menüstruktur und ein Logo vor, die nicht verändert werden dürfen.
Die mitgesendeten Bilder und Icons dürfen verändert und um weitere grafische Elemente ergänzt werden.

Der Kunde fordert zur Erläuterung der Überlegungen in Bezug zum Seitenaufbau, zur Farbauswahl, zur Schriftwahl und zu den gewählten Bildern ein schriftliches Konzept.

Für das Konzept sind zwei Screendesigns anzufertigen, einmal für die Tablet-Ansicht in der Breite von ≤1024px und einmal für die Desktop-Ansicht in der Breite von ≤1920px. Zudem äußert der Kunde den Wunsch, auf der Unterseite „Referenzen“ die bisherigen gewarteten Windparks mithilfe einer Deutschlandkarte zu visualisieren.

Diese soll bei einem Klick/Tap auf einer Standort-Markierung (symbolisiert durch das Windrad-Icon) ein Fenster mit den entsprechenden Standort-Informationen öffnen. Dabei sollen die Regeln des »Progressive Enhancements« befolgt werden.
Der Einsatz von Frameworks und anderen fremden Skripten ist gestattet, entsprechende Quellen müssen aber im Quellcode angegeben werden.

Zum Abschluss der ersten Projektphase, am 21.12.2017, ist dem Kunden folgendes vorzulegen:
• Musterentwurf des Internetauftritts
• Konzept zu den Gestaltungsaspekten
• Arbeitsplanung mit einer möglichen Umsetzung der gesamten Website in tabellarischer Form.

Zum Abschluss der zweiten Projektphase, am 04.01.2018, ist dem Kunden folgendes vorzulegen:
• Die lauffähige Website auf CD-ROM
• Arbeitsdateien auf demselben Datenträger, im separatem Verzeichnis
• „Read Me“-Datei mit allen Angaben zur Benutzung der lauffähigen Anwendung
• Farbige Ausdrucke der gestalteten Screens, ohne Browserleisten.

Screendesign der Unterseite "Kontakt" auf einem schwebendem MacBook Pro-Mockup
Die Unterseite "Kontakt" auf einem MacBook Pro-Mockup

Ziel

Für die “Windparkwartung Ernst Luftig GmbH” einen B2B-Webauftritt konzipieren und entwickeln, der unter der Domain www.ernst-luftig.de veröffentlicht wird, um sich mit einem eigenen Profil am Markt zu integrieren, neue, potenzielle Auftraggeber zu finden und neue Arbeitnehmer zu erreichen.

Bei der Umsetzung die vorgegebene Navigationsstruktur und die vorgegebenen Textinhalte unverändert einhalten und die Bildinhalte um eigene Vorschläge ergänzen.

Dabei so viel Wissen wie möglich, dass ich im Rahmen meiner Ausbildung zum Mediengestalter Digital & Print erlangt habe, in die Umsetzung dieser Aufgabenstellung einfließen lassen und mit Aspekten des Design Thinking kombinieren.

Mein sekundäres Ziel ist es, das Thema “Windkraftanlagen-Wartung” interessanter, persönlicher und moderner zu präsentieren als die Konkurrenz es tut, und so viel wie möglich in Sketch umzusetzen, um den sicheren Umgang damit weiter lernen zu können.

Screendesign der Startseite auf einem schwebendem iPad-Mockup
Die Startseite auf einem iPad-Mockup

Recherche & Vorüberlegungen

Der Einstieg in die Abschlussarbeit begann für mich mit der Sichtung der zur Verfügung gestellten Materialien, Internet-Recherchen darüber, weshalb Windparkwartungen wichtig sind und was genau gewartet werden muss, und mit der Verfassung des Re-Briefings, in das ich die Ergebnisse meiner Internet-Recherche über die direkten Konkurrenten der Windparkwartung Ernst Luftig GmbH mit einfließen lassen habe.

Mit der in der Aufgabenstellung angegebenen Zielgruppe im Hinterkopf (B2B-Kunden, Hersteller und Betreiber von Windkraftanlagen und neue Arbeitnehmer), habe ich eine Bildsprache für die fiktive Gesellschaft konzipiert, anhand derer ich passende Schriftfamilien, Farben und Bildmaterialien zusammen gesucht habe.

Mit dieser definierten Auswahl habe ich mir konkrete Ideen für die Aufteilung der vorgegebenen Inhalte auf den Unterseiten “Unsere Leistungen” und “Referenzen” überlegt, und habe diese Überlegungen in Textform festgehalten und mithilfe von Wireframes weiter konkretisiert.

Nach dieser Konkretisierung begann ich damit, Design-Layouts festzulegen und die Screendesigns umzusetzen.
Dabei habe ich mit der Tablet-Ansicht angefangen, um sicher zu stellen, dass alle Inhalte auf dem kleineren Gerät passend dargestellt werden können und dass die in der in der Konzeptionsphase überlegten Lösungsvorschläge auf dem Tablet umgesetzt werden können und habe anschließend die Desktop-Ansichten umgesetzt.

Im letzten Arbeitsschritt in der Konzeptionsphase habe ich alle finalisierten Screendesigns, alle meine Überlegungen, Notizen, alle relevanten Quellen und die von mir verwendete Hard- & Software zu dem ausführlichen und kundenfreundlichen Konzept zusammen gefasst, dass ich pünktlich am 21.12.2017 bei der Handelskammer Hamburg eingereicht habe.

Die Farbauswahl für das Ernst Luftig-Projekt. Von oben links: Marineblau, Golfrasengrün, Schwarz, Betongrau, Hellgrau, Weiß
Die Farbauswahl für das Ernst Luftig-Projekt


Umsetzung

Für die zweite Projektphase, der praktischen Umsetzung der Lösungsvorschläge in HTML5, CSS3 & Javascript, war am 02.01.2018 ein Zeitrahmen von sieben Stunden im jeweiligen Ausbildungsbetrieb vorgesehen.

Da das Regelwerk es erlaubt, sich im Vorhinein bereits mögliche Lösungen für die technisch anspruchsvollen Aufgabenstellungen zu überlegen, begann die zweite Projektphase für mich mit der Recherche nach hilfreichen Frameworks und Plug-ins, die mich bei der Umsetzung der Webseite unterstützen sollten.

Somit habe ich mich mit normalize.css & Tinycarousel auseinandergesetzt, um sicher stellen zu können, dass die verwendeten Elemente in so vielen Webbrowsern wie möglich und auf so vielen Geräten wie möglich einwandfrei und möglichst gleich dargestellt werden können.
Zudem habe ich alle für die Webseite benötigten Assets exportiert & komprimiert und alle Texte für die Webseite und Links für die “Read Me”-Datei in einer unformatierten Textdatei gesammelt.

Da die fertige Webseite auf CD abgegeben werden sollte und ich verhindern wollte, dass die in der Konzeptionsphase ausgewählten Webfonts nicht geladen/angezeigt werden können, habe ich mich zudem mit den Möglichkeiten auseinander gesetzt, diese Schriften ohne Internetzugang einzubinden.
Dabei habe ich mich für die Lösung entschieden, die heruntergeladenen Schriftdateien im Projektordner zu speichern und in den Styles zu verlinken.

Im Rahmen der Vorbereitungen habe ich mir zudem Gedanken darüber gemacht, wie ich die interaktive Windpark-Karte unter “Unser Leistungen” nach dem Prinzip des Progressive Enhancements umsetzen kann.

Da die Definition des Progressive Enhancements für mich und meine Mitauszubildenen zunächst unklar war, haben wir uns darauf geeinigt, die interaktive Karte ohne Javascript und ohne experimentellen CSS-Anweisungen umzusetzen.
Dabei habe ich mich für die Lösung entschieden, im HTML die Windräder als “<figures>” zu setzen und die technischen Details als “<figcpations>” zu definieren, und diese via #-Links & CSS-Animationen bei einem Klick/tap auf einer der Windräder zu öffnen oder zu schließen.

Mit all diesen Vorbereitungen habe ich dann am 02.01.2018 im Ausbildungsbetrieb die konzipierten Screendesigns erfolgreich in der vorgegebenen Zeit umgesetzt.

Die Umsetzung verlief Anfangs so, wie ich es mir in der Arbeitsplanung in der ersten Projektphase ausgerechnet habe, hätte zum Ende aber mehr Zeit zum Debugging des Codes benötigt, da u. a. Bugs dabei waren, die sich signifikant auf die Funktionalität der interaktiven Windpark-Karte ausgewirkt haben.

Die Abgabe der umgesetzten Webseite bedeutete das Ende der zweiten Projektphase.

Bewertung

Insgesamt wurde meine Umsetzung der praktischen Abschlussarbeit mit Vierundsiebzig Punkten als “befriedigend” bewertet.

Bei der ersten Projektphase, der Auswahl der Gestaltungselemente, der Erstellung der Screendesigns und dem Konzept, haben die Prüfer gelobt, dass ich ein überzeugendes Konzept mit kreativen Ideen und sinnvollen Assoziationen in einem so technischem und neutralem Gebiet eingebracht habe, im Konzept die technischen Begriffe auf eine verständliche Art und Weise erklärt habe und dem Konzept selbst noch eine zum Projekt und zu den Lösungsvorschlägen passende Optik verliehen habe.
Zwei Kritikpunkte waren hierbei die Fotoauswahl für die Teammitglieder, die nach Meinung der Prüfer eher unpassend war und die wenig anspruchsvolle Gestaltung der Unterseite “Impressum”.

Bei der zweiten Projektphase, der technischen Umsetzung des Konzepts, haben die Prüfer gelobt, dass ich es in dem vorgegebenen Zeitraum geschafft habe, alle Unterseiten für die geforderten Darstellungsgrößen getreu den eingereichten Screendesigns umgesetzt habe und dass ich den Code sehr übersichtlich geschrieben und kommentiert habe.
Kritisiert wurden vor allem die Darstellungsfehler auf der interaktiven Windpark-Karte, die durch die Bugs verursacht wurde, die ich in der Umsetzungsphase nicht mehr beheben konnte, so wie der Code, der nach Aussage der Prüfer unausreichend validiert war.

Die Unterseite "Referenzen" auf einem MacBook Pro-Mockup

Fazit

So herausfordernd wie die Umsetzung dieses Webprojekts in diesem Zeitrahmen für mich war, so lehrreich war sie auch.

Während der Abschlussarbeit habe ich zum ersten Mal erfahren, wie es ist, komplett selbstständig ein Webprojekt für einen fiktiven Kunden in unter einem Monat umzusetzen. Von der Auswahl der Gestaltungselemente und der Formulierung eines kundengerechtes Konzepts, über die Gestaltung der Screendesigns bis hin zur Umsetzung der Webseite.

Dabei hatte ich viele Möglichkeiten, mein Wissen aus meiner Ausbildung, meinen Praktika und meiner Freizeit einfließen zu lassen, um der Aufgabenstellung entsprechend ein vollständiges Abschlussprojekt bei der Handelskammer Hamburg abgeben zu können.

Dabei habe ich gelernt, wie sich die eigene Interpretation der unklar definierten Aufgabenstellung bezüglich des Progressive Enahncements auf die Wahrnehmung des fertigen Produkts auswirken kann.
Leider gab es im Rahmen der Abschlussprüfung weder für die Prüflinge noch die Dozenten die Gelegenheit, diesbezüglich bei der Handelskammer Hamburg nachzufragen, da man dadurch einen unfairen Vorteil gegenüber den anderen Prüflingen erlangen könnte.

Somit haben wir uns dazu entschieden, uns bei der Umsetzung der Webseite auf HTML5 & CSS3 zu beschränken, und Javascript nur für nicht funktionskritische Inhalte anzuwenden.

Im Laufe des Bewertungsgesprächs habe ich die Erklärung diesbezüglich so verstanden, dass der Einsatz von Javascript für die Umsetzung der interaktiven Karte oder anderer funktionskritische Inhalte legitim gewesen wäre, da dies die deutlich elegantere und weniger fehleranfällige Lösung gewesen wäre.

Trotz dieser frustrierenden Erfahrung bin ich persönlich zufrieden mit meiner Umsetzung der Aufgabenstellung und vor allem damit, was ich im Laufe der Umsetzung und im anschließenden Bewertungsgespräch gelernt habe.

Das Screendesign der Unterseite "Kontakt" auf einem schwebendem iPad Pro-Mockup
Die Unterseite "Kontakt" auf einem iPad Pro-Mockup

Anmerkungen

Die Ernst Luftig-Webseite ist nicht für die Darstellung auf kleinen Mobilgeräten (Smartphones) optimiert.

Beim Importieren des umgesetzten Abschlussprojekts in meine Portfolio-Seite habe ich die Auslöser für die Windrad-Animation von einem “Klick/tap” zum “Maus-Hover/tap” geändert, da diese Lösung weniger fehleranfällig ist als die vorher verwendete Lösung und ebenfalls ohne Javascript auskommt.

Dir gefällt meine Arbeit?

Schreibe mir eine E-Mail, wenn Du mit mir gemeinsam Ideen und Projekte verwirklichen möchtest.

E-Mail verfassen