ANDREAS DEMMER
    Technical Director · BARTENBACH AG   1




Vorstellung
Technischer Leiter der BARTENBACH AG
360 Grad We...
WIREFRAMES & CO.
      Conceptual Design als Projektbaustein



                                              2




Thema ...
3




 Auftrag des Vortrags: Verbesserung von Websites
  und -anwendungen
Learn from the best: Um gute Websites zu bauen,
...
EINE TYPISCHE
   GOOGLE-APPLIKATION

                                      4




Google ist der Inbegriff von Erfolg
SUCHE




                                        5




Reduktion auf das Wesentliche
Einfache Bedienung
schnörkellos
EINE TYPISCHES
         APPLE-PRODUKT

                                              6




Auch Apple ist sehr erfolgreich...
TOUCH




                              7




wieder:
aufgeräumt
strukturiert
Reduktion aufs Wesentliche
EINE TYPISCHE
         DURCHSCHNITTS-
           APPLIKATION
                                           8




Leider sieht...
9




völlig überfrachtet
unübersichtlich
Funktionen die keiner braucht oder versteht

Wie kann es dazu kommen?
DAS PROBLEM
              (und es trifft uns alle)



                                           10




Die Erklärung dies...
11




Anfangs noch schlicht und funktional
Doch dann: Logo dazu, Menü für Unterseiten
Danach: Ergebnisliste, Breadcrumb, ...
FEATURE-
              INFLATION

                                         12




Das Resultat:
Viele Features, die keiner...
CHAOS!
                                            13




Anwendung sieht aus, als hätte eine Bombe
 eingeschlagen
Unorden...
DIE LÖSUNG
       DER LÖSUNGSANSATZ


                                            14




Die Lösung, dem vorzubeugen gibt ...
CONCEPTUAL DESIGNER
                                            15




Der Beruf des Conceptual Designers, auch:
Informati...
1        2          3 4
       IDEE      KONZEPT     DESIGN      CODE



                                                 ...
IDEE     KONZEPT     DESIGN      CODE



                                               17




Conceptual Design betrifft ...
USER CENTERED DESIGN



    INFORMATIONS                        USER
                      USABILITY
     ARCHITEKTUR     ...
DER MENSCH IM
         MITTELPUNKT
                                            19




Der Mensch steht immer im Mittelpunk...
RESEARCH       PERSONAS       USE CASES




     STORY-          WIRE-        SITEMAP
     BOARD          FRAMES
         ...
21




Das Ende meines Vortrags ist nah

Ich möchte nur noch ein Fazit ziehen:
22




Erinnern wir uns an die Chaos Applikation vom
 Anfang und wie diese entstanden ist

Wenn nun kein Aufblähen während...
23




Dann überrascht das Ergebnis vielleicht durch
 Schlichtheit

Schließen möchte ich Zitat
„Probleme kann man niemals
         mit der Denkweise lösen,
         mit der sie entstanden sind.“
                      ...
FOLIEN IM NETZ
            www.andreas-demmer.de



                                           25




Folien ab morgen Mit...
Nächste SlideShare
Wird geladen in …5
×

Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

638 Aufrufe

Veröffentlicht am

Wireframes und Co. von Andreas Demmer am 6. Juli 2009 beim 1. Webmontag.talk in Manhheim, Blog: http://www.andreas-demmer.de/weblog/beitrag330/

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
638
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

  1. 1. ANDREAS DEMMER Technical Director · BARTENBACH AG 1 Vorstellung Technischer Leiter der BARTENBACH AG 360 Grad Werbeagentur in Mainz beschäftigt 100 Mitarbeiter
  2. 2. WIREFRAMES & CO. Conceptual Design als Projektbaustein 2 Thema nennen Dauer des Vortrags: 10-15 Minuten
  3. 3. 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
  4. 4. EINE TYPISCHE GOOGLE-APPLIKATION 4 Google ist der Inbegriff von Erfolg
  5. 5. SUCHE 5 Reduktion auf das Wesentliche Einfache Bedienung schnörkellos
  6. 6. EINE TYPISCHES APPLE-PRODUKT 6 Auch Apple ist sehr erfolgreicher Player am Markt
  7. 7. TOUCH 7 wieder: aufgeräumt strukturiert Reduktion aufs Wesentliche
  8. 8. EINE TYPISCHE DURCHSCHNITTS- APPLIKATION 8 Leider sieht Gros der Anwendungen anders aus
  9. 9. 9 völlig überfrachtet unübersichtlich Funktionen die keiner braucht oder versteht Wie kann es dazu kommen?
  10. 10. DAS PROBLEM (und es trifft uns alle) 10 Die Erklärung dieses Problems Problem tritt uns alle Jeder hat es wahrscheinlich schon erlebt Auftrag: Mach eine einfache Such-Applikation
  11. 11. 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
  12. 12. FEATURE- INFLATION 12 Das Resultat: Viele Features, die keiner braucht Kernfeatures treten in den Hintergrund
  13. 13. CHAOS! 13 Anwendung sieht aus, als hätte eine Bombe eingeschlagen Unordentlich, überfrachtet Man nutzt solche Seiten nicht gerne
  14. 14. DIE LÖSUNG DER LÖSUNGSANSATZ 14 Die Lösung, dem vorzubeugen gibt es nicht Es gibt kein 100% sicheres Mittel → Lösung zu vollmundig Eher Lösungsansatz
  15. 15. CONCEPTUAL DESIGNER 15 Der Beruf des Conceptual Designers, auch: Informationsarchitekt Planner Konzepter, Konzeptioner strukturiert Projekt im Vorfeld plant Umfang, Features und Interface
  16. 16. 1 2 3 4 IDEE KONZEPT DESIGN CODE 16 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
  17. 17. IDEE KONZEPT DESIGN CODE 17 Conceptual Design betrifft (nicht nur) das Konzept
  18. 18. USER CENTERED DESIGN INFORMATIONS USER USABILITY ARCHITEKTUR EXPERIENCE 18 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
  19. 19. DER MENSCH IM MITTELPUNKT 19 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
  20. 20. RESEARCH PERSONAS USE CASES STORY- WIRE- SITEMAP BOARD FRAMES 20 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?
  21. 21. 21 Das Ende meines Vortrags ist nah Ich möchte nur noch ein Fazit ziehen:
  22. 22. 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
  23. 23. 23 Dann überrascht das Ergebnis vielleicht durch Schlichtheit Schließen möchte ich Zitat
  24. 24. „Probleme kann man niemals mit der Denkweise lösen, mit der sie entstanden sind.“ – Albert Einstein 24 Dankeschön! Eine kurze Sache noch:
  25. 25. FOLIEN IM NETZ www.andreas-demmer.de 25 Folien ab morgen Mittag im Blog meiner Website Mit Anmerkungen Verlinkung im Web Montag Wiki

×