Webdesign-
Fachbegriffe
Wichtige Bezeichnungen im Zusammenhang mit
Webdesign und Webentwicklung



Sascha Aßbach, Mai 2010 ...
Begriffe & Definitionen
‣ Web-Standards              ‣ user interface design
‣ Semantik                       patterns
‣ acc...
Web-Standards
Die Einhaltung der Web-Standards ist unbedingt nötig,
um der größtmöglichen Anzahl von Benutzern mit
einer g...
Semantik
Als Teilgebiet der Linguistik ist Semantik die Lehre von
der Bedeutung.
Semantisch sinnvoll strukturiertes XHTML ...
accessibility
deutsch: Zugänglichkeit, Barrierefreiheit bzw. -armut
Webseiten auch für Besucher mit Behinderungen
nutzbar ...
user experience




                  6
user experience (UX)
Der Begriff User Experience (Nutzungserlebnis)
umschreibt alle Aspekte der Erfahrungen eines Nutzers
b...
usability
deutsch: Benutzerfreundlichkeit, Nutzbarkeit,
Bedienbarkeit, Intuitivität.

Usability bezeichnet die vom Nutzer ...
usability
Die Norm ISO 9241 beschreibt die Merkmale der
Usability. Dazu gehören:

Aufgabenangemessenheit (geeignete Funkti...
information architecture (IA)
Informationsarchitektur:
bezeichnet die Konzeption und
Definition der Struktur eines
Informat...
interaction design
Konzeption des Dialoges zwischen dem User und dem
Service (Interaktion) unter Berücksichtigung
verschie...
mock-ups & wireframes
Handzeichnungen oder drahtgitterartige simple
Darstellungen, die das Grundgerüst (Raster) und die
Pl...
mock-ups & wireframes




                        13
GUI
kurz für: graphical user interface
deutsch: Grafische Benutzeroberfläche
Dieser Begriff wird nicht nur im Zusammenhang mi...
user interface (UI)
design patterns
deutsch: Entwurfsmuster für Benutzeroberflächen

bewährte Lösungs-Schablonen für wieder...
layout
deutsch: Entwurf
Anhand der Mockups erstellter Webdesign-Entwurf
und Gestaltungsvorschlag für den Kunden. Meist
wer...
click-dummy
Rudimentärer, interaktiver Prototyp zur vereinfachten
Demonstration von Verknüpfungen und Teilprozessen.
Man k...
prototyping & testing
Prüfung des Konzeptes z.B. durch Simulationen und
interaktive Demos (z.B. Click-Dummies) in frühen
E...
whitelabeling
Technische Lösung mit der z.B. bei Webseiten für
unterschiedliche Nutzer oder Kunden
zielgruppenspezifische D...
Quellen & Links
‣ de.wikipedia.org
‣ www.w3.org
‣ Modernes Webdesign (Manuela Hoffmann)
‣ www.michael-rabe.de
‣ www.interac...
Nächste SlideShare
Wird geladen in …5
×

Webdesign Fachbegriffe

8.898 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design, Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
8.898
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
17
Aktionen
Geteilt
0
Downloads
48
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webdesign Fachbegriffe

  1. 1. Webdesign- Fachbegriffe Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung Sascha Aßbach, Mai 2010 (v1.3)
  2. 2. Begriffe & Definitionen ‣ 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. 3. Web-Standards Die Einhaltung der Web-Standards ist unbedingt nötig, um der größtmöglichen Anzahl von Benutzern mit einer größtmöglichen Anzahl von Browsern unter verschiedenen Plattformen die Webseite zugänglich zu machen. Eine gute Suchmaschinentauglichkeit, lange Lebensdauer und die Wartungsfreundlichkeit der Webseiten wird durch die Einhaltung der Web- Standards erst wirklich ermöglicht. Das W3C hat Web-Standards für korrektes XHTML, CSS und das Document Object Model (DOM) definiert. 3
  4. 4. Semantik Als Teilgebiet der Linguistik ist Semantik die Lehre von der Bedeutung. Semantisch sinnvoll strukturiertes XHTML enthält neben dem eigentlichen Seiteninhalt zusätzliche Informationen zu dessen Bedeutung. Dies ist besonders für die Platzierung in Suchmaschinen wichtig. Beispiel: Statt <div class=“head“>Headline</div> z.b. <h1>Headline</h1> nutzen. 4
  5. 5. accessibility deutsch: Zugänglichkeit, Barrierefreiheit bzw. -armut Webseiten auch für Besucher mit Behinderungen nutzbar machen. „Mit einer Website möchte man immer möglichst viele Menschen erreichen und möglichst wenige ausschließen. Deshalb ist es für Entwickler unabdingbar, die Prinzipien des modernen Webdesigns nach Webstandards zu verinnerlichen“ Manuela Hoffmann, Modernes Webdesign, S. 41 5
  6. 6. user experience 6
  7. 7. user experience (UX) Der Begriff User Experience (Nutzungserlebnis) umschreibt alle Aspekte der Erfahrungen eines Nutzers bei der Interaktion mit einem Produkt oder Service. Ziel ist es, ein möglichst angenehmes, positives Nutzungserlebnis zu schaffen. Die Voraussetzung für eine positive User Experience ist die Erfüllung der Erwartungen der Nutzer, ohne dass die Nutzer sich langweilen oder überfordert sind. 7
  8. 8. usability deutsch: Benutzerfreundlichkeit, Nutzbarkeit, Bedienbarkeit, Intuitivität. Usability bezeichnet die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System.  Eine besonders einfache, für den Nutzer und seine Aufgaben angemessene Bedienung zur Erfüllung der gestellten Aufgabe wird dabei als benutzerfreundlich angesehen. 8
  9. 9. usability Die Norm ISO 9241 beschreibt die Merkmale der Usability. Dazu gehören: Aufgabenangemessenheit (geeignete Funktionalität, Minimierung unnötiger Interaktionen), Selbstbeschreibungsfähigkeit (Verständlichkeit durch Hilfen/Rückmeldungen), Lernförderlichkeit (Anleitungen, Ziel: minimale Erlernzeit), Steuerbarkeit (Steuerung des Dialogs durch den Benutzer), Erwartungskonformität (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. 10. information architecture (IA) Informationsarchitektur: bezeichnet die Konzeption und Definition 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. 11. interaction design Konzeption des Dialoges zwischen dem User und dem Service (Interaktion) unter Berücksichtigung verschiedener Benutzerrollen und Szenarios. Betrachtung verschiedener Use-Cases (Anwendungsfälle). Diese werden zunächst z.B. als Mockups festgehalten und später in Click-Dummies greifbarer gemacht, um sich den zukünftigen Interaktionsablauf des Benutzers mit der Anwendung vorstellen zu können. 11
  12. 12. mock-ups & wireframes Handzeichnungen oder drahtgitterartige simple Darstellungen, die das Grundgerüst (Raster) und die Platzierung von Text-, Grafik-, Navigations- und weiteren Elementen auf einer Webseite zeigen. Teilweise mit Interaktionsangaben. Wireframes geben keinerlei Auskunft über das endgültige Webdesign sondern dienen der Konzeption von Struktur, Interaktion und Prozessen. 12
  13. 13. mock-ups & wireframes 13
  14. 14. GUI kurz für: graphical user interface deutsch: Grafische Benutzeroberfläche Dieser Begriff wird nicht nur im Zusammenhang mit Webdesign verwendet. 14
  15. 15. user interface (UI) design patterns deutsch: Entwurfsmuster für Benutzeroberflächen bewährte Lösungs-Schablonen für wiederkehrende Entwurfselemente in der Softwarearchitektur und - entwicklung. Wiederverwendbare Vorlage zur Funktionsdarstellung z.B. für die Veranschaulischung bei Briefings an Kunden und Entwickler. Bsp: Login-Formulare und Plausibilitätprüfungen, zur Darstellung von Effekten etc. 15
  16. 16. layout deutsch: Entwurf Anhand der Mockups erstellter Webdesign-Entwurf und Gestaltungsvorschlag für den Kunden. Meist werden mehrere Layouts zur Auswahl vorgelegt. Wichtig: Layouts enthalten nicht unbedingt finale Texte und pixelgenaue Darstellungen. Es geht lediglich um das Vermitteln des Look & Feels für einen ersten Eindruck. Nach Abnahme des gewünschten Layouts wird das Finetuning und die konkrete Umsetzung gemacht. 16
  17. 17. click-dummy Rudimentärer, interaktiver Prototyp zur vereinfachten Demonstration von Verknüpfungen und Teilprozessen. Man kann sich durch Wireframes oder Layouts durchklicken. Dient z.B. in der Konzeptionsphase zur Abbildung von Use-Cases und um ein Gefühl für die Navigation zu bekommen. 17
  18. 18. prototyping & testing Prüfung des Konzeptes z.B. durch Simulationen und interaktive Demos (z.B. Click-Dummies) in frühen 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. 19. whitelabeling Technische Lösung mit der z.B. bei Webseiten für unterschiedliche Nutzer oder Kunden zielgruppenspezifische Designs & Inhalte angezeigt werden, z.b. mit Logo und Farben eines Partners (siehe auch Mandantenfähigkeit). kurz: ‣ Gleicher Grundaufbau ‣ Gleiche Struktur ‣ Eigene Texte ‣ Eigenes Design ‣ Eigenes Logo 19
  20. 20. Quellen & Links ‣ de.wikipedia.org ‣ www.w3.org ‣ Modernes Webdesign (Manuela Hoffmann) ‣ www.michael-rabe.de ‣ www.interaction-design.org ‣ www.oreilly.de ‣ ui-patterns.com ‣ wireframes.tumblr.com 20

×