wiki buttons design

classic Classic list List threaded Threaded
18 messages Options
Reply | Threaded
Open this post in threaded view
|

wiki buttons design

Alexander Bobrov

Hi,


A little addition: search button of the same style:
  http://tactics.indians.ru/tmp/wiki/wiki2.shtml



Best regards,

Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: wiki buttons design

Tels
-----BEGIN PGP SIGNED MESSAGE-----

Moin Alexander,

On Sunday 15 January 2006 18:44, Alexander Bobrov wrote:
> Hi,
>
>
> A little addition: search button of the same style:
>   http://tactics.indians.ru/tmp/wiki/wiki2.shtml

Just a few remarks:

* I do not like the overly 3D design. The entire old skin design is more
or less flat  and the new buttons deviate too much from that. I think
making them 3D (especially the search button!) is a solution in search of
a problem :)
* The new edit buttons are nice, but apart from the 3D problem, they also
suffer from reduced contrast. That might be due to JPG compression, but
IMHO the black "A" was much better readable than your new dark grey
version, especially because the background is now also more grey/silver.
* In additon, the blue buttons stand out more, the silver ones almost
vanish on the white background (since they don't have a black border,
either)

I think a flat button design that matches the "1px solid dark-grey"
borders of the rest of the site might be a good idea - in fact, just like
the current search button.

Best wishes,

Tels

- --
 Signed on Sun Jan 15 18:50:10 2006 with key 0x93B84C15.
 Visit my photo gallery at http://bloodgate.com/photos/
 PGP key on http://bloodgate.com/tels.asc or per email.

 "You know the world is going crazy when the best rapper is a white guy,
 the best golfer is a black guy, the tallest guy in the NBA is Chinese,
 the Swiss hold the America's Cup, France is accusing the U.S. of
 arrogance, Germany doesn't want to go to war, and the three most
 powerful men in America are named 'Bush', 'Dick', and 'Colon'. Need I
 say more?" -Chris Rock

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.4 (GNU/Linux)

iQEVAwUBQ8qMkXcLPEOTuEwVAQGwUgf/QORTQtn0+CyM/oqkKAJr0eUObkfBoJh8
7RNrv5byh64N9SnZQdTD6ImGatZo6KnnJiBFPcHZRCWvSwF1xDwBjYkb1+2RL8IO
tOsQUZg+BDmtdaq915qoSf7A4xU0dGauteUdHbGl3hWgVyOZGlgEh32veWkbOLdg
VfVRadN6InIxydJJ5dJPbdga5ko8ZSZtFxr4Zpmibk+gjsK0TvNZ2K6z+2IKTPra
1n6TyInV66D8s8VGEXqe9cWvsgcxZ91anapxppk0YrBcf8niR8kvxsTzTeckrMcD
JHgDntDM0jV8BWlDJDQ1QC5r9G2NRGOPOYkIZ5jOOg7o4JwWi7LzvQ==
=LDZ4
-----END PGP SIGNATURE-----
_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re[2]: wiki buttons design

Alexander Bobrov

Tels,

T> The entire old skin design is more or less flat

Negative. Old buttons are bordered and gradiented.


T> I think making them 3D (especially the search button!) is a solution in search of
T> a problem :)

Even in overall flat design it is highly recommended to have one's
control (interactive) elements highlighted. Usability. The volume is
the best way to do it.


T> * The new edit buttons are nice, but apart from the 3D problem, they also
T> suffer from reduced contrast. That might be due to JPG compression, but
T> IMHO the black "A" was much better readable than your new dark grey
T> version, especially because the background is now also more grey/silver.

Not JPEG compression. Intentionally - to compensate its large,
relatively to other pictos, strokes. But perhaps you are right. Let's
compare:
  http://tactics.indians.ru/tmp/wiki/wiki3.shtml


T> * In additon, the blue buttons stand out more, the silver ones almost
T> vanish on the white background (since they don't have a black border,
T> either)

Another variant - to not to vanish. But it is more complex, less flat.
  http://tactics.indians.ru/tmp/wiki/wiki5.shtml


T> I think a flat button design that matches the "1px solid dark-grey"
T> borders of the rest of the site might be a good idea - in fact, just like
T> the current search button.

I had this idea too.
  http://tactics.indians.ru/tmp/wiki/wiki5d.shtml

And I don't like it. It looks like a work of a man who doesn't like
his work.



Thank you, Tels.

Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: wiki buttons design

Tels
-----BEGIN PGP SIGNED MESSAGE-----

Moin Alexander,

(Maybe we should continue this offlist :)

On Sunday 15 January 2006 20:34, Alexander Bobrov wrote:
> Tels,
>
> T> The entire old skin design is more or less flat
>
> Negative. Old buttons are bordered and gradiented.

I meant the rest of the skin (e.g. the "edit this article" docks, the menu
box etc). They are all essential flat, so the buttons should "fit" in.

> T> I think making them 3D (especially the search button!) is a solution
> in search of T> a problem :)
>
> Even in overall flat design it is highly recommended to have one's
> control (interactive) elements highlighted. Usability. The volume is
> the best way to do it.

Yes, but I think that if the entire design is "flat", then the buttons
should stand out by color, or by being darker, or by having a different
border, and not by being more 3D. It just looks inconsistent to me.

(my opinion, of course :)

For instance, if you color buttons bright orange, they will stand out,
even though they do not have a "shading" or 3D effect.

Nothing against 3D effects, but I think it doesn't fit the default skin.

> T> * The new edit buttons are nice, but apart from the 3D problem, they
> also T> suffer from reduced contrast. That might be due to JPG
> compression, but T> IMHO the black "A" was much better readable than
> your new dark grey T> version, especially because the background is now
> also more grey/silver.
>
> Not JPEG compression. Intentionally - to compensate its large,
> relatively to other pictos, strokes. But perhaps you are right. Let's
> compare:
>   http://tactics.indians.ru/tmp/wiki/wiki3.shtml

Definitely better.

> T> * In additon, the blue buttons stand out more, the silver ones
> almost T> vanish on the white background (since they don't have a black
> border, T> either)
>
> Another variant - to not to vanish. But it is more complex, less flat.
>   http://tactics.indians.ru/tmp/wiki/wiki5.shtml

Wrong URL? (the "all flat" url below is the same as this :)

> T> I think a flat button design that matches the "1px solid dark-grey"
> T> borders of the rest of the site might be a good idea - in fact, just
> like T> the current search button.
>
> I had this idea too.
>   http://tactics.indians.ru/tmp/wiki/wiki5d.shtml
>
> And I don't like it. It looks like a work of a man who doesn't like
> his work.

I really like it for being consistent. I would probably add a shade of
color to the background, so that the buttons stand out more. Like so:

        http://bloodgate.com/tmp/wiki_buttons_bright.png

This also adds a nice splash of color to the otherwise "silvery" page.

A related side-note: Why make the buttons images? At first I thought they
are so small because you monitor has a different resolution, but it then
occured to me they are *always* that small (silly me :), because they are
images with a fixed size. On my 1600x1200 resolution the buttons are
really really tiny.

It would be possible to replace them with some HTML code like so:

        <span class="button bold" onmouseddown="dosomething">B</span>
        <span class="button headline" onmouseddown="dosomething">A</span>
        <span class="button link" onmouseddown="dosomething">Link</span>
        ...

That would allow the buttons to change with the texsize (height: 1em). It
would also allow for the buttons to be colored differently in different
skins. I think that would be worth it. [0]

Best wishes,

Tels

[0] While we are at it, move the button definitions to a config file. It
is a pain in the lower regions to add custom buttons back after each
software update...

- --
 Signed on Sun Jan 15 21:39:16 2006 with key 0x93B84C15.
 Visit my photo gallery at http://bloodgate.com/photos/
 PGP key on http://bloodgate.com/tels.asc or per email.

 "helft den armen vögeln"  -- gegen kleinschreibung

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.4 (GNU/Linux)

iQEVAwUBQ8q38XcLPEOTuEwVAQFAZQf+NqloW52cDA1lJWx3KDxHLt0bA5CupX6o
lDixk8zCZ4c82wfLl3Dd9G0BmDUTzDg6ZpNr6wXxxrjU9TXyJpTm7M/jnSU+3NL0
nPQAFiaARLgd2nJLqFZk5zT37Rf/NgbSf3WW7fp5YVRhkR4RroTahGdSTahJkpDf
B7PveRGdPwdZkjaXCy3WeEfyV9brT7hL3suW7cm7OUxTFQH67BUBKBsGkLQ3hj66
pMc3guOlyOXFoQ/aBq4Fu6WiDCUgC9LHjT88LyJu8yPtA0c8NnykWpr6SXI+m0TT
ZDFEHHrTEwZz9s2Cnvk31LGLMUPxxR/Q1UpV2ZvAYtEfaS+0DcHKow==
=NXrD
-----END PGP SIGNATURE-----
_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re[2]: wiki buttons design

Alexander Bobrov
In reply to this post by Tels

And, the last variants:
  http://tactics.indians.ru/tmp/wiki/wiki6.shtml



Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: wiki buttons design

Emilio Gonzalez
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Alexander Bobrov wrote:
> And, the last variants:
>   http://tactics.indians.ru/tmp/wiki/wiki6.shtml
>
>
>
> Alex Bobrov____________________________________________
> Indian Summer Studio                 http://indians.ru/

Great work Alexander, I hope your changes will be included :)

Emilio Gonzalez [Porao]
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.1 (GNU/Linux)
Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org

iD8DBQFDyso4+A561B9ENWoRAmJIAKCsAmhTuSncXklbAnwuZYBROKudMQCgxffS
3cBKS4tYsjnmF15aJZYbZAk=
=a6pX
-----END PGP SIGNATURE-----

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re[2]: wiki buttons design

Александр Сигачёв
In reply to this post by Alexander Bobrov
> And, the last variants:
>   http://tactics.indians.ru/tmp/wiki/wiki6.shtml

I think, it's not good idea to use English word "Link" on button.

--
Alexander Sigachov
_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re[4]: wiki buttons design

Alexander Bobrov

>> And, the last variants:
>>   http://tactics.indians.ru/tmp/wiki/wiki6.shtml

ÀÑ> I think, it's not good idea to use English word "Link" on button.

Why?

What do you suggest?



Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

......................................................................
God is Real, unless declared as Integer;
......................................................................

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re: wiki buttons design

Alexander Bobrov
In reply to this post by Emilio Gonzalez


EG> Great work Alexander, I hope your changes will be included :)
EG> Emilio Gonzalez [Porao]


Thank you, Emilio.


Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

......................................................................
Time flies like arrow; fruit flies like banana.
......................................................................



_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re[4]: wiki buttons design

Ævar Arnfjörð Bjarmason
In reply to this post by Alexander Bobrov
On 1/16/06, Alexander Bobrov <[hidden email]> wrote:
>
> >> And, the last variants:
> >>   http://tactics.indians.ru/tmp/wiki/wiki6.shtml
>
> ÀÑ> I think, it's not good idea to use English word "Link" on button.
>
> Why?
>
> What do you suggest?

Something that conveys the idea without requiring you to know English,
like having an italic letter conveys the idea of italic text, bold
letter the idea of bold text etc

B.t.w. these are quite nice, could you release them under the GPL-2 or
later and provide the sourcefiles for them so they could potentially
be included in MW?

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re[4]: wiki buttons design

Phil Boswell
"Ævar Arnfjörð Bjarmason" <[hidden email]>
wrote in message
news:[hidden email]...
> On 1/16/06, Alexander Bobrov <[hidden email]> wrote:
>> >> And, the last variants:
>> >>   http://tactics.indians.ru/tmp/wiki/wiki6.shtml
>> ÀÑ> I think, it's not good idea to use English word "Link" on button.
>> Why?
>> What do you suggest?
> Something that conveys the idea without requiring you to know English,
> like having an italic letter conveys the idea of italic text, bold
> letter the idea of bold text etc

Something like a tilde surrounded by double square brackets would probably
be appropriate:

[[~]]

You could stretch the tilde, or something to make it clear it's a
placeholder signifying that there should be at least one entire word in
there.
--
Phil
[[en:User:Phil Boswell]]



_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re: Re[4]: wiki buttons design

Erik Moeller-2
Phil Boswell:
> Something like a tilde surrounded by double square brackets would probably
> be appropriate:
>
> [[~]]

Please, no cryptic symbols like that. The point of a toolbar is to make
it intuitive to format wikitext. A newbie neither knows what double
square brackets mean nor what "~" could stand for. The blue, underlined
"Ab" works perfectly well. Sure, it's Latin characters, but they are
internationally recognizable.

Best,

Erik
_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re[6]: wiki buttons design

Alexander Bobrov
In reply to this post by Ævar Arnfjörð Bjarmason
>> >> And, the last variants:
>> >>   http://tactics.indians.ru/tmp/wiki/wiki6.shtml

>> AN> I think, it's not good idea to use English word "Link" on button.

>> Why? What do you suggest?

vAB> Something that conveys the idea without requiring you to know English,
vAB> like having an italic letter conveys the idea of italic text, bold
vAB> letter the idea of bold text etc

Well, people really don't need to understand the meaning of the word
"Link" because it is underlined and blue-colored, as a normal link
could. The formatting speaks for itself, as in "B" and "i".

So, one who against blue underlined "Link" must be against bold "B" and
italicized "i" because these letters are for the English words "bold"
and "italic".

Now let us compare "Link" vs "Ab". What means "Link" for Wikipedia users?
At first - who they are, and what language they understand? Let's
refer to articles amount:
   English        920 000
   Deutsch        341 000
   Francais       224 000
   Polski         176 000
   Nihongo        173 000
   Italiano       132 000
   Svenska        128 000
   Nederlands     122 000
   Portugues       95 000
   Espanol         86 000
   + 26 languages with 10 000 =
   + ~40 with 1000
English 920K vs non-English ~1800K

A double superiority [except for, e.g. I am Russian and it is me who
proposes English word ;) ]. We have one part of comprehensible "Links"
against two parts of obscure. 1 to 2, 33%. But with "Ab" we have 100%
of nonsense, for both English-speakers and everybody else. What is it:
an abbreviation for "abdominal"? =)

I have another idea though. The link we discuss is _the inner Wiki
link_ so why don't we use neutral (multilingual in our case) word
Wiki, which gives people another useful hint? =)


vAB> B.t.w. these are quite nice, could you release them under the GPL-2 or
vAB> later and provide the sourcefiles for them so they could potentially
vAB> be included in MW?
 
Of course, I will. I made these buttons specially for Wikipedia.
But to my shame I never used GPL before. How can I do it? Please be my
guide.




Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

......................................................................
Elephants are just like field mice, but with deeper voices.
......................................................................

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re[6]: wiki buttons design

Bugzilla from rowan.collins@gmail.com
On 16/01/06, Alexander Bobrov <[hidden email]> wrote:
> Of course, I will. I made these buttons specially for Wikipedia.
> But to my shame I never used GPL before. How can I do it? Please be my
> guide.

See http://www.gnu.org/licenses/gpl-howto.html

But for present purposes, just posting a link to the source files
(i.e. the most editable form of your images) to this list, with a
comment like "these are hereby under the GPL" is fine, since the idea
is to incorporate them into MediaWiki, at which point the general
licensing info will cover them anyway.

--
Rowan Collins BSc
[IMSoP]
_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Re: Re[4]: wiki buttons design

Daniel Wunsch
In reply to this post by Erik Moeller-2
On Monday 16 January 2006 17:28, Erik Moeller wrote:

> Please, no cryptic symbols like that. The point of a toolbar is to make
> it intuitive to format wikitext. A newbie neither knows what double
> square brackets mean nor what "~" could stand for. The blue, underlined
> "Ab" works perfectly well. Sure, it's Latin characters, but they are
> internationally recognizable.

i found the underlined Ab misleading -
for me, it looks like "underline my text".

daniel
_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re[8]: wiki buttons design

Alexander Bobrov
In reply to this post by Bugzilla from rowan.collins@gmail.com

>> Of course, I will. I made these buttons specially for Wikipedia.
>> But to my shame I never used GPL before. How can I do it? Please be my
>> guide.

RC> See http://www.gnu.org/licenses/gpl-howto.html

RC> But for present purposes, just posting a link to the source files
RC> (i.e. the most editable form of your images) to this list, with a
RC> comment like "these are hereby under the GPL" is fine, since the idea
RC> is to incorporate them into MediaWiki, at which point the general
RC> licensing info will cover them anyway.


These are hereby under the GPL:
  http://tactics.indians.ru/tmp/wiki/wiki_buttons.zip

  [2 PSD files in 1MB ZIP archive]


Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

......................................................................
This product was cruelly tested on small, furry animals.
......................................................................

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: wiki buttons design

Alexander Bobrov


Hi,


This January I posted improved design for wiki buttons:
http://tactics.indians.ru/tmp/wiki/wiki6.shtml and so on.

But there are still no changes in Wikipedia interface.

Who can include them in the current build and when we can see them?



P.S.
To help you, I cut the new artwork down into 11 image files [23x24 png].

http://tactics.indians.ru/tmp/wiki/wiki7.shtml


If you need the extended design implementation (not just buttons, but
along with background, as in http://tactics.indians.ru/tmp/wiki/wiki6.shtml)
- send me original PHP/HTML for &action=edit and I'll rewrite it.



Alex Bobrov____________________________________________
Indian Summer Studio                 http://indians.ru/

......................................................................
Minds are like parachutes, they only work when open.
......................................................................

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: wiki buttons design

Brion Vibber
Alexander Bobrov wrote:
> This January I posted improved design for wiki buttons:
> http://tactics.indians.ru/tmp/wiki/wiki6.shtml and so on.
>
> But there are still no changes in Wikipedia interface.

As you'll recall, several people expressed a dislike for them and there was no
consensus in favor.

They don't seem to fit in to the MonoBook style any better than the current
ones; if anything they're more "3-d" and fit in worse, so I wouldn't recommend
including them.

-- brion vibber (brion @ pobox.com)


_______________________________________________
Wikitech-l mailing list
[hidden email]
http://mail.wikipedia.org/mailman/listinfo/wikitech-l

signature.asc (257 bytes) Download Attachment