HandsOn-Workshop Anpassen der Mustervorlagen des allgemeinen Designkonzepts für das eigene Fachportal

Transkript

1 HandsOn-Workshop Anpassen der Mustervorlagen des allgemeinen Designkonzepts für das eigene Fachportal

2 Übersicht Zusammenfassung des Projekts vascoda Themenblock 5 Ziel des Workshops Materialien Übersicht der Arbeitsschritte zur Anpassung an das eigene Fachportal Durchführung der Arbeitsschritte an einem Beispiel

3 Zusammenfassung des Projekts Analyse der Fachportale Informationsarchitektur und Produktkatalog Allgemeines Designkonzept für die Fachportale

4 Ergebnisse des Projekts Vorschlag für eine einheitliche Gestaltung der Fachportale Materialien: Musterportal und Corporate Design Web Styleguide Umsetzung für HTML und das Content-Management- System Typo3 Leicht integrierbar und anpassbar durch Mustervorlagen und universelles Farbkonzept Lösungskonzepte für Informationsarchitektur, Design, Suche, Informationsangebote und Produktkatalog

5 Ziel des Workshops Der Workshop soll die folgenden Fragen beantworten: Welcher Aufwand ist nötig, das eigene Fachportal anzupassen? Welche Arbeitsschritte müssen durchgeführt werden? Wie werden die einzelnen Arbeitsschritte ausgeführt?

6 Materialien Mustervorlage HTML/CSS Mustervorlage Typo3 Photoshop-Dateien Corporate Design Web Styleguide Kurzanleitung für die Anpassung der Photoshop- und CSS-Dateien mit Farbtafel Farbmuster

7 Übersicht: Arbeitsschritte zur Anpassung Typo3/YAML 4. Schriftfarben usw. in CSS Dateien anpassen 5. Design mit Inhalten füllen und mit dahinterliegender Technik verbinden 1. Farbschema auswählen 2. Logo + Kopfgrafik entwickeln oder anpassen 3. Photoshop- Dateien anpassen [ Designerarbeit! ] HTML/YAML 4. Schriftfarben usw. in CSS Dateien anpassen 5. Design mit Inhalten füllen und mit dahinterliegender Technik verbinden

8 1. Farbschema auswählen Designerarbeit! Die Farbwelt des Portals sollte sich aus dem sonstigen Erscheinungsbild der Fachbibliothek wie zum Beispiel dem Logo ableiten. Es sollte eine Grundfarbe, eine Zweitfarbe und optional eine Schmuckfarbe festgelegt werden. Diese Farben können für Hintergründe, Buttons etc. in der Helligkeit variiert werden. Da für die Auswahl der Farben und deren Variationen keine allgemeingültigen Regeln aufgestellt werden können, muss dieser Schritt von einer Grafikagentur durchgeführt werden!

9 2. Logo und Kopfgrafik entwickeln Der Kopfbereich besteht aus dem Fachportal-Logo, der Hintergrundgrafik und dem VIFA-Logo Designerarbeit! Auch die Entwicklung/Modifizierung des Logos und die Entwicklung der Hintergrundgrafik muss von einer Grafikagentur durchgeführt werden! Eine Photoshop-Vorlage besteht bereits.

10 3. Photoshop-Dateien anpassen Für die Hintergründe von Kopf, Navigation, Spaltenlayout, Suchmasken usw. werden Photoshop-Grafiken benutzt. Liegt das Farbprofil vor, können die Photoshop-Dateien auch selber eingefärbt werden.

11 4. CSS-Dateien anpassen Schriftfarbe, Links, Überschriften usw. werden über CSS-Dateien angepasst. CSS-Dateien können einfach anhand der in diesem Workshop benutzten Listen angepasst werden.

12 Beispiel Die einzelnen Arbeitsschritte nun anhand des Workshop-Beispiel- Portals EconBiz. Hier die Original-Startseite:

13 1. Farbschema auswählen Designerarbeit! Grundfarben Musterportal: Grundfarben Beispielportal: Farbe Variationen Grundfarbe Zweitfarbe 1 Schmuckfarbe 1

14 1. Farbschema auswählen Designerarbeit! Übersicht über die Farben und deren RGB- und HEX-Werte auch in der Kurzanleitung:

15 1. Farbschema auswählen Designerarbeit! Erstellung eines Farbmusters, anhand einer Photoshop-Vorlage:

16 2. Logo und Kopfgrafik entwickeln Original-Logo EconBiz: Designerarbeit! Neu entwickeltes Logo:

17 2. Logo und Kopfgrafik entwickeln Aus dem neuen Logo und einer Hintergrundgrafik wird dann der Kopfbereich des Portals entwickelt: Designerarbeit!

18 3. Photoshop-Dateien anpassen Hilfsmittel: Kurzanleitung Hilft bei den Fragen: Welche Photoshop-Dateien gibt es und wofür sind sie? Wie färbe ich ein? Welche Ebenen färbe ich mit welcher Farbe ein? Liegt das Farbprofil vor, können die Photoshop-Dateien auch selber eingefärbt werden.

19 4. CSS-Dateien anpassen Hilfsmittel: Kurzanleitung und Tabelle mit allen zu verändernden Werten Hilft bei den Fragen: Welche CSS-Dateien gibt es und wofür sind sie? Wie verändere ich einen Wert? Wo verändere ich den Wert und mit welcher Farbe? CSS-Dateien können einfach anhand der in diesem Workshop benutzten Listen angepasst werden.

20 Ergebnis Komplettes Portallayout in HTML mit Seiten für Suche, Produkte, Themen

21 Ergebnis Kopieren der Photoshop-Dateien und Anpassen der CSS- Dateien ergibt Portal in Typo3

22 HandsOn-Workshop Photoshop-Dateien anpassen im Detail

23 Grundsätzlicher Aufbau Grundsätzliche Aufbau der Photoshop-Dateien: Photoshop-Dateien enthalten die Hintergrundgrafiken des Portals Mehrere Grafiken sind in einer Datei zusammengefasst und in verschiedenen Ebenen organisiert Welche Ebene mit welcher Farbe eingefärbt wird steht in der Kurzanleitung Die Grafiken sind schon geschnitten, d.h. beim Abspeichern werden automatisch mehrere Grafiken mit den richtigen Dateinamen gespeichert.

24 Grundsätzlicher Aufbau Grundsätzliche Aufbau der Photoshop-Dateien:

25 Kurzanleitung Hilfsmittel: Kurzanleitung Hilft bei den Fragen: 1. Welche Photoshop-Dateien gibt es und wofür sind sie? 2. Wie färbe ich ein? 3. Welche Ebenen färbe ich mit welcher Farbe ein?

26 Kurzanleitung Welche Photoshop-Dateien gibt es und wofür sind sie?

27 Kurzanleitung Welche Ebenen färbe ich mit welcher Farbe ein?

28 Wie färbe ich ein? Es gibt 2 Methoden: Bearbeitung durch Farbüberlagerung Bearbeitung bei Schnittmasken

29 Bearbeitung bei Farbüberlagerung In der Ebenen-Auswahl die Ebene anklicken (Doppelklick), dessen Farbe verändert werden soll.

30 Bearbeitung bei Farbüberlagerung Klicken auf Farbüberlagerung und anschließend auf das Farb-Feld neben der Füllmethode.

31 Bearbeitung bei Farbüberlagerung Unten den Hexadezimalcode eintragen und mit einem Klick auf OK bestätigen. Man kann stattdessen die RGB-Werte der Farbe eintragen. Die Eingabefelder dafür befinden sich direkt über dem Eingabefeld für die Hexadezimalzahl.

32 Bearbeitung bei Schnittmasken Schnittmasken kann man daran erkennen, dass eine Ebene mit einem Pfeil vor einer anderen Ebene eingerückt ist:

33 Bearbeitung bei Schnittmasken Wählen Sie die Ebene aus, die eingefärbt werden soll, und klicken Sie auf das Füll- oder Einstellungsebene-Symbol unten im selbigen Fenster.

34 Bearbeitung bei Schnittmasken Wählen Sie Volltonfarbe aus

35 Bearbeitung bei Schnittmasken Geben Sie den Hexadezimalwert oder den RGB-Wert der gewünschten Farbe ein.

36 Wie speichere ich? Speichern über den Dialog Für Web und Geräte speichern. Bei mehreren Grafiken in einer Datei Speichern wählen und ganz unten im Dialog bei Slices: Alle Benutzerslices auswählen.

37 HandsOn-Workshop CSS-Dateien anpassen im Detail

38 Kurzanleitung Welche CSS-Dateien gibt es und wofür sind sie?

39 Kurzanleitung Wie bearbeite ich die CSS-Dateien?

40 Wie bearbeite ich die CSS-Dateien? Als Vorlage dient die Excel-Datei Vifa_css_Farbwerte.xls. Darin ist dargestellt, für welche Bereiche welche Farben eingesetzt werden.

41 Wie bearbeite ich die CSS-Dateien? Ersetzen Sie alle Farben durch die gewünschten und vorher definierten neuen Farben. Beispiel: Zum Beispiel will man die Farbe der Überschrift h2 ändern. Man sucht also nach h2 in der Spalte ID. Die Spalte Datei verrät, in welcher Datei sich die ID befindet. Man öffnet das CSS-File, welches unter Datei angegeben ist und sucht nach der ID. Dort tauscht man den Farbwert, der unter Beispiel steht durch einen anderen Wert aus. Welcher Wert dafür verwendet werden soll, sagt die Spalte Zuordnung aus. Steht da Grundfarbe, so tauscht man die alte Grundfarbe (zum Beispiel #182E7A) durch die neue Grundfarbe (zum Beispiel #5a5a5a) aus.

42 Kontakt Dr. Maximilian Stempfhuber Daniel Hienert Name und Kontaktdaten in Folienmaster einfügen