SlideShare ist ein Scribd-Unternehmen logo

Webdesign Fachbegriffe

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.

1 von 20
Downloaden Sie, um offline zu lesen
Webdesign-
Fachbegriffe
Wichtige Bezeichnungen im Zusammenhang mit
Webdesign und Webentwicklung



Sascha Aßbach, Mai 2010 (v1.3)
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
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
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
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
user experience




                  6

Recomendados

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
 
User (Experience) Stories #iak13
User (Experience) Stories #iak13User (Experience) Stories #iak13
User (Experience) Stories #iak13Screamin Wrba
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...Peter Rozek
 
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)Wolfram Nagel
 
Next Generation Information Experience – Gedanken über die Zukunft von Conten...
Next Generation Information Experience – Gedanken über die Zukunft von Conten...Next Generation Information Experience – Gedanken über die Zukunft von Conten...
Next Generation Information Experience – Gedanken über die Zukunft von Conten...Wolfram Nagel
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...usability.de
 

Más contenido relacionado

Destacado

Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Binary Studio
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptNAWAZ KHAN
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
2015 Font Trends For Presentations
2015 Font Trends For Presentations2015 Font Trends For Presentations
2015 Font Trends For PresentationsPresentation Panda
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive WebdesignAndreas Simon
 

Destacado (7)

Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
2015 Font Trends For Presentations
2015 Font Trends For Presentations2015 Font Trends For Presentations
2015 Font Trends For Presentations
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Webdesign
WebdesignWebdesign
Webdesign
 
Slides That Rock
Slides That RockSlides That Rock
Slides That Rock
 

Ähnlich wie Webdesign Fachbegriffe

Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda Wien
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenAlineDeicke
 
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX GmbH
 
ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3guest08d4be
 
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?BTEXX GmbH
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability EngineeringNina Rebele
 
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenUI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenRainer Gibbert
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)JanGroenefeld
 
UX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzenUX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzenIOZ AG
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability TrainingPaulina
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Stefan Freimark
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessImmacon
 

Ähnlich wie Webdesign Fachbegriffe (20)

Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
 
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
 
ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3
 
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?BTEXX Fachartikel: UCD – Formel für bessere Intranets?
BTEXX Fachartikel: UCD – Formel für bessere Intranets?
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenUI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen Geräten
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
 
UX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzenUX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzen
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 

Webdesign Fachbegriffe

  • 1. Webdesign- Fachbegriffe Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung Sascha Aßbach, Mai 2010 (v1.3)
  • 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. 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. 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. 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
  • 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. 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. 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. 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. 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. 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
  • 14. GUI kurz für: graphical user interface deutsch: Grafische Benutzeroberfläche Dieser Begriff wird nicht nur im Zusammenhang mit Webdesign verwendet. 14
  • 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. 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. 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. 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. 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. 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