{"id":2062,"date":"2014-06-29T03:00:31","date_gmt":"2014-06-29T01:00:31","guid":{"rendered":"https:\/\/erlebe-software.de\/?p=2062"},"modified":"2019-11-14T11:17:48","modified_gmt":"2019-11-14T10:17:48","slug":"wireframes-das-drahtgeruest-eines-guten-frontends","status":"publish","type":"post","link":"https:\/\/erlebe-software.de\/fiori\/wireframes-das-drahtgeruest-eines-guten-frontends\/","title":{"rendered":"Wireframes: Das Drahtger\u00fcst eines guten Frontends"},"content":{"rendered":"\n

Je später ein Fehler gefunden wird, umso teurer ist es ihn zu beheben. Dieser Leitspruch hat sich in der Softwareentwicklung auf allen Ebenen eines Projektteams manifestiert wie kein anderer. Dies gilt jedoch nicht nur für die rein technische Umsetzung der Software, dem Backend, sondern natürlich auch für die Oberfläche, das Frontend, welche später die Schnittstelle zwischen Anwender und Technik darstellt. Dennoch wird bei der Konzeption allzu oft das Frontend vernachlässigt: Die Anforderungen sind mit der Fachabteilung geklärt, die technische Umsetzung definiert – und das Frontend? Wird nach bestem Wissen und Gewissen aus Sicht des Entwicklers, vorbei an den Vorstellungen des Endanwenders, gestaltet. Das muss nicht sein!<\/p>\n

<\/div>\n
\n\t
\n\t\t
\n\t\"Wireframes:\n<\/div>\n\t\t
\n\t\t\t
\n\tNutzen Sie unser Know How im Bereich SAP User Experience!\n<\/div>\n\t\t\t
\n\tWir beraten sie zu Vor- und Nachteilen der SAP UI-Technologien und unterstützen Sie bei Planung und Design Ihrer Applikationen.\n<\/div>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t
\nSie erhalten die Komplettlösung – Ihr Projekt machen wir zu unserem Projekt. Wir sind Ihr Dienstleiter für Ihr Entwicklungsprojekt, das den Anwender in den Mittelpunkt stellt.\n

Gerne spreche ich mit Ihnen über Ihre Ausgangslage und zeige Lösungsmöglichkeiten auf. Auf Wunsch unterbreite ich Ihnen im Anschluss ein unverbindliches Angebot.<\/p>\n

Kontaktieren Sie mich: Telefon 0211.9462 8572-16<\/strong> oder per E-Mail info@erlebe-software.de<\/a><\/strong>
\nIngo Biermann, Fachbereichsleiter\n<\/div>\n<\/div>\n<\/p>

 <\/p>\n

<\/h2>\n

Was ist ein Wireframe?<\/h2>\n

Übersetzt bedeutet das Wort so viel wie “Drahtgerüst”, welche gerade in der 3D-Grafik Anwendung finden. Mit Bezug auf Frontends lässt sich der Begriff als “einfache Zeichnung einer Benutzeroberfläche” zusammenfassen. Ein Wireframe<\/strong> ist eine Strukturskizze und zeigt alle Elemente, die auf dem Bildschirm angezeigt werden sollen. Dies ist zum Beispiel die Navigation, Eingabefelder, Buttons sowie die Größe und Positionierung dieser Elemente. Bewusst weggelassen werden dabei Dinge wie Farben, Schriftarten und konkrete Inhalte wie beispielsweise fertige Texte und Bilder.<\/p>\n

\"Beispiel

Abbildung 1: Beispiel eines Wireframes<\/p><\/div>\n

Vorteile von Wireframes<\/h3>\n

Im Gegensatz zu detaillierten grafischen Entwürfen, welche gerne dazu verleiten sich zu Beginn der Oberflächenkonzeption an Details wie Farben aufzuhalten, kann ein Wireframe schnell aufs Papier gebracht werden. Wünsche, Varianten und Änderungen sind schnell ausprobiert und können zusammen mit den Anwendern diskutiert werden. Diese Herangehensweise erfordert es praktisch, dass der Endanwender bereits früh in der Konzeptionsphase mit ins Boot geholt wird.<\/p>\n

\"Anmeldung

Abbildung 2: Wie soll sich der Benutzer am System anmelden? Dank Wireframe schnell und anschaulich mit den Anwendern besprochen<\/p><\/div>\n

Diese Modelle helfen die wichtigen Elemente für den Benutzer zu identifizieren. Die Entscheidungsfindung mittels Wireframe bietet folgende Vorteile:<\/p>\n