Design December 2013

design@lists.wikimedia.org

27 participants
17 discussions

Static Header and Navigation Modification Prototype
by Brandon Harris 09 Dec '13

09 Dec '13

I made a thing. http://unicorn.wmflabs.org/navmod/ Here’s the documentation: https://www.mediawiki.org/wiki/Vector_Navigation_Modification The plan is to build it as a Beta Labs feature. Discuss. --- Brandon Harris, Senior Designer, Wikimedia Foundation Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate

12 22

Join our Multimedia Meetup - Next Monday, Dec. 9
by Fabrice Florin 05 Dec '13

05 Dec '13

Greetings! Can you help us create a better multimedia experience on Wikipedia and its sister sites? If you are interested, we'd like to invite you to join a special Multimedia Meetup at the Wikimedia Foundation, this Monday, December 9 at 6:30pm PST. This one-hour event will bring together dozens of developers and community members to discuss how we can use images, sounds and videos to help people learn more effectively on our sites. To join us, simply sign up here: http://www.meetup.com/wikimedia-tech/events/123456892/ If you know anyone else outside WMF whom you think would be interested, you are welcome to spread the word in your community -- the more, the merrier :) We will start our meeting by presenting a vision for multimedia in 2016 and ask you how we can improve it. We will then demo and discuss these new projects together: * media viewer * file feedback * new video formats * campaign tools As a group, we will brainstorm new ways to view, contribute, curate, discover and use media files on Wikipedia, and grow our audio-visual knowledge base in the process. This is a great opportunity to plan our next steps together and network with other like-minded community members. And we'll be serving free drinks and pizza to make this even more fun for you. :) Images, sounds and videos can engage users more deeply than text articles, and better support their individual learning styles. To that end, we aim to help more users to collaborate through multimedia -- by improving their viewing experience, supporting their media contributions, and making it easier to use media in articles. We look forward to your advice on how to make this vision happen together. Thanks for your consideration. We hope to speak with you soon. :) All the best, Fabrice _______________________________ Fabrice Florin Product Manager, Multimedia Wikimedia Foundation http://en.wikipedia.org/wiki/User:Fabrice_Florin_(WMF) https://www.mediawiki.org/wiki/Multimedia

1 0

Typography and different languages
by Amir E. Aharoni 05 Dec '13

05 Dec '13

Hi, So, since there are a lot of discussions about typography lately, I guess I have to chime in with internationalization considerations. tl;dr: 1. Bug 57045 should be resolved. 2. Typography changes shouldn't be made default in any language without testing and positive approval. The long version: The discussions about typography need to take into account not just the Latin alphabet, but other alphabets as well. Even within the Latin alphabet there can be variations; for example, Vietnamese and some other languages use a very large number of đìâċṛįṭīçś, which may require use of different styles. Generally, *any* significant typography changes must be tested in all scripts and nothing should be enabled by default in any project without a positive approval from the community or at least from Language Engineering. This is not as heavy and bureaucratic as it sounds, however :) What do I mean by "all scripts"? Basically scripts like "Latin", "Cyrillic", "Devanagari", etc. Their number is much smaller than the ~300 languages of MediaWiki. An easy step to properly creating these groups would be resolving bug 57045 [1], where I propose grouping languages by script names. And here are some actual basic style considerations: * minimum line-height: usually not important for Latin, but often needed for languages of South and South-East Asia. * minimum letter size: languages with complex glyphs and ligatures are usually completely unreadable under 12, and may even need a size of over 14. Examples are Chinese, and many languages of India. * underline: underline is quite bad for writing systems where the letters often go below the baseline, such as Arabic. (This is actually implemented in a very hacky way in getStyles() in includes/resourceloader/ResourceLoaderUserCSSPrefsModule.php and should be refactored.) * uppercase and small caps: this may be useful and nice for Latin, Cyrillic, Greek and Armenian, but other writing systems don't have it. Depending on it for adding elegance or for emphasis is not a good idea. These are the basics. Obviously, there may be more considerations. Another relevant link: https://www.mediawiki.org/wiki/Internationalization/Styling_and_typography [1] https://bugzilla.wikimedia.org/show_bug.cgi?id=57045 -- Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי http://aharoni.wordpress.com ‪“We're living in pieces, I want to live in peace.” – T. Moore‬

8 11

beta features - RTL icons
by Amir E. Aharoni 05 Dec '13

05 Dec '13

Hi, Beta features have icons to represent them at Special:Preferences. They usually show a schematic representation of a MediaWiki page with a logo in the top left corner, and this of course means that they should be flipped for RTL languages. Some of them are trivial - just a horizontal flip. Some of them are less trivial - for example, in the one for the VisualEditor formula editing I flipped the image and then flipped the Sigma icon inside it so it would still look like Σ and not flipped. Some of them are even less trivial, for example the icons for the font style experiments. It shows the Latin letter A, and it's weird to show a Latin letter in the beginning of a right-to-left text. Luckily, there are only two major right-to-left scripts, so I made one icon for Hebrew and one for Arabic (my sincerest apologies to speakers of Divehi and Syriac). Some relevant sample commits: * https://gerrit.wikimedia.org/r/#/c/94379/ * https://gerrit.wikimedia.org/r/#/c/94269/ * https://gerrit.wikimedia.org/r/#/c/94423/ * https://gerrit.wikimedia.org/r/#/c/98159/ In any case, I'd like to request that the designers who make these icons would do it from the start. My Inkscape skills miraculously worked for this till now and there were almost no complaints about my work. Still, when it comes to graphics software I am not even an amateur, and this should probably be done by professionals. More importantly, a real designer would do it with a consideration for RTL from the start. As always, if you have any questions about internationalizing and bidifying these icons or any others, please ask Language engineering at the mediawiki-i18n mailing list or the IRC channel of the same name. Thanks! -- Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי http://aharoni.wordpress.com ‪“We're living in pieces, I want to live in peace.” – T. Moore‬

2 2

Welcome Moiz Syed to Wikimedia Design
by Jared Zimmerman 04 Dec '13

04 Dec '13

Its my great pleasure to welcome Moiz Syed to the User Experience team. Moiz joins us from Hipmunk, where he was integral in building their design team from zero to a team of four. While there he was responsible for the user experience both on their mobile application and desktop site. Moiz joins the Wikimedia Foundation as a User Experience Designer, and will be working with the team on everything from mobile, analytics, core features, multimedia, and growth. Moiz was the first designer at Hipmunk, where he most recently lead the effort to redesign their mobile app from the ground up, coinciding with the iOS 7 launch. In addition to interaction design, Moiz is interested in information visualization, design for accessibility, privacy and social activism. Moiz has worked at startups, consultancies, and in-house at companies such as Citrix and IBM. Moiz will be functioning as an UX designer on the team, however his visual design, data visualization, and prototyping skills will be integral to the continued success of our team and our projects. He is excited to be part of the Wikimedia Foundation’s mission. When he’s not at work Moiz is busy volunteering as a designer for activist groups like Private Manning Support Network and Code Pink. He also enjoys reading, documentary photography, and making loud annoying sounds on his MicroKorg synth. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

3 2

graphic design guidelines and i18n guidelines
by Amir E. Aharoni 03 Dec '13

03 Dec '13

Hi, Are there any written guidelines for creating images and icons for MediaWiki? I'd love to add some best practices there about internationalization, bidirectionality, etc. Thanks! -- Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי http://aharoni.wordpress.com ‪“We're living in pieces, I want to live in peace.” – T. Moore‬

6 7

i18n/design on mobile (pages and text length)
by Jon Robson 03 Dec '13

03 Dec '13

I had two topics I wanted us to discuss and agree upon that are causing lots of friction in mobile development and I would like us to resolve in current designs and future designs. (Feel free to forward to other mailing lists) Articles Vs Pages Vs <insert word here> #################################### Recently all instances of the word 'article(s)' was switched with 'content pages' / 'pages'. This problem keeps recurring in our design and is starting to become a nuisance. I see both sides here - 3rd parties and even our own projects use our software in a different way - sometimes pages are articles, sometimes they are definitions, sometimes destinations etc etc. However the word 'content page' and page is extremely ambiguous and can be confusing. One good example is the watchlist view on mobile - it provides the ability to filter feeds by namespace: This i18n change changed the word 'article' to 'content pages'. In this context it makes no sense. Programmatically what it actually means is show me only pages from the 'Main namespace' but to a reader the word 'articles' is arguably more understandable than 'content pages'. I would actually like us to continue using 'articles' but explore ways other instances can customise this - e.g. switch the word 'articles' to other words based on what their project is about. It would be nice for wikibooks to use the word 'books' for instance, and wikitionary 'words' or 'definitions'. Is this feasible and worth exploring? I feel like using the word pages at the benefit of generalisation seriously damages the benefit of clear and easy to understand language. Limiting word length in mobile ##################### In addition to this the patch in question brought up a second topic: word length on mobile. On the watchlist view we have several tabs as illustrated in this question which are optimised for single words (and potentially can be truncated using the ellipsis method if necessary) http://imgur.com/Jiv0XPJ As you can see in the diagram - 2 words do not work very well in this kind of view. I suggested a qqq constraint to limit translations to single words - https://gerrit.wikimedia.org/r/#/c/97935/ - do we think these sorts of constraints are okay for mobile? Another approach to do a similar design would be to use icons, but icons in themselves have even greater problems for translation.

4 7

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design December 2013