Design October 2014

design@lists.wikimedia.org

27 participants
13 discussions

Icon SVGs needed
by Jon Robson 06 Nov '14

06 Nov '14

I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading. 1) Firstly are all of the icons I list below covered by the WikiFont ? 2) Secondly, how can I extract them (looks at Monte :-)) Icons inventory: [all black/grey unless stated] talk icon watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white) logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays) upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same) down arrow (used for a collapsed section) up arrow ( used for open collapsed section) back icon ( a left arrow) previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them) next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them) bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)

8 12

[UI Standardization] GUI template
by May Tee-Galloway 30 Oct '14

30 Oct '14

Team, I will be preparing a GUI template to help the team's design process towards a standardized interface smoother. But before I do that, I'd like to hear what you think will be relevant and helpful to you, it helps me prioritize what's most helpful now. I'm including some devs in the loop with this too just to see if they have any input. If don't know what a Graphical User Interface <http://en.wikipedia.org/wiki/Graphical_user_interface> (GUI as in "goooey") template is, it's a template mainly for designers while designing products. Think of it like a sticker book where every control, list item, text are individual stickers, and you put them together with a few given rules like space, sizes, composition etc. So it's safe to say that I'll be making some stickers for designers. This GUI template sticker book is typically presented in file formats that designers usually work with, most popularly Illustrator .ai, Sketch .sketch, and Photoshop .psd files. But I'll be starting with either a .sketch or a .ai file. -- Here are some examples: Apple's GUI <http://www.teehanlax.com/tools/ipad/#> Android's old version GUI <http://developer.android.com/design/downloads/index.html> Google's Material Design GUI <http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-she…> -- This etherpad has a few ideas listed <http://etherpad.wikimedia.org/p/GUI>. I hope to help us all look and feel like one product soon and make everyone's life as easy as possible while getting there. Let me know how this can be integrated into your work better. Please respond at etherpad <http://etherpad.wikimedia.org/p/GUI> by EOD October 31st. May

3 4

Your friend rahul14m93@gmail.com cannot see your photo
by rahul14m93＠gmail.com 25 Oct '14

25 Oct '14

1 0

Material Design for Bootstrap
by shi zhao 22 Oct '14

22 Oct '14

see http://fezvrasta.github.io/bootstrap-material-design/ Chinese wikipedia: http://zh.wikipedia.org/ My blog: http://shizhao.org twitter: https://twitter.com/shizhao [[zh:User:Shizhao]]

1 0

Google icon set release (CC-BY-SA)
by Erik Moeller 22 Oct '14

22 Oct '14

FYI: http://boingboing.net/2014/10/20/google-releases-set-of-beautif.html -- Erik Möller VP of Product & Strategy, Wikimedia Foundation

5 5

rahul14m93@gmail.com has indicated you're a friend. Accept?
by rahul14m93＠gmail.com 21 Oct '14

21 Oct '14

Hi, rahul14m93(a)gmail.com wants to follow you. ****** Is rahul14m93(a)gmail.com you friend? ****** If Yes please follow the link below: http://invites.infoaxe.net/signup_e.html?fullname=A+List+For+The+Design+Tea… If No please follow the link below: http://invites.infoaxe.net/signup_e.html?fullname=A+List+For+The+Design+Tea… Follow the link below to remove yourself from all such emails http://invites.infoaxe.net/uns_inviter.jsp?email=design@lists.wikimedia.org…

1 0

MW UI Modals First Version & Concept
by Shahyar Ghobadpour 20 Oct '14

20 Oct '14

Hey everyone, We have developed a modal component for Flow, based on the design spec for MediaWiki-UI modals/dialogs. Thus, we have named it *mw.Modal*. A very basic and feature-incomplete version of this modal can be seen at: http://en.wikipedia.beta.wmflabs.org/wiki/Talk:Flow (hover over ellipsis icon in topic, click "hide") This modal implements the design outlined here <https://trello.com/c/OLnPx7M4/331-g-11-spike-build-modal-dialog-box-for-hid…>, but automates a lot of the visual aspects of it based on the input you give it. Below is an almost-verbatim copy of the original email I sent to another mailing list, (discussion seen here: https://lists.wikimedia.org/mailman/private/e2/2014-September/002494.html ), detailing the general concepts and use: *First, an example using event binding:* > // Instantiate mw.Modal > *var* modal = new mw.*Modal*(); > // Open up a modal with HTML > modal.*open*( "<button>Bye!</button>" ); > // Bubble click to wrapper, use it to close the parent modal of the target > $( modal.*getContentNode*() ).*bind*( 'click', 'button', function () { > mw.Modal.*close*( this ); } ); *Visuals (markup and CSS):* As it stands, you can see the current designs for modals here <https://trello.com/c/OLnPx7M4/331-g-11-spike-build-modal-dialog-box-for-hid…>, with a screenshot of a Flow use case. This is being done with some very simple markup: flow-ui-modal flow-ui-modal-layout flow-ui-modal-heading* (optional)* content + quick navigators* (automatic)* flow-ui-modal-content content The CSS for this works back to IE6. It automatically centers on the viewport, and scales up to max the viewport width/height, at which point the modal would start showing scrollbar(s). No JS is needed for any of this. *Automatic enhancement:* - Shows title at top if it exists. - Shows X on left of title to close if title exists. - Shows ✓ form submission shortcut if title exists, and form with a single primary button exists in content. Caveat: This does not support off-center placement of modals (eg. placing a modal by a specific element). For those use cases, I imagine *mw-ui-tooltip* would be the solution, and it was written with that in mind. *Use (JavaScript):* A constructor would be called (modal = new mw.Modal( [ String name, ] [ Object settings ] )), which would give you access to control the flow of your modal. name may be omitted, but is simply there so you can easily determine which modal is currently active with mw.Modal.getModal. settings can have the following keys: open (same as modal.open), and title. 1. modal.*open*( [ Array|Object|Element|jQuery|String contents ] ) - You can visually render the modal using this method. Accepts Element/jQuery, or HTML String. Returns mw.Modal instance. - Multi-step modals with an Array. You can pass [ Element, Element ] to have two steps. - Multi-step modals with an Object to have *named step keys*. Pass { *steps*: [ 'first', 'second', 'foobar' ], *first*: Element, *second*: Element, *foobar*: Element } for three steps. 2. modal.*close*() - Closes and destroys the given instance of mw.Modal. - *(Global) *mw.Modal.close( [ Element node ] ) - Closes the currently-open modal (no args), or the modal in which node belongs. Returns false if none, true if successfully destroyed. 3. modal.*go*( int|String to ) - For a multi-step modal, goes to a specific step by number or name. Returns false if invalid step, mw.Modal instance otherwise. modal.*next*() and modal.*prev*() - For a multi-step modal, goes to the previous or next step, if any are left. Returns false if none, mw.Modal instance otherwise. - *(Global) *mw.Modal.*go*( int|String to, [ Element node ] ) - Go to step on the currently-open modal (no args), or the modal in which node belongs. Returns false if none, mw.Modal instance otherwise. - *(Global) *mw.Modal.*next*( [ Element node ] ) - Next/prev step on the currently-open modal (no args), or the modal in which node belongs. Returns false if none, mw.Modal instance otherwise. 4. modal.*setTitle*( String title ) - Changes the title of the modal. 5. modal.*addSteps*( Array|Object|Element|jQuery|String contents ) - Adds one or more steps, using the same arguments as modal.open. May overwrite steps if any exist with the same key in Object mode. Returns mw.Modal instance. 6. modal.*setStep*( int|String to, Element|jQuery|String contents ) - Changes a given step. If String to does not exist in the list of steps, throws an exception; int to always succeeds. If the given step is the currently-active one, rerenders the modal contents. Returns mw.Modal instance. *Theoretically, you could use setStep to keep changing step 1 to create a pseudo-multi-step modal.* 7. modal.*getSteps*() - Returns an Object with steps, and their contents, eg. { *steps*: [ 1, 'foo', 'bar', 4 ], *1*: Element, '*foo*': Element, '*bar*': Element, *4*: Element } - *(Global)* mw.Modal.*getSteps*( [ Element node ] ) - Get an Array of steps on the currently-open modal (no args), or the modal in which node belongs. False on failure. 8. modal.*getNode*() - Returns the modal's wrapper Element, which contains the header node and content node. modal.*getContentNode*() - Returns the wrapping Element on which you can bind bubbling events for your content. - *(Global)* mw.Modal.*getContentNode*( [ Element node ] ) - Returns the wrapping content Element on the currently-open modal (no args), or the modal in which node belongs. False on failure. 9. modal.*setInteractiveHandler*( String name, Function callback ) - See "inline event handlers" below. Some helper handlers for modals are predefined, including "modalClose", "modalNavigate" (with *data-mwui-modal-to* attribute), "modalPrev", and "modalNext". An additional attribute, *data-mwui-interactive-target* is a jQuery selector which allows you to point that event to interact with another element, without having to put this selector in your JS. It supports an unorthodox selector, the "closest parent" selector: "<". eg. *data-mwui-interactive-target="< .foo .bar"* will find the closest parent .foo, and then any nodes within .bar. 10. *(Global) *mw.Modal.*getModal*() - Returns an mw.Modal instance if one is active, false otherwise. 11. modal.*getName*() - Returns the modal's name, as defined in initialization. *mw.Modal events:* mw.Modal also inherits *ooJS' EventEmitter*. So, you may bind to individual instances of mw.Modal, or even the global mw.Modal class itself. See wiki <http://www.mediawiki.org/wiki/OOjs/Events>. Current events list: *open*(mw.Modal instance), *close*(mw.Modal instance, Element target), *navigate*(mw.Modal instance, String nextStepKey), *render*(mw.Modal instance) (only triggered on the first render of a given piece of content, not subsequent ones). Returning *false* from any of these event callbacks will cancel the event from continuing. *Inline event callers:* You can use special *data-* attributes to trigger/listen for events without having to specifically bind to those elements. This allows you to write more dynamic HTML, without having to adjust JavaScript when you change elements or selectors. Some predefined helper handlers already exist (see #8 above). *Example:* <button *data-mwui-interactive-handler*="*modalClose*">Close</button> > These event handling techniques are borrowed from the way Flow currently "binds" events via markup. We do this, because we found a significant amount of code was dedicated to finding elements with selectors in JS. Any changes to markup required a change to the JS as well. This method allows us to change the markup without changing the JS in many cases, as the selectors are localized to the HTML. In addition, cumbersome parent selecting is handled with our own "closest" selector (<). In addition, we've been experimenting with an event forwarding mechanism which "forwards" mouse & keyboard events from within the modal, out to the element which triggered the modal to begin with (or any other arbitrary node). This allows us to capture events within the modal, without having to bind directly to it. --Shahyar

2 2

UI form standardisation groans
by Jon Robson 13 Oct '14

13 Oct '14

Thanks to Lego this conversation was brought to my attention. Basically a mediawiki ui progressive button sneaked into the special contributions page. Although not a big deal (in my opinion) this has caused a tiny bit of a stir as might be expected (Facebookization) and gives us a useful insight into how any form changes might be perceived. This button is no longer blue on mediawiki.org and will go back to normal styling on next deploy. It seems silly to lightning deploy a fix for this in my opinion. Read more here: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_%28technical%29#Enormo… I've replied, feel free to do so also. What happened: * https://gerrit.wikimedia.org/r/#/c/162121/ got deployed. * This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.

9 8

Tooltip styles
by Gergo Tisza 07 Oct '14

07 Oct '14

Hi all, I need to create some tooltips for the MediaViewer project which have a more robust look and behavior than the usual tipsy tooltips. (See the second mockup in this specification <https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/719>.) They would still be implemented via tipsy, but would need to be reskinned. This seems to be the kind of functionality that should not reimplemented by each team with a different look and feel and a duplication of effort, but should be done once in some central location so it is usable by all. So I am wondering if something like this exist already, and if it doesn't , what rules should I follow to make sure my work is useful for other teams? Pau pointed me at the Tipsy on mediawiki.ui <https://trello.com/c/vr0Oai8G/18-tipsy> trello card, which is exactly what I would need, but had no activity since April, and it's hard to figure out the state of the project from it (I did not find any related code in mediawiki.ui, at any rate). Are there any results of that which I could use?

5 4

quiet buttons are too quiet for mobile
by Ryan Kaldari 06 Oct '14

06 Oct '14

According to the living style guide ( https://tools.wmflabs.org/styleguide/desktop/section-2.html) the current styling for "quiet buttons" is dark grey bold text with a blue hover state, and no outline, underline, or other indication it is clickable (or even what area it encompasses). Since we don't have hover states on mobile, there is no way to tell that a quiet button is actually a button (rather then just grey text). And you can't always assume this just from the text being a verb. For example, in the mobile login CTA we have "Help improve this page", "Log in", "Sign up", and "Edit without logging in". "Help improve this page" isn't clickable even though it's a verb in grey text. What do you guys think about this problem? Ryan Kaldari

3 2

2025

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design October 2014