Screen-Media-Lernquiz

Konzeption von Webseiten

Was wird hier gezeichnet?


Click to Flip
Ein Wireframe


Konzeption von Webseiten

Welche Formen von Wireframes kennst Du?





Click to Flip
Low Fidelity Wireframe

High Fidelity Wireframe





Konzeption von Webseiten

Erkläre was bei diesem Arbeitsschritt erarbeitet wird und wozu er dient.

Click to Flip
1. Grobgerüst Webseite, zeigt den schematischen Aufbau

2. Für Usabilitytests

3. Für technische Vorabklärung von Funktionen und Prozessen



Design

Nenne drei spezifische technische Eigenschaften, die bei der Gestaltung von Inhalten für Mobilgeräte beachtet werden müssen.
Wie reagierst Du gestalterisch?




Click to Flip
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.

Design

Erklären Sie mit einem Satz den Begriff Single Page- oder One-Page-Webseite.




Click to Flip
Single-Page-oder One-Page-Webseite bedeutet, dass sich der gesamte Inhalt einer Webseite auf einer Seite befindet.




Design

Erläutern Sie Vor- und Nachteile einer Single-Page-oder One-Page-Webseite.






Click to Flip
Vorteil: Durch Wischgesten kann sich der User durch die gesamte Seite bewegen, was bei berührungsempfindlichen Geräten komfortabel ist.
Nachteil: Umfangreiche Webseiten sind für das Designkonzept «Single Page»/«One Page» ungeeignet, da sie unübersichtlich werden und mehr Ladezeit benötigen.


Design

Erkläre den Begriff «Parallax Scrolling».






Click to Flip





Beim Scrollen bewegen sich die Elemente der Website unterschiedlich schnell. Folge: räumlich Tief, 3D-Effekt.


Design

Schriften können in Webseiten auf verschiedene Arten eingebunden werden. Wie?







Click to Flip

Design und Technologie

Welche Technologie oder Scriptsprache ermöglicht den schnellen Wechsel des Designs von Webseiten? Nennen Sie den Fachausdruck.





Click to Flip
CSS (Cascading Style Sheets)






Design und Technologie

Erkläre das technische Prinzip von CSS und HTML.





Click to Flip
CSS steuert das Design (Layout, Farben, Typografie etc.)
und ist vom HTML unabhängig.








Dateiformate

Click to Flip

Druck- und Bildschirmmedien

Click to Flip

Technologie CMS

Was beutet CMS?





Click to Flip
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.

CMS 2020

Welche CMS kennst Du?





Click to Flip
Weltweit, 2019, wtm-online.de

Portfolio

Nenne zwei Vorteile eines Printportfolios.





Click to Flip
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.


Portfolio

Nenne zwei Vorteile eines Online-Portfolios.
Click to Flip
1. Kann überall online betrachtet werden.
2. Kann jederzeit und unmittelbar beliebig erweitert werden.

Zeigt Kompetenzen im Bereich Bildschirmmedien-Design.



Präsentation

Sie präsentieren bei Ihrem Kunden vor Ort mit Ihrem eigenen Laptop.
Welches Computer-Zubehör müssen Sie unbedingt mitnehmen.





Click to Flip
1. Ladekabel für Ihren Laptop.
2. Adapter/Stecker für Beamer.
3. Festplatte oder USB-Stick mit den zu präsentierenden Daten. (als Backup)

Weiteres Zubehör: Beamer mit entsprechendem Anschlusskabel. (Falls nicht vor Ort vorhanden)
Laserpointer, Presenter.

Computertechnik

Wie heisst dieser Stecker?

Click to Flip
Stecker im Format USB C (Lightning) als Thunderbolt-Schnittstelle






Computertechnik

Was kann ein
USB-C-Lightning-Kabel?
Click to Flip
Geräte verbinden,
schnell laden,
synchronisieren.





Computertechnik

Ihr Computer wird mit der Zeit immer langsamer. Was können die Gründe dafür sein?


Click to Flip
1. Festplatte/ Datenspeicher überfüllt.
2. Arbeitsspeicher (RAM) zu klein.
3. Grafikkarte (GPU) wenig Leistung.
4. Im Hintergrund laufen zu viele Applikationen (Video, Musik etc.)
5. Unsichtbarer Datenmüll auf dem Datenspeicher.
Weiters: Viren oder Malware, Betriebssystem nicht aktuell.


Desktop oder Laptop

Was spricht für den Kauf eines Laptop-Computers?

Click to Flip
Unabhängiges Arbeiten überall, im Freien, unterwegs etc.
Kein Kabelwirrwarr durch integrierte Tastatur, Touchpad (Maus).
Benötigt wenig Platz.
In der Regel leiser als ein Desktop-Computer.


Desktop oder Laptop

Was spricht für den Kauf eines Desktop-Computers?

Click to Flip
Jederzeit erweiterbar: Grafikkarte, Festplatte etc.
Monitor, Maus und Tastatur frei wählbar.
In der Regel bessere Rechen-/Prozessorleistungen.
Bei Defekt muss nur der Rechner in Reparatur gegeben werden.


Computer Technik

Photoshop ist das umfangreichste aber auch das leistungsintensivste Tool für Bildbearbeitungen am Computer und Laptop. Worauf achten Sie beim Computer-Kauf, damit das Programm optimal läuft?

Click to Flip
1. Hochauflösender Display/Bildschirm:
Full-HD oder Retina.
2. Genügend RAM/Arbeitsspeicher:
8 GB Hauptspeicher oder mehr.
3. Schneller CPU/Prozessor:
Z.B. Intel Core-i7 oder i9-Prozessor oder vergleichbar.
4. Leistungsfähige GPU/Grafikkarte:
Z.B. 4 GB HBM2 oder mehr.


Digitale Netzwerke

Welche Online-Tools, Plattformen oder Applikationen helfen bei der Planung, Vernetzung, beim Austauschen von Daten und Informationen zu Projekten?

Click to Flip
Dropbox, WeTransfer, Google Drive, Adobe Cloud, Skype, Doodle, Evernote, Slack, iCloud Drive, OneDrive, NextCloud, Kulibri, LamaPoll, Moreganize etc.




Webdesign

Was ist adaptives Design?







Click to Flip
= 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.

Webdesign

Was ist responsives Design?







Click to Flip
= 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.

Webdesign

Beschreiben Sie die Unterschiede, was sich bei der Gestaltung dieser Icons seit ca. 2013 grundlegend geändert hat. Wie heisst der Design-Trend?


Click to Flip
1. Verzicht auf 3D-Darstellung bzw. räumliche Darstellung
2. Keine Schatten
3. Weniger naturalistisch
4. Vereinfachte Bildsprache, stärker abstrahiert

Bezeichnung: Flat Design




Webdesign Konzeption

Wie heisst das gezeigte Schema, dass in der Konzeptphase für Webseiten und Apps realisiert wird.
Click to Flip
Strukturbaum






Webdesign Konzeption




Was bedeutet Mobile Fist?




Click to Flip
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.