webdesign fachbegriffe

Download Webdesign Fachbegriffe

Post on 05-Dec-2014

7.948 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung. Hier geht es nicht so sehr ins Detail. Die Slides sollen lediglich einen schnellen Überblick und kurze Definitionen zu den genannten Bereichen im Webdesign geben. Begriffe wie "Usability" und "Whitelabel" werden von Laien häufig falsch angewendet, was z.B. bei Briefings und Workshops mit Kunden und Entwicklern zu Missverständnissen führen kann. Es ist wichtig ein gemeinsames Verständnis dieser Bezeichnungen zu haben. Ich habe diese Zusammenfassung aus eigenem Interesse für einige Projekte erstellt und war der Meinung sie ist vielleicht auch für Andere hilfreich. Anregungen gern in die Kommentare oder direkt an mich. Danke an @franz für's Gegenchecken.

TRANSCRIPT

  • 1. Webdesign- Fachbegrie Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung Sascha Abach, Mai 2010 (v1.3)
  • 2. Begrie & Denitionen Web-Standards user interface design Semantik patterns accessibility layout user experience (ux) click-dummy usability prototyping & testing information whitelabeling architecture (ia) interaction design mock-ups & wireframes graphical user interface (gui) 2
  • 3. Web-Standards Die Einhaltung der Web-Standards ist unbedingt ntig, um der grtmglichen Anzahl von Benutzern mit einer grtmglichen Anzahl von Browsern unter verschiedenen Plattformen die Webseite zugnglich zu machen. Eine gute Suchmaschinentauglichkeit, lange Lebensdauer und die Wartungsfreundlichkeit der Webseiten wird durch die Einhaltung der Web- Standards erst wirklich ermglicht. Das W3C hat Web-Standards fr korrektes XHTML, CSS und das Document Object Model (DOM) deniert. 3
  • 4. Semantik Als Teilgebiet der Linguistik ist Semantik die Lehre von der Bedeutung. Semantisch sinnvoll strukturiertes XHTML enthlt neben dem eigentlichen Seiteninhalt zustzliche Informationen zu dessen Bedeutung. Dies ist besonders fr die Platzierung in Suchmaschinen wichtig. Beispiel: Statt
    Headline
    z.b. Headline nutzen. 4
  • 5. accessibility deutsch: Zugnglichkeit, Barrierefreiheit bzw. -armut Webseiten auch fr Besucher mit Behinderungen nutzbar machen. Mit einer Website mchte man immer mglichst viele Menschen erreichen und mglichst wenige ausschlieen. Deshalb ist es fr Entwickler unabdingbar, die Prinzipien des modernen Webdesigns nach Webstandards zu verinnerlichen Manuela Homann, Modernes Webdesign, S. 41 5
  • 6. user experience 6
  • 7. user experience (UX) Der Begri User Experience (Nutzungserlebnis) umschreibt alle Aspekte der Erfahrungen eines Nutzers bei der Interaktion mit einem Produkt oder Service. Ziel ist es, ein mglichst angenehmes, positives Nutzungserlebnis zu schaen. Die Voraussetzung fr eine positive User Experience ist die Erfllung der Erwartungen der Nutzer, ohne dass die Nutzer sich langweilen oder berfordert sind. 7
  • 8. usability deutsch: Benutzerfreundlichkeit,Nutzbarkeit, Bedienbarkeit, Intuitivitt. Usabilitybezeichnet die vom Nutzer erlebte Nutzungsqualitt bei der Interaktion mit einemSystem. Eine besonders einfache, fr den Nutzer und seine Aufgaben angemessene Bedienung zur Erfllung der gestellten Aufgabe wird dabei als benutzerfreundlich angesehen. 8
  • 9. usability Die Norm ISO 9241 beschreibt die Merkmale der Usability. Dazu gehren: Aufgabenangemessenheit (geeignete Funktionalitt, Minimierung unntiger Interaktionen), Selbstbeschreibungsfhigkeit (Verstndlichkeit durch Hilfen/Rckmeldungen), Lernfrderlichkeit (Anleitungen, Ziel: minimale Erlernzeit), Steuerbarkeit (Steuerung des Dialogs durch den Benutzer), Erwartungskonformitt (Konsistenz, Anpassung an das Benutzermodell), Individualisierbarkeit (Anpassbarkeit an Benutzer und an seinen Arbeitskontext), Fehlertoleranz (Intelligente Dialoggestaltung zur Fehlervermeidung seitens der Benutzer steht an erster Stelle; ansonsten: erkannte Fehler abfangen, bei unerkannten Fehlern: leichte Korrektur durch den Benutzer.) 9
  • 10. information architecture (IA) Informationsarchitektur: bezeichnet die Konzeption und Denition der Struktur eines Informationssystems sowie die Beschreibung jeglicher Interaktion. Die An- und Zuordnung sowie die Benennung der im System enthaltenen Informations- einheiten und Funktionen. 10
  • 11. interaction design Konzeption des Dialoges zwischen dem User und dem Service (Interaktion) unter Bercksichtigung verschiedener Benutzerrollen und Szenarios. Betrachtung verschiedener Use-Cases (Anwendungsflle). Diese werden zunchst z.B. als Mockups festgehalten und spter in Click-Dummies greifbarer gemacht, um sich den zuknftigen Interaktionsablauf des Benutzers mit der Anwendung vorstellen zu knnen. 11
  • 12. mock-ups & wireframes Handzeichnungen oder drahtgitterartige simple Darstellungen, die das Grundgerst (Raster) und die Platzierung von Text-, Grak-, Navigations- und weiteren Elementen auf einer Webseite zeigen. Teilweise mit Interaktionsangaben. Wireframes geben keinerlei Auskunft ber das endgltige Webdesign sondern dienen der Konzeption von Struktur, Interaktion und Prozessen. 12
  • 13. mock-ups & wireframes 13
  • 14. GUI kurz fr: graphical user interface deutsch: Grasche Benutzeroberche Dieser Begri wird nicht nur im Zusammenhang mit Webdesign verwendet. 14
  • 15. user interface (UI) design patterns deutsch: Entwurfsmuster fr Benutzeroberchen bewhrte Lsungs-Schablonen fr wiederkehrende Entwurfselemente in der Softwarearchitektur und - entwicklung. Wiederverwendbare Vorlage zur Funktionsdarstellung z.B. fr die Veranschaulischung bei Briengs an Kunden und Entwickler. Bsp: Login-Formulare und Plausibilittprfungen, zur Darstellung von Eekten etc. 15
  • 16. layout deutsch: Entwurf Anhand der Mockups erstellter Webdesign-Entwurf und Gestaltungsvorschlag fr den Kunden. Meist werden mehrere Layouts zur Auswahl vorgelegt. Wichtig: Layouts enthalten nicht unbedingt nale Texte und pixelgenaue Darstellungen. Es geht lediglich um das Vermitteln des Look & Feels fr einen ersten Eindruck. Nach Abnahme des gewnschten Layouts wird das Finetuning und die konkrete Umsetzung gemacht. 16
  • 17. click-dummy Rudimentrer, interaktiver Prototyp zur vereinfachten Demonstration von Verknpfungen und Teilprozessen. Man kann sich durch Wireframes oder Layouts durchklicken. Dient z.B. in der Konzeptionsphase zur Abbildung von Use-Cases und um ein Gefhl fr die Navigation zu bekommen. 17
  • 18. prototyping & testing Prfung des Konzeptes z.B. durch Simulationen und interaktive Demos (z.B. Click-Dummies) in frhen Entwicklungsphasen. Abbildung der Funktionen und Aufgaben des Services, Erleben des Look & Feels, Aufzeigen der Realisierbarkeit von Anwendungen. Desweiteren: Usability-Tests, Peer-Group Tests 18
  • 19. whitelabeling Technische Lsung mit der z.B. bei Webseiten fr unterschiedliche Nutzer oder Kunden zielgruppenspezische Designs & Inhalte angezeigt werden, z.b. mit Logo und Farben eines Partners (siehe auch Mandantenfhigkeit). kurz: Gleicher Grundaufbau Gleiche Struktur Eigene Texte Eigenes Design Eigenes Logo