Hello!
I was showing May the 'WikiLove' feature deployed on our wikis yesterday, and notices that the UI felt a bit... dated. With help from Prateek Saxena (who did the design and most of the CSS), and LegoKTM & Kaldari (who helped with CR), I think it has been made slightly less ugly now.
As before and after shots, it looked like https://www.dropbox.com/s/mdx7frtablxebiy/Screenshot%202014-02-06%2023.12.45... and now looks like https://www.dropbox.com/s/ez3x8lliew37f2a/Screenshot%202014-02-06%2023.12.29...
It should be deployed to testwiki next Thursday, and English Wiki the thursday after. Both Prateek and May told me that we should replace the icons as well, which sounds like a good idea to me (once we have icons made by people who are not-me :)).
Thanks everyone!
And not to mention it has Agora buttons now!
On Thu, Feb 6, 2014 at 12:40 PM, Yuvi Panda yuvipanda@gmail.com wrote:
Hello!
I was showing May the 'WikiLove' feature deployed on our wikis yesterday, and notices that the UI felt a bit... dated. With help from Prateek Saxena (who did the design and most of the CSS), and LegoKTM & Kaldari (who helped with CR), I think it has been made slightly less ugly now.
As before and after shots, it looked like
https://www.dropbox.com/s/mdx7frtablxebiy/Screenshot%202014-02-06%2023.12.45... and now looks like
https://www.dropbox.com/s/ez3x8lliew37f2a/Screenshot%202014-02-06%2023.12.29...
It should be deployed to testwiki next Thursday, and English Wiki the thursday after. Both Prateek and May told me that we should replace the icons as well, which sounds like a good idea to me (once we have icons made by people who are not-me :)).
Thanks everyone!
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Looks great and a solid improvement!
On Feb 6, 2014, at 1:01 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
And not to mention it has Agora buttons now!
On Thu, Feb 6, 2014 at 12:40 PM, Yuvi Panda yuvipanda@gmail.com wrote: Hello!
I was showing May the 'WikiLove' feature deployed on our wikis yesterday, and notices that the UI felt a bit... dated. With help from Prateek Saxena (who did the design and most of the CSS), and LegoKTM & Kaldari (who helped with CR), I think it has been made slightly less ugly now.
As before and after shots, it looked like https://www.dropbox.com/s/mdx7frtablxebiy/Screenshot%202014-02-06%2023.12.45... and now looks like https://www.dropbox.com/s/ez3x8lliew37f2a/Screenshot%202014-02-06%2023.12.29...
It should be deployed to testwiki next Thursday, and English Wiki the thursday after. Both Prateek and May told me that we should replace the icons as well, which sounds like a good idea to me (once we have icons made by people who are not-me :)).
Thanks everyone!
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
--- Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
Hi Yuvi & Prateek! This is an improvement! Couple of more minor items that could further help the design work if you guys didn't think of it already. If there were constraints with most of the following items then just ignore =]
- In the right column, align all the items along one scan line. The labels are already in bold and helps break up the content. - Green is reserved for terminal action, so not sure if the numbers should be set against a green background and if they add any value, a grey should suffice for knocking them out. - You can combine 'Enter a subject and a message as one label and two clean form fields' below it? - Labels also don't need colons or punctuation at the end. - If an item is selected in the left column with the blue background, you could lose the grey rule above it.
Just wanted to see if you guys can do a bit more with it, this is awesome.
On Thu, Feb 6, 2014 at 1:06 PM, Brandon Harris bharris@wikimedia.orgwrote:
Looks great and a solid improvement!On Feb 6, 2014, at 1:01 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
And not to mention it has Agora buttons now!
On Thu, Feb 6, 2014 at 12:40 PM, Yuvi Panda yuvipanda@gmail.com wrote: Hello!
I was showing May the 'WikiLove' feature deployed on our wikis yesterday, and notices that the UI felt a bit... dated. With help from Prateek Saxena (who did the design and most of the CSS), and LegoKTM & Kaldari (who helped with CR), I think it has been made slightly less ugly now.
As before and after shots, it looked like
https://www.dropbox.com/s/mdx7frtablxebiy/Screenshot%202014-02-06%2023.12.45...
and now looks like
https://www.dropbox.com/s/ez3x8lliew37f2a/Screenshot%202014-02-06%2023.12.29...
It should be deployed to testwiki next Thursday, and English Wiki the thursday after. Both Prateek and May told me that we should replace the icons as well, which sounds like a good idea to me (once we have icons made by people who are not-me :)).
Thanks everyone!
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Thanks for the feedback! :) Replies inline
On Fri, Feb 7, 2014 at 2:41 AM, Vibha Bamba vbamba@wikimedia.org wrote:
- In the right column, align all the items along one scan line. The labels
are already in bold and helps break up the content.
Yeah, I need to migrate this to use Agora forms, which will make this happen. It wasn't as easy as I had hoped it would be, so I'll take a shot at it this weekend.
- Green is reserved for terminal action, so not sure if the numbers should
be set against a green background and if they add any value, a grey should suffice for knocking them out.
Sure, give me a color value? Prateek can probably weigh in on this as well, but we used green simply because that was what the images before them were :)
- You can combine 'Enter a subject and a message as one label and two clean
form fields' below it?
Should be possible. But some types of WikiLove don't have a 'header' (Barnstars, for example). And I think this can be customized on a per-wiki basis as well (Hebrew Wiki doesn't have kittens, for example). I'll look into it.
- Labels also don't need colons or punctuation at the end.
Will get rid of 'em when I move these to Agora forms.
- If an item is selected in the left column with the blue background, you
could lose the grey rule above it.
Should be doable as well.
Thanks for the feedback! I'll ping the list again as/when me and Prateek implement these.
Hi Yuvi,
From this link https://www.mediawiki.org/wiki/File:Guide_Color.png
We could just use #E1E1E1 for the Number + Label combination.
If you feel like the number needs a background, use EDEDED which is topic box fill color in flow.
-V
On Thu, Feb 6, 2014 at 1:18 PM, Yuvi Panda yuvipanda@gmail.com wrote:
Thanks for the feedback! :) Replies inline
On Fri, Feb 7, 2014 at 2:41 AM, Vibha Bamba vbamba@wikimedia.org wrote:
- In the right column, align all the items along one scan line. The
labels
are already in bold and helps break up the content.
Yeah, I need to migrate this to use Agora forms, which will make this happen. It wasn't as easy as I had hoped it would be, so I'll take a shot at it this weekend.
- Green is reserved for terminal action, so not sure if the numbers
should
be set against a green background and if they add any value, a grey
should
suffice for knocking them out.
Sure, give me a color value? Prateek can probably weigh in on this as well, but we used green simply because that was what the images before them were :)
- You can combine 'Enter a subject and a message as one label and two
clean
form fields' below it?
Should be possible. But some types of WikiLove don't have a 'header' (Barnstars, for example). And I think this can be customized on a per-wiki basis as well (Hebrew Wiki doesn't have kittens, for example). I'll look into it.
- Labels also don't need colons or punctuation at the end.
Will get rid of 'em when I move these to Agora forms.
- If an item is selected in the left column with the blue background, you
could lose the grey rule above it.
Should be doable as well.
Thanks for the feedback! I'll ping the list again as/when me and Prateek implement these.
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Fri, Feb 7, 2014 at 2:36 AM, Brandon Harris bharris@wikimedia.org wrote:
Looks great and a solid improvement!
Thank you :)
On Fri, Feb 7, 2014 at 2:31 AM, May Tee-Galloway mgalloway@wikimedia.org wrote:
And not to mention it has Agora buttons now!
Indeed they are! This also has a nice side effect of improving performance a bit, since the older buttons were either built with images or with jQuery UI.
On Thu, Feb 6, 2014 at 12:40 PM, Yuvi Panda yuvipanda@gmail.com wrote:
I was showing May the 'WikiLove' feature deployed on our wikis yesterday, and notices that the UI felt a bit... dated. With help from Prateek Saxena (who did the design and most of the CSS), and LegoKTM & Kaldari (who helped with CR), I think it has been made slightly less ugly now.
As before and after shots, it looked like
https://www.dropbox.com/s/mdx7frtablxebiy/Screenshot%202014-02-06%2023.12.45... and now looks like https://www.dropbox.com/s/ez3x8lliew37f2a/Screenshot%202014-02-06% 2023.12.29.png
It should be deployed to testwiki next Thursday, and English Wiki the thursday after. Both Prateek and May told me that we should replace the icons as well, which sounds like a good idea to me (once we have icons made by people who are not-me :)).
Nice work y'all. :) Thanks for being bold.