design-refresh-projekt – release 2...titelhierarchien und verlinkungen vereinheitlicht karussell...
TRANSCRIPT
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Design-Refresh-Projekt – Release 2
Vorinformation für Autoren
1
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Agenda
Überblick Projektziele und -fortschritt
Corporate Design-Auffrischung
Der zweite Release
Autoren-Test und Vorbereitungen
Wie es weiter geht…
2
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Projektziele «Design-Refresh»
Moderneres, zeitgemässes Erscheinungsbild der Webseiten der ETH Zürich Bessere User Experience für die Webseitenbesucher Verstärkter Fokus auf den Inhalt Etablierung eines kontinuierlichen Weiterentwicklungsprozesses für das
Web-Design Grössere Freiheiten bei der Gestaltung der Inhalte für unsere internen Autoren Umsetzung des weiterentwickelten Corporate Design
Der Aufwand für die internen Autoren soll möglichst gering ausfallen
3
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Die Vision 2022 – Designprinzipien
4
Besucher willkommen heissen
Einfachheit statt Komplexität
Innovation spürbar machen
Touchpoints der Zukunft
Learn and adapt
Flexibilität
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Vision 2022
5
WORK IN PROGRESS
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Die Vision - Beispielseiten
6
WORK IN PROGRESS
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Der erste Release
7
Go-Live am 9. Januar 2020
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Der erste Release
8
ETH-Schrift (Din Next) eingeführt Grauer Hintergrund entfernt Titelhierarchien und Verlinkungen vereinheitlicht Karussell erneuert Tabellen-Design optimiert Generell mehr Weissraum
Autoren-Testing hat im Dezember 2019 stattgefunden - Feedbacks in Release 1 eingeflossen
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Weiterentwicklung Corporate Design
9
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Weiterentwicklung Corporate Design
10
Stärkere Verwandtschaft zwischen Print und online
Corporate Design soll grosszügiger und heller werden
Logo und Typografie sind schwarz auf weissem Hintergrund
Farbflächen punktuell im Inhalt
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Absenderverhalten
11
Absender bezeichnet immer die Hochschule (oberste Ebene) und den konkreten Absender des jeweiligen Kommunikationsmittels (unterste Ebene)
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Farbkonzept
12
Die bestehende Farbpalette bleibt bestehen. Auf Hellgrün (ETH 10) wird allerdings zukünftig verzichtet. Die Verwendung der Farbe Corporate Blau wird nicht mehr eingeschränkt.
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Der zweite Release
13
Überarbeitung Header (Einführung neues Corporate Design)
Anpassung Label-Farbe Karussell
Neuer Footer
Neues Konzept für die Subnavigation (Entschlackung von regulären Inhaltsseiten; Fokus auf Inhalt)
Erste Überarbeitung Such-Input
Umstellung des Grids (Zusammen-legung von Release 2 und 3)
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Die Veränderungen: Header
14
Logo ist neu überall schwarz aufweissem Hintergrund Farbe wandert in den Content
(in einem ersten Schritt in Karussell Slide) Organisations-Breadcrumb (bis-
her auf hellgrünem Hintergrund auf Ebene des Karussells) wandert in die Metanavigation Nur noch direkte Absender im
Seitentitel Header hat nur noch
Orientierungsfunktion Quick-Links werden neu im
Footer dargestellt
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Die Veränderungen: Header
15
Mobiler Header ebenfalls schwarz auf weissem Hintergrund Service-Navigation unterhalb
der Hauptnavigation mit Login-Button, Kontakt-Link und Links auf Alumni, Studierendenportal und Services & Ressourcen
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Die Veränderungen: Navigation
16
Die neue Fly-Out-Navigation erlaubt einen besseren Überblick über die ersten drei Ebenen der Website Neue Unterpunkte werden sichtbar ->
Potential, um Informationsarchitektur zu hinterfragen und evtl. neu zu strukturieren bzw. zu verschlanken
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Die Veränderungen: Footer
17
Der Footer wurde stark erweitert Bisher im Header platzierte
Links sind neu im Footerplatziert Überblick über Social-Media-
Präsenzen Neue Möglichkeit,
Kontaktinformationen direkt im Footer einzupflegen Direktzugriff auf alle
Departemente
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Footer: Konfiguration Kontaktinformationen
18
Kontaktinformationen können direkt im Footer (einmalig auf der Homepage) konfiguriert werden Wenn Kontakt-Box im Footer
nicht konfiguriert ist, wird der Link auf die bestehende Kontakt-Seite dargestellt Zusätzliche Textkomponente in
der rechten Spalte für weitere Informationen (z.B. Öffnungszeiten)
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Footer: Konfiguration Social Media / RSS
19
Social Media Icons und RSS Feed können in den Seiteneigenschaften der Homepage konfiguriert werden
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Subnavigation / Breadcrumb
20
Subnavigation neu eingeklappt auf der linken Seite der Seite Diese zeigt nur Seiten auf der
gleichen Ebene und Unterseiten an Breadcrumb oberhalb des
Seitentitels zeigt Positionierung auf der Webseite an
Fokus soll verstärkt auf den Inhalt gerichtet werden; erster Schritt zur Umsetzung der Vision
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Autoren-Testing
21
Alle Webseiten werden ab dem 12. März wieder über responsive.ethz.ch erreichbar sein Feedback-Button zum Melden von
Unstimmigkeiten, Bugs Aktuelle Inhalte können und sollen im
neuen Design getestet werden Geplanter Go-Live am 22. April 2020
Tipps für Go-Live: (Haupt-)Navigation testen Wichtige Links in den Content auf der
Startseite Bilder prüfen bzw. ergänzen
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Wie geht es weiter… Programm Online-Kommunikation 2022
22
1. Quick Wins
2. Backlog & Kundenwünsche
3. Content
4. Langfristige Vision
5. Design
6. Monitoring / Performance Mgmt
7. News
8. Suchen & Finden
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Wie geht es weiter… Programm Online-Kommunikation 2022
23
1. Quick Wins
2. Backlog & Kundenwünsche
3. Content
4. Langfristige Vision
5. Design
6. Monitoring / Performance Mgmt
7. News
8. Suchen & Finden
|| 24.02.2020
Timing: Programm «Online-Kommunikation 2022»
2019 2020 2021 2022
Paket 2: Backlog & KundenwünscheAbbau & Kommunikation Langfristige Sicherstellung der Kapazitäten für Weiterentwicklung / Backlog-Management
Paket 3: Content
Integration SoMe (in CS integriert)
Paket 4: Langfristige Vision
4a Analyse Studierende
4b Content Repository
Paket 5: Design
Konzept Umsetzung: Etappe 1
Paket 6: Monitoring / Performance ManagementPflichtenheft Tool Implementierung Tool & Nutzung Analytics-Ressourcen
Paket 7: ETH NewsAnforderungen ETH News Umsetzung ETH News Newsletter / News-Alert
= Lead ID
Prüfung Google Analytics
Umsetzung: Etappe 2 Umsetzung: Etappe 3
Bet
rieb
Wei
tere
ntw
ickl
ung
Aufbau Analytics-Stelle
= Lead ID & HK= Lead HK
Paket 8: Suchen & Finden dank AI
Initialisierung tbd tbd
Content-Strategie
|| 10.03.2020Hochschulkommunikation / Informatikdienste
Vielen Dank für eure Unterstützung!
25