SlideShare ist ein Scribd-Unternehmen logo
GUIs mit Expression Blend
DNUG Dresden
Communardo Software Dresden
05.05.2010
Lars Heinrich und Peggy Reuter
Wer sind wir
 Selbständiger C#-Entwickler bzw. Selbständige GUI-Designerin
    für WPF und Silverlight
   WPFler und Blend-User der ersten Stunden vor 4 Jahren
   Erfahrungen in primär großen Projekten für die Telekom, Yello,
    Sepago und MID
   Wir kennen die Webwelt, die Flashwelt und die Printwelt.
   Wir sind neugierig auf Innovationen und Neuerungen.
   Wir ziehen im Juni von Aachen nach Dresden, weil Lars
    Dresdner ist, der nach Hause möchte.
   http://blog.xamllab.net
   http://www.xamlfab.net/blog
Was leistet Expression Blend?
 Erstellung von WPF- und Silverlight-Applikationen
 Hervorragendes Tool zum Prototypen von WPF- und Silverlight-
  Anwendungen
 Layout von User Interfaces
 In einem gewissen Rahmen Design und Illustration
 Gestaltung von UI Controls
 Datenanbinden von Mockup und Livedaten
 Blend ist ein gutes Animationstool mit ähnlichem Umfang wie Flash
 Der Hauptschwerpunkt bei Blend liegt ganz klar beim Interaktionsdesign.
 Erstellung von übergreifenden Bibliotheken
 Blend enthält einen einfach zu handhabenden 3D-Raum
 Windows Phone 7 Applikationen.
 Natural User Interface für Multitouch durch das Zusammenspiel mit dem
  Surface SDK
Blend für Entwickler interessant?
   Generiertes XAML
   Schneller Preview durch WYSIWYG
   Zeit für Coding von wichtigen Dingen
   Gute Importfunktionen für klassische Design-Leistungen aus
    Photoshop und Illustrator
   Möglichkeit ein bisschen Designer zu sein
   Gute Basis für die Zusammenarbeit mit Interactive Designern
   Eine gemeinsame Umgebung für Konzepter, Designer und
    Entwickler
   Umgebung für die Entwicklung in Usability, Design und
    Funktion vollwertiger Prototypen
   Plattform für Kundenkommunikation in Bezug auf Prototypen
Flug über Blend
   Projekt: zur Projekt- und Datenverwaltung
   Assets: Alle integriertbaren Komponenten          Die Panels
    kategorisiert nach Projekt, mitgelieferterten
    Styles, Controls, Styles, Behaviours, Effekte,
    Medien
   States/Trigger: Anzeige und Modifikation der
    Stati
   Stage mit Design und XAML-View
   Object und Timeline: Alle Objekte werden hier
    geschichtet und geschachtet. Auf diese können
    dann im Storyboard Animationen gelegt werden.
   Properties: Analog zu allen infrage kommenden
    XAML-Properties kann hier jedes Objekt
    modifiziert werden.
   Resourcen: Templates und Styles, Brush- oder
    Textresourcen
   Data: Sample- oder Live-Datens werden hier
    geladen und verwaltet.
   Sketch-Flow-Bereich: Animation und Map
   Result: analysiert und spukt die Fehler beim
    Builden aus.
Flug über Blend
Die Menus                                       Die Toolbar
   File: klassisch, bemerkenswert ist hier       Gruppen- und Einzel-Selektion
      der Grafikimport und der Word-Export        Bewegungshand und Zoom
     Edit: klassisch, bemerkenswert ist die      Farbpipette und Eimer zum Füllen
      übergreifende Suche-Ersetzen wie im         Verlaufseditierung
      VS                                          Zeichenwerkzeuge Stift und Bezierkurve
     View: klassisch, bemerkenswert ist der      Pfadobjekte Rechteck, Kreis und Linie
      Splittview und die direkt XAML-             Layout-Elemente Grid, Canvas, Stackpanel,
      Umsetzung                                   Scrollviewer, Border
     Objekt: klassisch, Layouthilfen und        Text-Elemente Text-Block, Text-Box, Richtext,
      Styleverweise                               PassWord
                                                 Basis-Controls wie Button, CheckBox,
     Projekt: klassisch, Projekt- und            RadioButton, ListBox, ComboBox, Tab, Slider,
      Objektverwaltung – auch integrativ          GridSplitter
     Tools: klassisch, einige Helferlein für    Großes Panel mit allen Controls gruppiert nach
      Styles, Templates und Resourcen             verschiedenen Kreterien wie Projekt, Styleart
                                                  (SketchStyle, SimpleStyle, eigener Style),
     Window: klassisch, …                        allgemeine Controls, Behaviour, Shapes, Effekte
     Help: bemerkenswert ist die
      Community und die Lernmöglichkeiten
Schnittstelle Blend
 Wenn Applikationen in         Zur Behebung gibt es
  Blend begonnen werden,        verschiedene
  ist das zusammenspiel         Lösungsansätze.
  kein Problem.
 Kommen die Daten vom
  Entwickler, lässt sich die
  Applikation nicht so
  einfach öffnen wegen
  verschiedener Probleme:
    Resourcen-Darstellung
    Build-Fehler
Beispiel Formulargestaltung
 Beispiel, wie es oft von
  Entwicklern kommt:
    Reduziert auf die
     funktionale Anforderung
    Keine gute User
     Experience
    Nicht selbsterklärend
    In der Optik immer gleich,
     weil Standardcontrols
     verwendet werden.
Beispiel Formulargestaltung
 Schritt 1: Mehrwert
    Der Nutzer muss ein
     Verständnis für die
     Zusammenhänge seiner
     Applikation bekommen. Sie
     sollte inhaltlich
     selbsterklärend sein.
     >>> Bezeichner oder Zeichen
     vorsehen, die es dem Benutzer
     einfacher machen.
    Mehrwert liefern, durch für
     den Nutzer interessante
     Verarbeitung der Daten.
     >>> Was wäre ein Mehrwert
     für mich?
Beispiel Formulargestaltung
 Schritt 2: Gruppierung und
  Trennung
 Der User kann nicht mehr als
  9 Inhalte erfassen. Gruppen
  und Trennungen erleitern
  das Erfassen der Inhalte.
 >>> Sinnvolle inhaltliche
  Gruppen bilden
 >>> Abgrenzung der
  Gruppen durch Headlines
  oder Bezeichner.
Beispiel Formulargestaltung
 Schritt 3: Klarheit und Layout
 Klarheit, wiederkehrende
  Elemente, Orientierung,
  Proportionen und Freiräume
  helfen bei der Blickführung und
  Erfassung.
 Mit simplen gestalterischen
  Mitteln kann Klarheit und
  Blickführung geschaffen
  werden:
    Freiraum
    Wiederkehrende
     Orientierungslinien
    Strukturierende
     Größenverhältnisse
Beispiel Formulargestaltung
 Schritt 4: Design
 Der Wohlfühlfaktor und damit die
  Akzeptanz einer Applikation kann
  durch Design erhöht werden:
 >>> Farbwahl sollte analog zur
  inhaltlichen Zusammenhängen stehen
  und entsprechend akzentuiert sein.
 >>> Schriften unterstützen die Inhalte
  je nach Schriftcharakter und schaffen
  Individualität so wie Identifikation.
  Hier sollte getrennt werden zwischen
  Mengentexten, die gut lesbar sein
  müssen und optisch führenden Texten
  wie Headlines oder Ergebnisse.
 >>> Flächen und Rahmen und
  Grafiken strukturieren, geben Halt
  und die Ausstrahlung von Design.
Beispiel Formulargestaltung
 Schritt 5: Emotion
 Bildsprache fördert
  emotionale Verbundenheit
  sowie Identifikation. Zudem
  helfen Sie Inhalte schnell zu
  erfassen.
 Diese Bildsprache kann über
  Fotografie, Illustration oder
  Ikonografie geliefert werden.
 >>> Inhaltlich passendes und
  ansprechendes Bildmaterial
  in die Applikation
  integrieren.
Beispiel 3D-Stühle
 Es folgt ein Beispiel für die Arbeit hinsichtlich der
  Möglichkeiten des Blend-3D-Raumes, der aber gleicher Maßen
  die Arbeitsumgebung aufzeigt.
 Die Absicht ist keines Weg die Ausarbeitung einer komplexen
  3D-Welt -zumal Blend kein 3D-Editor ist. Es ist nur ein Raum,
  aber in diesem geht schon so einiges.
 Ziel: Demonstration des 3D-Raumes, in mehrere Stühle
  integriert werden. Eine Ansicht, die dann schnell noch animiert
  wird.
 Gezeigte Features: Oberfläche Blend, 3D-Raum, Änderungen
  am Objekt, Änderung von Licht und Perpektive, Kombination
  mehrere, Animation, Startbehaviour
Beispiel 3D-Stühle
 Es folgt eine Demostration der Möglichkeit, relativ schnell
  mehrere 3D-Objekte zu integrieren und deren
  Erscheinungsbild auf der Ebene von Perspektive, Beleuchtung,
  Anordung und Material zu editieren.
 Desweiteren ist eine Animation im 3D-Raum relativ leicht zu
  realisieren, obenso wie das Ansprechen auf Behaviours.
 Die kurze Demo soll zeigen, dass komplexe 3D-Welten in Blend
  mit Animation und Interaktion recht einfach abzubilden sind.
  So kann z. B. eine interaktive Wohnungseinrichtungs-
  Applikation durchaus über Blend gelöst werden mittels Drag
  an Drop auf eine Karte von oben und danach entsprechender
  Kamera-Fahrten durch den eingerichteten Raum.
Ergebnis 3D-Stühle
Warum SketchFlow Prototyp?
 RIA-Produktion aber insbesondere Software-Produktion ist – obschon unaufwändiger als
    klassische DotNet-Software – ist sehr zeit- und kostenintensiv
    >>> SketchFlow-Prototypen reduzieren Zeitaufwand und kosten, weil Korrekturphase
    minimiert werden.
   Dadurch ist für jeden, der solche Projekte finanziert, das Risiko sehr hoch, obschon er in der
    Anfangsphase wenig sieht, sowohl im Ergebnis aus auch.
    >>> SketchFlow-Prototypen schaffen Vertrauen und reduzieren das Risiko.
   Der klassische Weg im Prototyping sei es durch Wireframes, funktional-programmierte
    Dummyapplikationen oder durchdesignte Screens zeigen immer nur einen Aspekt einer
    Applikation.
    >>> SketchFlow-Prototypen sind vollwertig hinsichtlich Konzept, Usability, Design und
    Funktionalitäten.
   Prototypen werden immer nur von einer Gruppe erstellt: Designer, Konzepter oder Entwickler.
    >>> SketchFlow-Prototypen können im Team von allen drei Gruppen entwickelt werden.
   Prototypen werden gebaut, um sie wegzuwerfen.
    >>> SketchFlow-Prototypen können – je nach Anlage – bis zu 100% im späteren
    Produktivprojekt genutzt werden.
   Nur das fertige Projekt taugt schlussendlich für Usability-Tests.
    >>> SketchFlow-Prototypen sind höchst testtauglich und können bis zum fast fertigen Status
    getrieben werden.
Was kann SketchFlow Prototyp?
 Umgebung um in Blend relativ einfach und zeit- wie kostenschonend in Usability,
    Design und Funktional vorwertige Prototypen zu erstellen
   Optik ist bewußt skizzenhaft, damit man sich auf Inhalt, Konzept und Usability
    konzentrieren kann
   Design kann Step für Step implementiert werden durch grafische Anpassung nach
    Vorlagen bzw. Erstellung entsprechender Styles
   Funktionalität in Form von C# kann über Blend oder VisualStudio angebaut werden.
    Das Projekt wird zum Produktiv-Projekt umgearbeitet und kann bis zu 100%
    nutzbar sein.
   Der SketchStyle wird auch im VisualStudio angezeigt und ist damit nutzbar
   Die Applikation kann über die Screen-Map aufgebaut werden.
   Arbeitserleichternde Komponenten wie z. B. SketchFlowAnimation, eine
    Grafikbibliothek und einige Extra-Behaviours
   Powerpoint kann importiert werden und Word kann exportiert werden
   Für die Kundenkommunikation gibt es einen Player mit Navigator, Abspielhilfe für
    Anis, einer Map und einer ausgiebigen Kommentarfunktion.
Beispiel Picture-Viewer
 Sketch-Flow-Applikation eines Picture-Viewer mit
  animierten Thumbs, die die großen Bilder
  hineinanimieren. Einmal im Sketch und dann noch
  geskinned in Schwarz.
 Features: SketchControls, SketchFlowMap,
  SketFlowPlayer, SampleData, Behaviours, Animationen,
  Skinning von Controls
PictureViewer Sketch 1
PictureViewer Sketch 2
Picture Viewer Sketch 3

Weitere ähnliche Inhalte

Andere mochten auch

DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...
DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...
DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...Communardo GmbH
 
Adsense optimierung
Adsense optimierungAdsense optimierung
Adsense optimierungAxel Metayer
 
Keine Klicks Verschenken - auf dem Weg zur optimalen Landingpage
Keine Klicks Verschenken - auf dem Weg zur optimalen LandingpageKeine Klicks Verschenken - auf dem Weg zur optimalen Landingpage
Keine Klicks Verschenken - auf dem Weg zur optimalen LandingpageDaniel Reckling
 
Feurwehrmann
FeurwehrmannFeurwehrmann
FeurwehrmannWolle1
 
Rules of Life
Rules of LifeRules of Life
Rules of LifeGarhu
 
PoP 2011 – Power of People - Das HR-Camp
PoP 2011 – Power of People - Das HR-CampPoP 2011 – Power of People - Das HR-Camp
PoP 2011 – Power of People - Das HR-CampJan A. Poczynek
 
Kapitel 8: 
Fundamentale vs. Technische Analyse
Kapitel 8: 
Fundamentale vs. Technische AnalyseKapitel 8: 
Fundamentale vs. Technische Analyse
Kapitel 8: 
Fundamentale vs. Technische Analyseanyoption
 
T-Systems Multimedia Solutions Agentur
T-Systems Multimedia Solutions AgenturT-Systems Multimedia Solutions Agentur
T-Systems Multimedia Solutions AgenturTelekom MMS
 
Enterprise 2.0 einführung- reflektion
Enterprise 2.0   einführung- reflektionEnterprise 2.0   einführung- reflektion
Enterprise 2.0 einführung- reflektionCommunardo GmbH
 
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B3cdialog
 
Die Waldtiere
Die WaldtiereDie Waldtiere
Die WaldtiereWolle1
 
Sql Server Grundlagen für Sharepoint Administratoren
Sql Server Grundlagen für Sharepoint AdministratorenSql Server Grundlagen für Sharepoint Administratoren
Sql Server Grundlagen für Sharepoint AdministratorenCommunardo GmbH
 
Semantic Web II: FRBR & Co
Semantic Web II: FRBR & CoSemantic Web II: FRBR & Co
Semantic Web II: FRBR & CoJakob .
 
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und KreativprozessenCrowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und KreativprozessenMichael Gebert
 
Camping Usa
Camping UsaCamping Usa
Camping UsaWolle1
 
Wie begeistere ich Mitarbeiter für das Web 2.0
Wie begeistere ich Mitarbeiter für das Web 2.0Wie begeistere ich Mitarbeiter für das Web 2.0
Wie begeistere ich Mitarbeiter für das Web 2.0Bauranda
 

Andere mochten auch (19)

DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...
DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...
DMS Expo2012 : Der Weg zum „lebendigen“ Enterprise 2.0: Arbeiten 2.0 erleben ...
 
Adsense optimierung
Adsense optimierungAdsense optimierung
Adsense optimierung
 
Keine Klicks Verschenken - auf dem Weg zur optimalen Landingpage
Keine Klicks Verschenken - auf dem Weg zur optimalen LandingpageKeine Klicks Verschenken - auf dem Weg zur optimalen Landingpage
Keine Klicks Verschenken - auf dem Weg zur optimalen Landingpage
 
Feurwehrmann
FeurwehrmannFeurwehrmann
Feurwehrmann
 
Rules of Life
Rules of LifeRules of Life
Rules of Life
 
PoP 2011 – Power of People - Das HR-Camp
PoP 2011 – Power of People - Das HR-CampPoP 2011 – Power of People - Das HR-Camp
PoP 2011 – Power of People - Das HR-Camp
 
Kapitel 8: 
Fundamentale vs. Technische Analyse
Kapitel 8: 
Fundamentale vs. Technische AnalyseKapitel 8: 
Fundamentale vs. Technische Analyse
Kapitel 8: 
Fundamentale vs. Technische Analyse
 
webcific
webcificwebcific
webcific
 
T-Systems Multimedia Solutions Agentur
T-Systems Multimedia Solutions AgenturT-Systems Multimedia Solutions Agentur
T-Systems Multimedia Solutions Agentur
 
Enterprise 2.0 einführung- reflektion
Enterprise 2.0   einführung- reflektionEnterprise 2.0   einführung- reflektion
Enterprise 2.0 einführung- reflektion
 
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
 
Die Waldtiere
Die WaldtiereDie Waldtiere
Die Waldtiere
 
Fr525343
Fr525343Fr525343
Fr525343
 
imagenes
imagenesimagenes
imagenes
 
Sql Server Grundlagen für Sharepoint Administratoren
Sql Server Grundlagen für Sharepoint AdministratorenSql Server Grundlagen für Sharepoint Administratoren
Sql Server Grundlagen für Sharepoint Administratoren
 
Semantic Web II: FRBR & Co
Semantic Web II: FRBR & CoSemantic Web II: FRBR & Co
Semantic Web II: FRBR & Co
 
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und KreativprozessenCrowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
 
Camping Usa
Camping UsaCamping Usa
Camping Usa
 
Wie begeistere ich Mitarbeiter für das Web 2.0
Wie begeistere ich Mitarbeiter für das Web 2.0Wie begeistere ich Mitarbeiter für das Web 2.0
Wie begeistere ich Mitarbeiter für das Web 2.0
 

Ähnlich wie DNUG Dresden Blend

Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffesascha assbach
 
Authoring Management
Authoring ManagementAuthoring Management
Authoring Managementvzimmermann
 
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
 Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog... Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...Martin Blenkle
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseitechrisign gmbh
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009Andreas Schulte
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Ponton-Lab GmbH
 
Author Experience in Craft CMS
Author Experience in Craft CMSAuthor Experience in Craft CMS
Author Experience in Craft CMSAndreas Binggeli
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda Wien
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & ToolsUlrich Krause
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009Jutta Korn
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignLuka Peters
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikClaus Brell
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)Marcus Haberkorn
 

Ähnlich wie DNUG Dresden Blend (20)

Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
 
Authoring Management
Authoring ManagementAuthoring Management
Authoring Management
 
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
 Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog... Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
Webpräsenz und Amazon und Google als Herausforderung? Webpräsenz und Katalog...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
 
Author Experience in Craft CMS
Author Experience in Craft CMSAuthor Experience in Craft CMS
Author Experience in Craft CMS
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Enterprise BPM
Enterprise BPMEnterprise BPM
Enterprise BPM
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
 
User Interface Patterns at IA09 Conference
User Interface Patterns at IA09 Conference User Interface Patterns at IA09 Conference
User Interface Patterns at IA09 Conference
 
Ia 2009
Ia 2009Ia 2009
Ia 2009
 

Mehr von Martin Hey

Enter the WebMatrix
Enter the WebMatrixEnter the WebMatrix
Enter the WebMatrixMartin Hey
 
Reactive Framework (Rx)
Reactive Framework (Rx)Reactive Framework (Rx)
Reactive Framework (Rx)Martin Hey
 
.NET Usergroup Chemnitz 20091210
.NET Usergroup Chemnitz 20091210.NET Usergroup Chemnitz 20091210
.NET Usergroup Chemnitz 20091210Martin Hey
 
Saxonia Erfahrungsbericht EC u. CM
Saxonia Erfahrungsbericht EC u. CMSaxonia Erfahrungsbericht EC u. CM
Saxonia Erfahrungsbericht EC u. CMMartin Hey
 
Silverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess EditorSilverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess EditorMartin Hey
 

Mehr von Martin Hey (6)

Enter the WebMatrix
Enter the WebMatrixEnter the WebMatrix
Enter the WebMatrix
 
Reactive Framework (Rx)
Reactive Framework (Rx)Reactive Framework (Rx)
Reactive Framework (Rx)
 
Dynamic LINQ
Dynamic LINQDynamic LINQ
Dynamic LINQ
 
.NET Usergroup Chemnitz 20091210
.NET Usergroup Chemnitz 20091210.NET Usergroup Chemnitz 20091210
.NET Usergroup Chemnitz 20091210
 
Saxonia Erfahrungsbericht EC u. CM
Saxonia Erfahrungsbericht EC u. CMSaxonia Erfahrungsbericht EC u. CM
Saxonia Erfahrungsbericht EC u. CM
 
Silverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess EditorSilverlight 2.0 Prozess Editor
Silverlight 2.0 Prozess Editor
 

DNUG Dresden Blend

  • 1. GUIs mit Expression Blend DNUG Dresden Communardo Software Dresden 05.05.2010 Lars Heinrich und Peggy Reuter
  • 2. Wer sind wir  Selbständiger C#-Entwickler bzw. Selbständige GUI-Designerin für WPF und Silverlight  WPFler und Blend-User der ersten Stunden vor 4 Jahren  Erfahrungen in primär großen Projekten für die Telekom, Yello, Sepago und MID  Wir kennen die Webwelt, die Flashwelt und die Printwelt.  Wir sind neugierig auf Innovationen und Neuerungen.  Wir ziehen im Juni von Aachen nach Dresden, weil Lars Dresdner ist, der nach Hause möchte.  http://blog.xamllab.net  http://www.xamlfab.net/blog
  • 3. Was leistet Expression Blend?  Erstellung von WPF- und Silverlight-Applikationen  Hervorragendes Tool zum Prototypen von WPF- und Silverlight- Anwendungen  Layout von User Interfaces  In einem gewissen Rahmen Design und Illustration  Gestaltung von UI Controls  Datenanbinden von Mockup und Livedaten  Blend ist ein gutes Animationstool mit ähnlichem Umfang wie Flash  Der Hauptschwerpunkt bei Blend liegt ganz klar beim Interaktionsdesign.  Erstellung von übergreifenden Bibliotheken  Blend enthält einen einfach zu handhabenden 3D-Raum  Windows Phone 7 Applikationen.  Natural User Interface für Multitouch durch das Zusammenspiel mit dem Surface SDK
  • 4. Blend für Entwickler interessant?  Generiertes XAML  Schneller Preview durch WYSIWYG  Zeit für Coding von wichtigen Dingen  Gute Importfunktionen für klassische Design-Leistungen aus Photoshop und Illustrator  Möglichkeit ein bisschen Designer zu sein  Gute Basis für die Zusammenarbeit mit Interactive Designern  Eine gemeinsame Umgebung für Konzepter, Designer und Entwickler  Umgebung für die Entwicklung in Usability, Design und Funktion vollwertiger Prototypen  Plattform für Kundenkommunikation in Bezug auf Prototypen
  • 5. Flug über Blend  Projekt: zur Projekt- und Datenverwaltung  Assets: Alle integriertbaren Komponenten  Die Panels kategorisiert nach Projekt, mitgelieferterten Styles, Controls, Styles, Behaviours, Effekte, Medien  States/Trigger: Anzeige und Modifikation der Stati  Stage mit Design und XAML-View  Object und Timeline: Alle Objekte werden hier geschichtet und geschachtet. Auf diese können dann im Storyboard Animationen gelegt werden.  Properties: Analog zu allen infrage kommenden XAML-Properties kann hier jedes Objekt modifiziert werden.  Resourcen: Templates und Styles, Brush- oder Textresourcen  Data: Sample- oder Live-Datens werden hier geladen und verwaltet.  Sketch-Flow-Bereich: Animation und Map  Result: analysiert und spukt die Fehler beim Builden aus.
  • 6. Flug über Blend Die Menus Die Toolbar  File: klassisch, bemerkenswert ist hier  Gruppen- und Einzel-Selektion der Grafikimport und der Word-Export  Bewegungshand und Zoom  Edit: klassisch, bemerkenswert ist die  Farbpipette und Eimer zum Füllen übergreifende Suche-Ersetzen wie im  Verlaufseditierung VS  Zeichenwerkzeuge Stift und Bezierkurve  View: klassisch, bemerkenswert ist der  Pfadobjekte Rechteck, Kreis und Linie Splittview und die direkt XAML-  Layout-Elemente Grid, Canvas, Stackpanel, Umsetzung Scrollviewer, Border  Objekt: klassisch, Layouthilfen und  Text-Elemente Text-Block, Text-Box, Richtext, Styleverweise PassWord  Basis-Controls wie Button, CheckBox,  Projekt: klassisch, Projekt- und RadioButton, ListBox, ComboBox, Tab, Slider, Objektverwaltung – auch integrativ GridSplitter  Tools: klassisch, einige Helferlein für  Großes Panel mit allen Controls gruppiert nach Styles, Templates und Resourcen verschiedenen Kreterien wie Projekt, Styleart (SketchStyle, SimpleStyle, eigener Style),  Window: klassisch, … allgemeine Controls, Behaviour, Shapes, Effekte  Help: bemerkenswert ist die Community und die Lernmöglichkeiten
  • 7. Schnittstelle Blend  Wenn Applikationen in  Zur Behebung gibt es Blend begonnen werden, verschiedene ist das zusammenspiel Lösungsansätze. kein Problem.  Kommen die Daten vom Entwickler, lässt sich die Applikation nicht so einfach öffnen wegen verschiedener Probleme:  Resourcen-Darstellung  Build-Fehler
  • 8. Beispiel Formulargestaltung  Beispiel, wie es oft von Entwicklern kommt:  Reduziert auf die funktionale Anforderung  Keine gute User Experience  Nicht selbsterklärend  In der Optik immer gleich, weil Standardcontrols verwendet werden.
  • 9. Beispiel Formulargestaltung  Schritt 1: Mehrwert  Der Nutzer muss ein Verständnis für die Zusammenhänge seiner Applikation bekommen. Sie sollte inhaltlich selbsterklärend sein. >>> Bezeichner oder Zeichen vorsehen, die es dem Benutzer einfacher machen.  Mehrwert liefern, durch für den Nutzer interessante Verarbeitung der Daten. >>> Was wäre ein Mehrwert für mich?
  • 10. Beispiel Formulargestaltung  Schritt 2: Gruppierung und Trennung  Der User kann nicht mehr als 9 Inhalte erfassen. Gruppen und Trennungen erleitern das Erfassen der Inhalte.  >>> Sinnvolle inhaltliche Gruppen bilden  >>> Abgrenzung der Gruppen durch Headlines oder Bezeichner.
  • 11. Beispiel Formulargestaltung  Schritt 3: Klarheit und Layout  Klarheit, wiederkehrende Elemente, Orientierung, Proportionen und Freiräume helfen bei der Blickführung und Erfassung.  Mit simplen gestalterischen Mitteln kann Klarheit und Blickführung geschaffen werden:  Freiraum  Wiederkehrende Orientierungslinien  Strukturierende Größenverhältnisse
  • 12. Beispiel Formulargestaltung  Schritt 4: Design  Der Wohlfühlfaktor und damit die Akzeptanz einer Applikation kann durch Design erhöht werden:  >>> Farbwahl sollte analog zur inhaltlichen Zusammenhängen stehen und entsprechend akzentuiert sein.  >>> Schriften unterstützen die Inhalte je nach Schriftcharakter und schaffen Individualität so wie Identifikation. Hier sollte getrennt werden zwischen Mengentexten, die gut lesbar sein müssen und optisch führenden Texten wie Headlines oder Ergebnisse.  >>> Flächen und Rahmen und Grafiken strukturieren, geben Halt und die Ausstrahlung von Design.
  • 13. Beispiel Formulargestaltung  Schritt 5: Emotion  Bildsprache fördert emotionale Verbundenheit sowie Identifikation. Zudem helfen Sie Inhalte schnell zu erfassen.  Diese Bildsprache kann über Fotografie, Illustration oder Ikonografie geliefert werden.  >>> Inhaltlich passendes und ansprechendes Bildmaterial in die Applikation integrieren.
  • 14. Beispiel 3D-Stühle  Es folgt ein Beispiel für die Arbeit hinsichtlich der Möglichkeiten des Blend-3D-Raumes, der aber gleicher Maßen die Arbeitsumgebung aufzeigt.  Die Absicht ist keines Weg die Ausarbeitung einer komplexen 3D-Welt -zumal Blend kein 3D-Editor ist. Es ist nur ein Raum, aber in diesem geht schon so einiges.  Ziel: Demonstration des 3D-Raumes, in mehrere Stühle integriert werden. Eine Ansicht, die dann schnell noch animiert wird.  Gezeigte Features: Oberfläche Blend, 3D-Raum, Änderungen am Objekt, Änderung von Licht und Perpektive, Kombination mehrere, Animation, Startbehaviour
  • 15. Beispiel 3D-Stühle  Es folgt eine Demostration der Möglichkeit, relativ schnell mehrere 3D-Objekte zu integrieren und deren Erscheinungsbild auf der Ebene von Perspektive, Beleuchtung, Anordung und Material zu editieren.  Desweiteren ist eine Animation im 3D-Raum relativ leicht zu realisieren, obenso wie das Ansprechen auf Behaviours.  Die kurze Demo soll zeigen, dass komplexe 3D-Welten in Blend mit Animation und Interaktion recht einfach abzubilden sind. So kann z. B. eine interaktive Wohnungseinrichtungs- Applikation durchaus über Blend gelöst werden mittels Drag an Drop auf eine Karte von oben und danach entsprechender Kamera-Fahrten durch den eingerichteten Raum.
  • 17. Warum SketchFlow Prototyp?  RIA-Produktion aber insbesondere Software-Produktion ist – obschon unaufwändiger als klassische DotNet-Software – ist sehr zeit- und kostenintensiv >>> SketchFlow-Prototypen reduzieren Zeitaufwand und kosten, weil Korrekturphase minimiert werden.  Dadurch ist für jeden, der solche Projekte finanziert, das Risiko sehr hoch, obschon er in der Anfangsphase wenig sieht, sowohl im Ergebnis aus auch. >>> SketchFlow-Prototypen schaffen Vertrauen und reduzieren das Risiko.  Der klassische Weg im Prototyping sei es durch Wireframes, funktional-programmierte Dummyapplikationen oder durchdesignte Screens zeigen immer nur einen Aspekt einer Applikation. >>> SketchFlow-Prototypen sind vollwertig hinsichtlich Konzept, Usability, Design und Funktionalitäten.  Prototypen werden immer nur von einer Gruppe erstellt: Designer, Konzepter oder Entwickler. >>> SketchFlow-Prototypen können im Team von allen drei Gruppen entwickelt werden.  Prototypen werden gebaut, um sie wegzuwerfen. >>> SketchFlow-Prototypen können – je nach Anlage – bis zu 100% im späteren Produktivprojekt genutzt werden.  Nur das fertige Projekt taugt schlussendlich für Usability-Tests. >>> SketchFlow-Prototypen sind höchst testtauglich und können bis zum fast fertigen Status getrieben werden.
  • 18. Was kann SketchFlow Prototyp?  Umgebung um in Blend relativ einfach und zeit- wie kostenschonend in Usability, Design und Funktional vorwertige Prototypen zu erstellen  Optik ist bewußt skizzenhaft, damit man sich auf Inhalt, Konzept und Usability konzentrieren kann  Design kann Step für Step implementiert werden durch grafische Anpassung nach Vorlagen bzw. Erstellung entsprechender Styles  Funktionalität in Form von C# kann über Blend oder VisualStudio angebaut werden. Das Projekt wird zum Produktiv-Projekt umgearbeitet und kann bis zu 100% nutzbar sein.  Der SketchStyle wird auch im VisualStudio angezeigt und ist damit nutzbar  Die Applikation kann über die Screen-Map aufgebaut werden.  Arbeitserleichternde Komponenten wie z. B. SketchFlowAnimation, eine Grafikbibliothek und einige Extra-Behaviours  Powerpoint kann importiert werden und Word kann exportiert werden  Für die Kundenkommunikation gibt es einen Player mit Navigator, Abspielhilfe für Anis, einer Map und einer ausgiebigen Kommentarfunktion.
  • 19. Beispiel Picture-Viewer  Sketch-Flow-Applikation eines Picture-Viewer mit animierten Thumbs, die die großen Bilder hineinanimieren. Einmal im Sketch und dann noch geskinned in Schwarz.  Features: SketchControls, SketchFlowMap, SketFlowPlayer, SampleData, Behaviours, Animationen, Skinning von Controls