KonradJohannes_AX

Projektarbeit | Digitale Applikationen 

Styleguide 


Styleguide 

Johannes Konrad • 700372 • BGDDAVA10/13 


1

2 Johannes Konrad • 700372 • BGDDAVA10/13


Styleguide 

Inhalt 

Das Konzept. ............................... 04 

Corporate Identity. ........................ 05 

Corporate Design .......................... 06 

Inhaltsstruktur ............................ 08 

Screendesign. .............................. 10 

Interaktionsdesign ........................ 12 

Iconographie. .............................. 13 

User Journeys. ............................. 16 

Anmeldeprozess für neue Benutzer 16 

Content Öffnen 18 

Contenterstellung durch das Contentteam 20 

Das Forum / Board 22 

Die Suchfunktion 26 

Das Mailsystem 28 

Einbindung der Infografik 30 


3

Das Konzept 

Das Konzept 

Geplant wird eine Plattform die News und 

Know-How im Bereich 3D-Design sammelt, sortiert 

und filtert. Es sollen die 4 großen Bereiche 

3D Motiondesign, 3D Webdesign, 3D Gamedesign 

und 3D Visualisierung im allgemeinen 

abgedeckt werden. 

Besonderer Wert wird auf ein hohes User-Engagement 

gelegt. 

Beispiele für Inhalte: 

• News: Solid Angle wurde von Autodesk aufgekauft 

- wird das Cinema4D-Plugin vom 

Arnold Renderer weiterentwickelt? 

• HowTo: Wie bekomme ich 3D-Modelle aus 

meiner 3D-Suite ins Web? 

• Statistiken: Benchmarks von CPUs/GPUs in 

allen relevanten Renderern 

• Statistiken: Renderfarmen im Test. Preis/ 

Leistungsvergleich. Vergleich der effektiven 

Wartezeit ab Auftragserteilung etc. 

Der Content 

Die drei tragenden Säulen des Contentpools 

sind das Content-Team, externe Experten und 

der Usercontent. 

Um eine hohe Qualität beim Usercontent zu 

sichern, wird dieser durch die anderen User 

bewertet, bevor er final vom Contentteam kontrolliert 

wird. Der Ablauf ist dabei wie folgt: 

• Ein User postet etwas im Forum 

• Andere User bewerten die Qualität des 

Posts und antworten darauf. 

• Erst wenn der Post sehr gut bewertet wurde, 

wird er dem Content-Team zur Freigabe 

angezeigt. 

• Das Contentteam entscheidet dann, ob der 

Content relevant und gut genug ist um ihn 

zu promoten. 

So wird sichergestellt, dass jeder User Content 

erstellen kann, aber gleichzeitig eine hohe 

Qualität außerhalb des Forums garantiert. 

Die 3 Säulen des Content Pool 

Content-Team 

• Erstellt besonders 

hochwertigen Content 

• Begutachtet Usercontent 

und wählt „Staff-Picks“ 

• Unterstützt Externe Experten 

bei Gastbeiträgen 

Externe Experten 

• Können hochwertigen 

Content z.B. mit Insiderwissen 

veröffentlichen 

• Unbezahlt, aber mit starker 

Reichweite in der Branche 

(Eigenpromo) 

Usercontent 

• Content wird aus dem Forum 

gefiltert. 

• Erstellt ein User z.B. ein 

Tutorial, wird der Forenpost 

von anderen Usern bewertet. 

Fällt die Bewertung gut aus 

prüft das Contentteam die 

Qualität und erstellt ggf. 

einen „Staffpick“ 



Styleguide 

Corporate Identity 

Die Corporate Identity der Website richtet sich strikt nach den 

Bedürfnissen der Zielgruppe 

Die Zielgruppe 

• Professionelle Anwender mit Erfahrung im 

3D-Bereich. Überwiegend männlich und 

zwischen 18 und 40 Jahren alt. 

• Anwender benutzen Displays mit mindestens 

FULLHD Auflösung, zumeist werden 

mindestens 2 Displays betrieben. Sie arbeiten 

überwiegend mit Windows-PCs, eine 

Minderheit mit Macs. 

• Die Zielgruppe ist es gewohnt, sich die 

Oberfläche ihrer Arbeitsmittel anpassen zu 

können. Besonders auf kurze Navigationswege 

wird hohen Wert gelegt. 

• Die Zielgruppe stammt aus aller Welt und 

versteht Englisch. Der Ostasiatische Raum 

fokusiert sich allerdings eher auf eigene 

Quellen und wird unterrepräsentiert sein. 

• Warum sollte die Zielgruppe interessiert 

sein? Eine Seite mit allen wichtigen Infos 

und Entwicklungen in der Branche gibt es 

bisher nicht. Das Portal könnte als zentrale 

Anlaufstelle für News, Infos und Tutorials 

dienen. 

Vertrauensverlusst durch die Nutzer. 

Ein hohes Engagement der Nutzer ist der Wichtigste 

Erfolgsfaktor, denn nur so kann die Website 

auch gegenüber der Industrie als Vertreter 

der Nutzer auftreten. 

Oberste Prämisse ist also eine objektive, professionelle 

und freundliche Kommunikation in 

allen Belangen. 

Corporate Language 

Da die Zielgruppe aus den verschiedensten 

Sprachräumen kommt, ist die einzige gemeinsame 

Sprache Englisch. Die Website setzt 

daher auf ein gut verständliches Englisch, mit 

kurzen Sätzen. 

Fachjargon aus dem 3D-Bereich wird verwendet, 

ansonsten wird ein einfacheres Vokabular 

benutzt, das auch gut von den üblichen Übersetzungstools 

erstanden wird. 

Die Zielgruppe ist sich ihrer Internationalität 

bewusst und stört sich nicht an einfacher, 

schnell erfassbarer Sprache 

Corporate Behavior/Communication 

Die Website ist auf eine positive und glaubwürdige 

Außenwirkung angewiesen. Nur durch ein 

hohes Maß an Integrität und einen professionellen 

Umgang mit Nutzern und Partnern in 

der Industrie kann sie erfolgreich sein. 

Das bedeutet, dass jeglicher werblicher Content 

sehr klar gekennzeichnet sein muss. Kooperationen 

mit der Industrie müssen deutlich 

kommuniziert werden. Hat es den Anschein, 

dass voreingenommen über einen Hersteller/ 

Software berichtet wird, führt das schnell zum 


5

Corporate Design 

Die Corporate Identity der Website richtet sich strikt nach den 

Bedürfnissen der Zielgruppe 

Motion 

Web 

Game 

Visual 

BackG 

70 | 140 | 200 

#74a9d6 

80 | 165 | 185 

#3ccd7d 

60 | 205 | 125 

#3ccd7d 

110 | 215 | 80 

#6ed750 

70 | 70 | 70 

#464646 

Farben 

Es kommt eine Farbharmonie von Blau nach 

Grün zum Einsatz. Ergänzt wird sie um einen 

neutralen, dunklen Grauwert, der in verschiedenen 

Abstufungen eingesetzt wird. 

Die Farbe Blau repräsentiert Vernunft, Vertrauenswürdigkeit 

2 NEWS und wird häufig im Technik-Bereich 

3 TUTORIALS eingesetzt. Grün steht für Ruhe und 

Neues. 1 INTERVIEW 

Die Farben sollen so den Inhalt und das Ziel 

der Website repräsentieren: 

Eine Glaubwürdige Quelle für Neuigkeiten 

und das Wachstum der eigenen Fähigkeiten in 

einem harmonischen Umfeld. 

OpenSans Bold / Regular | 12 Pt 

40 % Kategorienfarbe | Kategoriefarbe 

MOTION 

OpenSans Bold| 19 Pt 

Weiß | Kategoriefarbe 

NEWS | TUTORIALS | INTERVIEWS | BOARD 

Fonts 

Navigationselemente 

Es NEWS kommt | ausschließlich TUTORIALS die | Schriftfamilie INTERVIEWS | BOARD 

„Open Sans“ zum Einsatz. Es handelt sich dabei 

um einen freien Webfont, der z.B. über Google 

Fonts eingebunden werden kann. 

Es werden die Schnitte Regular und Bold verwendet. 

Zur deutlichen Unterscheidung kann 

auch Picture die Extrabold Subline. statt A Brief der Bold Description 

eingesetzt 

werden. 

This is a Headline 

Thats the Subheadline thats the 

Subheadline thats the Subheadline 

6 Johannes Konrad • 700372 • BGDDAVA10/13 

OpenSans Regular / Extrabold | 14 Pt 


1) Shortcuts OpenSans zu Neuigkeiten Regular / OpenSans der jeweiligen Bold | 16 Pt 

Kategorie. Die Anzahl 45 neuer % Transparenz Posts ist dabei Schwarz 

Fett. 

2) Name der Kategorie 

3) Unterteilung der Kategorie 

4) Breadcrumbnavigationspfad 

Content-Bereich 

5) Bildunterzeile 

6) Überschrift 

7) Unterzeile 

8) Fließtext 

9) Zwischenüberschrift 


Weiß | BackG 

OpenSans Bold | 36 Pt 

Kategoriefarbe 

OpenSans Regular| 18 Pt 

Schwarz

Motion 

Web 

Game 


Visual 

BackG 

Styleguide 

70 | 140 | 200 

#74a9d6 

80 | 165 | 185 

#3ccd7d 

60 | 205 | 125 

#3ccd7d 

110 | 215 | 80 

#6ed750 

70 | 70 | 70 

#464646 

1.) 

2 NEWS 

3 TUTORIALS 

1 INTERVIEW 

OpenSans Bold / Regular | 12 Pt 


2.) 

MOTION 


Weiß | Kategoriefarbe 

3.) 

4.) 



Visual 

> 

Board 

> 

RenderEngines > 

Arnold Plugin 

OpenSans Regular / Extrabold | 14 Pt 


OpenSans Regular / OpenSans Bold | 16 Pt 

45 % Transparenz Schwarz 

5.) 

Picture Subline. A Brief Description 


Weiß | BackG 

6.) 

7.) 

8.) 

9.) 

This is a Headline 

Thats the Subheadline thats the 

Subheadline thats the Subheadline 

This is the size of flowing text, This is the size 

of flowing text, This is the size of flowing text, 


of flowing text, This is the size of flowing text, 


of flowing text. 

This is a crossheadings-size 

OpenSans Bold | 36 Pt 



Schwarz 


Schwarz 




7

Inhaltsstuktur 

Wird die Website augerufen, öffnet sich die 

Startseite, die Themen aus allen 4 Kategorien 

enthält. 

Im oberen Bereich befindet sich die Header-Navigation. 

Hier kann der Nutzer direkt in 

seine präferierte Kategorie wechseln. 

Klickt er z.B. auf „Motion“, werden nur noch 

Themen aus dieser Kategorie im Startseiten 

Layout gezeigt. 

Wählt der Nutzer also die Kategorie „Motion“ 

und den Unterpunkt „News“, werden ihm alle 

Nachrichten angezeigt, die diese beiden Tags 

enthalten. 

Ist die selbe Nachricht auch mit „Web“ getaggt, 

wird sie in identischer Form für Nutzer angezeigt 

die auf „Web“ geklickt haben - es gibt keine 

Kopien der selben Nachricht o.ä. sondern 

einen gemeinsamen Contentpool. 

Das Startseitenlayout besteht aus einem 

großen Slider, in dem Highlight-Themen präsentiert 

werden. Diese Themen rotieren alle 

4 Sekunden. Darunter befinden sich weitere 

Staff-Picks, die aus einem Thumbnail und 

einem kurzen Text bestehen. Der Nutzer kann 

diese Themen dann direkt von der Startseite 

aus aufrufen. 

Der Kern der Website ist ein Tag-System, das 

den Content in die verschiedenen Kategorien 

einteilt. Die Übergänge zwischen den Kategorien 

sind teilweise fließend, Content der für 

Motion-Design verfasst wurde kann auch in 

der 3D-Visualisierung relevant sein. Durch das 

tagsystem ist es einfach den Content in mehrere 

Kategorien zu verteilen und auch nachträglich 

Anpassungen in der Zuteilung vorzunehmen. 



Styleguide 

HOME 

Header-Navigation 

Contentbereich 

Slidermenü & 

Teaser mit Staff-Picks 

Pikotogramme öffnen Dropdownmenüs 

MOTION GAME 

WEB 

VISUAL Account 

Messages 

Search 

Je Kategorie 

News 

Archiv 

Tutorials 

Interviews 

Archiv 

Forum 

• Register 

• Login 

• Profilfoto 

• Übliche 

Einstellungen 

• Private 

Nachrichten 

an andere 

Nutzer 

• Filterbar nach 

Kategorien 

Content Pool 

Sämtlicher Content erhält Tags, die seine Relevanz für die jeweiligen 

Bereiche festlegen. Der selbe Content kann so in 

verschiedenen Kategorien/Bereichen aufgerufen werden. 

News 

Tutorials 

Kategorie 

Interview 

Forum 

Motion 

Game 

Bereich 

Web 

Visual 

Content 1 

Content 2 

Content 3 

News: 

Content 2 

Interview: 

Content 2 

News: 

Content 1 

News: 

Content 1 

Tutorials: 

Content 3 

News: 

Content 2 

Interview: 

Content 2 


9

Screendesign 

Die Website ist nicht Mobil-optimiert, das soll 

ihren Charakter als Arbeitstool betonen. Die 

Nutzer sollen hier professionell miteinander 

kommunizieren - das setzt auch eine bestimmte 

geistige Haltung voraus. 

Sitzt der User am PC und arbeitet ist er gesitig 

im gewünscheten Modus. Sitzt er genervt in 

der S-Bahn ist das eine schlechte Voraussetzung 

für freundlichen Umgang untereinander. 

Die Website ist ausschließlich mit relativen Abmessungen 

angelegt. Da die Zielgruppe auch 

sehr große 4K-Displays nutzt, ist eine Angabe 

von Pixelgrößen nicht zielführend. 

Da die gesamt Seitenhöhe flexibel ist, sind die 

Maße in der Höhe immer prozentuale Angaben 

der Breite. 

15% 8% 

8% 8% 8% 38% 

15% 

20% 

4% 

2,4% 

3,1% 

1,6% 2,2% 


14,5% 


Styleguide 

7,5% 

7,5% 

2% 

flexibel 

(gilt für 

Videos, 

HTML-5, 

und Bilder) 

2,5% 

2,5% 

flexibel 

5,5% 

flexibel 

22% 


11

Interaktionsdesign 

Die Content Navigation 

Im Oberen-Linken Teil der Website befindet 

sich die Hauptnavigation. Sie ist der primäre 

Einstiegspunkt für Nutzer, die sich über die 

einzelnen Kategorien informieren wollen und 

nicht auf der Suche nach bestimmten Inhalten 

sind. Das Menü besteht zunächst aus 4 Farbfeldern, 

die die Hauptnavigation zwischen den 

Kategorien bildet. Die Farben bilden hierbei 

den Colorcode, der von den darunterliegenden 

Leisten übernommen wird. Klickt der Nutzer 

auf „Visual“, färbt sich der Streifen darunter im 

selben Grün ein und stellt so die Zusammengehörigkeit 

dar. 

Die aktive Kategorie wirft auch einen leichten 

Schatten auf die anderen Farbfelder, was verdeutlicht, 

dass der Nutzer sich gerade in dieser 

Kategorie bewegt. 

Der obere eingefärbten Streifen enthält die 

Unternavigation der Kategorien. Darunter 

befindet sich eine Breadcrumb-Navigation, die 

den Pfad der Aktuellen Seite darstellt. Dies ermöglicht 

dem Nutzer auch bei querverlinkten 

Seiten schnell in die darüberliegenden Hirachien 

zu wechseln. Ließt er z.B. einen Forenpost, 

kann er so direkt zur Unterkategorie des 

Forums wechseln, in der der Post gelistet ist. 

Eingeloggten Nutzern wird in den Kategorie-Reitern 

angezeigt, wieviel neuer Content 

seit dem letzten Besuch erschienen ist. Hierzu 

werden die Unterkategorien mit der jeweiligen 

Anzahl neuen Contents abgebildet. Diese Darstellung 

dient auch als Quicklink zur jeweiligen 

Unterkategorie. Durch die Platzierung in den 

Farbigen Flächen wird dem Nutzer die Zusammengehörigkeit 

signalisiert. Da die Schaltflächen 

in der Hauptnavigation alle Typographisch 

gelöst sind, werden auch diese Texte als 

Schaltflächen verstanden. 

Insgesamt ist die Darstellung ein Zitat auf die 

klassischen Karteikartenreiter. 

Grafische Schaltflächen 

Sowohl typografische als auch grafische Schaltflächen 

haben keinen Mouse-Over Effekt. Die 

Interaktivität wird lediglich durch die übliche 

„Zeigefinger-Hand“ dargestellt, die den Mauszeiger-Pfeil 

ersetzt wenn man über eine Interaktive 

Fläche fährt. 



Styleguide 

Iconographie 

Die gewählten Symbole haben alle eine allgemein 

verständliche Semantik und sind in 

dieser Form etabliert. Der Brief steht für das 

Mail-system, die Lupe für die Suche, die andeutung 

einer Person für den Persönlichen 

Account-Bereich. 

Doppelte Verwendung findet die Lupe, die, um 

ein Pluszeichen in der Linse ergänzt, zum Symbol 

für eine vergrößerte Ansicht wird. 

Mit Außnahme der Kategoriezuweisung sind 

alle Symbole einfarbig. Um den größtmöglichen 

Kontrast zu erzielen sind sie jeweils 

Schwarz oder weiß, abhängig vom Hintergrund. 

1.) 

2.) 

2 

Navigationselemente 

1) Persönlicher Account, Mailsystem und Suchfunktion. 

2) Im Rondell auf der Startseite werden die 

verschiedenen Teaser durch Kreise symbolisiert. 

Der Ausgefüllte Kreis steht hierbei 

für den aktuellen Teaser. So sieht der User 

auch, wieviele Teaser rotieren. 

3) Sortieroptionen im Content-Bereich. Die 

dunklere Option ist die Aktive. Die 3 Streifen/ 

9 Quadrate symbolisieren das Layout der 

Conetnt-Listen. 

4) Gabelschlüssel als Symbol für Anpassbarkeit 

bei der Erstellung von Content. Lupe mit 

Plus zur Vergrößerung. Playbutton in Youtube-Optik. 

5) Die üblichen Icon der Sozialen Medien. 

6) Authoren werden mit Sternen bewertet. Die 

Logik hinter leeren und ausgefüllten Sternen 

ist z.B. durch Amazon bekannt. 

7) Kategoriezuweisung: Ein Haken markiert 

den Beitrag als relevant für die Kategorie. 

Die Kategorien werden durch ihre Farbigkeit 

dargestellt. 

3.) 

4.) 

5.) 

6.) 

7.) 

Latest 

| 

Ranking 


13

Iconographie 

Shortcuts 

Das Konzept sieht vor, dass die Nutzer sich die 

Oberfläche der Website in einem geweissen 

Maß anpassen können. Ein besonderes Feature 

stellt dabei die Möglichkeit dar, die Breadcrumb-Naviationsleiste 

per Drag-and-Drop in 

einen Shortcut-Bereich zu ziehen. 

Um diese Interaktionsmöglichkeit zu verdeutlichen 

gibt es zum einen ein dezentes aber 

deutliches overlay, das darauf hinweist. Zum 

anderen ist vor der Breadcrumb-Navigation ein 

Icon platziert, das die Zielgruppe in sehr ähnlicher 

Form aus verschiednene 3D-Programmen 

kennt. Dort können alle Elemente der GUI mit 

diesem Symbol an andere Stellen angedockt 

werden. Man kann so z.B. auch jedes Dropdown-Menü 

aus der Kopfzeile von Cinema4D 

als Fenster auf dem Desktop platzieren. 

Für die Zielgruppe ist dieses Symbol somit die 

optimale Darstellung um sofort verstanden zu 

werden. 

Vorbild: Cinema4D 

Über dem Drag&Drop-Symbol wird der Mauszeiger zur Greifhand 

Motion /... / Whats new 

Beim Klicken und Ziehen schließt sich die Hand 

Motion /... / Whats new 

Wird der Klick über dem Shortcut-Bereich gelöst, wird der neue Shortcut angelegt. Der Nutzer kann die 

Shortcuts dann nachträglich sortieren - auch diese Funktion ist für die Zielgruppe selbsterklärend. 

Mit einem Klick auf das „X“ wird der Shortcut entfernt. 



Styleguide 

Iconographie 

Buttons 

Im Layout der Website kommen neben einfachen 

Textlinks auch klassische Buttons zum 

Einsatz. 

Diese gibt es in 2 Versionen: 

• Kleiner mit Schmalerem Schriftschnitt für 

Untergeordnete Funktionen 

• Größer mit fetter Schrift für Übergeordnete 

Funktionen 

Image Video Post Now 

Ein Beispiel für die Hirarchie der Buttons 

kann die Content Creation sein. Während des 

Prozesses können mehrere Bilder eingefügt 

werden oder auch nicht. Der Button ist nicht 

esseziell für die die Erstellung des Content. Der 

„Post Now“-Button wiederum ist notwendig 

um den Preozess abzuschließen, er ist somit 

übergeordnet. 

Untermenüs und Eingabefelder 

Generell wird der Anschein von dreidimensionalität 

vermieden. Bei Eingabefeldern und 

Dropdown-Menüs ist eine Dreidimensionale 

Wirkung aber sehr nützlich, weil jeder Anwender 

diese Metaphern versteht. 

Ein grauer Kasten mit dunkler Umrandung an 

der Linken und Oberen Seite wirkt vertieft. Hat 

der selbe Kasten die dunkel Umrandung Unten 

und Rechts, wirkt er erhaben. 

Es lassen sich so z.B. Buttons mit 2 Zuständen 

darstellen, wobei der Nutzer immer weiß ob 

ein Button gedrückt wurde oder nicht. Diese 

Konventionen bestehen seit den 1980er Jahren 

und es ist sinnvoll auf solche Erfahrungswerte 

der Nutzer zurückzugreifen. 

Beispiel: Dropdownbemü im Prozess der Content-Creation. 

Links: Erhabender Button, nicht 

aktiviert. Rechts: gedrückter Button mit Ausgefahrenem 

Menü. 


15

User Journey 

Anmeldeprozess für neue Benutzer 

1. Der Benutzer klickt auf den Accountbereich. 

2. Hat er noch keinen Account, klickt er auf 

„Register now“. 

3. Anschließend wird der Nutzer auf eine neue 

Seite mit dem Formular zu Anmeldung weitergeleitet. 

Hier trägt er seine Daten ein und 

bestätigt mit einem Klick auf „Register“. 

4. Nach der Anmeldung befinden sich im 

Accountbereich verschiedene Optionen. 

Der User kann ein Profilfoto hinzufügen, 

sein Passwort ändern, und den Help-Center 

aufrufen. 

5. Der Creator Accountbereich hat außerdem 

noch die Optionen „Check User Content“, 

„Create Content“ und „Content Overview“. 

2. 

1. 



Styleguide 

3. 4. 5. 


17

User Journey 

Content Öffnen 

1. 5. 



Styleguide 

1. Der Benutzer kann die Listung des Contents 

über das Hauptmenü aufrufen. 

2. Hier Listen werden als Grid, mit 3 Inhalten 

pro Zeile oder als Rows mit einem Inhalt pro 

Reihe angezeigt. 

4. Der Content kann nach Einstelldatum und 

Nutzerwertung sortiert werden. 

5. Alternativ kann Content auch direkt über die 

Staff-Picks aufgerufen werden 

3. Die Ansicht zwischen Grid und Rows kann 

oben rechts umgeschaltet werden. 

4. 

3. 


19

Screendesign 

Contenterstellung durch das Contentteam 

1. Das Contentteam hat im Accountbereich 

den Punkt „Create new Content“ 

2. Es öffnet sich der Editor in dem das Standard 

Layout der Contentseite verwendet 

wird. 

3. Der Benutzer kann Texte, Bilder, HTML-5 

Content etc. einbinden. 

4. Anschließend kann er im platzierten Element 

auf das Gabelschlüsselicon klicken um 

den Content zu verlinken. Hierzu öffnet sich 

ein Overlay mit eingabefeldern für die Url´s 

2. 3. 

4. 

1. 



Styleguide 

5. Der Benutzer kann wie in einem Texteditor 

verschiedene Schriftformate zuweisen. 

6. Außerdem können verschiedene Farbschemata 

ausgewählt werden 

7. vor der Veröffentlichung wählt der Nutzer 

aus, für welche Kategorien der Content 

relevant ist. Es wird auch die Subkategorie 

zugewiesen und Such-Tags vergeben. 

8. Ein Klick auf „Post now“ veröffentlicht den 

Content 

5. 6. 4. 

7. 8. 


21

Screendesign 

Das Forum / Board 

1. Jede Kategorie hat ihr eigenes Diskussionsforum. 

2. Darin finden sich die Untergeordneten Bereiche, 

jeweils mit den 5 Highlight-Threads. 

Ein Klick auf die untergeordneten Bereiche 

(z.B. Render Engines) führt zum jeweiligen 

Unterforum. 

5. In den Unterforen werden wieder die 5 

Highlight-Themen präsentiert. 

6. Darunter folgen alle anderen Themen. 

3. Die Highlight-Threads können nach Aktualität, 

Antworten und Ranking sortiert werden. 

4. Vor jedem Thread symbolisieren die Kategoriefarben 

die Relevanz. 

2. 4. 1. 

3. 



Styleguide 

5. 6. 


23

Screendesign 

Das Forum / Board 

1. In der Thread-Ansicht hat jeder Nutzer die 

Möglichkeit, andere Nutzer zu bewerten. 

Dies soll einen professionellen Umgang untereinander 

sicherstellen. 

2. Es können außerdem die einzelnen Beiträge 

eines Nutzers bewertet werden. So kann ein 

Nutzer einem Anderen insgesamt eine gute 

Bewertung geben, aber trotzdem einzelne 

Posts kritisieren. 

3. Neben der Relevanzverteilung durch den 

Originalposter kann auch jeder Nutzer eine 

Empfehlung abgeben. 

4. Nutzer können eine Antwort posten, indem 

sie auf „Reply“ klicken. 

5., 6. Das Contentteam kann Threads außerdem 

löschen oder promoten. 

7. Bei der Erstellung eines neuen Threads 

muss zunächste der Titel vergeben werden. 

8. Text wird in ein großes Textfeld eingegeben. 

9. Es können Bilder und Links eingefügt werden. 

10. Die Relevanz für die einzelnen Kategorien 

wird per Häkchen festgelegt. 

11. Mit einem Klick auf „Post now“ wird der- 

Thread veröffentlicht. 

1. 4. 2. 5. 3. 6. 



Styleguide 

7. 8. 9. 

10. 11. 


25

Screendesign 

Die Suchfunktion 

1. Ein Klick auf die das Lupen-Icon öffnet ein 

Overlay, in dem die Suchworte eingegeben 

werden können. 

2. Der Nutzer kann die Suche auf die einzelnen 

Kategorien und Unterkategorien einschränken. 

3. Er kann außerdem festlegen, ob die Suchwörter 

nur vorkommen müssen, oder in der 

exakten Reihenfolge seiner Eingabe stehen 

müssen. 

4. Es handelt sich um eine Live-Suche, das bedeutet, 

dass die Suchergebnisse noch während 

der Eingabe angezeigt und aktualisiert 

werden. Die Suchergebnisse werde als Liste 

dargestellt. Ein Klick auf einen Eintrag führt 

dann direkt zur entsprechenden Contentseite. 

1. 



Styleguide 

2. 4. 3. 


27

Screendesign 

Das Mailsystem 

1. Der Benutzer wird über die Einblendung der 

Anzahl neuer Mails auf dem Mailicon aufmerksam 

gemacht. 

2. Ein Klick auf den Icon öffnet ein Overlay, in 

dem die neuen Mails mit Absender, Betreff 

und Datum angezeigt werden. Der Benutzer 

kann auf eine Mail Klicken um zum Mailclient 

zu wechseln 

3. Der Mailclient listet die Empfangenen & Gesendeten 

Mails sowie Entwürfe auf. Ein Klick 

auf die jeweilige Schaltfläche öffnet dabei 

die Listung. 

5. Zum Schreiben einer neuen Mail klickt der 

Benutzer auf „New Mail“. Rechts erscheint 

das Eingabefeld für die Nachricht. 

6. Um einen Empfänger hinzuzufügen, Trägt 

der Benutzer dessen Namen im Textfeld ein 

und Klickt auf „Add“ 

7. In Kommentaren und im Forum befindet 

sich außerdem ein Mailsymbol direkt am 

Namen des Benutzers. Ein Klick darauf führt 

zum Mailformular, wobei der Benutzer dann 

schon direkt als Adressat aufgeführt wird. 

4. Rechts wird die Mail angezeigt, darunter 

kann der Benutzer seine Antwort eintragen. 

Ein Klick auf „Send“ verschickt die Antwort. 

7. 2. 

1. 



Styleguide 

3. 5. 4. 6. 


29



Styleguide 

Screendesign 

Einbindung der Infografik 

Die Infografik wird als HTML-5 Content über 

einen I-Frame (als Div) eingebunden. So kann 

die Infografik in einem externen HTML-5-Editor 

erstellt werden und unterliegt damit keinen 

Gestalterischen Einschränkungen. 

Sie wurde im Stil an das Flatdesign angepasst 

und hat keine Verläufe mehr. Sie ist animiert 

und interaktiv - Sie nutzt dabei Neugier und 

Spieltrieb der Benutzer um ihre Informationen 

zu vermitteln. 

1. Der Nutzer kann die einzelnen Elemente Einund 

Ausschalten. So erhält er eine Infografik, 

die nur Anzeigt, was ihn auch interessiert. 

Das Diagramm wird dabei Dynamisch mit 

einer nahtlosen Animation angepasst. 

1. 


31


Styleguide

KonradJohannes_AX

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?