Dies ist ein Archiv des PhysikOnline-Team-Trackers, genutzt zwischen 2011-2016 von PhysikOnline. Im Rahmen vom Vintage-Projekt wurde es 2019 erreichbar gemacht. Diese Kopie des POTTs ist Read-Only, es ist kein Login zum Verändern der Informationen möglich.

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#782 closed Designen (Duplikat/verschoben)

Redesign Podcastwiki (Inhalte der Startseite, ...)

Reported by: steffen Owned by: steffen
Priority: kritisch Milestone:
Component: Podcast-Wiki Severity: Länger als 1 Tag
Keywords: Cc:
Blockiert von: Blockiert:
Erinnerungsdatum: Sensitive: no

Description

Hi,

hier sind die Ideen an denen ich vorletzte Woche gearbeitet hatte.
Sorry Fabian, hätte vielleicht vorher schon etwas posten sollen, war aber noch nicht ganz zufrieden und wollte noch andere Versionen zum Diskutieren machen und zeigen.

Die Kritikpunkte, die ich versucht habe anzugehen:
(die so oder so ähnlich aber etwa sinngemäßg geäußert wurden)

1) Die 3 Spalten des jetzigen Designs verschwenden zu viel Platz, könnte man nicht eine vierte Kategorie unterbringen? (4 Spalten?).
2) Kategorien "Unterhaltung & FPraktikum" rutschen unter die ersten Kategorien (siehe Punkt 1).
3) Ungleichmäßig hohe Abschlüsse der Boxen, unten.
4) Halt irgendwie nicht hübsch…
5) Man kann nicht alles sofort überblicken
{ 1,2,3,4, 5 waren im Prinzip ein Kritikpunkt }
6) Das Menü "geht auch irgendwie unter"

(Im Anhang die Screenshots - Keine Finale Ausgabequalität ;) Aber so die Idee halt …)

Habe nun zunächst versucht ein 4 Spalten Design auszuprobieren.
Finde das aber zu gequetscht. Möglicherweise lässt sich da was mit der Typo machen. Habe auch schon eine condensed Schrift für die Videotitel benutzt um den geringen Platz auszunutzen. Habe dabei aber versucht Schriftgrößen und Breiten der "Videoeinheiten" (Thumbnail, Videotitel, Titelunterschrift) beizubehalten.

Generell Finde ich, dass verschieden Tiefe Boxenden nicht stören. Das Gesamtbild muss halt stimmen. Dazu auch zu Punkt 5) - Finde ich generell auch nicht Schlimm. Wie gesagt, sollte eher das Gesamtbild stimmen und scrollen kann inzwischen sicherlich jeder. Von wegen "Auf sueddeutsche.de muss man ja auch scrollen" … ich denke ich weiß was gemeint ist.

Dazu habe ich eine zweite Version in der die Kategorien zweispaltig in Boxen zu je vier 4 Videos angeordnet sind. Hat irgendwie etwas mehr Luft - wie gefällt das so?

Ich glaube, dass das Menü untergeht hat auch etwas mit der Größe des Bannerbildes zu tun, das wirklich ziehmlich groß ist. Man sieht auch die Intention, den Platz neben dem Bannerbild mit Inhalt zu füllen. So soll alles halt besser "sitzen" und weniger schweben was jetzt der Fall ist wie ich finde und vielleicht zu dem Gefühl führt, dass alles nicht so stimmig aussieht.

Also Banner kleiner - dadurch eine oder 2 Spalten mehr Platz für die Videos.

Zum Menü: Kommt besser raus?
Man sieht ja was ich gemacht habe - wie gefällts?

Generell ist das Desig ja cool und habe versucht das was da ist einfach zu verbessern -

jo

Meinung, Kritik, Anregung, Lob, Bedauern? :)

lg

Attachments (6)

pcwiki-designextension.zip (3.3 MB) - added by steffen 5 years ago.
pcwiki design überarbeitung feb-märz 2014
skizzen1-alspdf.pdf (3.3 MB) - added by steffen 5 years ago.
skizze 1 als pdf
masonry.png (283.3 KB) - added by steffen 5 years ago.
simple float vs. masonry
Bildschirmfoto 2014-12-06 um 14.06.08.png (70.5 KB) - added by sven 4 years ago.
Aus Mail von Steffen: Ort, wo man die Files auch im ITP findet
pcw-preview2-screenshot.png (443.6 KB) - added by sven 4 years ago.
Screenshot falls die Site offline geht
pcw-draft3-screenshot.png (504.6 KB) - added by sven 4 years ago.
Screenshot falls die Site offline geht

Change History (26)

Changed 5 years ago by steffen

pcwiki design überarbeitung feb-märz 2014

comment:1 Changed 5 years ago by fabian

Mir gefällt das mit der 4x4 Anordnung-man müsste dann halt eine Kategorie weglassen. Auch mit dem Banner hast du wohl recht. Wo ich mir gerade etwas unsicher bin, aber das ist ja eh nur ne grobe Skizze gewesen nehm ich an, ist das mit den abgerundeten Boxen. Für die Kategorienüberschriften ne Serifenschrift zu nehmen macht vermutlich wirklich Sinn im Hinblick auf die Schrift von "Podcast Wiki". Insgesamt würde ich die "Zeitung" etwas breiter machen, sodass der Rand etwas breiter ist, so wirkt es ein wenig, als fielen die Inhalte gleich vom grauen Hintergrund runter. Aber vllt. bin ich da auch nur durch zu langes starren auf LaTex-formatierten Text mit absurd geringer Zeilenbreite geschädigt.

comment:2 Changed 5 years ago by steffen

Die Zeitung sollte dafür wohl wirklich breiter gemacht werden - Sie ist halt zur Zeit etwa 1000 Pixel breit um auf so 1024 er Bildschirmen noch zu Funktionieren - andererseits wird die eh in der Gegend anders Dargestellt.

In dem Zuge könnte man auch eine angepasste Version für Tablets machen in der dann die Breite auf eine Spalte dieser 4er Kästen reduzieren könnte.

Ja das stimmt, die abgerundeten Boxen sind recht uncool - aber wie findest du / ihr das Menü so?

Changed 5 years ago by steffen

skizze 1 als pdf

comment:3 Changed 5 years ago by sven

Ich find eine bereite PWP-Seite sehr gut. Moderne Designs sind eigentlich fluid, zeigen also je nach Browserbreite so viel an, dass die Breite gut genutzt wird. Eine Tablet/Smartphone-Version von PWP war längst überfällig und es wäre prima, wenn man das in einem kleinen Redesign mit einbringen könnte.

Wie würdest du denn die Videoseiten für das neue Design anpassen? Vielleicht könnte man ja die Extrabreite dort auch gewinnbringend nutzen?

Die abgerundeten Boxen sind Geschmackssache. Ich bin der Meinung, das Design sollte klarer machen, ob es nun eine Zeitung imitieren will, oder nicht.

comment:4 Changed 5 years ago by carsten

Ich stimme Sven (insbesondere seinem letzten Satz) zu. Soll es aussehen wie eine Zeitung, dann würde ich es klassischer machen, also keine runden Kanten und sowas, nicht so bunt (vgl. faz.net, nyt.com oder freitag.de)

comment:5 Changed 5 years ago by sven

Die Alternative zur Zeitung ist eben keine Zeitung. Man könnte dann überlegen, in wie weit man dem Skeuomorphismus treu bleibt (Leder-Footer), oder ob man was ganz anderes macht.

Das Problem bei Carstens Zeitungslinks ist, dass diese Monster-Portalseiten alle mit Informationen vollgespickt sind. Mit dem Zeitungsdesign hatten Intsar und ich ursprünglich vor, die Aktualität, die wir inhaltlich reinbringen wollten (Mehr regelmäßige Posts, usw.) im Design zu unterstützen. Tatsächlich ist es aber jetzt ein Youtube im Zeitungs-Gewand, nur mit weniger Clips. Wie wärs, die einzelnen Seiten wie Zeitungsseiten einzuteilen, also (wie die Startseite) mehrspaltig, mit Texten dadrin (z.B. Kommentaren)?

comment:6 Changed 5 years ago by sven

  • Cc philip added
  • Component changed from Allgemein to Podcast-Wiki
  • Status changed from new to assigned

Was ist eigentlich aus diesen Redesign-Plänen geworden? Sie sind mittlerweile 2 Monate alt.

comment:7 Changed 5 years ago by steffen

notizen:
#168 - transkription
#681 - placeholder dinger - warum überhaupt js?

hatte "damals" das hier angefangen aber dann aus den augen verloren: http://lynx.achernar.uberspace.de/openspace/pcw-preview/
schneide gerade noch den letzten dreh, dann mache ich mich mal wieder ans themeing, frage mich ob ich mal den theme versuche from scratch zu basteln zum selbst lernen und um komplikationen zu umgehen, hatte zumindest damals nicht hinbekommen einen parallel theme zum basteln zu installieren. … forsche noch daran warum das nicht geklappt hat.

würde auch gerne auf webfonts für titelangelegenheiten umsteigen und generell vielleicht webfonts benutzen. macht schon was her.

comment:8 Changed 5 years ago by sven

Sehr cool, dass du bei den Zufalls-Videolinks gefragt hast, wozu da überhaupt JavaScript verwendet wird! In #681 hab ich das beantwortet.

Und das HTML-Template ist ja cool! Uberspace hab ich auch schon öfters gesehen in letzter Zeit, was hältst du von denen? :D

Bzgl. Webfonts: Voll meine Meinung, würden bei PWP sehr viel mehr Stil reinbringen können.

comment:9 Changed 5 years ago by steffen

Hier, die beiden aktuellsten Previews:
jetzt mit einer Vorversion der Hauptseite - wie alles und immer noch nicht fertig, aber man kann schon erahnen in welche Richtung es geht.

http://lynx.achernar.uberspace.de/openspace/pcw-preview2/hauptseite.html
http://lynx.achernar.uberspace.de/openspace/pcw-preview2/artikel.html

Noch ein Paar Anmerkungen zu meinen Absichten:

  • Der Slider beinhaltet jetzt nur noch ein Bild, dass ohne Text eingebunden werden soll. Die Texte liegen als "echte" html-Textbausteine über den Bildern und werden somit auch immer gleichmäßig gestylt.
  • Links wär eine Spalte als "Newsstream" denke ich ganz nett.
  • Die Kategorien Boxen werden mit 'masonry' (http://masonry.desandro.com) gesetzt. Also ein recht flexibles, nicht-starres Layout - meiner Ansicht nach wirken starre Tabellen eher langweilig und man soll hier ja eher "stöbern". (Für funktionalere Seiten wären striktere Layouts sicher angenehmer)
    • Dadurch dürfen die einzelnen Boxen auch mal unterschiedlich hoch sein ohne das Layout zu sprengen. Dafür gibt es eben am Ende der Seite quasi einen "Flattersatz". Mögen manche vielleicht nicht? Ich mags - und gleicht sich meist auch ganz gut aus. bzw lässt sich durch geschickte Hintergründe schön bespielen.
  • genrell möchte ich das ganze heller machen - und "moderner" -
  • google fonts für nen schönen, eigeneren duktus auch im fließtext,
  • die physik-online-leiste am oberen rand - so oder so ähnlich, damit alle seiten immer präsent sind.

zum diskutieren:

  • die ganzen logos oben in der leiste
  • dieses podcast-wiki logo - war eigentlich als platzhalter erstmal gedacht für mich .. fands aber ganz nett. …
  • generell, wie ist der erste eindruck? …
  • das hellere reduziertere design? = moderner?

(p.s. uah … finde meine Skizzen von da oben eher uncool … )

lg

comment:10 Changed 5 years ago by sven

Mir gefällt das neue Design gut, da es zeitgemäß ist (Das derzeitige Design ist Skleuomorphismus, der eben nur wirkt, wenn er 100% ausgearbeitet ist. Bei Minimalismus, was derzeit hipper ist, fällt sowas nicht so leicht auf).

Ich möchte ein paar Dinge in den Raum werfen, die beachtet werden sollten, damit sie beim Redesign nicht untern Tisch fallen:

  • Die Entwürfe skalieren nicht auf Tablet, geschweige Handydisplay! Es fehlt also die Mobile-Version.
    • Vorschlag: CSS-Frameworks wie Bootstrap oder 960-Grid System lösen gleichzeitig das Mobile-Problem und das Grid-Problem, da sie adaptive Grids mitbringen.
  • Inhaltsbereiche, die wir derzeit haben, brauchen einen Platz im neuen Design:
    • Videoseite: Links auf andere Videos (mit Thumbnails)
    • Der gesamte Footer: Text über PWP, Meta-Links, Icons der Förderer (!!) - Falls du da die Originalmaterialen brauchst schau mal auf http://svenk.ufopixel.de/dropbox/elearning/Podcast%20Wiki%20Physik/
    • ggf. Wikielemente (wir brauchen nicht alle, aber zumindest ein paar). Also das, was man derzeit sieht wenn man auf "Wiki" oben rechts klickt. Wir brauchen einen "Bearbeiten"-Button und einen Button zum Ein/Ausloggen oben rechts.

Ich finde es sehr gut, dass wir vom Zeitungsimage wegkommen, weil das einfach nie gepasst hat. Das neue Layout gefällt mir gut, weil es modern aussieht. Ich bin auch großer Fan von Masonry, auch wenn ich den Effekt hier noch nicht verstanden habe ;-) Ich bin auch ziemlich begeistert vom Ansatz für das neue PWP-Logo! Und die PO-Leiste oben hat mich vom Hocker gehauen, genau sowas hab ich mir immer vorgestellt mit den SW-Icons rechts oben. Mir gefällts auch gut, dass du ein HTML-Mockup gemacht hast und kein Photoshop-Mockup, denn das HTML-Mockup lässt sich viel mehr brauchen und testen!

comment:11 Changed 5 years ago by sven

Zu dem neuen Logo: Ich denke das sollte zwar in eigenem eigenen Thread/Ticket diskutiert werden, aber mal kurz hier zwei Links auf Logodiskussionen:
http://lynx.achernar.uberspace.de/openspace/pcw-preview2/img/herrgoetheimklotz-blk-clrs.png

  • #247: Logovorschläge damals noch von Intsar. Gut, den Goethe brauchen wir immer wenn wir Uni-Frankfurt-Bezug herstellen wollen, aber wo bleibt denn der Physik-Bezug?
  • #618: Da hab ich mal Logos von Physik-Institutionen gesammelt. Da sind zum Teil tolle Ideen dabei, wie man Schleifen, Integrale, Sinuskurven, Teilchen und Teilchenbahnen, Ablenkungen oder Gitter darstellen kann.

Ich finde deinen Logoentwurf grandios {UP}, so gut hab ich Goethekopf und Fernsehen noch nie zusammen gesehen. Das alte uTV-Logo war dagegen ein schlechter Witz (das neue sieht modern aus, sagt aber gar nix mehr aus). Statt den drei Farben was mit Physik und das wär perfekt, in meinen Augen ;-)

Last edited 5 years ago by sven (previous) (diff)

comment:12 Changed 5 years ago by steffen

Cool, freut mich zu hören!

  • Jup, Footer, Seitenleiste ist noch nicht gemockt.
  • Jup, bin nicht so der Fan von Photoshop-Mockups -
  • Jop, die skalierung fehlt noch,
    • werde ich denke ich manuell angehen, da ich nicht genau weiß wie sich die Frameworks verhalten. Masonry sortiert sich ja auch automatisch und man hat ja auch "max-width" und mit dem "@media only screen and (max-width: 640px) { }" usw lässt sich das ja recht einfach am Ende anpassen, was man am Ende betimmt eh benutzen müsste.
  • Ah, die Wiki-Elemente! stimmt - hatte da ja was im Kopf, dann aber gestern vergessen … und Zeit … und so.

(Kurz zu Masonry: Wenn man Elemente normalerweise mit float z.B. links floatet, dann hängen die sich alle in jeder Etage an so einer Wäscheleine auf und die nächste Zeile beginnt erst auf der Höhe des höchsten Elements der vorherigen Zeile. Wenn es zwischendurch aber divs gab, die nicht so hoch waren entsteht da eine Lücke. Masonry berechnet die Höhen der Blöcke und übernimmt die Kontrolle des Layouts und setzt die dann Pixelgenau per position:absolute, left: , right: , … )

simple float vs. masonry

Nebenbei: Habe z.B. für rechts-oben diese Icons hier benutzt: http://fortawesome.github.io/Font-Awesome/icons/ sehr cooles Ding! Aber diese Logos wären ja eh durch unsere eigenen zu ersetzen und sind im Mockup eher als Platzhalter zu verstehen.

Last edited 5 years ago by steffen (previous) (diff)

Changed 5 years ago by steffen

simple float vs. masonry

comment:13 Changed 5 years ago by carsten

Nochmal ein bisschen konstruktive Kritik:

  • Auf Tablets ist die Suchleiste unsichtbar. Man sieht sie nicht, kann aber reinklicken und -schreiben
  • Die Anordnung der Elemente auf der Startseite ist bisher nicht optimal. Zum einen ist Banner und die Leiste "neuste Beiträge" ist ein wenig redundant? Ich würde den Banner vielleicht wieder über die ganze Breite machen und die Leiste weglassen. Alternativ müsste die Leiste, evtl mit anderem Inhalt, nach rechts.
  • Ausrichtung der Videoelemente in den verschiedenen Spalten müsste diskutiert werden.
  • Vielleicht einen Footer mit dunklem Hintergrung als Kontrast?

Ich finde auch, dass das Design in die absolut richtige Richtung geht!!

comment:14 Changed 5 years ago by carsten

Wollen wir das neue Layout nicht auf elearning oder elearning-www im itp weiterentwickeln anstelle von
http://lynx.achernar.uberspace.de/openspace/pcw-preview2/

Dann könnte nämlich jeder wenn er was ausprobieren will loslegen.

comment:15 Changed 5 years ago by carsten

  • Priority changed from langfristig to kritisch

comment:16 Changed 5 years ago by philip

Aber für steffen wird es dann umso schwerer, wenn in der Zwischenzeit irgendjemand etwas geändert haben könnte, oder macht dann jeder brav einen neuen "Branch"?

comment:20 Changed 5 years ago by sven

Bin wie Philip der Meinung man braucht den Entwicklungsprozess für die
kurze Zeit nicht technisch so perfektionieren ;-)

comment:21 Changed 5 years ago by steffen

ok, ich kopiere später einen entwicklungsordner später auf den ITP server - ideen und erweiterungen, die jemand einbaut, kopiere ich dann einfach raus.
soweit würde ich aber noch die aktuelle studiue ausbauen bis die seite vorerst durchgestaltet ist - soweit würde ich das erstmal als "alpha-version" bezeichnen.

(footer, kategorienseite, etc … fragwürde wiki-edit leiste sofern wiki beibehalten wird fehlen ja noch )

EDIT: Mein Beitrag zur Systemfrage: https://elearning.physik.uni-frankfurt.de/projekt/wiki/Podcast-Wiki-Physik/Systemfrage#VorschlagA:Processwire

Last edited 5 years ago by steffen (previous) (diff)

comment:22 Changed 4 years ago by sven

  • Cc steffen ahmet fabian sven carsten philip removed
  • Resolution set to Duplikat/verschoben
  • Status changed from assigned to closed

Ein halbes Jahr später: Mittlerweile gibt es Draft3 hier:

http://lynx.achernar.uberspace.de/openspace/pcw-draft3/hauptseite.html
http://lynx.achernar.uberspace.de/openspace/pcw-draft3/artikel.html

Diese Adresse(n) hat Steffen im Dezember zuletzt per E-Mail übermittelt:

[ich habs] auch irgendwie nicht geschafft an der Seite zu arbeiten …
ich habe den aktuellen Stand auf den ITP Server geladen - ins Podcastwiki-Verzeichnis (siehe Screenshot)
Aus Mail von Steffen: Ort, wo man die Files auch im ITP findet
Der aktuelle Stand mit Footer und einigermaßen responsive:
http://lynx.achernar.uberspace.de/openspace/pcw-draft3/hauptseite.html
http://lynx.achernar.uberspace.de/openspace/pcw-draft3/artikel.html
Ich glaube, dass ich das auch soweit erstmal euch übergeben würde […]
Hatte auch das Logo etwas aufgepeppt … naja schaut halt mal rein.
soviel erstmal dazu -
g[…]
lg
Steffen

Dies hat Steffen Fabian geschickt, der hat es Carsten geschickt und Anfang Februar 2015 ist es dann bei mir (Sven) gelandet. In einem Meeting letzte Woche haben wir besprochen, dass ich es dann umsetzen werden, und zwar (in der Gruppe beschlossen!) der lang diskutierten Systemfrage zum Trotz in MediaWiki. Dieses Vorhaben wird in Ticket #1053 weiter verfolgt, sodass ich Steffens Redesign-Aufgabe erst mal für Beendet erkläre.

Last edited 4 years ago by sven (previous) (diff)

Changed 4 years ago by sven

Aus Mail von Steffen: Ort, wo man die Files auch im ITP findet

Changed 4 years ago by sven

Screenshot falls die Site offline geht

Changed 4 years ago by sven

Screenshot falls die Site offline geht

comment:23 Changed 4 years ago by sven

Resumé: Steffen hat ein HTML-Template geliefert, was definitiv ein Mehrwert gegenüber der Entwicklung der "PodcastWiki NG" mit Intsar ist, wo wir nur mit Gesamtbild-Mockups, nochdazu in einem schlecht weiterverarbeitbaren Format (Photoshop) arbeiten konnten. Allerdings sind auch in Steffens Seiten nicht alle Elemente eingebaut, die die wirkliche Seite am Ende haben wird, sondern viele Platzhalter. So kriegt man beim Anschauen noch kein Gefühl, wo vllt. noch mehr Platz benötigt wird, etc.. Es wird sich bei der Umsetzung zeigen, ob das ein Problem darstellt.

Zur "Archivierung" hier noch ein paar fixe Screenshots von den Entwicklungsstufen, falls das verschwindet (weil extern gehostet):

PCW-Preview 2

Screenshot falls die Site offline geht

PCW-Draft 3

Screenshot falls die Site offline geht

Note: See TracTickets for help on using tickets.