Wikipedia Diskussion:Archiv/Redesign 2006

Allgemeine Änderung

Mmh, es gab ja gerade erst ein umfangreiches und erfolgreiches Projekt für eine neue Hauptseite. Mir ist nicht ganz klar, was der Mehrwert von dieser Aktion sein soll, vielleicht bin ich aber auch schon betriebsblind. ;-) --Schwalbe D | C | V 15:55, 4. Jun 2006 (CEST)

Es geht ja nicht nur um die Hauptseite, sondern um ein komplettes Redesign. Theoretisch kann das ganze Layout über den Haufen geworfen werden, vielleicht werden neue Icons für das Editfeld entwickelt, vielleicht kommt die Navi an eine andere Stelle, vielleicht wird das Layout komplett skalierbar, vielleicht wird es einfach auch ein wenig aufregender, vielleicht spiegeln sich die einzelnen Hauptportale in der Farbigkeit wieder? Es gibt sicherlich noch mehr Möglichkeiten, aber das soll ja die Aufgabe dieses Wettbewerbs sein.
Alle diese Änderungen sollten mit dem Ziel verbunden sein, mehr Benutzer für Wikipedia zu begeistern. Benutzer die jetzt noch der Meinung sind, das Wikipedia eine uncoole und altbackene Streberseite ist.
(Es wurde auch teilweise schon hier diskutiert.) -- Christoph Knoth 22:03, 4. Jun 2006 (CEST)

Auch daran wurde bereits gedacht - siehe Hilfe:Einstellungen#Skin, Eigene Stylesheets und Ergebnisse. Diskutieren könnte man allenfalls, welcher dieser vielen Vorschläge der Standard sein sollte, wobei monobook sicher bisher die größte Anhängerschaft hat. --Schwalbe D | C | V 15:54, 5. Jun 2006 (CEST)

Das ist mir schon klar, ich denke ich bin mittlerweile ganz gut mit der Funktionsweise von wikipedia vertraut ;) Nur geht es ja um den Ottonormal-nutzer, der nicht bei wikipedia angemeldet ist, sondern durch google hierher kommt und also mit dem monobook vorlieb nehmen muss. Nicht dass es sonderlich grottig wäre, es ist aber nicht mehr zeitgemäß und hat meiner Meinung nach einige Unzulänglichkeiten und Design-fehler:

Allgemein

überall fehlt Luft, jeder Zentimeter Weißraum wurde zu gemacht (»oh, da sind 10 Pixel frei, da können wir doch auch noch ein wenig Text unterbringen«) die Benutzereinstellungen haben nach oben keine luft, zu den Seitenreiter auch nicht
alles wirkt relativ altbacken und zusammengeschustert
alle Seiten die Tabellen zu Layoutzwecken benutzen (Startseite, Portalseiten) sind eigentlich nicht standardkonform, da Tabellen nur für die Auflistung von Daten gedacht sind. Nicht aber dazu um 2 Spalten für Inhalt zu erzeugen, das müsste theoretisch über divs geschehen ([1] ;)

Es fehlt ein einheitliches Farbkonzept

die Startseite ist jetzt hellblau
die aktiven Reiter sind aus irgendeinem unerfindlichen Grund gelb (obwohl sie durch bold schon hervorgehoben sind)
genau wie der Kasten unten
die Editbuttons sind blau mit Reliefwirkung
jedes Portal versucht durch eine andere Farbgebung zu glänzen
- Portal:Sport braun + eigene Schrift
- Portal:Wissenschaft dunkelblau + Erdkugel + Chemie
- Portal:Geschichte grau, verwendet aber plötzliche eine Serifenschrift
- Portal:Gesellschaft orange (welches mir vom aufbau her noch am besten gefällt)
- Portal:Geographie grün
- Portal:Technik blau
was ja auch im endeffekt eine gute Idee, aber dann sollte man das vielleicht bis in alle Unterartikel ziehen, damit die Farben sich auch einprägen und einen Sinn haben. Passt also ein Artikel in ein Themengebiet hinein, dann bekommt z. b. ein kleiner Streifen im Header die Farbe des Portals oder der Kategorie zu der er gehört. Passt er in keine eindeutige Kategorie oder gehört mehreren an, dann bekommt er eben das Wikigrau.
desweiteren könnte/müsste sich die Farbe auch in den Icons ( ) wiederspiegeln. Wenn diese nur auf der Startseite eingesetzt werden und auf den Portalseiten dann wieder Fotos, sind sie nur nutzloses Beiwerk.

Logo

Die wikipediakugel ist oben direkt unter den Rand gequetscht, das sieht nicht gut aus. In dem Augenblick wo man sie kleiner macht, würde sie besser zur Wirkung kommen, obwohl und gerade weil sie dann weniger Platz einnimmt.
der Schriftzug Wikipedia hat falsche Kapitälchen (siehe: vierter Absatz), soll heißen die inneren Buchstaben sind dünner als das W und das A. unschöner Typografiefehler.
vielleicht weil die Kugel die Schrift so sehr erdrückt? ;)
ausserdem ist das Logo und die Suche auf Mittelachse gesetzt, was immer relativ altbacken wirkt

Navi

die Überschriften stehen unbeholfen auf den Kästchen und gehen unter
die quadrate der Anführungstriche sind aus einem unerfindlichen Grund grün (wenn man Farbe einsetzt, dann sollte man sie sparsam einsetzen und immer wieder aufgreifen)
die Kästen die die Navi umgeben sind direkt am linken Rand, trotzdem haben sie links einen Border zugewiesen bekommen, womit der Anschnitt nicht wirklich funktioniert.

Editfeld

Die Icons sind relativ unaussagefähige und konfus (Interner Link könnte auch Externer sein. Die Weltkugel steht für einen Link? Warum nicht eine Kette? Die Trompete für Mediendaten? Unformatierter Text ist ein Verbotenes W?). Texte wären in fast allen Fällen aussagekräftiger
Ausserdem sind sie von unterschiedlicher Bildsprache, einheitlicher wären z. B. Icons von http://www.famfamfam.com/lab/icons/silk/ die praktischerweise unter der Creative Commons Attribution 2.5 License stehen.
desweiteren klatschen die Icons direkt ans Editfeld, ein wenig Abstand wäre auch hier gut.

Hintergrund

Obwohl es sicherlich keiner wahrnimmt, gibt es im Hintergrund dieses aufgeschlagene [Buch]. Die Frage ist hierbei wieviel Wikipedia noch mit einem Buch zu tun hat?

upps, wieder viel geschrieben, ich hoffe es ist nicht zu konfus geworden.

Nochmal abschließend: das Design funktioniert, es ist sogar nicht schlecht, aber es könnte viel, viel besser sein :)

-- Christoph Knoth 20:03, 5. Jun 2006 (CEST)

Gute Analyse. Bist du selbst Designer und könntest mithelfen oder kannst du nur wie ich die Fehler identifizieren und darauf hoffen, dass sich irgendwo jemand findet, der sie beheben kann? Bevor die Engländer mit dieser Idee eines Redesign kamen, hatte ich vor einiger Zeit auch mal die Idee, einen Designwettbewerb für die deutsche Wikipedia zu veranstalten. Ausgangspunkt war meine Überarbeitung von Portal:Wikipedia nach Themen, Wikipedia:Exzellente Artikel und Wikipedia:Lesenswerte Artikel, die danach alle denselben Aufbau und dasselbe Iconset in unterschiedlichen Farben bekamen. Über die gewählten Icons wurde allerdings - zu Recht - gemeckert. Ich hatte deshalb im Hinterkopf, demnächst vielleicht mal Kunsthochschulen anzuschreiben, ob sie Lust haben, für Wikipedia ein einheitliches Design zu entwerfen, bei dem man für alle verwendeten Gestaltungselemente - also z.B. auch die Symbole in Vorlage:Löschantrag und Vorlage:Wikipedia-Organisation, die Exzellenz-Icons usw. eine einheitliche Serie macht. Unterstützung (auch finanzielle) von Wikimedia Deutschland würden wir dafür vermutlich bekommen, es wäre allerdings eine ziemlich große Aktion, die ich nicht allein organisieren kann und will (Presseerklärungen, Info-Seiten, Werbung an den Hochschulen). Intern haben wir vermutlich leider nicht die dafür nötigen Fähigkeiten. --Elian Φ 20:47, 5. Jun 2006 (CEST)

ich studiere seit Oktober 2005 Kommunikationsdesign an der Burg Giebichenstein Halle von daher bin ich schon so etwas wie ein Designer ;)
Die Idee die Hochschulen anzuschreiben klingt wirklich gut, aber ich denke es reicht auch schon wenn man online eine Ausschreibung macht und diese auf den wichtigsten Design-news-seiten veröffentlicht. Erstens spricht man dann eh gleich nur die Designer an, die viel am Computer sitzen und schon mit Wikipedia in Kontakt gekommen sind und es ist einfach billiger.

Ich selber sitze ja auch wegen der englischen Ausschreibung, die unter anderem auf http://designmadeingermany.de gepostet wurde, an einem neuen Design. Hauptsächlich deshalb weil ich hier schon an vielen Artikel mitgeschrieben habe und auch an einem Wikibook arbeite. Ich bin mir aber nicht sicher, ob sich auch andere dafür begeistern können. Vorallem weil es keinen Preisgeld gibt und die zu leistende Arbeit wirklich enorm ist.-- Christoph Knoth 00:20, 7. Jun 2006 (CEST)

Konkreter Vorschlag

Meine beiden bisher erarbeitenden (englischen) Startseiten sind noch nicht wirklich ausgereift, zeigen aber vielleicht schon wohin die Reise gehen könnte. (beide optimiert für die kleinste Auflösung 800x600, bei größeren Auflösung skaliert das Layout)
2-Spalten-Layout

mehr Weißraum
keine Kapitälchen mehr im Logo
schwarzer Balken nimmt die Portalfarbe des jeweiligen Artikels an
auch für die Unterseiten die mehre Spalten haben keine Tabellen mehr, z. B. mit [2]

1-Spalten-Layout

das wichtigste sind die Artikel
deswegen kommt die Navi nach oben und kann ausgeblendet werden (suche und Kugel wandern dann in die schwarzen Balken)
die Schrift der Portale sind alle schwarz, wenn man mit der Maus darüber fährt ändert sich die Schriftfarbe passend zum Portal (es wird nicht zu bunt, man bekommt die Farbe aber unterbewußt mit)-- Christoph Knoth 23:04, 5. Jun 2006 (CEST)

1-Spalten-Layout, Seite-Bearbeiten-Version – 430 KB Icons sind von famfamfam.com -- Christoph Knoth 00:20, 7. Jun 2006 (CEST)

Ich rück mal wieder aus, um Platz zu sparen. Kommentare zu den Vorschlägen:

Bitte schau dir unbedingt mal die auf Wikipedia:WikiProjekt Usability verlinkten Usability-Reports an. Die Vorschläge darin sollten am besten gleich in das neue Design einfließen. Das wären vor allem
- Im Edit-Dialog: Prominenter Platzierung der Bearbeitungshilfe (oben neben der Edit-Toolbar).
- Abschaffung der zwei Suchbuttons (Nur noch Suche und ein Link auf "Advanced search" o.ä.)
- Denk bei der Gestaltung daran, dass Admins noch ein paar Felder mehr haben (löschen, schützen, Screenshots siehe Wikipedia:Administratoren)
- Die Zusammenstellung der Links in Navigation, Toolbox und der Fussleiste sollte man überdenken (Auf de haben wir ja auch noch eine Abteilung "Mitarbeit"). Im Moment ist das ein wirres Mischmasch aus Artikelbezogenen ("What links here", "Cite this article", "Permalink") und allgemeinen Links ("Upload file", "Recentchanges", "Specialpages"). Spezial:Specialpages ist sowieso aus Usability-Sicht ein ganz übles Sorgenkind.
Generell gefällt mir der zweispaltige Vorschlag besser, beim einspaltigen wirkt der Kopf sehr überfrachtet.
Über den Footer solltest du nochmal drübergehen - der ist noch alles andere als optimal.
Eine Portalfarbe für Artikel festzulegen wär zwar ne schöne Idee, aber ich wüßte jetzt nicht, wie sie zu realisieren ist (Einer sinnvollen Farbaufteilung für die acht Hauptportale stehe ich übrigens sehr aufgeschlossen gegenüber ;-) Anlaufstelle dafür ist das WikiProjekt Portale
Nachdem wir sehr viele Links in der Oberfläche unterbringen müssen, wäre es evtl. sinnvoll, solche netten CSS-Aufklappmenüs zu benutzen (fänd ich besser, als die Navigation ganz auszublenden). Damit hat man nicht gar so viel GUI-Elemente und bekommt eine stärkere Strukturierung rein. Natürlich müssten die wirklich wichtigen nach wie vor mit einem Klick erreichbar sein.
Die Icons für die Edit-Toolbar können wir im Prinzip auch gleich auswechseln - dazu müssen wir nicht auf einen Design-Wettbewerb warten und die in deinem Vorschlag sind wesentlich besser. Magst du die mal auf Wikipedia:Commons hochladen? Einige von dir selbst gestaltete sind ja dabei.
Wäre schön, wenn du mal in den Wikipedia:Chat kommen könntest - vieles kann man "live" wesentlich einfacher und schneller besprechen. Prinzipiell sieht mir das schon mal nach einem sehr guten Start aus :-) --Elian Φ 02:11, 7. Jun 2006 (CEST)

Geschmäcker sind bekanntlich verschieden, aber ich muss sagen, dein Vorschlag gefällt mir ausserordentlich. ;-) Ganz grosses Kompliment. So würde es mir mehr Spass machen die Seite zu besuchen...
Ich fasse mich mal ganz kurz und erwähne was ich noch ändern würde.

Nur noch einen Searchbutton
Dieser Searchbutton direkt neben dem Eingabefeld platzieren
Anderes Design des Searchbuttons (Weisser Text, weisser Rand - Farben ändern sich wenn man mit der Maus rüberfährt... Mittels CSS und zwei Gifs einfach zu lösen)
Breite im Allgemeinen würde ich breiter nehmen. Unbedingt. Fix eine Breite finde ich schlimm. Vor allem bei Wiki, da die Breite in meinen Augen eine grosse Rolle spielt. Die Breite im Allgemeinen beispielsweise 90% nehmen. Viel weiss soll die Seite dann auch nicht haben, ansonsten werden einzelne Seiten riesig lange. Footer wird dadurch auch automatisch breiter. (Hoffe ich habe dich richtig verstanden und du wolltest die breite ca. 775 Pixel fix)
Die Logos vielleicht unterhalb der Navi positionieren

@Elian: Die Adminknöppe könnte man links oberhalb des Suchfeldes platzieren. Im gleichen Layout wie die „project page“, „discussion“ , „edit“ etc.

BTW: Auch die Icons sind um einiges besser. Die jetztigen sind wirklich schäusslich und ich benutze die nie, vielleicht kannst du daran was ändern :)
-- baumanns _____ 12:20, 9. Jun 2006 (CEST)

Hab da mal spasseshalber was gebastelt. Bitte folgenden Code in dein Monobook.css einfügen

#column-content {
width: 100%;
align: auto auto;
}

#pt-userpage {
v-align:middle;
}

#content {
margin: 2.8em 0 0 12.2em;
padding: 0 1em 1.5em 1em;
background: white;
color: black;
border: 0px;
border-right: none;
line-height: 1.5em;
position: relative;
z-index: 2;
}

#column-one {
padding-top: 125px;
}

#p-search {
top:-290px;
z-index:12;
left:233px;
color:white;
width:500px;
}

#p-search h5 label {
display:none;
}

#searchBody {
background:transparent;
margin-top:-10px;
margin-left:45px;
width:250px;
}

#searchGoButton {
display:none;
}

#ca-nstab-main {
margin:50px;
}

#p-tb {
margin-top:-45px;
}

#p-logo {
display:none;
}

html {	
background: url(http://www.salo.ch/wiki/header_bg.gif) 0 0 repeat-x;
}

body {
font: x-small sans-serif;
background: url(http://www.salo.ch/wiki/header.gif) 0 0 no-repeat;
color: black;
margin: 0;
padding: 0;
}

.firstHeading {
margin-top:119px;
}

/*
** the personal toolbar
*/
#p-personal {
width: 100%;
white-space: nowrap;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 12px;
z-index: 0;
border: none;
background: none;
overflow: visible;
line-height: 1.2em;
}

/*
** the page-related actions- page/talk, edit etc
*/
#p-cactions {
position: absolute;
top: 97px;
left: 255px;
margin: 0;
white-space: nowrap;
width: 76%;
line-height: 1.1em;
overflow: visible;
background: none;
border-collapse: collapse;
padding-left: 1em;
list-style: none;
font-size: 95%;
}

#p-cactions li {
display: inline;
border: 1px solid #aaa;
border-bottom: none;
padding: 0 0 .1em 0;
margin: 0 .3em 0 0;
overflow: visible;
background: white;
}

#p-cactions li.selected {
border-color: #fabd23;
padding: 0 0 .2em 0;
font-weight: bold;
}

#content { 
background: url(http://www.salo.ch/wiki/content_bg.gif) 0 0 repeat-y;
}

.pBody {
border:0px;
}

#footer {
margin-top:-8px;
}

Danach sieht Wikipedia so aus.
Jaja, ich weiss, man müsste noch vieles vieles ändern. Ist wie geschrieben nur so testweise :-P -- baumanns _____ 16:40, 9. Jun 2006 (CEST)

Werde erst Mitte nächste Woche eine neue Version posten können, vielleicht schon mit css, ne Mischung aus dem ersten und zweiten Design. Ich werde mir deine Änderungen an der monobook mal zu gemüte führen. Es soll schon fluid werden, die hier geposteten Versionen stellen halt nur dar, wie es in der Minimalbreite aussieht :) -- Christoph Knoth 19:05, 10. Jun 2006 (CEST)

nur ganz kurz: habe viel um die ohren, bin aber dran. Im firefox funzt es schon einigermaßen. -- Christoph Knoth 23:10, 19. Jun 2006 (CEST)

Danke für die Information!
Kein Problem, lass dir ruhig Zeit.
Schön zu hören, dass es vorwärts geht. Dann weiterhin viel Erfolg und Spass beim Basteln. Und gib dann bitte Bescheid wenn es läuft. Dankeschöhön :) -- baumanns _____ 17:24, 20. Jun 2006 (CEST)

nach langer Zeit, bin ich mal wieder hier :) und hab mal ein aktuellen Stand meiner Umsetzung hochgeladen. Der Header sieht zumindestens im firefox so langsam nach was aus (ist auch mit strg++ und strg+- skalierbar. aber irgendwie komme ich nicht so richtig weiter. Das css von wikipedia ist so aufgebläht, dass es einfach keinen Spaß macht. Und der html-quelltext ist nicht wirklich so aufgebaut, dass man das Layout umsetzen könnte. Wahrscheinlich müsste man eher mal bei den wikimedia-entwicklern anfragen, ob die da was drehen können. Naja ich versuch mal weiter.--Christoph Knoth 01:02, 18. Sep 2006 (CEST)

Abschnitt hinzufügen