Redesign der Webseite - Vorschlag

Massengeschmack-TV: Allgemeines Unsere Webseiten und das Forum
1

Hallo Community und das ganze Fernsehrkririk-Team,

seit nun gut einem Jahr schaue ich mir regelmäßig Fernsehkritik an und seit etwa einem halben Jahr auch die zugehörigen Postecken. Inhaltlich gefällt mir das Magazin exzellent, jedoch fand und finde ich die Webseite aus folgenden Gründen nicht gerade ansprechend:

  1. Die Webseite wirkt für mich unübersichtlich
  2. Das Webdesign entspricht nicht mehr den heute modernen Designs (zum Start der Seite in dieser Forum war das Design bestimmt auf der Höhe)
  3. Die Elemente der Webseite wirken für mich Stück für Stück dazu gebastelt und vom Auftreten nicht aus einem Guss
  4. Den HTML-Code könnte man aus heutiger Sicht ein wenig besser gestalten (das mit dem wenig ist wörtlich zunehmen)

Meines Erachtens nach ist die Webseite jedoch ein wichtiges Element des ganzen Magazins, da darüber neue Zuschauer gewonnen werden und wenn die ersten Impressionen den Interessenten nicht anspricht, schließen viele Menschen die Webseite recht schnell wieder.

Ich sah vor ein paar Monaten ebenfalls, dass es hier im Forum das Topic „Vorschläge für die Homepage“ viewtopic.php?f=11&t=1105 gibt, in dem einige Leute Vorschläge und Wünsche äußern, jedoch meist keine Lösungsideen anbieten. Da ich hobbymäßig sowohl mit der Materie des Webdesigns als auch der Entwicklung von Webseiten ein wenig bewandert bin, setzte ich mich gestern Abend einmal hin und gestaltetet ein Webdesign, wie ich mir ein übersichtliches und modernes Fernsehritik vorstelle. Dabei versuchte ich sowohl das Retro mäßige, was lt. Rückblick Teil I Herrn Kreymeier gefällt und momentan sowieso Trend ist, als auch modernes Webdesign und einen strukturierten Aufbau zu vereinen. Ich gestaltete vorerst nur eine Startseite, ein Design für die Übersicht der Folgen und die Übersicht im Blog.

Folgende Screenshots haben nichts mit der konkreten Zukunft der Webseite von Fernsehkritik.TV zu tun und sind lediglich Vorschläge von mir! Die verwendeten Bilder und Texte dienen lediglich als Beispiele.


Volle Größe: http://dev.xinty.de/fernsehkritik_redesign_suggestion/Fernsehkritik_Home_2012_09_30.png

Startseite: Unter dem Menü befindet sich ein sowohl beschreibender, als auch auffordernder Text, rund um das Thema Trash im Fernsehen. Darauf folgt eine Slideshow in der z.B. Bilder der letzten Folge gezeigt werden können. In folgendem sieht man eine kurze Beschreibung der Couch, des Blogs und den TV-Tipps.


Volle Größe: http://dev.xinty.de/fernsehkritik_redesign_suggestion/Fernsehkritik_Magazin_2012_09_30.png

Magazin: Unter dem Menü wird bei jeder Unterseite, so auch im Magazin, der aktuelle Bereich der Seite, in welchem man sich befindet, benannt. Darauf folgen in der rechten Spalte zu jeder Folge eine kurze inhaltliche Beschreibung mit zwei Screenshots und auffordernden Button sich diese Folge nun anzusehen. Damit erkenntlich wird wann die Folge veröffentlich wurde steht dies unter den Buttons in einer dezenteren Schriftgröße.


Volle Größe: http://dev.xinty.de/fernsehkritik_redesign_suggestion/Fernsehkritik_Blog_2012_09_30.png

Blog: Wie auch jeder Unterseite, befindet sich zunächst der aktuell aufgerufene Bereich der Seite unter dem Menü. Auf der linken Seite befindet sich eine sogenannte Sidebar, in dem Kategorien des Blogs aufgezeigt werden, sodass man auf Wunsch nur ein Teil der Einträge sieht. Daraufhin folgt die Suche. Auf der rechten Seite finden wir in fetter Schrift den Titel des Blogbeitrages. Daraufhin folgt der eigentliche Beitrag, der der Übersicht halber in dieser Ansicht gekürzt dargestellt wird und mit einem Klick auf „weiter lesen“ komplett gelesen werden kann. Darauf folgen die obligatorischen Informationen eines Blogbeitrags.

Quellen aller Screenshots: Inhaltlicher Aufbau http://fernsehkritik.tv/; Letzer Tweet https://twitter.com/fernsehkritiktv/sta … 647317505; Letzter Blogbeitrag http://fernsehkritik.tv/blog/2012/09/di … u-fassen/; Verwendete Schriftarten: Designio http://www.dafont.com/designio.font und Bebas Neue http://www.dafont.com/bebas-neue.font

Weitere Quellen Startseite: Slideshow-Bild Screenshot aus Rückblick Teil 1 http://fernsehkritik.tv/folge-101/; Bild bei Couch unter CC BY-NC von Blake Danger Bentley http://www.flickr.com/photos/8675898@N03/5063557111/; Bild Blog unter CC BY-NC von Philippa Willitts http://www.flickr.com/photos/hippie/2475849569/; Bild TV-Tipps unter CC BY-NC-SA von HoQ-10 http://www.flickr.com/photos/hoq-10/146902410/

Weitere Quellen Magazin: Titel der Elemente im Content wie auch Screenshots entnommen von http://fernsehkritik.tv/tv-magazin/

Weitere Quellen Blog: Beispielstexte der Blogbeitrage dem Lorem ipsum Blindtext entnommen http://www.loremipsum.de/

Der Lizenz von http://www.flickr.com/photos/hoq-10/146902410/ entsprechend finden Sie unter http://dev.xinty.de/fernsehkritik_redes … hoq-10.jpg die modifizierte Version des Bildes unter selbiger Lizenz freigegeben.

Nach dem ganzen rechtlichen Formalitäten würde mich interessieren wie ihr, die Community, meine Idee findet. Was gefällt euch an dem Design? Wo findet ihr könnte man noch nachbessern? Könntet ihr euch eine solche Webseite für Fernsehkritik.TV vorstellen? Falls man von der Seite der Verantwortlichen etwas hört würde mich das natürlich auch freuen :wink:

Viele Grüße

Jan

2

Nachdem ich gerade Lust und Zeit hatte noch ein wenig weiter daran zu arbeiten, hier noch ein Vorschlag für eine Video.


Volle Größe: http://dev.xinty.de/fernsehkritik_redes … _09_30.png

Quellen: Allgemeine Quellen wie oben; Videoplaer-Bild Screenshot aus Rückblick Teil 1 http://fernsehkritik.tv/folge-101/; Kapitel aus Folge 99 http://fernsehkritik.tv/folge-99/

3

Hey, ich find’s echt großartig. Aber vielleicht solltest du erstmal abwarten, was Holger von der Idee gefällt. bevor du dir die ganze Arbeit umsonst machst.

4

Hey, ich find’s echt großartig. Aber vielleicht solltest du erstmal abwarten, was Holger von der Idee gefällt. bevor du dir die ganze Arbeit umsonst machst.

Mehr Arbeit werde ich mir damit auch nicht machen, wenn das Design nicht gewünscht sein sollte :wink:

5

Die Übersichtlichkeit steigt wirklich bei diesem Konzept, aber:
Das Design ist (finde ich) etwas zu monoton, minimalistisch, und irgendwie steril.

Mag sein dass das „modern“ und „cool“ ist, aber ich finde es einfach nur öde, um es mal klar zu formulieren.

Denke dir hilft ehrliche Kritik auch eher weiter als einfaches Abnicken.
Daher mein konkreter Verbesserungsvorschlag:

Mach es etwas „lebendiger“. Füge ein paar mehr Grafiken ein, die FKTV betonen, es aber auch nicht überladen (wäre das genaue Gegenteil :wink: )

Oh und irgendwie ist mir nicht ganz klar geworden, wie man die älteren Folgen aufrufen würde.

Alles natürlich nur meine subjektive Meinung. Hat auf jeden Fall Potenzial :smt023

6

Die Übersichtlichkeit steigt wirklich bei diesem Konzept, aber:
Das Design ist (finde ich) etwas zu monoton, minimalistisch, und irgendwie steril.

Mag sein dass das „modern“ und „cool“ ist, aber ich finde es einfach nur öde, um es mal klar zu formulieren.

Denke dir hilft ehrliche Kritik auch eher weiter als einfaches Abnicken.
Daher mein konkreter Verbesserungsvorschlag:

Mach es etwas „lebendiger“. Füge ein paar mehr Grafiken ein, die FKTV betonen, es aber auch nicht überladen (wäre das genaue Gegenteil :wink: )[…]

Danke für deine Meinung. Ich muss dir völlig zustimmen, ehrliche Kritik ist das Beste :slight_smile: Das mit dem langweilig ist Geschmackssache. Die Monotonie ist bewusst gewählt, damit alles wie aus einem Guss erscheint. Ich werde jedoch mal sehen ob ich das ein oder andere themenbezogene Icon noch umsetzen kann, damit könnte es wirklich etwas lebendiger wirken.

[…]Oh und irgendwie ist mir nicht ganz klar geworden, wie man die älteren Folgen aufrufen würde.[…]

In den Screenshots hab ich lediglich zwei Folgen eingebaut, damit alle Screenshots gleich hoch sind. Man könnte bspw. fünf Folgen je Seite einsetzen und am Ende ein Vor-, Zurück- und Seite-X-Button gestalten.

7

Schlichtheit ist tatsächlich sehr modern im Moment. eBay vereinfacht gerade sein Logo auf eine ganz einfache Schrift, genauso macht es Microsoft. Deshalb finde ich das vorgeschlagene Design ansprechend und modern.

8

Schlicht ist tatsächlich sehr modern im Moment. eBay vereinfacht gerade sein Logo auf eine ganz einfache Schrift, genauso macht es Microsoft. Deshalb finde ich das vorgeschlagene Design ansprechend und modern.

Wenn ich da mein Wissen noch dazu geben darf: Microsoft und eBay sind zwei Big Player die nun diesen Trend folgen. Von dem wirklichen Trend des Einfachen und Schlichten kann man meines Wissens nach seit Anfang letzten Jahres sprechen. In den letzten Monaten beobachte ich auch, dass sich immer Mehr von eckigen zu runden Formen wandelt. Ich bin jedoch der Meinung, dass man nicht jedem Trend hinterherlaufen muss, sondern seine eigene Kreation finden sollte :wink:

9

Nicht schlecht! Da sind einige sehr gute Ideen dabei. Die Website (im jetzigen Zustand) hat in der Tat einige Modifizierungen hinter sich, sodass natürlich vieles dazugebastelt wirkt. Es ist nämlich so :smiley:
Viele Funktionen: Komplettübersicht, Twitter, Blog, Live-Seite, Postecke, Couchhinweise, Couch… waren beim Start weder geplant noch vorgesehen. Insofern täte eine komplette Überholung sicher nicht weh - nur ist die eben auch entsprechend aufwendig.

Es gibt ein paar Punkte die mich bei deinem Vorschlag stören. Doch ist das überraschenderweise recht wenig. Toll, dass du dir solche Gedanken gemacht hast.

10

Ich finde die Twittermeldungen mittlerweile relativ wichtig weshalb mir die versteckte Lage nicht gefällt und auch dass nur der letzte tweet angezeigt wird, gefällt mir nicht. Die grauen Texte auf grauen Hintergrund sind auch relativ schwer zu lesen. Ansonsten sicher ein Plus an Übersichtlichkeit besonders wenn man neu ist.

11

Alles in allem ist der Designvorschlag nicht schlecht, allerdings wirkt der FERNSEHKRITIK-TV-Schriftzug ein wenig trist und eintönig, da könnte man noch etwas ändern sonst wirkt es zu 08/15-mässig aber übersichtlicher sieht das schon aus.
:smt023

12

[…]Es gibt ein paar Punkte die mich bei deinem Vorschlag stören. Doch ist das überraschenderweise recht wenig. Toll, dass du dir solche Gedanken gemacht hast.

Wenn du mir die Punkte die dich persönlich noch stören noch nennen könntest, kann ich das Design entsprechend anpassen. Da du ja meines Wissens nach die technisch Administration der Webseite darstellst weist du wahrscheinlich auch wo bei Fernsehkritik die Schwerpunkte liegen :wink:

[…]Insofern täte eine komplette Überholung sicher nicht weh - nur ist die eben auch entsprechend aufwendig.[…]

Falls ihr Unterstützung bei einem solchen Projekt bräuchtet, würde ich mich anbieten zu helfen. Ich „beherrsche“ neben den Grundtechniken in Adobe Photoshop und Illustrator die Entwicklung von Webseiten in HTML (auch HTML5), CSS (auch CSS3), JavaScript (vorzugsweise jQuery), PHP, MySQL und Serverumgebungen unter Debian sind mir auch nicht fremd :wink:

Ich finde die Twittermeldungen mittlerweile relativ wichtig weshalb mir die versteckte Lage nicht gefällt und auch dass nur der letzte tweet angezeigt wird, gefällt mir nicht. Die grauen Texte auf grauen Hintergrund sind auch relativ schwer zu lesen. Ansonsten sicher ein Plus an Übersichtlichkeit besonders wenn man neu ist.

Zu Twitter: Also ich weis ja nicht wie du Twitter nutzt, aber ich persönlich folge den Leuten von denen ich regelmäßig etwas wissen möchte und lese die Tweets dann in der Timeline der Twitter Webseite, bzw. App. Eine eigene Timeline eines Twitternutzers auf einer beliebigen anderen Webseite erscheint mir daher nicht als sinnvoll. Jedoch stößt man durch den letzten Tweet am Ende der Seite (im Footer) darauf, dass die Webseite auch twittert. Das war so der Gedankengang hinter dieser Platzierung.

Zur Farbe: Das ist mir bewusst. Ich denke daran noch etwas feilen zu müssen. Das Problem besteht jedoch darin, dass es auf jedem Display etwas anders rüberkommt und daher eine Lösung gefunden werden müsste, welche für alle Nutzer zufriedenstellend ist.

Dann mach doch mal einen Vorschlag, wie du ein entsprechendes Logo gestalten würdest - was stilistisch passt. In dem Gebiet bin ich zugegebener Weise nicht der kreativste :wink:

13

Ein Verbesserungsvorschlag von mir für ein moderneres Logo, könnte auch noch andere machen. :wink:

Anklicken zum vergrössern:

14

Das derzeitige Logo finde ich eigentlich immer noch ganz gut, kann man das nicht irgendwie so reinbasteln das es zum Design passt?

15

@Extraklaus
Meinst du vielleicht so ?:

16

Ironie? Kalligrafisch ist die Schriftart, bzw. den Typ von Schrift den du verwendet hast absolut out of date… ganz abgesehen davon, dass es nicht in das Gesamtkonzept des Designs passt.

Das derzeitige Logo finde ich eigentlich immer noch ganz gut, kann man das nicht irgendwie so reinbasteln das es zum Design passt?

Das momentane Logo basiert auf den Farbspritzern, was in mein erstliches Design-Konzept nicht wirklich passt. Des Weiteren, siehe Bild, ist das Logo an die Höhe der Schrift angepasst, so das es übersichtlich wirkt. Ich hatte bereits die Idee eines explorierenden Fernsehers, jedoch lässt dies meine Fertigkeiten im Bezug auf Design nicht zu. Vielleicht gibts hier ja jemanden, der entsprechendes umsetzen kann?

17

Und gerade die Twitter Meldungen find ich momentan sehr übersichtlich und wichtig, finde Twitter selber viel zu unübersichtlich.
Deshalb ist es sehr nützlich, die neusten Meldungen von Holger sofort angezeigt zu bekommen…

18

Das momentane Logo basiert auf den Farbspritzern, was in mein erstliches Design-Konzept nicht wirklich passt.

Dann bring ich noch diesen Vorschlag ins Rennen, ohne Farbspritzer und kommt dem alten Logo am nächsten:
Weitere stelle ich erstmal zurück um Platz für die Vorschläge anderer Mitglieder zu lassen ! :stuck_out_tongue:

19

Das gefällt mir persönlich gar nicht mal so schlecht. Hab dadurch gerade noch ne Idee in ähnlichen Stil bekommen. Wenn ich Zeit finde arbeite ich diese und die anderen, aus meiner Sicht relevanten, Vorschläge morgen mal ins Design ein :wink:

20

Da ich leider kein Grafikprogramm zur Verfügung habe sondern mich mit Windows-Paint begnügen muss, kann ich den Vorschlag mit der explodierenden Glotze leider nicht grafisch umsetzen. :wink:
Aber vielleicht wäre das eine Alternative: