Design

design@lists.wikimedia.org

604 discussions

Standardising icons across projects
by Jon Robson 25 Sep '14

25 Sep '14

Since we had the luxury of having several people in the office, Trevor, Juliusz, Rob Moen, Ed Sanders, Shahyar, May, Monte and I sat down to talk about the problem we currently have of having no standard way to create icons. Here is my write up of this meeting, again, if you attended please add/correct me on anything and if you were not please ask for clarification where needed. Currently we have two modes of creating icons in MediaWiki 1) Using a font 2) Using SVGs with PNG fallbacks and the markup varies depending on what extension you look at. We discussed both approaches and advantages and disadvantages of each. One of the major disadvantages of the WikiFont is the additional HTTP request it creates to download the font and cannot be embedded in the stylesheet using data uris like SVGs can (due to URL size restrictions). One of the major advantages of WikiFont is you can design a grayscale icon, and style it using font colour. Shahyar was happy to move Flow to using SVG based fonts if we could build grayscale SVGs and change their colours using ResourceLoader. One concrete example is when you have an icon used in a constructive anchor. The icon needs to be green, but when hovered over a lighter green. Another advantage brought up by May was that currently she finds it much easier to build icons in this way, and that having to maintain separate coloured versions of the SVGs is a pain point to her. We decided that we should push towards using SVGs that can be built into fonts for the purpose of the app. As next steps 1) Monte to explore using SVGs in the Wikipedia apps. He will create font from SVGs. He will work with May to ensure her workflow is as easy as before. 2) Trevor is going to look into how we can automatically generate different colour versions of SVGs and automatically create PNGs from them. 3) I am going to aim to agree on a standard icon HTML markup for mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names. We aim to get all the above done by Sept 15th, 2014 so please poke us on the mailing list if you haven't had a follow up then. Full disorganised notes can be found here [2]. [1] https://www.mediawiki.org/wiki/Icon_standardisation [2] http://etherpad.wikimedia.org/p/Icon_standardisation

9 14

Help identifying a mediawiki ui button
by Jon Robson 24 Sep '14

24 Sep '14

In the profile page of mobile [1] we have a button at the bottom of the page. Is there any reason for it having blue text? When you take a look at the styleguide it seems like an mw-ui-progressive or just a simple mw-ui-button [2] We currently have a bug [3] associated with this button due to its uniqueness, so I'm keen to work out how to make this button be consistent with other buttons and opened a standardisation bug [4]. Can someone chip in on the bug report with how it should be styled in the language of the styleguide and if needed, provide a new icon for talk that isn't blue? Thanks! [1] https://en.m.wikipedia.org/wiki/Special:UserProfile/Jdlrobson [2] http://tools.wmflabs.org/styleguide/desktop/section-2.html [3] https://bugzilla.wikimedia.org/70947 [4] https://bugzilla.wikimedia.org/71071

3 4

First meeting of the front end standards group
by Tomasz Finc 23 Sep '14

23 Sep '14

Several of the engineers and advisors developing components for front end standardization met Friday to check status, set direction, and identify upcoming obstacles Big take aways: = MediaWiki theme for OOjs UI = * Should be finalized this week by Trevor and Bartosz * Server side to follow in the next couple of weeks = Icon system = * Bartosz has done the early work for a Grunt task that takes SVGs and a JSON config to generate colored SVG and PNG renderings and the corresponding LESS markup for them Notes and additional items from the discussion can be found on mw.org [1] Follow up items: * Generate prospective roadmap [Trevor] * Raise Template RFC w/ arch committee and make a decision [Brion] * Find out if Derk-Jan (cc'd) can join us next time * Discuss Server-side OOUI at next meeting Please update as necessary if you attended and I've forgotten or misrepresented anything. thanks all --tomasz [1] - https://www.mediawiki.org/wiki/FrontEndStandardsGroup/Weekly-Sept_19_2014

1 0

red links and color blindness
by Amir E. Aharoni 19 Sep '14

19 Sep '14

Hi, Disclaimer: Though I worked in an accessibility software company for three years, I know almost nothing about color blindness, so this question may be silly. A participant in a recent workshop for new Wikipedia editors workshop in Israel complained that he cannot tell red links from blue links because he is color-blind. Has this issue ever been noticed or addressed by anybody? The only related thing I can think of is the option to show links to nonexistent pages with a question mark, which was disabled on Wikimedia sites a year or two ago. Is there anything else? Thanks. -- Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי http://aharoni.wordpress.com ‪“We're living in pieces, I want to live in peace.” – T. Moore‬

10 19

we need a better sound icon
by Ryan Kaldari 19 Sep '14

19 Sep '14

If you've ever looked at Wikipedia articles for music, I'm sure you've seen the following icon: https://commons.wikimedia.org/wiki/File:Gnome-mime-sound-openclipart.svg See, for example, https://en.wikipedia.org/wiki/Goldberg_Variations The icon is fairly sloppy and isn't even symmetrical. I tried to clean it up a few months ago, but I've never really been happy with it. While this icon is not technically part of the MediaWiki software, it's use on our projects is ubiquitous. If any designers feel inspired to create a replacement, please let me know! Ryan Kaldari

3 4

Update: Standardizing icons across projects
by Tomasz Finc 17 Sep '14

17 Sep '14

Several front end engineers, designers, and others got together again to update on their progress to standardize icons across projects today. This was a follow to the previous conversation on 8/27 [1]. Big take aways: * Monte iterating and almost completing his SVG->Font python scripts * Trevor & Bartosz finalizing an npm module for customizing SVG generation * Jon needing additional support from Sam to move forward on mw ui icon markup Notes from the discussion can be found on etherpad [2] Follow up items: * Finish up SVG2FONT2SVG script (hopefully done in a week) (Monte) ** Create manifest for padding and other small options (Trevor) * Review Trevor's SVG/PNG generation (Everyone present once its out) * Followup with Sam for standard icon html mark-up (Matt) * Schedule team discussion follow up (Tomasz) Please update as necessary if you attended and I've forgotten or misrepresented anything. thanks all --tomasz [1] - https://lists.wikimedia.org/pipermail/mobile-l/2014-August/007922.html [2] - http://etherpad.wikimedia.org/p/IconStandardization

1 0

Getting $wgUseMediaWikiUIEverywhere = true to be the default
by Jon Robson 17 Sep '14

17 Sep '14

I'm committed to killing the global variable $wgUseMediaWikiUIEverywhere Prateek asked me today how he could help so in case it is not clear this is how developers/designers can help. Essentially as a first step we need to identify problems with form interfaces across MediaWiki and fix them. 1) Enable MediaWiki UI everywhere Developers: Add $wgUseMediaWikiUIEverywhere=true into your LocalSettings Non-developers: Explore http://mwui.wmflabs.org/wiki/Main_Page or http://en.m.wikipedia.beta.wmflabs.org/ (the mobile site already enables these to be the default) 2) Navigate around the site and make a note of interfaces that look wrong. Please file bugs against them here [1] * Places where buttons are constructive when they should be destructive / progress * Take screenshots of interfaces that look cluttered/cramped. * Identify pages which do not use MediaWiki UI styles at all 3) Let's fix the bugs 4) When this is all done, we will need to engage the community/communicate this change. We might need to run a beta feature. I'm hoping Jared or Steven can oversee this. Alternatively we might just want to turn it on if we do not consider it a massive change. [1] https://bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki&component=Me…

7 17

Re: [Design] [Wmfall] Daisy Chen is joining the UX Research team as Associate Design Researcher!
by Jonathan Morgan 16 Sep '14

16 Sep '14

That's totally awesome :) - Jonathan On Mon, Sep 15, 2014 at 11:36 AM, Abbey Ripstra <aripstra(a)wikimedia.org> wrote: > Hello Everyone, > > > It is with great happiness, and excitement that we announce Daisy Chen is > joining the UX Research team as Associate Design Researcher! > > Since April, 2012, Daisy has been working at the Foundation on the Legal > team as a paralegal. With a BA in Sociology providing relevant > facilitation, observation and research design experience, Since April 2014, > she began contributing time and effort to UX research projects and in > support of design iteration with the UX team. > > Along with collaborating through her role in Legal to support setup, and > vetting of UX Research tools, policies and processes, Daisy has recently > contributed to some larger UX research projects. With this work, Daisy > has already been making important contributions to the UX Research team. > > Daisy’s design research capabilities and enthusiasm are a very welcome and > important addition to this growing team. > > > Welcome Daisy!! > > > > > Abbey Ripstra > > Lead Design Research Manager > > Wikimedia Foundation > > > _______________________________________________ > Wmfall mailing list > Wmfall(a)lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/wmfall > > -- Jonathan T. Morgan Learning Strategist Wikimedia Foundation User:Jmorgan (WMF) <https://meta.wikimedia.org/wiki/User:Jmorgan_(WMF)> jmorgan(a)wikimedia.org

1 0

WikiFont and accessibility
by Derk-Jan Hartman 10 Sep '14

10 Sep '14

Something that came up yesterday when I was discussing with User:Rexx about the new WikiFont, is how it will influence accessibility, since it is actually a 'character' that will have effects on screenreader software. I have no idea what the effect will be, so if we start using that, I very much encourage that we should go and find out and then document some of the knowledge we gather into it's style and usage recommendations guidelines. DJ

11 20

Living Styeguide: Questions
by Prateek Saxena 09 Sep '14

09 Sep '14

Hey, I submitted some [1] patches [2] to add the sub-sections links for the current section [3]. It required some JS as handlebars doesn't allow comparison conditions without additional helpers (though, this isn't the approach that I took, should I?). I was about to start work on auto-highlighting links as you scroll but had a few questions— * Does the navigation remain fixed on the side of the page? * If the content overflows do we just hide it like the Bootstrap docs [4]? The trello card mentions auto-expand, but as we have different pages for each section there is no list to expand to. —prtksxna [1] https://gerrit.wikimedia.org/r/158855 [2] https://gerrit.wikimedia.org/r/158856 [3] https://trello.com/c/ZusIHb5G/8-organise-components-under-a-ui-elements-sec… [4] http://getbootstrap.com/components/ [5] https://trello.com/c/tKKWz3fo/7-javascript-auto-expand-table-of-contents

2 2

← Newer
1
...
18
19
20
21
22
23
24
...
61
Older →

Jump to page:

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design