TA Heimeier // Geschäftsbericht Dokumentation. von Claudia Büchner, Stefanie Beesch und Philip Mosch

Transkript

1 Dokumentation von Claudia Büchner, Stefanie Beesch und Philip Mosch

2 Inhaltsverzeichnis Arbeitsauftrag...2 Vorgaben...2 Konzept/Idee...3 Aufbau der Webseite...4 Aufbau der Druckversion...5 Gestaltungselemente...6 Farbe...7 Typografie...8 Bildwelt...9 Technische Umsetzung...10 Zeiterfassung...11 Arbeitsprogramme...12 Quellen...13

3 Arbeitsauftrag Aufgabe ist es, für das in der Heizungstechnik weltweit produzierende und vertreibende Unternehmen TA Heimeier (im Laufe des Bearbeitungsprozesses der Aufgabe umfirmt zu IMI Hydronic Engineering) den Geschäftsbericht für das abgelaufene Geschäftsjahr 2014 zu verfassen. Dabei ist die Erstellung des Geschäftsberichtes für den digitalen Bereich sowie die einer Printversion gewünscht. Ziel ist es, ein einheitliches Gesamtbild zwischen dem gedruckten Produkt und der Onlineversion zu erzeugen. Vorgaben Die Webseite ist für den Desktop für eine Auflösung von 1280px x 1024px mit Farbtiefe 8 Bit optimiert. Die Printversion unterliegt keinen näheren Vorgaben, orientiert sich optisch und inhaltlich aber an der Online-Variante. Abzugeben sind Online-Version des Geschäftsberichtes 2014 der TA Heimer Printversion des Geschäftsberichtes 2014 der TA Heimer Die Dokumentation des Arbeitsprozesses 2

4 Konzept/Idee Die Idee ist es, ein einheitliches, medienübergreifendes Design anzufertigen, durch welches sich ein roter Faden zieht, sodass die Zugehörigkeit der Produkte sofort ersichtlich wird. Zuerst wurde die Idee für die digitale Version erarbeitet. Hierfür haben wir andere Geschäftsberichte recherchiert, um ein Gefühl dafür zu gewinnen, welche Inhalte und Grafiken einen Geschäftsbericht auszeichnen. Nachdem gemeinschaftlich ein Rahmen der Inhalte geschaffen wurde, haben wir uns die entsprechenden Abschnitte, orientiert am Geschäftsbericht der Audi AG und den Inhalten der Webseite der TA Heimeier, zusammengesucht. Aufgrund der Textlastigkeit eines Geschäftsberichts war es unsere Vorstellung einen Online-Bericht zu schaffen, der anschaulich und interaktiv gestaltet ist, gleichzeitig aber alle relevanten Informationen schnell zugänglich und anschaulich enthält. Angeschlossen an erste Überlegungen haben wir Scribbles angefertigt, um unsere Ideen zu veranschaulichen und um zu schauen, inwiefern sich unsere Vorstellungen realisieren lassen und welche Elemente wo untergebracht werden können. Dabei haben wir für die Online-Version einstimmig beschlossen, einen One-Pager umzusetzen. So hat man alle relevanten Informationen auf einen Blick und wird nicht in ein Durcheinander von Unterseiten geschickt. Die Print-Version wurde anschließend an das Gerüst der Online- Version angepasst. Hier war unsere Vorstellung, ein repräsentatives, eindrucksvolles und dennoch übersichtlich gestaltetes Produkt zu kreieren. Dazu haben wir im ersten Schritt ebenfalls Scribbles angefertigt. Anschließend wurde mit der Anfertigung eines Layouts begonnen. 3

5 Aufbau der Webseite Die Seite ist als One-Page aufgebaut. Begrüßt wird der User von einer Startseite, die mit einem Pfeil nach unten auf die weiteren Inhalte verweist. So gibt es für den Besucher einen klaren Weg, dem er folgen muss. Dieser Weg führt ihn anschließend zum mit Teasern versehenen Inhalt, wo man wählen kann, welcher Bereich für einen interessant ist. Personen, die nur an Zahlen und Fakten des Unternehmens interessiert sind, können hier den Einleitungs- sowie Image-Teil überspringen und direkt zu dem für sie essentiellen Part gelangen. Wenn man den gesamten Geschäftsbericht betrachten mag, findet man einleitend das Vorwort, in welchem sich der Vorstand an die Leser/innen und Aktionäre/innen richtet. Daran schließt sich der Image-Teil, in welchem sich das Unternehmen anschaulich präsentiert. Neben eindrucksvollen Bildern finden sich hier Zitate, welche die Einstellungen und Visionen des Unternehmens unterstreichen. Dahinter folgt eine Beschreibung des Unternehmens und seiner Produkte, um einen Eindruck von der Dimension des Betriebes zu gewinnen. Anschließend folgt der informative Teil, beginnend mit dem Lagebericht. Hier werden die wichtigstens Zahlen und Fakten in den fünf Unterpunkten Geschäftsbedingungen, Ertragslage, Vermögenslage, Finanzlage und Mitarbeiter dargestellt. Dort befinden sich alle wichtigen Tabellen und Grafiken, welche die Entwicklung des Unternehmens aufzeigen. Um den Geschäftsbericht etwas aufzulockern, folgt nach diesem Teil der anschaulich gestaltete Innovations-Teil, in welchem das Unternehmen seine Visionen darstellt. Diesem Teil folgt abschließend der Jahresbericht, welcher den Geschäftsbericht mit dem Bericht des Aufsichtsrates, der Bilanz, der Gewinn- sowie Verlustrechnung und der Gewinnverwendung abrundet. Am Ende der Seite findet man zudem einen Footer, welcher zum einen footerrelevanten Informationen wie Kontakt und Sitemap enthält, zum anderen befindet sich hier ein Download-Bereich, über welchen man die Printversion des Geschäftsberichtes als PDF sowie die Dokumentation als PDF herunterladen kann. 4

6 Aufbau der Druckversion Die Druckversion unterscheidet sich marginal vom Aufbau der Online-Version. Der Geschäftsbericht ist eingeschlagen in einen Titel, auf welchem der Titel des Dokuments, Erscheinungsjahr und ein Seitenfüllendes Titelbild abgebildet sind. Daran schließt sich das Inhaltsverzeichnisdas Vorwort, welches sich über zwei Seiten erstreckt an die Adressaten richtet. Erst danach haben wir das Inhaltsverzeichnis gesetzt, da das Vorwort gut als Einleitung in die Materie fungiert. Begonnen wird auch hier mit dem Image-Teil, wo mit großflächigen, repräsentativen Bildern über eine Doppelseite gearbeitet wird. Als optische Trennung der Themenbereiche haben wir jeweils eine Zwischenseite eingeschoben, auf der in großen Lettern das nächste Thema angekündigt wird. Zur Orientierung des Lesers befindet sich zudem im Fußbereich der Kolumnentitel, der das aktuelle Thema der Seite beinhaltet, sowie die Seitenzahl. An den Image-Teil schließen sich nahtlos nähere Informationen über das Unternehmen an. Nach dieser Einleitung gelangt man dann zu den für einen Geschäftsbericht bedeutenden Zahlen und Fakten des Unternehmens. Hier wurden ebenfalls Tabellen und Grafiken zur Verdeutlichung der Zahlen eingesetzt, die sich optisch an das Design derer im Online-Bericht anpassen. Der Innovationsteil erstreckt sich über eine Doppelseite, im gleichen dunkelblauen Design wie der Innovationsteil der Webseite. Auch die gedruckte Form des Geschäftsberichtes schließt mit dem Jahresbericht ab und verleiht ihm so einen runden Abschluss. Die Rückseite des Einschlags zeichnet wieder das dunkelblaue, an eine Heizungsverkleidung erinnernde Muster. 5

7 Gestaltungselemente Allgemein haben wir die Gestaltungselemente im Flat-Design, also ohne Tiefenerzeugende Effekte, erstellt. Symbol Heizungsregulierung Als eines der Hauptelemente haben wir uns für das u. A. auch im Logo vorkommende Symbol entschieden, welches in abstrakter Form einen Heizungsregulierer zu zeigen scheint. Dieses Element zeigt sich beispielsweise im Bereich Das Unternehmen. Hier wird somit Gestaltungselement ein Wiedererkennungswert geschaffen. Logo Das Logo ist das Neue der IMI Hydronic Engineering. Wir haben uns für die Verwendung dieses Logos entschieden, da es das aktuellste ist und so ein Bezug zu der aktuellen, redesignten Webseite geschaffen wird. Grafiken Tabellen und Grafiken haben wir in der Unternehmensfarbe Orange gehalten. Sie sind in der Online-Version animiert diese Effekte veranschaulichen die an sich trockenen Daten. In der Printversion findet man Grafiken und Tabellen in der gleichen Farbanmutung wie online. So wird ein einheitliches Bild und eine Verbindung von Online- und Printversion geschaffen. Ausschnitt: Gestaltung einer Tabelle 6

8 Farbe Für den Grundtonus haben wir uns für eine Kombination der Farbtöne Orange und Dunkelblau sowie ergänzend dazu die Farben Weiß und Dunkelgrau entschieden. Die Farbe Orange in verschiedenen Abwandlungen ist die Hauptfarbe des Unternehmens deswegen haben wir sie als Highlightfarbe (beispielsweise als Hover-Effekt) und Farbe für Überschriften gesetzt. Um die Seite durch das grell wirkende Orange nicht zu mächtig erscheinen zu lassen, haben wir uns für ein Dunkelblau als Gegenpol entschieden. Die Schrift ist hingegen in einem sehr dunklen Grauton gehalten, damit die Lesbarkeit am Monitor bestmöglich gewährleistet ist. In manchen Fällen ist aus Gestaltungsgründen die Schriftfarbe Weiß auf dunklem Untergrund. In der Regel ist die Hintergrundfarbe allerdings Weiß, damit ein die Lesbarkeit unterstützender Kontrast entsteht. Der Blauverlauf findet sich als Hintergrundfarbe des Innovationsbereichs wieder. So wird eine besondere Akzentuierung dieses Bereichs geschaffen. Orange CMYK: RGB: HEX: #e47d11 Einsatzbereich: Überschriften, Highlights, Hintergrundfarbe Zweiter, dunkler Orangeton CMYK: RGB: HEX: #e47702 Einsatzbereich: Tabellen Dritter, heller Orangeton CMYK: RGB: HEX: #fea015 Einsatzbereich: Tabellen Dunkelgrau CMYK: RGB: HEX: # Einsatzbereich: Schriftfarbe, Hintergrundfarbe Footer Verlauf Blau (von hell nach dunkel) CMYK: RGB: HEX: #5f7e99 CMYK: RGB: HEX: # Einsatzbereich: Schriftfarbe, Hintergrundfarbe Footer 7

9 Typografie Ursprünglich war angedacht, die Hauptschrift der Unternehmenswebseite, die Calibri, zu verwenden. Nach eingehender Recherche zeigte sich jedoch, dass diese Schrift lizenzbehaftet ist und so im Netz nicht eingesetzt werden kann. So haben wir uns dazu entschieden, im Web die Arial zu verwenden, da diese Schrift ebenfalls auf der Webseite des Unternehmens eingesetzt wird. Die Arial ist eine klare, serifenlose und neutrale Schrift, die gut zu einem Heizungsunternehmen passt. Da Sie keine Serifen besitzt ist sie zudem ideal für die Verwendung online. Im Printprodukt haben wir dann die Calibri verwendet, um es mit dem Unternehmen in Verbindung zu bringen. Die Calibri ist zudem eine etwas lebendigere und weichere Schrift als die Arial. Im Fließtext beträgt die Schriftgröße 14px und der Zeilenabstand 1,5, damit eine optimale Lesbarkeit gewährleistet ist. Für Überschriften haben wir uns mit 56 Pixeln für eine deutlich größere Schriftgröße entschieden, sowie hier den Schriftschnitt bold gewählt. Um die Lesbarkeit weiter zu unterstützen, stellen wir Seiten mit viel Text in Spalten dar. Somit wirkt das Schriftbild ruhiger und luftiger, was für das Auge einfacher zu verarbeiten ist. In manchen Fällen wird eine Zwischenüberschrift in 14px, blod verwendet, um Texte zu gliedern und sie so übersichtlicher zu gestalten. Für die Printversion haben wir die Schrift auf 12px und den Zeilenabstand auf 17px gesetzt. So ist auch viel Text für das Auge gut zu verarbeiten. Schriftbeispiel Fließtext Web: Schriftbeispiel Fließtext Print: Arial Calibri abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRST ABCDEFGHIJKLMNOPQRSTUVWXYZ ! $%&/()=? ! $%&/()=? Überschrift im Webbereich: Überschrift 8

10 Bildwelt Die Bildwelt soll frisch, innovativ und technisch angemutet sein. Der Grundtonus der Bilder ist stets ein technischer, kühler und sachlicher. So erscheinen die Bilder professionell und verleihen dem Geschäftsbericht eine ausdrucksstarke Note. Durch den Einsatz von Bildern erreicht man einen persönlichen und emotionalen Auftritt. Die Abbildung des Vorstandsvorsitzenden (Bild von Google, siehe Quellen) sorgt dafür, dass sich der Leser persönlich angesprochen und abgeholt fühlt. Des weiteren zeigen die Bilder der Imagebroschüre die Einstellung des Unternehmens, insbesondere durch die unternehmenseigenen Zitate, welche die Bilder zieren. Das Bild mit den Windrädern zeigt beispielsweise, dass das Unternehmen auf Nachhaltigkeit und grüne Energie setzt, was heutzutage einen stark wachsenden Markt darstellt. Beispiele der Bildwelt 9

11 Technische Umsetzung Die technische Umsetzung der Webseite basiert auf den modernsten Standards von HTML 5 und CSS 3. Optimiert wurde die Webseite für alle Browser der aktuellsten Generation, speziell jedoch für Firefox. Hier bewegt sich die Webseite auch am flüssigsten. Alle interaktiven Funktionen basieren auf CSS 3 und JavaScript. Für JavaScript wurden die Frameworks JQUERY und TweenMax integriert. Auf Basis dessen wurden mehrere PlugIns integriert, beispielsweise für die Sliderfunktion oder für das vertikale Parallax. Lauffähigkeit Die Seite ist für die aktuellste Version des Firefox (Version ) auf dem Betriebssystem Windows optimiert worden. 10

12 Zeiterfassung Bearbeitungszeit insgesamt: 48 Unterrichtsstunden (16 Doppelstunden / 16 Einzelstunden) Ideenfindung/Recherche 4 Stunden Umsetzung 23 Stunden Recherche Geschäftsbericht (Aufbau, Inhalte) Umsetzung der Webseite mit PHP Scribbles des Aufbaus Umsetzung der Printversion in InDesign Ideensammlung Konzept Ausarbeitung der Scribbles in Wireframes Definieren des Aufbaus des Geschäftsberichtes Textrecherche 6 Stunden Dokumentation Aufzeichnung der Arbeitsschritte Begründung Layout der Dokumentation 5 Stunden Layout 10 Stunden Anfertigung des Seitenlayouts in Photoshop Bildrecherche 11

13 Arbeitsprogramme Layout Photoshop Illustrator InDesign Konzept/Dokumentation InDesign Word Umsetzung PHPStorm JavaScript / JQuery 12

14 Quellen Texte Bilder Weitere Bilder: google.de 13

15