1. Konzeption von Webseiten
Was wird hier gezeichnet?
Ein Wireframe
2. Konzeption von Webseiten
Welche Formen von Wireframes kennst Du?
Low Fidelity Wireframe
High Fidelity Wireframe
High Fidelity Wireframe
3. Konzeption von Webseiten
Erkläre was bei diesem Arbeitsschritt erarbeitet wird und wozu er dient.
1. Grobgerüst Webseite, zeigt den schematischen Aufbau
2. Für Usabilitytests
3. Für technische Vorabklärung von Funktionen und Prozessen
2. Für Usabilitytests
3. Für technische Vorabklärung von Funktionen und Prozessen
4. Design
Nenne drei spezifische technische Eigenschaften, die bei der Gestaltung von
Inhalten für Mobilgeräte beachtet werden müssen.
Wie reagierst Du gestalterisch?
Wie reagierst Du gestalterisch?
Eigenschaft 1: Kleine Bildschirme.
Gestaltung: Grösse der Navigation anpassen.
Eigenschaft 2: Kein Hover-Effekt bei berührungsempfindlichen Bildschirmen.
Gestaltung: Verzicht auf Hover-Effekt.
Eigenschaft 3: Unterschiedliche Bildschirmgrössen.
Gestaltung: Responsives oder Adaptives Design.
Gestaltung: Grösse der Navigation anpassen.
Eigenschaft 2: Kein Hover-Effekt bei berührungsempfindlichen Bildschirmen.
Gestaltung: Verzicht auf Hover-Effekt.
Eigenschaft 3: Unterschiedliche Bildschirmgrössen.
Gestaltung: Responsives oder Adaptives Design.
5. Design
Erklären Sie mit einem Satz den Begriff Single Page- oder One-Page-Webseite.
Single-Page-oder One-Page-Webseite bedeutet, dass sich der gesamte Inhalt einer Webseite auf einer Seite befindet.
6. Design
Erläutern Sie Vor- und Nachteile einer Single-Page-oder One-Page-Webseite.
Vorteil: Mit Wischgesten kann sich der User durch die Seite bewegen, was bei berührungsempfindlichen Geräten komfortabel ist.
Wenn Single-Page-Webanwendungen gut umgesetzt sind, kann die Verweildauer von Besuchern erhöht werden.
Nachteil: Umfangreiche Webseiten sind als «Single Page»/«One Page» ungeeignet. Sie werden unübersichtlich und benötigen mehr Ladezeit.
7. Design
Erkläre den Begriff «Parallax Scrolling».
Beim Scrollen bewegen sich die Elemente der Website unterschiedlich schnell. Folge: räumlich Tief, 3D-Effekt.
8. Design und Technologie
Schriften können in Webseiten auf verschiedene Arten eingebunden werden. Wie?
9. Design und Technologie
Welche Technologie oder Scriptsprache ermöglicht den schnellen Wechsel des Designs von Webseiten? Nennen Sie den Fachausdruck.
CSS (Cascading Style Sheets)
10. Design und Technologie
Erkläre das technische Prinzip von CSS und HTML.
CSS steuert das Design (Layout, Farben, Typografie etc.)
und ist vom HTML unabhängig.
und ist vom HTML unabhängig.
11. Dateiformate
Click to Flip
12. Druck- und Bildschirmmedien
Click to Flip
13. Technologie CMS
Was beutet CMS?
Content Management System
(Inhaltsverwaltungssystem)
Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation und Darstellung von digitalen Inhalten (Content).
Die Inhalte können aus Text- und Multimedia-Dokumenten bestehen.
(Inhaltsverwaltungssystem)
Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation und Darstellung von digitalen Inhalten (Content).
Die Inhalte können aus Text- und Multimedia-Dokumenten bestehen.
14. CMS 2020
Welche CMS kennst Du?
Weltweit, 2019, wtm-online.de
15. Portfolio
Nenne zwei Vorteile eines Printportfolios.
1. Kann in die Hand genommen werden, haptische Qualität, Materialität.
2. Kann abgegeben werden, bleibt physisch vorhanden.
Weiterer Vorteile: Zeigt Kompetenzen im Bereich Printmedien-Design.
2. Kann abgegeben werden, bleibt physisch vorhanden.
Weiterer Vorteile: Zeigt Kompetenzen im Bereich Printmedien-Design.
16. Portfolio
Nenne zwei Vorteile eines Online-Portfolios.
1. Kann überall online betrachtet werden.
2. Kann jederzeit und unmittelbar beliebig erweitert werden.
Zeigt Kompetenzen im Bereich Bildschirmmedien-Design.
2. Kann jederzeit und unmittelbar beliebig erweitert werden.
Zeigt Kompetenzen im Bereich Bildschirmmedien-Design.
17. Webdesign
Was ist adaptives Design?
= Anpassungsfähig. Das Layout/Design von Webseiten wird den verschiedenen Bildschirmgrössen angepasst. Der Wechsel der Formate geschieht in Sprüngen. Zwischengrössen werden nicht berücksichtigt was zu unschönen Darstellungen führen
kann.
18. Webdesign
Was ist responsives Design?
= Reaktionsfähig. Das Layout/Design einer Webseite passt sich fliessend unterschiedlichen Bildschirmgrössen an. Der Wechsel von Format zu Format geschieht fliessend. Zwischengrössen werden in der Regel vermieden.
19. Webdesign
Beschreiben Sie die Unterschiede, was sich bei der Gestaltung dieser Icons seit ca. 2013 grundlegend geändert hat. Wie heisst der Design-Trend?
1. Verzicht auf 3D-Darstellung bzw. räumliche Darstellung
2. Keine Schatten
3. Weniger naturalistisch
4. Vereinfachte Bildsprache, stärker abstrahiert
Bezeichnung: Flat Design
2. Keine Schatten
3. Weniger naturalistisch
4. Vereinfachte Bildsprache, stärker abstrahiert
Bezeichnung: Flat Design
20. Webdesign Konzeption
Wie heisst das gezeigte Schema, dass in der Konzeptphase für Webseiten und Apps realisiert wird.
Strukturbaum
21. Webdesign Konzeption
Was bedeutet Mobile First?
Mobile First ist ein Design-Konzept für Webseiten und Apps, bei dem zuerst das Design für mobile Endgeräte definiert wird und danach das Design für die grösseren Endgeräte. Motivation für diesen Trend: Immer mehr Nutzer betrachten Webseiten und Apps mit dem Smartphone oder Tablet, nicht mit dem Desktop.
22. UI/UX Design
Was bedeutet User Interface (UI)?
UI ist die Benutzerschnittstelle zwischen Mensch und Maschine. Für die User unmittelbar sichtbare/bedienbare Elemente.
23. UI/UX Design
Was bedeutet User Interface (UI) Design?
UI Design bedeutet: Design der Benutzerschnittstelle.
Ziel: Das UI für den User nützlich und sinnvoll zu gestalten, damit leichter operative Funktionen ausgeführt werden können. UI Design umfasst die visuelle Darstellung des UI: Layout, Farben, Buttons, Bilder ...
24. UI/UX Design
Was bedeutet User Experience (UX)?
UX bedeutet Benutzererlebnis und umfasst alle Aspekte der Interaktion des Nutzers mit einem Medium. UX beschreibt sämtliche Erwartungen, Wahrnehmungen und Reaktionen, die vor, während und nach der Nutzung auftreten.
25. UI/UX Design
Was bedeutet UX-Design?
UX-Design ist die Struktur/Organisation einer Site oder App. Die Form, wie User durch Interaktion navigieren können. Ziel: Joy of Use. Informationsziele sind einfach, angenehm und erfolgreich zu erreichen. UX-Design wird erst durch die Nutzung erkennbar.
26. Usability
Wie kann ich sicherstellen, dass die Usability benutzerfreundlich ist?
Durch einen Usability-Test.
27. Usability
Wie kann ich einen ersten Usability-Test vornehmen?
Durch einen User-Test in einer frühen Entwicklungsphase mit einem Low Fidelity Wireframe.
28. Usability
Worauf muss bei einem Usability-Test geachtet werden?
Die Auswahl und die Anzahl der Testpersonen (TP) sollten repräsentativ sein.
Die TP dürfen nicht mit dem Projekt vertraut sein.
Die TP dürfen vor dem Test nicht instruiert werden. (Ausnahme Task-Basiertes Testing) Das Verhalten der TP soll beobachtet werden.
Die TP kommentieren was sie ausführen möchten.
Die TP werden nach dem Test aufgrund eines Fragebogens befragt.
Der Test sollte ausgewertet werden.
Die TP dürfen nicht mit dem Projekt vertraut sein.
Die TP dürfen vor dem Test nicht instruiert werden. (Ausnahme Task-Basiertes Testing) Das Verhalten der TP soll beobachtet werden.
Die TP kommentieren was sie ausführen möchten.
Die TP werden nach dem Test aufgrund eines Fragebogens befragt.
Der Test sollte ausgewertet werden.
29. Webdesign Technik
Ich möchte gerne auf einer Webseite ein Logo mit einem transparenten Hintergrund über ein Bild platzieren. Welche Dateiformate stehen mir dafür zur Verfügung?
GIF, PNG, SVG
30. Webdesign Arbeitsinstrumente
Für was ist das Programm Adobe Xd geeignet?
Kennst Du Alternativen?
Kennst Du Alternativen?
Damit können interaktive Prototypen von Apps und Webseiten realisiert werden.
Alternativen sind Sketch, Figma, Axure, Protopie etc.
31. Webdesign Arbeitsinstrumente
Welches sind die Vorteile von interaktiven Prototypen von Webseiten und Apps?
Es kann damit frühzeitig ein Usability-Test gemacht werden.
Dem Auftraggebenden kann das (UI-)Design sowie die Interaktivität (UX-Design) präsentiert werden.
Dem Web-/App-Entwickler kann das Design sowie das interaktive Verhalten vorgestellt werden.
32. Webdesign Arbeitsinstrumente
Der Code von Webseiten lässt sich mit unterschiedlichen Editoren bearbeiten. Was ist der Unterschied zwischen einem reinen Code-Editor und einem WYSIWYG-Editor?
Mit einem reinen Code-Editor sind die Auswirkungen der Veränderungen am Code nicht sofort sichtbar. Diese werden nur über einen Browser sichtbar.
Mit WYSIWYG-Editor werden die Auswirkungen der Veränderungen am Code in Echtzeit sichtbar.
33. Webdesign Arbeitsinstrumente
Was bedeutet WYSIWYG-Editor?
WYSIWYG bedeutet:
What You See Is What You Get
Ein WYSIWYG-Editor zeigt Veränderungen am Code in Echtzeit.
34. Webdesign Arbeitsinstrumente
Es gibt ein paar Online-WYSIWYG-Editoren, wie z.B. Webflow, Allyou, Wixx.
Nenne Vor- und Nachteile dieser Online-WYSIWYG-Editoren.
Nenne Vor- und Nachteile dieser Online-WYSIWYG-Editoren.
Vorteile: Intuitives Arbeiten ist möglich ohne Code-Erfahrung.
Die technische Infrastruktur (Datenbankeinrichtung, Backup etc.) ist durch den Anbieter gewährleistet.
Nachteile: Abhängigkeit von einem Abonnement (laufende Kosten).
Die Daten sind auf einem unbekannten Server gespeichert (Datensicherheit und Urheberrecht unklar).
Die Bearbeitung der Webseiten-Daten ist nur mit einer Internetverbindung möglich.
Die technische Infrastruktur (Datenbankeinrichtung, Backup etc.) ist durch den Anbieter gewährleistet.
Nachteile: Abhängigkeit von einem Abonnement (laufende Kosten).
Die Daten sind auf einem unbekannten Server gespeichert (Datensicherheit und Urheberrecht unklar).
Die Bearbeitung der Webseiten-Daten ist nur mit einer Internetverbindung möglich.
35. Webdesign Arbeitsinstrumente
Es gibt Offline-Editoren, die zur lokalen Bearbeitung von Webseiten-Dateien verwendet werden können, wie z.B. Adobe Dreamweaver, BlueGriffon, Brackets (Vorschaufunktion mit Chrome). Nenne Vorteile und Nachteile dieser Offline-Editoren.
Vorteile: Webdaten können auf dem lokalen Rechner bearbeitet und anschliessend auf einen Server hochgeladen werden; es fallen keine Abo-Kosten an; der Upload der Webdateien wird auf einen spezifischen Server gemacht. (Datensicherheit und Urheberrecht geregelt).
Nachteile: Ein technisches Grundwissen wird vom Benutzer vorausgesetzt; die technische Infrastruktur (Datenbankeinrichtung, Backup etc.) muss separat geregelt werden; die Daten müssen mit einem separaten Programm auf den Server hochgeladen werden (ausser bei Adobe Dreamweaver)
Nachteile: Ein technisches Grundwissen wird vom Benutzer vorausgesetzt; die technische Infrastruktur (Datenbankeinrichtung, Backup etc.) muss separat geregelt werden; die Daten müssen mit einem separaten Programm auf den Server hochgeladen werden (ausser bei Adobe Dreamweaver)
36. Suchmaschinen Optimierung
Warum ist es wichtig, dass Inhalte von Webseiten laufend aktualisiert werden?
Die laufende Aktualisierung der Inhalte einer Webseite verbessert deren Ranking bei der Indexierung von Suchmaschinen-Anfragen.
37. Suchmaschinen Optimierung
Was ist der Unterschied zwischen On-Page- und Off-Page-Suchmaschinen-Optimierung?
On-Page-Optimierungen sind alle Massnahmen, die direkt auf der Webseite vorgenommen werden können.
Off-Page-Suchmaschinen-Optimierung sind alle Massnahmen, die nicht direkt auf der Webseite vorgenommen werden können.
38. Suchmaschinen Optimierung
Nenne drei Beispiele der On-Page-Suchmaschinen-Optimierung.
Meta-Tags im Header der Page.
Titel von Texten sind mit den H-Tags (H1–H6) ausgezeichnet.
Die Webseite ist für mobile Nutzung optimiert.
Der Code enthält keine Fehler wie «tote» Links oder vergessene Zeichen.
Die Inhalte der Seite werden regelmässig aktualisiert.
39. Suchmaschinen Optimierung
Nenne drei Beispiele der Off-Page-Suchmaschinen-Optimierung.
Links auf andere Webseiten.
Viele Aufrufe Deiner Seite durch Besucher.
Links auf soziale Netzwerke.
Verweise von anderen Webseiten auf Deine Seite.
40. Webdesign Projektplanung
Auf was muss man bei der Planung von Webprojekten achten? Was sollte bei der Auftragserteilung geregelt werden?
Es muss darauf geachtet werden, dass der Unterhalt, der technische Support und das Update geregelt ist. Idealerweise wird dies einer Leistungsvereinbarung zwischen der Agentur und dem Kunden geregelt.