Usability, Web, Webwissenschaften

Webwissenschaften.at

Masterprojekt webwissenschaften.at

Im Zuge unseres Masterprojekts erstellten mein Team und ich die Website für unseren Studiengang Webwissenschaften. Ziel war es, eine innovate Web Plattform als Repräsentant für das interdisziplinäre und interfakultäre Masterstudium Webwissenschaften der Johannes Kepler Universität und er Kunstuniversität Linz, zu schaffen. Diese sollte die Webwissenschaften würdig nach außen repräsentiert und die interne Kommunikation stärken.

Planung und Ablauf

Meilensteinliste für das Projekt webwissenschaften.at

Wie im Meilensteinplan erkennbar ist, wurden Programmierung, Design und Content gleichzeitig gestartet. Während unsere Entwickler sich um das Aufsetzen eines Backends für unsere Website kümmerten, machte sich unser Content Team erste Gedanken zu den Inhalten und auch mit ersten Design-Ansätzen wurde gestartet. Die Themen griffen stark ineinander, weswegen permanente Abstimmungen notwendig waren. Betrachtet man das Projekt aus Sicht der Ebenen des Designprozesses hat das gesamte Team als erstes an der Strategie gearbeitet um den Zweck der Plattform abzustecken. Das Content-Team bereitete die Inhalte für die Website (Scope-Ebene) vor und plante die Menüführung und die Strukturierung der Seiten und Features (Structure-ebene). Parallel zu diesen Arbeiten wurde mit dem Wireframing begonnen (Skeleton-ebene) und in späterer Folge das Screendesign selbst ausgearbeitet (Surface-Ebene). Mein Fokus im Projekt lag auf dem Thema Screendesign, weswegen ich nun näher auf diese Disziplin eingehen möchte.

Design

Grundsätzlich verfolgten wir bei diesem Projekt folgende Design-Ziele:

  1. Das Design soll konform zu den Grundsätzen aus der Usability-Lehre der JKU bzw. der Kunstuni sein.
  2. Die Schriftart ist konform zu den Standards im Web.
  3. Verwendete Symbole haben wenn möglich einen Bezug zum Studium.
  4. Die fünf Disziplinen werden anhand einer Grafik auf der Startseite illustriert.

Abgesehen von diesen Zielen wurde in den Designschritten auch darauf geachtet, die Seite skalierbar, performant, wartbar, flexibel und bedienbar zu gestalten.

Für die Erstellung des Designs wurden Adobe Illustrator, Photoshop und Fireworks vewendet. Die Wireframes wurden als Bleistiftzeichnungen realisiert.

Farbschema

Jeder der fünf Zweige des Masterstudiums wird durch eine Farbe dargestellt, um die Vielfalt dieses Studiums visuell zu unterstreichen. Diese Farben finden sich in Links wieder, aber sie wird auch als Hauptfarben im Hintergrund verwendet.

Farbauswahl für die Zweige des Masterstudiums

Elemente

Hintergrund

Als Hintergrund für die Seiten wurde je ein Verlauf aus der Hauptfarbe des Studienzweigs verwendet und ein halbtransparenter Layer mit wiederum unterschiedlich transparenten Dreicken über diesen Verlaufshintergrund gelegt. Diese Optik sollte die Vernetzung im Web abstrakt wiederspiegeln und auch das notwendige Ineinandergreifen der unterschiedlichen Disziplinen des Studiums thematisch aufgreifen.

Hintergrund für die Website des Social-Web-Zweigs

Wie bei den unten angehängten Screendesigns erkennbar ist, war ein ein weiterer Layer mit Transparenten Pixel-Elementen über diesem Hintergrund. Dieses Element gehörte zur Funktion „Pixel it!“, die Besucher dazu eingeladen hat, die Gestaltung der Seite mit zu beeinflussen indem sie die Wand mit Pixeln bemalen konnten. Die Hintergründe sind auf der Seite fixiert, während der Content darüber gescrolled werden kann.

Typografie

Als Font für den Fließtext fiel die Entscheidung auf die Schriftfamilie Open Sans, da diese eine sehr gut lesbare, serifenlose, schöne und klare Schrift ist. Auch für das Logo wurde die Open Sans, aber in Condensend und Bold eingesetzt. Der Zeichenabstand zwischen den Buchstaben wurde dafür erweitert.

Auswahl der Typografie für Logo und Fließtext

Headerbereich

Der Header dient unter dem Logo und der Navigation als zentrales Element einer Seite. Wichtige Überschriften, kurze Botschaften oder Call-to-Actions können hier Platz haben. Am Beispiel der Unterseite für Web Business & Economy sieht man, dass hier die Bezeichnung des Studiengangs, und der oben beschriebene Hintergrund dargestelt werden. Weiters liegt hinter der H1, der Seitenüberschrift, das Element, dass wir als Metapher für dieses Studium definiert haben: ein Kreis, der die unteschiedlichen Perspektiven, die die Disziplinen auf das Web haben, andeuten soll.

Die Zweige des Studiums Webwissenschaften aus verschiedenen Perspektiven.
Die Zweige des Studiums Webwissenschaften aus verschiedenen Perspektiven.
Headerbereich Studienzweig Web Business & Economy

Screendesigns

Hier die Screendesigns des Projektes:

Startseite - Social Web aktiv
Startseite Webwissenschaften.at – Die Zweige werden durch einen Slider nacheinander eingeblendet.
Zweigseite "Web Business & Economy"
Ein Ausschnitt aus der Zweigseite „Web Business & Economy“.
Einzelseite Newsbeitrag
Einzelseite Newsbeitrag – Eine Beispielseite für einen Beitrag auf letzter Navigationsebene mit Querverlinkungen zu anderen Beiträgen, welche für den Betrachter interessant sein könnten.
Projektseite
Übersicht von Projekten der Studierenden mit farblicher Markierung je nach Studienzweig.

Fazit

Das Projekt war für mich sehr spannend und lehrreich. Aufgrund der Interdisziplinarität der siebenköpfigen Gruppe hatten wir in der Projektarbeit einerseits den Vorteil, dass viel Wissen aus unterschiedlichen Disiplinen vorhanden war, welches wir nutzen konnten. Andererseits aber standen wir auch vor der Herausforderung, die unterschiedlichen Schwerpunkte, Vorstellungen und Wünsche der Teammitglieder an das Projekt und den Ablauf der Umsetzung auf einen gemeinsamen Nenner zu bringen.

49 Comments

  1. codeine sagt:
    Mai 4, 2023 um 6:46 pm Uhr

    … [Trackback]

    […] Find More on that Topic: beatemoser.at/webwissenschaften-at/ […]

  2. sig p365 sagt:
    Mai 8, 2023 um 1:52 am Uhr

    … [Trackback]

    […] Find More here to that Topic: beatemoser.at/webwissenschaften-at/ […]

  3. เซ็กซี่บาคาร่า sagt:
    Juni 12, 2023 um 11:19 pm Uhr

    … [Trackback]

    […] There you will find 74040 additional Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  4. bonanza 178 sagt:
    Juni 21, 2023 um 1:35 pm Uhr

    … [Trackback]

    […] Read More on on that Topic: beatemoser.at/webwissenschaften-at/ […]

  5. แอร์โซลาร์เซลล์ sagt:
    Juli 9, 2023 um 10:22 pm Uhr

    … [Trackback]

    […] Find More on to that Topic: beatemoser.at/webwissenschaften-at/ […]

  6. Safest Area To Stay In Costa Rica sagt:
    Juli 12, 2023 um 4:09 am Uhr

    … [Trackback]

    […] Find More Information here to that Topic: beatemoser.at/webwissenschaften-at/ […]

  7. นำเข้าสินค้าจากจีน sagt:
    Juli 21, 2023 um 12:13 am Uhr

    … [Trackback]

    […] Info to that Topic: beatemoser.at/webwissenschaften-at/ […]

  8. Ballarat Mushroom Farm sagt:
    Juli 21, 2023 um 12:53 am Uhr

    … [Trackback]

    […] Here you can find 15985 additional Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  9. woolworths dried mushrooms sagt:
    Juli 21, 2023 um 1:41 am Uhr

    … [Trackback]

    […] There you can find 84778 additional Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  10. เช่ารถเชียงใหม่ sagt:
    Juli 27, 2023 um 10:38 pm Uhr

    … [Trackback]

    […] Read More here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  11. ติดเน็ตบ้าน sagt:
    August 3, 2023 um 12:08 am Uhr

    … [Trackback]

    […] Read More Information here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  12. ป้ายโฆษณา sagt:
    August 4, 2023 um 11:34 pm Uhr

    … [Trackback]

    […] Here you can find 13562 more Info to that Topic: beatemoser.at/webwissenschaften-at/ […]

  13. ทำตาหมอไก่ sagt:
    August 8, 2023 um 12:25 am Uhr

    … [Trackback]

    […] Find More here to that Topic: beatemoser.at/webwissenschaften-at/ […]

  14. togel hongkong sagt:
    August 12, 2023 um 9:11 am Uhr

    … [Trackback]

    […] There you can find 98549 more Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  15. Rizzini shotguns sagt:
    August 18, 2023 um 12:41 pm Uhr

    … [Trackback]

    […] Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  16. เว็บพนันออนไลน์ sagt:
    August 21, 2023 um 10:49 pm Uhr

    … [Trackback]

    […] Find More on that Topic: beatemoser.at/webwissenschaften-at/ […]

  17. Acheter ozempic sans ordonnance Québec sagt:
    August 25, 2023 um 9:16 am Uhr

    … [Trackback]

    […] Find More Information here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  18. https://peacenewspaper.net/ sagt:
    September 1, 2023 um 12:33 pm Uhr

    … [Trackback]

    […] Info on that Topic: beatemoser.at/webwissenschaften-at/ […]

  19. togel resmi sagt:
    September 10, 2023 um 4:49 pm Uhr

    … [Trackback]

    […] There you can find 21120 more Info on that Topic: beatemoser.at/webwissenschaften-at/ […]

  20. fryd bar sagt:
    September 15, 2023 um 12:46 pm Uhr

    … [Trackback]

    […] Read More on that Topic: beatemoser.at/webwissenschaften-at/ […]

  21. เช่าเรือสปีดโบ๊ท,เช่าสปีดโบ๊ท เจ้าพระยา,เรือเช่าเหมาลํา เจ้าพระยา sagt:
    September 18, 2023 um 1:01 am Uhr

    … [Trackback]

    […] There you can find 54891 more Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  22. สล็อต ฝากถอน true wallet เว็บตรง 888pg sagt:
    September 18, 2023 um 4:11 am Uhr

    … [Trackback]

    […] Find More on that Topic: beatemoser.at/webwissenschaften-at/ […]

  23. enkele plooi gordijnen sagt:
    September 18, 2023 um 7:07 am Uhr

    … [Trackback]

    […] Find More on on that Topic: beatemoser.at/webwissenschaften-at/ […]

  24. สรุป 5 ข้อดีของ การเล่น LIVE CASINOS บนเว็บ 2lotvip sagt:
    September 24, 2023 um 10:25 pm Uhr

    … [Trackback]

    […] Find More on to that Topic: beatemoser.at/webwissenschaften-at/ […]

  25. bonanza178 sagt:
    September 25, 2023 um 7:57 am Uhr

    … [Trackback]

    […] Read More Information here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  26. เสาเข็มไมโครไพล์ sagt:
    September 25, 2023 um 11:33 pm Uhr

    … [Trackback]

    […] Find More to that Topic: beatemoser.at/webwissenschaften-at/ […]

  27. เกมส์ไพ่ เบอร์ 1 บาคาร่าเว็บตรง sagt:
    September 26, 2023 um 10:35 pm Uhr

    … [Trackback]

    […] Read More Information here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  28. super kaya88 sagt:
    Oktober 1, 2023 um 12:01 pm Uhr

    … [Trackback]

    […] Here you will find 81832 additional Info on that Topic: beatemoser.at/webwissenschaften-at/ […]

  29. Online medicatie kopen zonder recept bij het beste Benu apotheek alternatief in Amsterdam Rotterdam Utrecht Den Haag Eindhoven Groningen Tilburg Almere Breda Nijmegen Noord-Holland Zuid-Holland Noord-Brabant Limburg Zeeland Online medicatie kopen zonder recept bij beste Benu apotheek alternatief sagt:
    Oktober 8, 2023 um 8:46 pm Uhr

    … [Trackback]

    […] Find More to that Topic: beatemoser.at/webwissenschaften-at/ […]

  30. pgslot sagt:
    Oktober 10, 2023 um 8:02 am Uhr

    … [Trackback]

    […] Find More here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  31. ks sagt:
    Oktober 12, 2023 um 11:43 pm Uhr

    … [Trackback]

    […] Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  32. superkaya88 sagt:
    Oktober 13, 2023 um 12:43 pm Uhr

    … [Trackback]

    […] Read More here on that Topic: beatemoser.at/webwissenschaften-at/ […]

  33. https://fahrunternehmen.de sagt:
    Oktober 14, 2023 um 11:27 pm Uhr

    … [Trackback]

    […] There you can find 89387 additional Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  34. Buy Guns Online sagt:
    Oktober 15, 2023 um 12:00 am Uhr

    … [Trackback]

    […] Find More to that Topic: beatemoser.at/webwissenschaften-at/ […]

  35. สล็อตเว็ปตรง sagt:
    Oktober 17, 2023 um 10:48 pm Uhr

    … [Trackback]

    […] Read More on on that Topic: beatemoser.at/webwissenschaften-at/ […]

  36. superkaya88 sagt:
    Oktober 22, 2023 um 5:12 pm Uhr

    … [Trackback]

    […] Find More on to that Topic: beatemoser.at/webwissenschaften-at/ […]

  37. บุหรี่นอกเก็บเงินปลายทาง sagt:
    Oktober 22, 2023 um 10:46 pm Uhr

    … [Trackback]

    […] There you will find 64329 more Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  38. click here sagt:
    Oktober 23, 2023 um 12:28 pm Uhr

    … [Trackback]

    […] Read More on on that Topic: beatemoser.at/webwissenschaften-at/ […]

  39. superkaya88 sagt:
    Oktober 27, 2023 um 8:47 am Uhr

    … [Trackback]

    […] Here you will find 55287 additional Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  40. führerschein kaufen klasse b sagt:
    Oktober 28, 2023 um 11:45 pm Uhr

    … [Trackback]

    […] Find More on that Topic: beatemoser.at/webwissenschaften-at/ […]

  41. relaxing sagt:
    Oktober 30, 2023 um 1:17 am Uhr

    … [Trackback]

    […] Find More Info here to that Topic: beatemoser.at/webwissenschaften-at/ […]

  42. ทางเข้า LSM99 sagt:
    November 10, 2023 um 3:58 am Uhr

    … [Trackback]

    […] Info on that Topic: beatemoser.at/webwissenschaften-at/ […]

  43. hair extensions technician watford sagt:
    November 10, 2023 um 4:09 pm Uhr

    … [Trackback]

    […] Here you will find 95122 additional Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  44. หวยออนไลน์ sagt:
    November 11, 2023 um 3:27 pm Uhr

    … [Trackback]

    […] Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  45. Comprar 2-MMC sagt:
    November 16, 2023 um 2:41 pm Uhr

    … [Trackback]

    […] Information on that Topic: beatemoser.at/webwissenschaften-at/ […]

  46. ราคาบอลวันนี้ sagt:
    November 17, 2023 um 1:51 am Uhr

    … [Trackback]

    […] Info to that Topic: beatemoser.at/webwissenschaften-at/ […]

  47. วิเคราะห์บอลวันนี้ sagt:
    November 17, 2023 um 2:27 am Uhr

    … [Trackback]

    […] Information to that Topic: beatemoser.at/webwissenschaften-at/ […]

  48. bonanza178 sagt:
    November 17, 2023 um 3:37 pm Uhr

    … [Trackback]

    […] Info to that Topic: beatemoser.at/webwissenschaften-at/ […]

  49. 웹툰 무빙 무료보기 sagt:
    November 22, 2023 um 1:33 am Uhr

    … [Trackback]

    […] Find More on to that Topic: beatemoser.at/webwissenschaften-at/ […]