Es gibt verschiedene Vorgehensweisen um von einer Idee zum fertigen Web-Projekt zu kommen und egal, ob man Ansätzen wie "Mobile First" folgt, ob man entlang von Workflows wie dem "Responsive Design Workflow" arbeitet oder Methodologien wie SMACSS, OOCSS, Atomic Web Design oder BEM nutzt: irgendwann muss eine irgendwie visualisierte Idee in Code umgesetzt werden. Und genau um diesen Übergang vom Mockup zum Markup geht es bei Mockup2Markup.
Wofür Mockups und Prototypen?
Mockups und Prototypen spielen im Gestaltungs- und Entwicklungsprozess von Produkten, Tools und Informationssystemen eine tragende Rolle. Sie helfen Ideen zu präzisieren, zu begreifen und verständlich zu machen. Sie dienen als Erklärungs- und Diskussionsgrundlage innerhalb des Teams und im Gespräch mit Kunden, Investoren und Nutzern. In ihnen kristallisiert sich ein gemeinsames Bild und Verständnis für das zu entwickelnde Produkt.
Prototypen haben in unterschiedlichen Projektphasen unterschiedliche Aufgaben und sind mal eher abstrakt und mal sehr konkret. Sie reichen von einfachen Skizzen, über papierbasierte Prototypen bis zu detailliert ausformulierten, interaktiven Prototypen. Je nach Phase visualisieren sie Abläufe, grobe Layouts, detaillierte Designideen, Interaktionen, Reaktionsverhalten oder Transitionen und Animationen.
Prototypen können getestet werden und ermöglichen Feedback, sie unterstützen die Meinungsbildung im Team und das Führen von Debatten. Mit ihnen kann ein Proof-of-Concept durchgeführt werden. Sie können helfen ein Konzept zu schärfen und können zeigen, wie das Ziel der Produktentwicklung aussehen und sich anfühlen soll. Mit Ihnen wird das zukünftige Produkt greifbar.
Vom Prototyp zu elegantem Code?
Was ist eleganter Code im Kontext web-basierter Anwendungen? Darüber kann man trefflich und lange diskutieren und streiten. Neben einigen Eigenschaften die allgemein anerkannt sind, ist die Auffassung von elegantem oder gutem Code oftmals sehr subjektiv und damit auch abhängig von der Perspektive, die der Entwickler oder das Team auf das eigene Projekt, die Projektziele und den zugehörigen Code hat: optimierter Code für barrierefreie Anwendungen, für die Nutzung von bestimmten CMS Systemen/ Template Engines/ Frameworks, crawlbarer Code, abstrahierter Code, optimierter Code für bestimmte IDEs, für gute Lesbarkeit, für gute Performance, für gute Wiederverwendbarkeit, für schnelle Entwicklung, etc. Schon diese kurze Einführung zeigt, dass es hierzu noch eine Reihe an Fragen zu stellen und zu beantworten gilt.
Hier schon mal einige Fragen, die beim Übergang vom Prototyp zum Code interessant sein könnten:
- Wie kann dieser Übergang gut und geschmeidig gestaltet werden und was heißt das eigentlich?
- Was ist ein guter Zeitpunkt zum Übergang in Code? Und wo von ist dieser Zeitpunkt abhängig? Oder erstellen wir idealerweise unsere Prototypen direkt im Code und verzichten auf andere Formen von Prototypen?
- Wie können konkrete Designideen, Strukturen, Abläufe, Interaktionen und Transitionen elegant umgesetzt werden?
- Wie können wir die wichtigen Features eines Prototyps im echten Code erhalten und wie erkennen wir die wichtigen Elemente und Attribute?
- Wie kommen wir zu gutem Code? Und was heißt in dem Kontext überhaupt gut? Gut zu Warten? Gut zu Lesen? Gut für die Suchmaschine? Gut für die Nutzung in CMS Templates? Gut für die Nutzung innerhalb von Frameworks? Performant? Kompatibel für verschiedenste Browser? Schnell? Gut wiederverwendbar? Gut erweiterbar?
Wo geht die Reise hin?
Innerhalb dieses Projekts soll ein Diskurs angestoßen, moderiert und ggf. technisch unterstützt werden. Es soll um Fragen rund um den Übergang vom Prototypen zu HTML/ CSS/ JS Code gehen. Dabei soll es weniger um isolierte technische Fragestellungen gehen, wie sie auf stackoverflow und Co. schon hinlänglich diskutiert und gelöst werden. Vielmehr sollen Fragestellungen in einem gegebenen Kontext (z.b. eingesetzte Frameworks, verwendetes CMS, etc.) betrachtet werden, denen ein konkreter, visualisierter Prototyp zugrunde liegt.
Was kann ich tun?
Interessante Fragestellungen und Probleme einbringen
Für das Projekt werden interessante Frage- und Problemstellungen im Bereich "Designimplementierung in Webprojekten" gesucht. Dabei sollten folgende Gegebenheiten erfüllt sein:
- Dem zu implementierenden Merkmal/ Feature/ Konzept sollte ein visualisierter Prototyp zugrunde liegen.
- Falls es bereits Konstanten (zu verwendende Frameworks, CMS, bestehende Codebase, bestehender Workflow, zugrundeliegende Methodologie, etc.) zur Implementierung gibt, macht es das Problem interessanter :)
Hier ein erstes Beispiel: #01 Schlaue Marginalspalten
Wer eine solche Fragestellung hat kann diese gern in einem Issue oder formulieren. Gleiches gilt für Fragen zum Vorhaben. In dieser ersten Stufe werden zunächst Frage- und Problemstellungen gesammelt.
Expertise, Feedback und schlaue Beiträge einbringen
Natürlich brauchen wir auch Leute, die Lust haben mit zu diskutieren und Lösungsansätze zu entwickeln. Gerne mit einem bestimmten Schwerpunkt (SEO, Semantik, OOCSS, SMACSS, CMS, etc.). Wer Lust hat, schreibe mir eine .
Liken, teilen, wachten, staren, supporten, Ideen & Anregungen
Wir freuen uns über jegliche Art von Support, egal ob es Stars oder Watches auf GitHub sind, Tweets (#mockup2markup) und Beiträge zum Projekt oder Ideen und Anregungen.
Was sollte geklärt werden?
Ein paar Grundsatzfragen sollten vorab bearbeitet und geklärt werden, damit das Projekt ein ausreichendes Fundament hat.
Grundlegende Fragen und Themen
- Die Grundannahme von Mockup2Markup ist ein Entwicklungsprozess, in dem von der Idee, über non-funktionale Prototypen iteriert wird und diese Prototypen irgendwann die Basis für die Umsetzung in HTML, CSS und Javascript bilden. Ist diese Annahme überhaupt richtig? Wie sehen Design- und Entwicklungsprozesses derzeit aus? Und wie werden sie in fünf Jahren aussehen? Übersicht und Analyse zu diesem Thema im Wiki
- Im Rahmen dieses Vorhabens soll eine Plattform geschaffen werden, auf der über den Übergang vom Prototyp zu Code diskutiert und berichtet wird. Wodurch müsste sich diese Plattformen von bestehenden Codesharing-/Diskussionsplattformen differenzieren? Welche Codesharing-/Diskussionsplattformen gibt es überhaupt und was leisten diese?
- Welche Designsharing-/Diskussionsplattformen sind derzeit am Markt und wie ist deren Ausrichtung?
- Welche Prototyping Tools gibt es und wie ist deren Ausrichtung?
Weiterführende Fragen und Themen
Diese weiterführenden Fragen und Themen sind ein schöner Ausgangspunkt für Abschlussarbeiten oder QQ-Projekte innerhalb der Medieninformatik Studiengänge der Fachhochschule Köln. Wer Interesse hat hier aktiv zu werden, möge dies in formulieren. Aber auch Bearbeiter und Mitdenker außerhalb der FH Köln sind herzlich willkommen!
- Was zeichnet einen Übergang vom Prototypen zu publizierbarem HTML Markup aus?
- Was ist ein guter Zeitpunkt zum Übergang vom Prototypen zu publizierbarem HTML Markup?
- Ideen/ Ansätze zum Prototyping
- Arten von Prototypen und deren Ziele
- Wer macht was und wann? Oder: warum Designer keine Ahnung von Code haben sollten.
- Welche Perspektiven auf Code gibt es und wodurch zeichnen sie sich aus?