Wikidata:Portal Redesign/Banner

Wikidata's Main page should feature a banner! This page is for planning and discussing what image(s) might work best.

Overview

One idea to come out of the redesign process is that the Wikidata Main page should be more visually appealing. Among other changes planned for the Main page, this goal can be achieved in part by a banner.

In particular, we would like to aim for something along the lines of Wikivoyage's combined header-banner with text and/or image overlay—see the Wikivoyage Main page and the related template for reference.

Having said that, it is not necessary for Wikidata to have an image similar to that of Wikivoyage; in fact, we'd like to come up with something new and unique to the project and brainstorming should not be limited by just world map visuals!

Open call for submissions

Wikidata contributors are encouraged to submit their ideas and proposals for a banner.

Keep in mind that we are looking for something:

that represents Wikidata and the idea behind it
with a base design that is not too word-heavy—ideally the graphic should be easily translatable
that is visually appealing but not too information-rich—it should be eye-catching but people shouldn't be confused by it or have to puzzle over it (i.e. treemaps are out)
freely licensed CC-BY or equivalent (i.e you must have the right to upload and grant Wikidata the right to use the image)

Please leave submission(s) on the talk page. Please have all submissions in by 19:00 UTC on August 11th 2014.

Brainstorming ideas

Word clouds

The idea here is that word clouds could be used as just the background of the banner (rather than the intention being that users should take the time to read the words). They could be multilingual words related to Wikidata and/or the Wikimedia Foundation.

Examples of related work:

By Jtneill (Own work) [CC-BY-3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons

By In2thats12 (Image Filter committee) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

Nodes and linked network

This category includes both the 'linked data cloud'—a likely familiar visual that is now commonly used to represent linked data—as well as other ways of associating structured data with less abstract concepts. The cloud could be used as a backdrop just like the word cloud suggestion (IMO, it is very busy-looking though, and it would be better to have a cloud with less items). The San Francisco example, featuring an image of the city and data statements for the city, would need to be something with more universal appeal for the Main page.

Examples of related work:

By Richard Cyganiak and Anja Jentzsch (http://richard.cyganiak.de/2007/10/lod/) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

By VACnews (VAC Vieuws feb 2007 op nvac.pnl.gov. p.9.) [Public domain], via Wikimedia Commons

By Thepwnco [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons, based on works File:Linked_Data_-_San_Francisco.svg by Jeblad (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], and File:BrylieOxley-2012-06-25T111251-25T111313_v1.jpg by Brylie Oxley (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], also via Wikimedia Commons

The Wikipedia Adventure also makes good use of image overlay and HTML to develop a simple yet stylish banner. See the source here for the banner. See below for one of the images used:

By Heatherawalls (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

Visualizations using Wikidata

These all come from Wikidata:Picture_of_the_week and User:Addshore. They are just a few examples of images and visuals that have been used to represent the data that Wikidata contains. IMO they are visually appealing but require more context to be understood and therefore may not work for the Main page banner.

Examples of related work:

Infographics

The idea here was not to actually use an infographic to communicate data on Wikidata, but to use the visual metaphor of infographic to associate the project with data, data representations, etc. For example, a new image similar to the one before could use the Wikidata colours (instead of orange, red, purple, green, blue) and names of quicklinks instead of continents.

Examples of related work:

By DataViva (http://www.dataviva.info/) [Attribution], via Wikimedia Commons

Candidates

We have two candidate banners to be used on the new Main page. Both use the same background image, File:Wikidata nodes navy blue.png, and are based on the trianglify image and background generator first suggested by Cuvwb.

Note: while more banners may be proposed in the future for use on the Main page (we could consider having a few options that can be changed regularly), only one of the options below can be selected for use for the launch of the new Main page.

Banner #1

Welcome to Wikidata,

the free knowledge base with 111,273,702 data items that anyone can edit

Introducing Wikidata •

Project Chat •

Community Portal •

Help

linked

multilingual

open

collaborative

structured

centralized

Banner #2

Welcome to Wikidata,
the free knowledge base with 111,273,702 data items that anyone can edit

Introducing Wikidata •

Project Chat •

Community Portal •

Help

linked

multilingual

open

collaborative

structured

centralized

Comments

Note: This discussion is also taking place on the Project Chat. Zellfaze (talk) 20:35, 21 August 2014 (UTC)[reply]

When my browser is configured not to automatically load images, I can easily read the text on banner #1 (white on green), but I cannot read at all the text on banner #2 (white on white). Therefore, I consider the accessibility of banner #1 much higher than the accessibility of banner #2, and I strongly prefer banner #1. --UV (talk) 18:44, 17 August 2014 (UTC)[reply]

These are really great! I was worried before, having seen the previous submissions. As UV said, I think adding an opaque black box behind the text on the second banner is probably a good idea. Or maybe just a slight drop shadow? The second banner's text could probably do with some adjustment to get it farther from the left border of the banner, and the first banner's green box uses more vertical space than it has to (not a huge deal, there might be an accessibility issue without it?). I'd also ensure that you change the hover properties for the links in the banner, since the change is really subtle at present. --Nicereddy (talk) 22:43, 17 August 2014 (UTC)[reply]

@Thepwnco, Micru: I am inclined to agree. I like the triangular ones, but I think they could use a lot of polishing before they get published. I also agree that using real images would be more appealing and attract more editors. Maybe they could even cycle between random images (i.e. one time you land there, it shows the hurricane from outer space shot, then you reload the page and get the ocean, etc).

If you are intent on keeping the triangular one, I prefer the second one, but I would suggest:

making the nodes lighter than gray and somehow adding definition to the main text to improve legibility (perhaps "text-shadow:0 0 6px #000" or "text-shadow:0 0 10px:#262626"?)
changing the div with "top: -256px" to also have "height: 200px"
changing "padding: 5px" on the main div to "margin: 0 0 0 20px" (of course you'd have to reposition the "left" property of all the divs by 15px)
making the links all white, the blue on hover is jarring
look into a different font. I know it's hard to find web-safe ones, but that is why we have fallback fonts. It's on the title page, it can use a sexier font than default sans-serif. Maybe Trebuchet MS?

The first one is alright but you should separate the text from the div so it doesn't take the opacity = .8 and is therefore more visible.

--SweetNightmares (talk) 15:34, 15 August 2014 (UTC)[reply]

Summary of all feedback

This section summarizes all feedback related to the two candidate banners.

Feedback was also provided for a third banner (an early design with a black background) that was being used at the time on the draft mock up on the Main page. While I apologize for any confusion caused by this banner being featured on the mock up, because the banner with the black background was actually preferred by some users, it has since been reconsidered as an additional candidate for the new Main page.

Feedback was left in various locations; original feedback can be found here, here, and here (starting at the comment 'More feedback').

In general, a lot of comments were related to CSS issues. Thanks to everyone for providing suggestions and tips for making a more polished banner, and in particular to Thiemo_Mättig_(WMDE) who made a lot of improvements to the third banner that I have now incorporated in final designs
the #1 candidate (with box) was universally preferred to the #2 candidate (no box); ultimately everyone thought having a box around the main text improved usability and accessibility (specifically it does not compromise readability of text for those who may have a slow connection and/or have their browser settings configured to not load images automatically)
the "floating text" (i.e. words like 'open', 'collaborative', 'linked', etc) would be best handled using an SVG file for the main banner image; this approach also allows for the text content to be translated easily
the default behaviour for linked text is a blue underline on hover; given that the linked text will be white this makes for an odd effect; it may also be too subtle an underline effect for people to notice.
some people really liked the black background colour, while others thought a lighter colour might be better. Some said the black made for a striking contrast, while the blue background was confusing (note: the blue was also combined with the Wikidata logo colours, making for a collection of different shades of blue)
Based on the feedback received it seemed that many liked the proposed designs or were at least ok with them being used; a few users thought a better design was still possible. Please keep in mind that more banners may be proposed in the future. As there were no other suggestions or proposals submitted, I encourage users to submit their own.