wireframes und co.: conceptual design als elementarer projektbaustein, notizen
DESCRIPTION
Wireframes und Co. von Andreas Demmer am 6. Juli 2009 beim 1. Webmontag.talk in Manhheim, Blog: http://www.andreas-demmer.de/weblog/beitrag330/TRANSCRIPT
![Page 1: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/1.jpg)
1
ANDREAS DEMMERTechnical Director · BARTENBACH AG
Vorstellung Technischer Leiter der BARTENBACH AG 360 Grad Werbeagentur in Mainz beschäftigt 100 Mitarbeiter
![Page 2: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/2.jpg)
2
WIREFRAMES & CO.Conceptual Design als Projektbaustein
Thema nennen Dauer des Vortrags: 10-15 Minuten
![Page 3: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/3.jpg)
3
Auftrag des Vortrags: Verbesserung von Websites und -anwendungen
Learn from the best: Um gute Websites zu bauen, sollte man die anschauen, die erfolgreich sind
![Page 4: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/4.jpg)
4
EINE TYPISCHEGOOGLE-APPLIKATION
Google ist der Inbegriff von Erfolg
![Page 5: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/5.jpg)
Reduktion auf das Wesentliche Einfache Bedienung schnörkellos
5
SUCHE
![Page 6: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/6.jpg)
6
EINE TYPISCHESAPPLE-PRODUKT
Auch Apple ist sehr erfolgreicher Player am Markt
![Page 7: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/7.jpg)
7
TOUCH
wieder: aufgeräumt strukturiert Reduktion aufs Wesentliche
![Page 8: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/8.jpg)
8
EINE TYPISCHEDURCHSCHNITTS-
APPLIKATION
Leider sieht Gros der Anwendungen anders aus
![Page 9: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/9.jpg)
9
völlig überfrachtetunübersichtlichFunktionen die keiner braucht oder versteht
Wie kann es dazu kommen?
![Page 10: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/10.jpg)
10
DAS PROBLEM(und es trifft uns alle)
Die Erklärung dieses Problems Problem tritt uns alle Jeder hat es wahrscheinlich schon erlebt
Auftrag: Mach eine einfache Such-Applikation
![Page 11: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/11.jpg)
11
Anfangs noch schlicht und funktional Doch dann: Logo dazu, Menü für Unterseiten Danach: Ergebnisliste, Breadcrumb, TagCloud Und noch mehr Suchfunktionen, erklärender Text Dann: Neue Navi, WYSIWYG, Stats, Ergebnisfilter Da es kompliziert wird: Hilfefunktionen, viele! Um den Whitespace zu füllen: Weitere Funktionen
mehr und mehr
![Page 12: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/12.jpg)
12
FEATURE-INFLATION
Das Resultat: Viele Features, die keiner brauchtKernfeatures treten in den Hintergrund
![Page 13: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/13.jpg)
13
CHAOS!
Anwendung sieht aus, als hätte eine Bombe eingeschlagen
Unordentlich, überfrachtet Man nutzt solche Seiten nicht gerne
![Page 14: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/14.jpg)
14
DIE LÖSUNGDER LÖSUNGSANSATZ
Die Lösung, dem vorzubeugen gibt es nicht Es gibt kein 100% sicheres Mittel → Lösung zu
vollmundig Eher Lösungsansatz
![Page 15: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/15.jpg)
15
CONCEPTUAL DESIGNER
Der Beruf des Conceptual Designers, auch: Informationsarchitekt Planner Konzepter, Konzeptioner
strukturiert Projekt im Vorfeld plant Umfang, Features und Interface
![Page 16: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/16.jpg)
16
1 2 3 4KONZEPT DESIGN CODEIDEE
An welcher Stelle im Projektverlauf tritt er auf? 4 Projektphasen Kreative Leitidee, also noch vorm „loslegen“ Konzept und Planung → Conceptual Designer Design und Text programmiertechnische Umsetzung
![Page 17: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/17.jpg)
17
KONZEPT DESIGN CODEIDEE
Conceptual Design betrifft (nicht nur) das Konzept
![Page 18: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/18.jpg)
18
INFORMATIONSARCHITEKTUR USABILITY
USEREXPERIENCE
USER CENTERED DESIGN
Die 3 Säulen des Conceptual Design
Informationsarchitektur: Informationen für Zielgruppen gliedern und aufbereiten
Usability: Möglichst intuitive und einfache Bedienung ermöglichen
User Experience: Wie verhält sich das UI während der Bedienung?
Diese Säulen tragen das User Centered Design
![Page 19: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/19.jpg)
19
DER MENSCH IMMITTELPUNKT
Der Mensch steht immer im Mittelpunkt! Immer im Hinblick auf die Nutzer arbeiten D.h. Auch: Funktionen weglassen, die keiner braucht
oder versteht Nichts implementieren, nur weil es cool wäre oder
einfach zu realisieren ist
![Page 20: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/20.jpg)
20
USE CASESPERSONAS
STORY-BOARD
RESEARCH
WIRE-FRAMES
SITEMAP
6 Werkzeuge der Conceptual Desinger Research: Statistiken wälzen, Feldforschung Personas: verschiedene typische Nutzer und deren
Umfeld sowie Bedürfnisse beschreiben Use Cases: Wie würden diese Personen vorgehen
um das Gewünschte zu Erreichen? Storyboard: Wie verhalten sich Funktionen und
Seiten bei der Benutzung? Wie interagiert die Seite?
Wireframes: Welche Funktionen und Inhalte gibt es? Wie sie auf den einzelnen Seiten angeordnet?
Sitemap: Wo sind welche Inhalte in der Hierarchie der Website verortet?
![Page 21: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/21.jpg)
21
Das Ende meines Vortrags ist nah
Ich möchte nur noch ein Fazit ziehen:
![Page 22: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/22.jpg)
22
Erinnern wir uns an die Chaos Applikation vom Anfang und wie diese entstanden ist
Wenn nun kein Aufblähen während Entwicklung, sondern sorgfältige Planung eines Conceptual Designers im Vorfeld:
Dann die Reduktion auf die wesentlichen Kernfeatures und diese einfach benutzbar machen
![Page 23: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/23.jpg)
23
Dann überrascht das Ergebnis vielleicht durch Schlichtheit
Schließen möchte ich Zitat
![Page 24: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/24.jpg)
24
„Probleme kann man niemalsmit der Denkweise lösen,mit der sie entstanden sind.“
– Albert Einstein
Dankeschön!
Eine kurze Sache noch:
![Page 25: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen](https://reader033.vdocuments.site/reader033/viewer/2022051514/54955ec2b479593d4d8b4d22/html5/thumbnails/25.jpg)
25
FOLIEN IM NETZwww.andreas-demmer.de
Folien ab morgen Mittag im Blog meiner Website Mit Anmerkungen
Verlinkung im Web Montag Wiki