Bug 3974 - Interface improvements
Interface improvements
Status: CLOSED FIXED
Product: openclipart.org
Classification: Unclassified
Component: website
unspecified
x86 (IA32) Linux (All)
: high normal
Assigned To: default user for a product
http://openclipart.org/
:
Depends on: 4134
Blocks: 3599
  Show dependency treegraph
 
Reported: 2005-08-04 05:13 UTC by Jonathan Leighton
Modified: 2006-09-06 18:19 UTC (History)
0 users

See Also:


Attachments
Updated mockup. (109.28 KB, image/svg+xml)
2005-08-15 08:15 UTC, Jonadab the Unsightly One
Details
Download button (28.06 KB, image/svg+xml)
2005-08-15 13:22 UTC, Jonathan Leighton
Details
buttons idea (104.34 KB, image/svg+xml)
2005-08-16 03:39 UTC, Benji Park
Details
Download button 2 (32.23 KB, image/svg+xml)
2005-08-16 06:33 UTC, Jonathan Leighton
Details
Mockup with Jonathan's download button, similar browse button, and sample Inkscape affiliate button (148.47 KB, image/svg+xml)
2005-08-16 07:32 UTC, Jonadab the Unsightly One
Details
Mockup with buttons based on Benji's. (130.12 KB, image/svg+xml)
2005-08-16 07:47 UTC, Jonadab the Unsightly One
Details
Revised mockup again; buttons now have blue background, red/orange/yellow gradient text (231.35 KB, image/svg+xml)
2005-08-16 17:32 UTC, Jonadab the Unsightly One
Details
Another mockup (228.65 KB, image/svg+xml)
2005-08-17 11:16 UTC, Jonathan Leighton
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Leighton 2005-08-04 05:13:56 UTC
Bug for dicussion/mockups on interface improvements. I'm just about to attach a
mockup with some comments.
Comment 1 Jonathan Leighton 2005-08-04 05:26:29 UTC
Created attachment 3243 [details] [review]
Initial proposed patch

Okay, here is a mockup. I've tried to think what tasks people are likely to be
trying to achieve when they visit our site; what they are thinking.

The first time visitor is likely to be thinking:

 * What the .. is this???
 * Okay, cool, free clipart
 * Where the .. is it???

The download and browse buttons are really, really small and unobvious. I'm
speaking from personal experience here -- when I first came to OCAL I *could
not find the clipart*. Hence I put in those massive buttons. This is also our
chance to show off visually, it would be lovely to have some really bold,
graphically interesting buttons. Anyone want to volunteer?

As you can see, I removed the light blue bar completely. All useful
functionality from it has been moved elsewhere, such as the search. There's no
point having a search box in two places so I removed it from the main part of
the page and put it at the top in the left (which is perhaps more obvious
anyway). Also, I removed the submission box. I'm thinking it's unlikely that
this is really important functionality -- submission is the first link on the
left anyway. This is good because it gets the News up a bit, so you can
actually read something before having to scroll!

Another minor thing is that I removed the screenshots. In an application like
Inkscape or GNOME, screenshots are important. But we're producing art not
screenshots and I think they are distracting. If we're going to have anything
there, I would think a random bit of clipart would be more appropriate.

Then there's the header. I've integrated a rotating affiliations logo into the
header, with bug 3599 in mind. Our logo is moved to the left -- before you
object, bear in mind that the top left is the MOST prominent position on any
web page (at least for societies that read from right to left). Maybe people
will disagree with having an affiliations logo in such a prominent position
though, I dunno, what do people think?

No doubt I've missed something but I think that's about it. I'll put up the SVG
after this as well so people can make modifications if they want.
Comment 2 Jonathan Leighton 2005-08-04 05:27:56 UTC
Created attachment 3244 [details] [review]
Z Axis scrolling with inverted directions
Comment 3 Jonadab the Unsightly One 2005-08-04 12:01:37 UTC
Suggestions for improvement:
 * Unify the sidebars, creating one sidebar with several sections.
   (The one on the left already has two sections; adding a third
   section for incoming would not be a major change, and we could then
   do away with the right sidebar.)  I don't care which side the
   sidebar goes on, but it should be on *one* side, not both.  The
   number of "recent images" should perhaps be reduced from 15 to
   eight or ten, to make that section of sidebar similar in size to
   the others, and to keep the sidebar from running too long.
 
 * Roll the contents of the navbar across the top into the sidebar and
  eliminate the navbar, leaving only the banner at the top.
 
 * Move both search features into the sidebar, with a more clear
   explanation of the difference, or else dump whichever one is less
   useful and have just one search feature.  This makes the search
   available from every page and simplifies the layout of the main
   page considerably.
 
 * Remove the submit form from the main page; it's redundant, as
   there's already a link in the sidebar, on every page, that points
   to the main submit form.
   
 * Submit Clip Art and Submit Screenshot should not have something
   else in between them, so Join Discussion should be either before or
   after both of them.
 
 * Simplify the footer.  Currently there are at least three lines, and
   the middle one frequently runs over into two, depending on your
   resolution and font sizes and things.  The first line has the
   little icon-button things, but the other lines have text.  There
   are two different links to the Creative Commons.  First off, the
   links should either all have the icon-buttons (all the same size
   and shape), or else they should all be text, styled the same way.
   Second, they should all be in one block-level element.  Third,
   there are entirely too many of them, given that this is a footer
   that goes on just about every page on the site.  Most of those are
   affiliate projects, and they should be listed on one page, probably
   an Affiliate Projects or Links page existing especially for that
   purpose, with *one* link on every page pointing there.  As an added
   bonus, this would allow for a little blurb about each one,
   explaining what it is and why we're affliated.  Finally, the footer
   contains validator.w3.org icons, but have we checked that the pages
   that include the footer all validate?
   
For the new and rearranged sidebar, I'm thinking something like
the following...

  Available Clipart:
   * Statistics: over
     4300 clips by over
     400 contributors.
   * Browse Online
   * Download Releases
   * Search by Keyword:
     _____________ [Find]
  Contribute:
   * Submit Clip Art
   * Submit Screenshot
   * Join in Discussion
   * Report a Problem
   * Request Clipart
  Information:
   * News
   * Branding & Logo
   * Questions & Answers
   * Contact & Feedback
   * View Screenshots
   * Planet (weblog)
  Developer:
   * Roadmap
   * Tools
   * Wiki
  Incoming:
   * There are 101 files
     incoming, of which
     97 are svg.
   * View Submissions
Comment 4 Jonadab the Unsightly One 2005-08-04 13:36:31 UTC
Created attachment 3253 [details] [review]
HEAD patch 1/2: Fix locking in cairo_scaled_font_reference/destroy

Something more along these lines, perhaps.
Comment 5 Bryce Harrington 2005-08-05 04:02:36 UTC
In my mind, the four most important things we want visitors to gain 
from the site: 
 
   * Understand what the project is about and just how much clipart there is  
   * Search/browse for clip art 
   * Upload their own clip art 
   * Feel welcome to get more deeply involved 
 
These four things should be covered by the middle area of the page, 
where people are looking.  Note that a block of text is probably less 
useful than something visual (such as a search input widget, an upload 
form, a chart showing how many items are in the library, etc.) 
 
Beyond this, simpler is better.  We're always going to have a lot of 
links we'd like to include in the site, but too many links will just 
be overwhelming. 
 
Here are some things I think we could simplify: 
 
* News - A link to a news area may be enough; no need to have a huge 
  amount of news filling the bottom of the page.  Or perhaps limit it 
  to just 1 news item, plus the announcement of the latest OCAL  
  release. 
 
* Submit Screenshot - I'm tempted to suggest just hanging this off of 
  the submit clipart page instead of in the main nav bar.  It's a useful 
  tool but the casual submissions we've gotten to date have been less 
  than useful.  It needs less visibility IMHO. 
 
* Join in Discussion / Report a Problem / Contact & Feedback - These all 
  feel like aspects of the same thing (communication), and may not be 
  worth having 3 separate links...  Each is for a different type of 
  communication, though, so I'm not sure what to suggest...  Might be 
  worth some thought, though. 
 
* Roadmap probably isn't worth having as a top level link. 
 
* Wiki should probably go under Information instead of under Developer. 
 
* Branding & Logo is a subtopic of 'Questions and Answers' 
 
I like the idea of eliminating the right link bar, as it simplifies the 
site. 
 
Bryce 
Comment 6 Jonathan Leighton 2005-08-05 05:20:11 UTC
Okay... I have lots of things to say : ).

Yes, I think one single sidebar is a good idea too. I pondered suggesting this
myself but thought I might hit quite a bit of resistance. I'm glad we all agree
on that : ). Do we actually *need* the incoming list? I'd just as happily do
away with it altogether, but I dunno -- what do others think?

Getting rid of the top nav bar -- that's exactly what I did in my mockup.
However, I disagree with just putting them into the top of the sidebar. I don't
think they are prominent enough even there, and think it is very very important
to put emphasis on the download/browse links. I also think the statistics are a
bit silly to be putting on every page -- especially as they are not "live"
statistics.

Search -- yes, I did that too. I think we need to stick to just one search box.
Giving people options is not always a good idea ; )

Submit form -- again, I did this and agree.

In terms of submitting screenshots, I agree with Bryce that it should be linked
just from the clipart submission page.

I agree we need to simplify the footer. Validation buttons should be removed,
anybody interested in validating pages will already know how to. Furthermore, we
can hardly guarantee compliance when pretty much anybody is able to edit the
site. I disagree with you putting the affiliates in the footer -- again this is
clutter, and is also not a very prominent position. Please see bug 3599 where we
discussed this.

Also, can I request that we not think about visuals in this bug. My mockup would
have been a wireframe if there was not already a site design. Basically, the
important thing to discuss here is where the content needs to go in order to
make the site as easy to use as possible. That's the number one concern at the
moment. After that is dealt with then perhaps it would be nice to touch up the
visuals too, but I think content is more important right now.

Bryce's stuff
-------------

I agree with your order. My mockup was designed such that people could come to
the site, read what it's about, and right away know how to get to the clipart. I
think this could be made even easier for people if we reviewed copy on the front
page to make a short, concise paragraph saying what it's about. I'm thinking
something really simple like:

"The Open Clip Art Library aims to provide freely available, public domain
clipart for whatever use you like. Feel free to browse the library, and if you
found it useful consider submitting some of your own clip art." (links in
appropriate places)

People don't tend to like to read too much. It would also be good to highlight
key terms like "freely available" -- again this will catch the eye of people
half-assedly glancing at the site. Just those two sentences cover pretty much
all of your four points.

News -- I totally agree. One News item would be good. I can customise it to
display "Releases" and "News" seperately, if they are put in different
categories. I reckon that'd be a good idea.

Submit Screenshot -- covered above.

Discussion -- yep, one single page with a link like "Discussion & Feedback"
would be good. We could cover all avenues of discussion/feedback on one single page.

Roadmap -- agree

Wiki -- agree

Branding and Logo -- again, I agree. Without this, and with the project
information on the home page, I don't think there's really any reason to have an
about page.

--

This would be my sidebar:

  Clipart:
   * Browse Clip Art
   * Download Package
     _____________ [Search]
  Contribute:
   * Submit Clip Art
   * Discussion & Feedback
   * Request Clipart
  Information:
   * News
   * FAQ (everyone knows what that means)
   * Wiki
   * Screenshots
   * Developer Weblogs
Comment 7 Jonadab the Unsightly One 2005-08-06 09:55:05 UTC
> In my mind, the four most important things we want visitors to 
> gain from the site: 
>  * Understand what the project is about and just how much clipart there is  
>  * Search/browse for clip art
>  * Upload their own clip art
>  * Feel welcome to get more deeply involved 

I think I would reverse the order of those first two, but apart from that,
I think this line of thinking is heading in the right direction.

> Submit Screenshot - I'm tempted to suggest just hanging this off 
> of the submit clipart page instead of in the main nav bar.  It's a 
> useful tool but the casual submissions we've gotten to date have been
> less than useful.  It needs less visibility IMHO. 

I agree with the rationale here, but I'm not convinced the submit clipart
page is the right place to put the link.  Perhaps a link from the View
Screenshots page, instead?

> * Roadmap probably isn't worth having as a top level link. 
> * Wiki should probably go under Information instead of under Developer.

With those changes, the developer section would be left with one link.
Seems like a wasted section heading for that.  Perhaps it should be 
consolidated with another section.  Where else could we put the tools?
Do the tools even need a front-page link?  Would the link from the
downloads page be enough?

> Do we actually *need* the incoming list? I'd just as happily do
> away with it altogether, but I dunno -- what do others think?

The incoming list is useful, but I don't think we need to fill up
the sidebar on every page with fifteen links, when this information, 
and more, is already available on the incoming submissions page.
I think just a link to that page might be enough.

> Getting rid of the top nav bar -- that's exactly what I did in my 
> mockup.  However, I disagree with just putting them into the top of 
> the sidebar. I don't think they are prominent enough even there, and 
> think it is very very important to put emphasis on the download/browse 
> links. 

That is why in my mockup I also put links to them in the main text
area of the front page, but perhaps something more visual, as Bryce
suggests, is in order in that regard.

> I disagree with you putting the affiliates in the footer -- 
> again this is clutter, and is also not a very prominent position.

I think I agree with you, but I left them there in my mockup mainly 
because I wasn't sure exactly what else to do.  Perhaps a link somewhere
(where?) to a separate page of affiliate projects, which could have a full
description of each and so forth.

> Also, can I request that we not think about visuals in this bug. My
> mockup would have been a wireframe if there was not already a site design.

If you mean colors and fonts and so forth, I agree.  I made the mockup look
plausible, rather than a wireframe, mainly so that people wouldn't go, "Eww,
that's ugly" and overlook the way the information is layed out, which was 
the point.  My mockup was not intended to provide accuracy on the pixel
level, just a general idea of how things could be set out.  If someone
doesn't like some little thing, such as the way I bulleted each section
of the sidebar, don't sweat that; whoever actually implements the revised
site will probably change such minor things anyway; the big key point here 
is what information should be in the header, the footer, the sidebar, and
the main page area, and how it should be arranged.  Sub-div presentational
details are neither here nor there at this point.

I will revise my mockup.
Comment 8 Jonadab the Unsightly One 2005-08-06 10:18:51 UTC
Created attachment 3273 [details]
gpg-armored.txt

Revised mockup, with some of the discussed changes.
Comment 9 Jonathan Leighton 2005-08-08 03:53:39 UTC
(In reply to comment #7)
> > Submit Screenshot
> 
> Perhaps a link from the View Screenshots page, instead?
>
Good idea

> Do the tools even need a front-page link?
> 
Nope

> The incoming list is useful, but I don't think we need to fill up
> the sidebar on every page with fifteen links, when this information, 
> and more, is already available on the incoming submissions page.
> I think just a link to that page might be enough.
> 
That's cool with me

> > Getting rid of the top nav bar -- that's exactly what I did in my 
> > mockup.  However, I disagree with just putting them into the top of 
> > the sidebar. I don't think they are prominent enough even there, and 
> > think it is very very important to put emphasis on the download/browse 
> > links. 
> 
> That is why in my mockup I also put links to them in the main text
> area of the front page, but perhaps something more visual, as Bryce
> suggests, is in order in that regard.
>
Are iconic buttons (such as the ones I suggested in my own mockup) not "visual"?
I think they definitely are. I don't think text links are enough really. You've
not said anything against the idea of those buttons, but also not supported them
either -- so do you like or dislike them and why?

> > I disagree with you putting the affiliates in the footer -- 
> > again this is clutter, and is also not a very prominent position.
> 
> I think I agree with you, but I left them there in my mockup mainly 
> because I wasn't sure exactly what else to do.  Perhaps a link somewhere
> (where?) to a separate page of affiliate projects, which could have a full
> description of each and so forth.
> 
This was discussed in bug 3599, as I said in my previous comment, and it was
decided that we should display ONE affiliate per page randomly to give them all
a chance for the limelight without crowding our site with links to others. So
then the question I where. In bug 3599, I suggested the sidebar, but rejon said
it was crowded and that the top bar might be a better idea. I put it in the top
bar in my own mockup, and nobody has voiced an opinion about that positioning --
what do you think?

> > Also, can I request that we not think about visuals in this bug. My
> > mockup would have been a wireframe if there was not already a site design.
> 
> If you mean colors and fonts and so forth, I agree.  I made the mockup look
> plausible, rather than a wireframe, mainly so that people wouldn't go, "Eww,
> that's ugly" and overlook the way the information is layed out, which was 
> the point.
> 
Well you could always have done it according to the current site design as I
did... And to be honest, I don't think anyone would have said that. But anyway,
the important part is the information.
Comment 10 Jonadab the Unsightly One 2005-08-09 21:53:31 UTC
> > > Getting rid of the top nav bar -- that's exactly what I did in
> > > my mockup.  However, I disagree with just putting them into
> > > the top of the sidebar. I don't think they are prominent
> > > enough even there, and think it is very very important to put
> > > emphasis on the download/browse links.
> > 
> > That is why in my mockup I also put links to them in the main
> > text area of the front page, but perhaps something more visual,
> > as Bryce suggests, is in order in that regard.
> 
> Are iconic buttons (such as the ones I suggested in my own mockup)
> not "visual"?  I think they definitely are. I don't think text
> links are enough really. You've not said anything against the idea
> of those buttons, but also not supported them either -- so do you
> like or dislike them and why?

Let me have another look at them...  Umm, call me blind, but I don't
see any visual iconic buttons for those on your mockup, just text links
in a large font.  If those were supposed to be placeholders for visual
iconic buttons, then that seems like a reasonable approach to me; I
just didn't realize that was what they were.  Perhaps I will look into
revising my mockup again to include something along those lines...

[Affiliates]
> This was discussed in bug 3599
Yeah, I'd read that, but it didn't really answer the question, although it did
raise some relevant issues...

> So then the question I where. 
Yes, exactly.

> In bug 3599, I suggested the sidebar, but rejon said it was crowded 

I agree with that...

> and that the top bar might be a better idea. I put it in the top
> bar in my own mockup, and nobody has voiced an opinion about that 
> positioning -- what do you think? 

Aesthetically, I think that unballances the symetry of the banner, although
perhaps it could be made to look good if done well.  I'm wondering if maybe we
could fit one affiliate in the main page area of just the front page...  I will
think some more about how that area can be arranged better.  We don't want a
complex layout in there, but perhaps something more than just text is in order.
Comment 11 Jonadab the Unsightly One 2005-08-09 21:57:50 UTC
Created attachment 3306 [details] [review]
minor update: x86-64 similar to x86

Playing around with ideas here.  Is this a good place for the visual buttons?
Comment 12 Jonadab the Unsightly One 2005-08-09 22:10:31 UTC
Created attachment 3307 [details] [review]
keyboard layout diff

Or what about putting them over here, like this?  Which is better, or is there
another place?
Comment 13 Jonadab the Unsightly One 2005-08-09 23:14:55 UTC
Created attachment 3308 [details]
Test document

Concept for visual download button.  Someone can probably do better than this,
but here is a working prototype to get things going.
Comment 14 Jonadab the Unsightly One 2005-08-09 23:16:02 UTC
Created attachment 3309 [details]
nvidia-bug-report

Again, someone can do better, but here's a browse button concept prototype.
Comment 15 Jonathan Leighton 2005-08-10 05:03:14 UTC
(In reply to comment #10)
> Let me have another look at them...  Umm, call me blind, but I don't
> see any visual iconic buttons for those on your mockup, just text links
> in a large font.  If those were supposed to be placeholders for visual
> iconic buttons, then that seems like a reasonable approach to me; I
> just didn't realize that was what they were.  Perhaps I will look into
> revising my mockup again to include something along those lines...
> 
Yes, they are placeholders. I thought I made that reasonably clear when I said:

"Hence I put in those massive buttons. This is also our
chance to show off visually, it would be lovely to have some really bold,
graphically interesting buttons. Anyone want to volunteer?"

But ok.

> [Affiliates]
> > This was discussed in bug 3599
> Yeah, I'd read that, but it didn't really answer the question, although it did
> raise some relevant issues...
Well Jon suggested the top bar and I agreed.
 
> > In bug 3599, I suggested the sidebar, but rejon said it was crowded 
> 
> I agree with that...
> 
> > and that the top bar might be a better idea. I put it in the top
> > bar in my own mockup, and nobody has voiced an opinion about that 
> > positioning -- what do you think? 
> 
> Aesthetically, I think that unballances the symetry of the banner, although
> perhaps it could be made to look good if done well.  I'm wondering if maybe we
> could fit one affiliate in the main page area of just the front page...  I will
> think some more about how that area can be arranged better.  We don't want a
> complex layout in there, but perhaps something more than just text is in order.
>
I don't think the complexity of the layout really matters, so long as the
placement gives affiliates *enough* focus without giving them *too much* of it.
I think in your mockups it has too much focus. It seems to suggest that visiting
an affiliate is equally important to browsing/downloading the collection, which
of course, it's not. And yeah, probably the top bar is too much focus too. In
light of that, I hate to say it, but I'm going to suggest the bottom of the
sidebar again. I don't have any better ideas.

I'm going to have a go at making some buttons too and we can see what we come up
with.
Comment 16 Jonadab the Unsightly One 2005-08-14 18:55:25 UTC
> I can do a similar style for a "Browse" button if it is desired. Obviously
> if people hate my button then I won't ; )

At the moment, bugs.fdo seems not to be showing attachments (a few moments
earlier it was refusing requests, so this actually is an improvement), so
I can't look at it right now.

> If I'm honest about your buttons, Jonadab, I don't particularly like them.

I didn't intend for mine to be the final ones.  I'm not an artist.  I 
dabble a little bit, but it's not really my field, and I have neither the
inclination nor the training.  My main purpose in doing those buttons was 
to convince someone else they could and should do up some better ones.
Comment 17 Jonadab the Unsightly One 2005-08-14 19:00:52 UTC
> Also, does anybody know what the OCAL font is?

I cannot seem ATM to find the SVG behind the main banner we are currently using.
Comment 18 Nicu Buculei 2005-08-15 02:40:53 UTC
Jonathan Leighton wrote:
> 
> Here's a "Download" button I did.

It seems is something wrong with the attachment: it can't be accessed.
Comment 19 Jonathan Leighton 2005-08-15 05:22:42 UTC
(In reply to comment #18)
> Jonathan Leighton wrote:
> > 
> > Here's a "Download" button I did.
> 
> It seems is something wrong with the attachment: it can't be accessed.

On IRC:

Turnip	daniels and other wranglers: bugzilla seems to be pretty confused at the
moment -- do you know anything about this?
daniels	Turnip: yeah
daniels	Turnip: as the topic says [ed: topic says "parts of gabe's RAID array
failed -- bugs.fd.o and lists.fd.o are known to be affected (missing attachments
in BZ, corrupted mail archives)"]
Turnip	my apologies!
Turnip	any ETA on a fix?
daniels	no worries
daniels	not really. one of the disks in our raid array just sort of fell out, so
we're looking at the backups pdx seem to be taking to see what we can recover.
Turnip	ok. Does the RAID not mean that you have a copy on another disk? Or do I
misunderstand?
daniels	depends what level of RAID, but as I understand it from anholt, the
recovery went rather sideways
Turnip	alright

So we may or may not be able to get back the data. I'll re-attach my button
tonight anyhow.
Comment 20 Jonathan Leighton 2005-08-15 05:25:44 UTC
(In reply to comment #17)
> > Also, does anybody know what the OCAL font is?
> 
> I cannot seem ATM to find the SVG behind the main banner we are currently using.

It's at http://openclipart.org/about.php, but the text is just a path, not an
actual text object. This is sensible though, for two reasons:

 1) People don't have to have the font installed
 2) A guy where I work told me that when you convert text to a path, it becomes
a drawing and the copyright on the font does not apply

Who did the logo? Maybe I can contact them to find out.
Comment 21 Jonathan Leighton 2005-08-15 05:28:17 UTC
(In reply to comment #16)
> > If I'm honest about your buttons, Jonadab, I don't particularly like them.
> 
> I didn't intend for mine to be the final ones.  I'm not an artist.  I 
> dabble a little bit, but it's not really my field, and I have neither the
> inclination nor the training.  My main purpose in doing those buttons was 
> to convince someone else they could and should do up some better ones.
Yeah fair enough. No offence was intended even if it was recieved (in which case
sorry). I'm no designer either, although I do try. At the end of the day we can
all do out best and hope something good comes out of it : )
Comment 22 Jonathan Leighton 2005-08-15 06:04:15 UTC
Created attachment 3348 [details] [review]
Patch to increase rotated bitmap copy speed

Here's a "Download" button I did. I'd be interested to hear what people think.
Also, does anybody know what the OCAL font is? I'd really like to try it out
using that font if anybody knows which it is...

I can do a similar style for a "Browse" button if it is desired. Obviously if
people hate my button then I won't ; ). If I'm honest about your buttons,
Jonadab, I don't particularly like them. But then you may not like mine. Art is
certainly a difficult thing to agree on.

Anyway, it would be good to start implementing the interface discussed in this
bug as soon as we agree on buttons (as they are fairly important). The only
outstanding thing then would be the affiliate link, but perhaps that can be
discussed some more in the other bug once this bug is closed.
Comment 23 Jonadab the Unsightly One 2005-08-15 08:15:25 UTC
Created attachment 2869 [details]
Updated mockup.

Attaching a (quite minor) update of my mockup, mainly because of the former
attachments having been lost in the RAID shuffle.  At this point, I think the
thing I most want feedback about is the positioning of the download, browse,
and affiliate link buttons, not in terms of "I think it should be five pixels
over" but more in terms of whether the general placement is good or if there is
a better place for them, on the other side of the text, or layed out
horizontally somewhere instead of vertically, whether the affiliate link should
be more separate from the others, that sort of thing.  Other comments are still
welcome as well, but that's the main thing.  

Oh, and somebody draw some better buttons; ideally we should have a whole set:
download, browse, and one for each of the affiliates.  I think we're agreed now
that we want visual buttons for these things; we just haven't nailed down yet
where we're going to put them.
Comment 24 Jonadab the Unsightly One 2005-08-15 08:59:08 UTC
> > Also, does anybody know what the OCAL font is?
[...]
> Who did the logo? Maybe I can contact them to find out.

The original logo, as submitted to the logo contest (by Andreas Nielson IIRC),
had different text (using the word "project" instead of library) in a different
font.  This can still be found in
logos/OpenClipArtLibrary/open_clip_art_library_logo_01.svg

The graphical element from this winning entry was taken and put with the text
for the name we use now, in another font, by someone else, possibly rejon.  Also
there were briefly different colors (notably, one of the clips was green at one
point).  This version can be seen in logotype_final_-_open_clip_art_library_01.svg

But the colors were then changed back to the original ones (except for the
background, which was selected to integrate with the site design's blue top
banner).  The font and text, however, were not changed back to their original
version, since it was felt that we wanted to use "Open Clip Art Library" rather
than "project".  Yet, the font we use now also does not match the one in
logotype_final_...

Except for color, the text we use now, and the font it is in, bears a striking
resemblance to the ones in Neil Stuber's entry, as seen in
open_clip_art_librarylogo_01.svg, so it is possible that it was taken from
there.  I am guessing that this may have been done by Jon, Bryce, or Nicu, but I
don't actually know.
Comment 25 Nathan Eady 2005-08-15 11:00:47 UTC
> Except for color, the text we use now, and the font it is in, bears a 
> striking resemblance to the ones in Neil Stuber's entry, as seen in
> open_clip_art_librarylogo_01.svg

And other entries by the same author as well.  The following uri is given 
in the description metadatum in each of his entries:
www.neilstuber.com

Upon visiting that site, I found the following contact information:
Neil Stuber
n (at) neilstuber.com
347.463.2995 {Brooklyn, NY}

The second line there looks like a convenient email contact, if someone wants to
ask if he remembers which font he used.
Comment 26 Jonathan Leighton 2005-08-15 13:22:54 UTC
Created attachment 2884 [details]
Download button

My download button (again!)
Comment 27 Jonathan Leighton 2005-08-15 13:25:30 UTC
(In reply to comment #23)
> Created an attachment (id=2869) [edit]
> Updated mockup.
> 
> Attaching a (quite minor) update of my mockup, mainly because of the former
> attachments having been lost in the RAID shuffle.  At this point, I think the
> thing I most want feedback about is the positioning of the download, browse,
> and affiliate link buttons, not in terms of "I think it should be five pixels
> over" but more in terms of whether the general placement is good or if there is
> a better place for them, on the other side of the text, or layed out
> horizontally somewhere instead of vertically, whether the affiliate link should
> be more separate from the others, that sort of thing.  Other comments are still
> welcome as well, but that's the main thing.

All things considered, I can't think of a better position. So yeah, I reckon we
should go with that.

> Oh, and somebody draw some better buttons;

I'd be interested to hear your feedback on my download button.

>ideally we should have a whole set:
> download, browse, and one for each of the affiliates.

We don't need buttons for affiliates -- it's important to keep their own
branding. At most they will need resizing or something.
Comment 28 Jonathan Leighton 2005-08-15 13:26:00 UTC
(In reply to comment #25)
> > Except for color, the text we use now, and the font it is in, bears a 
> > striking resemblance to the ones in Neil Stuber's entry, as seen in
> > open_clip_art_librarylogo_01.svg
> 
> And other entries by the same author as well.  The following uri is given 
> in the description metadatum in each of his entries:
> www.neilstuber.com
> 
> Upon visiting that site, I found the following contact information:
> Neil Stuber
> n (at) neilstuber.com
> 347.463.2995 {Brooklyn, NY}
> 
> The second line there looks like a convenient email contact, if someone wants to
> ask if he remembers which font he used.

Thanks, I'll email him.
Comment 29 Jon Phillips 2005-08-15 16:56:25 UTC
Man, this thread is long.

Ok, first things first:

1.) Submit clipart with the simplest input box and submit should most definitely
be on the front page very prominent. This is important!!!

2.) You should also think about where a login box would go...

3.) Where is all the developer information in the menu? That is so key! We need
people to be able to contribute this way effectively.

Overall, I like the cleanup and organization. The fonts in the body seem a bit
too large. Also, maybe using some of the other colors from the logo might pretty
up the site slightly.

I'm not so into the bullets in the menu items. I think menu items automatically
read as menu items because they are larger and people understand this language
of the web pretty well these days ;)

The two buttons should have the same text as the menu. So Download Clip Art
should be the same on the button as in the menu (which currently reads Download
Releases).

Also, I think consolidating the font stylings into one or two different styles
will help professionalize the site more.

The font used for the logo I vectorized from somewhere, but I can't remember the
name. I found the font I believe:

font-size:54.000000;font-style:normal;font-variant:normal;font-weight:800;font-stretch:condensed;fill:#000000;fill-opacity:1.0000000;stroke:none;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Myriad
Pro Black Cond;text-anchor:start;writing-mode:lr;

So, Myriad Pro Black Cond

I will look for this font at home.

I might do some designing on the mockup later in the game.
Comment 30 Jonadab the Unsightly One 2005-08-15 19:59:14 UTC
> > Oh, and somebody draw some better buttons;
> I'd be interested to hear your feedback on my download button.

I like it better than mine.  More contrast, easier to read, and simpler, and
I like what you've done with the gradients.  It makes mine look cluttered.

The only thing about it that I'm not entirely sure about is putting the red
lettering together with the orange arrow.  These are colors from our logo,
though, so maybe it's alright, especially if you can get the yellow into the
browse button somehow.  We should get another couple of people to comment,
preferably someone with good artistic ability.

> Where is all the developer information in the menu? That is so key!
> We need people to be able to contribute this way effectively.

The developer stuff is present, but before it was absolutely choking
the site, from an end user perspective.  You can only load up the front
page with so much developer info without actively chasing users away.

Not that the developer stuff isn't important -- it's vital -- but the
developers are quite a LOT more willing (and able) than end users to 
look around, navigate the site, and bookmark relevant subpages.  

Not that we should let the developer and contributor stuff get *hidden*, 
by any means, but it's not.  In my mockup, if you look at the sidebar, the
top three (3) items are end-user items: browse, download, and search.
After that, there's submit, Discussion & Feedback (which presumably will
link to a page that tells about the all-important mailing list, among other
things), the request page (which is very useful for contributors, as well
as for people who want to make requests), and most of the stuff in the
Information section also is developer oriented.  Okay, FAQs are end-user
stuff, and arguably the screenshots, but the news, wiki, and blog items,
as well as the incoming submissions queue, are all solidly in the realm
of the developers and contributors.  Perhaps these things need to be
rearranged better, to make important ones more prominent, but is there
anything *missing* that really needs to be there?

Additionally, several of the developer-oriented links point to deeper 
structures.  The wiki, for instance, is practically an entire site in
itself.  And it's all about developer stuff.  This brings up an important
difference between the way developers versus end users use the web: to
an end user, the front page, basically, is the site; for a developer, the
front page is a navigational tool that helps you find the relevant portion(s)
of the site.  It's a completely different paradigm.

As a navigational feature, the banner across the top probably should point 
back to the main page.  Some people expect that, and the ones who don't
won't likely click on it, and even if they do, the main page is a nice
central destination from which it is easy to get to any other major part
of the site.

> Submit clipart with the simplest input box and submit should most
> definitely be on the front page very prominent. This is important!

I think it was overall a negative for usability, for a couple of reasons.
First, and most important, it was redundant and therefore confusing; we had
at least one contributor complain about not understanding which form to use
and what the difference was, and the answer I was able to give him ("if it
confuses you, just use _this_ form and ignore those other ones") was not 
very satisfactory, IMO.  

Additionally, the extra form, despite *looking* simpler, does not in practice
actually make things easier for most contributors, because after filling out
that form, the user comes anyway to the other form that the link points to.
There are (now that we've got extension sniffing for filetype determination)
rare exceptions to this, when all the metadata are already included, but that
is only likely to happen when the contributor is already familiar with our
process, in which case he's probably bookmarked the submit form anyway,
among other reasons because it provides the dropdown list of keywords.
Really, I don't think we lose much by taking the extra submit form off
the main page -- and we gain significantly in the simplicity department.
The "Submit Clipart" link is the very first thing under the Contribute
section of the sidebar; that's fairly prominent.  And if the main clipart
submission form is all that bad, so that contributors don't want to use
it, perhaps *that* needs to be redesigned.

> You should also think about where a login box would go...
In the sidebar, I should think.  If we have login, there will be several items
related to it:  if the user is not logged in, there's at minimum a box for the
username, one for the password, and a button.  When the user is logged in, there
needs to be some indication of who is logged in, a link to the place where the
user can review and/or change his preferences and whatever personal info (e.g.,
contact information), plus a logout link.  I guess that means a sidebar section.  

If I had to pick a place in the sidebar for it, I'd put it beneath the
Contribute section, but above Information.  An argument could be made for
putting it above Contribute, though.

> The fonts in the body seem a bit too large.   Also, maybe using some of
> the other colors from the logo might pretty up the site slightly.  I'm 
> not so into the bullets in the menu items.  Also, I think consolidating 
> the font stylings into one or two different styles will help 
> professionalize the site more.

These sorts of minor details need not detain us here.  As discussed in
comments 6 and 7, I assume whoever implements the HTML will tweak such 
things, but at this stage I'm more concerned with the overall design.  
As you point out, the thread is already getting long (though I have seen
much longer ones on b.m.o).

> The two buttons should have the same text as the menu.  So Download 
> Clip Art should be the same on the button as in the menu (which currently
> reads Download Releases).

Agreed.  In order to keep the button simple, let's make the sidebar read
"Download Clip Art", unless someone can think of a reason to do otherwise.
Comment 31 Benji Park 2005-08-16 03:39:51 UTC
Created attachment 2889 [details]
buttons idea
Comment 32 Benji Park 2005-08-16 03:41:20 UTC
Comment on attachment 2889 [details]
buttons idea

Here is my attempt at some buttons. I took inspiration from Jonathan and from
the ocal logo. I also used clipart from the library by AJ Ashton. Not sure
about the font colors though, any ideas?
Comment 33 Jonathan Leighton 2005-08-16 06:09:49 UTC
(In reply to comment #30)
> > Where is all the developer information in the menu? That is so key!
> > We need people to be able to contribute this way effectively.
> 
> The developer stuff is present [...] a completely different paradigm.

I agree, 100%. We need to capture our audience first and foremost, and they will
be more than happy to find out how to join us after that.

> As a navigational feature, the banner across the top probably should point 
> back to the main page.  Some people expect that, and the ones who don't
> won't likely click on it, and even if they do, the main page is a nice
> central destination from which it is easy to get to any other major part
> of the site.

Yep, agree with you here.
 
> > Submit clipart with the simplest input box and submit should most
> > definitely be on the front page very prominent. This is important!
> 
> I think it was overall a [...] And if the main clipart
> submission form is all that bad, so that contributors don't want to use
> it, perhaps *that* needs to be redesigned.

Again, I agree. Simplicity is really really key, and forms confuse the hell out
of people (that's Normal People who don't use Linux and write C++).

> > You should also think about where a login box would go...
> In the sidebar, I should think.  If we have login, there will be several items
> related to it:  if the user is not logged in, there's at minimum a box for the
> username, one for the password, and a button.  When the user is logged in, there
> needs to be some indication of who is logged in, a link to the place where the
> user can review and/or change his preferences and whatever personal info (e.g.,
> contact information), plus a logout link.  I guess that means a sidebar section.

Is this a login for the DMS, when it's ready? I'd say there should be a separate
page for the actual login form, with just a "Login" or "Logout" link depending
obviously on whether you are logged in or out. Not sure where it should go, but
I'd say we should deal with that when we come to it -- who knows, the site may
be different by then anyway.

> > The fonts in the body seem a bit too large.   Also, maybe using some of
> > the other colors from the logo might pretty up the site slightly.  I'm 
> > not so into the bullets in the menu items.  Also, I think consolidating 
> > the font stylings into one or two different styles will help 
> > professionalize the site more.
> 
> These sorts of minor details need not detain us here.  As discussed in
> comments 6 and 7, I assume whoever implements the HTML will tweak such 
> things, but at this stage I'm more concerned with the overall design.  
> As you point out, the thread is already getting long (though I have seen
> much longer ones on b.m.o).

My position is that the colours and design should stay the same (obviously minor
things dont really need to be discussed) and if visual changes need to happen (I
think it would be a good idea), we should have a new bug *AFTER* we get the
layout/IA stuff dicussed in this bug sorted.

> > The two buttons should have the same text as the menu.  So Download 
> > Clip Art should be the same on the button as in the menu (which currently
> > reads Download Releases).
> 
> Agreed.  In order to keep the button simple, let's make the sidebar read
> "Download Clip Art", unless someone can think of a reason to do otherwise.

Good, yeah.
Comment 34 Jonathan Leighton 2005-08-16 06:33:06 UTC
Created attachment 2894 [details]
Download button 2

(In reply to comment #30)
> The only thing about it that I'm not entirely sure about is putting the red
> lettering together with the orange arrow.  These are colors from our logo,
> though, so maybe it's alright, especially if you can get the yellow into the
> browse button somehow.  We should get another couple of people to comment,
> preferably someone with good artistic ability.

Yeah, I wasn't sure either, but I did it because -- as you realised -- it was
the colours in the logo. The problem with the logo colours is that they don't
contrast all that much. Anyway, I got in contact with Neil Stuber, who told me
the font he used was Arial Black 41.5pt. I have changed my button (attached),
and I think it looks a lot better with the OCAL font.
Comment 35 Jonadab the Unsightly One 2005-08-16 07:18:26 UTC
> Here is my attempt at some buttons. I took inspiration from Jonathan and 
> from the ocal logo. I also used clipart from the library by AJ Ashton. Not
> sure about the font colors though, any ideas? 

I think the words need to have good contrast against the background, to be
easy to read at a quick glance, and the ones colored with the yellow-orange
gradient, against a background of yellow-orange gradient, are definitely
lacking in that regard.

I'm less sure about the white.  I think it is okay against the orange but
falls a little short against the yellow.  I tried each of the two colors
of blue from the site, with either white or black outlines, and I was not
satisfied with that either.  Then I tried black text outlined in white,
and I think that may provide the best contrast against the yellow-orange
gradient background.  At the bottom, against the yellow, the black shows
up really well, and at the top, against the orange, the white outline
helps it to show up better than it might otherwise.  What do you think?

Oh, and if these buttons end up against a white background, they will want
a black outline, rather than a white outline.  That's an easy change, and
no big deal, and the black looks fine around the yellow-orange.

I'm not 100% sure whether I prefer Jonathan's blue-gradient button, or
these yellow-orange ones.  I tend to like blue better as a color, but
that is a personal thing.  The yellow-orange is probably more eye-catching.
Then again, the blue probably integrate's better into the look of the site.
OTOH, the yellow and orange are from the logo, and we'd talked about using
those colors more on the site.  (Perhaps to go along with those buttons we
should be using more red for boundary lines and things, yellow for the
sidebar background instead of baby blue, and so on?  I guess we can leave
most of those questions for the stylesheet to answer later.)  On the
gripping hnd, the orange arrow on the download button stands out really
well against the blue gradient background and really brings out the idea
of download; whereas, with the yellow-orange gradient background, the focus
tends to be on the button background or the whole button, rather than the
arrow element.  Hmmm...  I think I want another opinion or two.

The other question I have is about the books; they don't communicate the
concept of browse to me.  Maybe I'm just thick?  Granted, "Browse" can be
an abstract and somewhat difficult concept to portray...

Oh, another point from back the other day...

> We don't need buttons for affiliates -- it's important to keep their 
> own branding. At most they will need resizing or something.

It is certainly important to keep each affiliate's own branding, so the
button design for those is both simpler and much more constrained because
of that, but I think we do need buttons for the affiliates, for several
reasons, most of which revolve around fitting them into our site.  First
off, the obvious:  they don't just have to be the same size; they also
really should be the same shape, in terms of aspect ratio.  (They can
have blank areas around the edges, so they don't have to be the same
shape in terms of being a rectangle, but it would be fairly problematic
if for instance of of them were taller than it is wide.)  This is more
than mere resizing, as it may require something like placing text next
to the logo element, or under it, or whatever, to get it to fit.  To be
clear, we'd be using the affiliate's logo element to represent them, and
their chosen text, preferably in their chosen branding font if possible,
so we would be retaining, to the greatest extent possible, their branding.

I will use Inkscape as an example.  Their branding consists, as near as I
can determine, of four elements:  the inkscape logo (which you see on the
site and also as a desktop icon), the word "Inkscape", and the colors black
and white, and the motto "Draw Freely".  (There is also the description, 
"Open Source Scalable Vector Graphics Editor", but that is probably too 
long to put in a button, though it could be used in the alternate text 
and possibly also in a tooltip.)  We would need to combine two or more of 
those elements into a button the same overall shape (and size) as our browse 
and download buttons.

> forms confuse people (that's Normal People who don't use Linux and write C++).

Hey, I don't write C++, does that make me normal? ;-)

> Anyway, I got in contact with Neil Stuber, who told me the font he used
> was Arial Black 41.5pt.

Aha!  I hadn't recognized it before, I think because it had been resized
to a different scale horizontally than vertically, making it look less
fat, but apart from that this does appear to be the right font.
Comment 36 Jonadab the Unsightly One 2005-08-16 07:32:29 UTC
Created attachment 2895 [details]
Mockup with Jonathan's download button, similar browse button, and sample Inkscape affiliate button

Besides the buttons, the question of submit form, and minor issues like fonts
or colors or bullets, is there anything else we still need to discuss here?
Comment 37 Jonadab the Unsightly One 2005-08-16 07:47:55 UTC
Created attachment 2896 [details]
Mockup with buttons based on Benji's.

Here it is with buttons based on Benji Park's.	I did change the border color
from white to black, since the surrounding background is white, and the text to
black (white outline) for better contrast.  Again, I used Inkscape as the
sample affiliate.
Comment 38 Jonathan Leighton 2005-08-16 11:09:26 UTC
(In reply to comment #35)
> > Here is my attempt at some buttons. I took inspiration from Jonathan and 
> > from the ocal logo. I also used clipart from the library by AJ Ashton. Not
> > sure about the font colors though, any ideas? 
> 
> I think the words need to have good contrast against the background, to be
> easy to read at a quick glance, and the ones colored with the yellow-orange
> gradient, against a background of yellow-orange gradient, are definitely
> lacking in that regard.
> 
I agree here. I also feel that -- especially from looking at the buttons in
Jonadab's mockup -- they are a little TOO bold and bright and don't really sit
well with the rest of the page as a whole. Also, if the gradient was a little
less strong it would probably make achieving contrast a lot easier.

> I'm less sure about the white.  I think it is okay against the orange but
> falls a little short against the yellow.  I tried each of the two colors
> of blue from the site, with either white or black outlines, and I was not
> satisfied with that either.  Then I tried black text outlined in white,
> and I think that may provide the best contrast against the yellow-orange
> gradient background.  At the bottom, against the yellow, the black shows
> up really well, and at the top, against the orange, the white outline
> helps it to show up better than it might otherwise.  What do you think?
> 
The issue would probably be solved if there was a less extreme background
gradient used.

> I tend to like blue better as a color, but
> that is a personal thing.

Well, perhaps. Blue is quite a "comfortable" colour and it appears to both
sexes. In contrast yellow/orange conveys "warning" or "danger" generally. I'm
not saying it's bad to use them, but in moderation definitely. I think the
yellow/orange background is just a bit too overwhelming, and besides, blue is
already used a lot on the site (as you said).

> The other question I have is about the books; they don't communicate the
> concept of browse to me.  Maybe I'm just thick?  Granted, "Browse" can be
> an abstract and somewhat difficult concept to portray...

I agree. If I were to do it I'd probably use a magnifying glass. But it's a hard
one to portray... magnifying glass also communicates "search". There's certainly
no hard in investigating different elements and seeing how they look. Actually,
I quite liked the folder icon you put in next to my download button. I think
that worked especially well as it is a similar colour to the "download" arrow,
so the two sit well together.

> Oh, another point from back the other day...
> 
> > We don't need buttons for affiliates -- it's important to keep their 
> > own branding. At most they will need resizing or something.
> 
> It is certainly [..] overall shape (and size) as our browse 
> and download buttons.

Yeah yeah, you're right of course ;). Don't take me too literally ;). My point
was really that they are not items where the design needs to be discussed -- the
affiliate's logo just need to be integrated with our other buttons.

> > forms confuse people (that's Normal People who don't use Linux and write C++).
> 
> Hey, I don't write C++, does that make me normal? ;-)

Naaah, you're just a wannabe ; ) I don't write C++ either. One day...

> > Anyway, I got in contact with Neil Stuber, who told me the font he used
> > was Arial Black 41.5pt.
> 
> Aha!  I hadn't recognized it before, I think because it had been resized
> to a different scale horizontally than vertically, making it look less
> fat, but apart from that this does appear to be the right font.

Yeah, I had to compress it horizontally -- I tried to fit the l in "Download" to
the l in "Clip" in order to get the right size. I guess the o in "Download" can
then be matched to the o in "Browse" if the need arises.
Comment 39 Benji Park 2005-08-16 14:38:57 UTC
> I think the words need to have good contrast against the background, to be
> easy to read at a quick glance, and the ones colored with the yellow-orange
> gradient, against a background of yellow-orange gradient, are definitely
> lacking in that regard.

Yeah, I wasn't happy with the look.


> I'm less sure about the white.  I think it is okay against the orange but
> falls a little short against the yellow.  I tried each of the two colors
> of blue from the site, with either white or black outlines, and I was not
> satisfied with that either.  Then I tried black text outlined in white,
> and I think that may provide the best contrast against the yellow-orange
> gradient background.  At the bottom, against the yellow, the black shows
> up really well, and at the top, against the orange, the white outline
> helps it to show up better than it might otherwise.  What do you think?
> 
> Oh, and if these buttons end up against a white background, they will want
> a black outline, rather than a white outline.  That's an easy change, and
> no big deal, and the black looks fine around the yellow-orange.

Yes, easy change, I was just going to the logo look.

> I'm not 100% sure whether I prefer Jonathan's blue-gradient button, or
> these yellow-orange ones.  I tend to like blue better as a color, but
> that is a personal thing.  The yellow-orange is probably more eye-catching.
> Then again, the blue probably integrate's better into the look of the site.
> OTOH, the yellow and orange are from the logo, and we'd talked about using
> those colors more on the site.  (Perhaps to go along with those buttons we
> should be using more red for boundary lines and things, yellow for the
> sidebar background instead of baby blue, and so on?  I guess we can leave
> most of those questions for the stylesheet to answer later.)  On the
> gripping hnd, the orange arrow on the download button stands out really
> well against the blue gradient background and really brings out the idea
> of download; whereas, with the yellow-orange gradient background, the focus
> tends to be on the button background or the whole button, rather than the
> arrow element.  Hmmm...  I think I want another opinion or two.
 
It might work to tone down the gradient (which should be red to yellow btw, with
a bit of orange in the middle) but what I really noticed when looking at the
mocks is that the brightly colored buttons really jumped out where as jonathans
really blended well with the rest of the site. My problem is that they blended
almost to well. I know that yellow goes really well against a blue background.
Maybe the button overall should be blue and the text colored. It is a graphic
after all and I'm hoping to have it stand out more.


> The other question I have is about the books; they don't communicate the
> concept of browse to me.  Maybe I'm just thick?  Granted, "Browse" can be
> an abstract and somewhat difficult concept to portray...

My first thought was a magnifying glass but then that = search. Maybe it's just
me but a folder has never comunicated browse to me, unless you are computer
literate. If we are hoping to move away from the heavy technical look of the
site then I think that we should try something a bit more accessable to those
not so computer literate. So I agree that the books are not a perfect match,
lets brainstom and see what does comunicate browsing. My first thought is eyes
or eyeballs maybe looking at some objects. Not sure how that looks exactly but
it might convey the concept better.
Comment 40 Jonadab the Unsightly One 2005-08-16 17:25:20 UTC
> Let's brainstom and see what does comunicate browsing

Right.  It's a thorny problem.  My first-draft button used the white
pointing-finger  graphic, which is intended to resemble how a web browser makes
the mosue cursor look when hovering over a link.  But it's awefully plain, and
maybe it doesn't convey "browse" very well either.  The book isn't doing it for
me, and I agree that the folder doesn't really fit with the type of browsing
that we're getting at here.  A disembodied eyeball is liable to gross people
out...  Spectacles, maybe?  "Browse" is a hard thing to communicate visually.

What if we use for that button a graphic that communicates the idea of artwork,
since that's what's being browsed?  Would that work?

Now, back to the button colors...

> It might work to tone down the gradient (which should be red to yellow
> btw, with a bit of orange in the middle) but what I really noticed when
> looking at the mocks is that the brightly colored buttons really jumped 
> out where as jonathans really blended well with the rest of the site. 
> My problem is that they blended almost to well. I know that yellow goes 
> really well against a blue background.  Maybe the button overall should 
> be blue and the text colored. It is a graphic after all and I'm hoping 
> to have it stand out more.

I think this paragraph hits the nail on the head:  the blue buttons don't
stand out as well as we might like, and the orange ones are a bit much,
calling too much attention to the background.  Something in between may 
be called for.

I'm wondering if maybe the background of the buttons, rather than being a
simple gradient, should maybe have some texture, to make it pop out a bit
more, without going all out for the blinding colors.
Comment 41 Jonadab the Unsightly One 2005-08-16 17:32:20 UTC
Created attachment 2901 [details]
Revised mockup again; buttons now have blue background, red/orange/yellow gradient text

This still needs work.	

I was aiming to combine the best of both button styles, but it clearly needs a
real artist's touch.  For one thing, I managed somehow to create a backround 
pattern that was almost, but not quite, entirely unlike what I intended.  I was
aiming for a brushed-aluminum look on the blue, and as you can see I didn't
precisely get there.  I'm also not at all sure I oriented the gradient on the
letters in the best possible way, and there may be other issues.
Comment 42 Jon Phillips 2005-08-16 19:53:07 UTC
NOTE: I filed this in the wrong bug accidentally.

The other thing is that the site really doesn't need IMO a complete overhaul. It
would be quite simple to simplify things by moving the right sidebar, replacing
the google search with the keyword search at the top of the screen, and then
tweaking the fonts, etc to focus more on getting to the clip art.

My primary interest in the site is two fold:

1.) Get Clip Art
2.) Submit Clip Art

Those are the primary interests IMO to anyone who visits the site.
Comment 43 Jonathan Leighton 2005-08-17 11:16:33 UTC
Created attachment 2912 [details]
Another mockup

How about this? I really didn't like the gradient you put it on the text
Jonadab -- apart from anything else it made it quite unreadable. As you can see
though, pretty much all I did was make the text that OCAL yellow colour, to
make the button a "stick out" a bit more. I'm not particularly fond of the
texture either because I think it adds un-necessary complication and detracts
from the real focus of the button: the text and the icon.

What do you think?
Comment 44 Nathan Eady 2005-08-17 14:32:57 UTC
The yellow text on the buttons is okay with me, and, as I said, the texture
didn't look like I wanted anyway.  I do think we need someone else, besides the
three of us, to weigh in at this point on two things:

1.  The buttons:  their look, colors, and stuff, and how to make
    them look *right*; we're a lot closer than when we started
    out, but I think there's something still not quite right.
2.  The presence or absence of the submit form on the front page
    (and, if present, where to put it).  We discussed this, but
    I don't know that we really reached a consensus.

Bryce?  Nicu?

After we settle those two things, I think we can look at HTML/CSS
implementation, tweaking fonts and sizes, and so forth.
Comment 45 Nicu Buculei 2005-08-17 22:43:17 UTC
Nathan Eady wrote:
>
>1.  The buttons:  their look, colors, and stuff, and how to make
>    them look *right*; we're a lot closer than when we started
>    out, but I think there's something still not quite right.
>2.  The presence or absence of the submit form on the front page
>    (and, if present, where to put it).  We discussed this, but
>    I don't know that we really reached a consensus.
>
>Bryce?  Nicu?

2. the simple submit form on the front page is the *only* one I use for
uploading images, I don't like the other one (probably because I find it
unintuitive, with the most important field, "Browse", at the bottom instead at
the top)
1. I tried to stay out of this talk (about the look of buttons) because I know
we have plenty of people each of them perfectly able to draw good buttons and
each of them with his own vision (resulting a high flamewar potential)
Comment 46 Jonathan Leighton 2005-08-18 06:34:17 UTC
(In reply to comment #45)
> Nathan Eady wrote:
> >
> >1.  The buttons:  their look, colors, and stuff, and how to make
> >    them look *right*; we're a lot closer than when we started
> >    out, but I think there's something still not quite right.
> >2.  The presence or absence of the submit form on the front page
> >    (and, if present, where to put it).  We discussed this, but
> >    I don't know that we really reached a consensus.
> >
> >Bryce?  Nicu?

Nathan Eady == Jonadab, right??? Confuse me why don't you ; )

> 2. the simple submit form on the front page is the *only* one I use for
> uploading images, I don't like the other one (probably because I find it
> unintuitive, with the most important field, "Browse", at the bottom instead at
> the top)

Would you be content removing the submit form from the front page if the other
one was reworked a bit?

> 1. I tried to stay out of this talk (about the look of buttons) because I know
> we have plenty of people each of them perfectly able to draw good buttons and
> each of them with his own vision (resulting a high flamewar potential)

It is true that there is high flamewar potential, but if we just ignore the
issues that won't make them go away. We haven't had a flamewar yet, and my
feeling is that if we all remain calm and be specific about things we
like/dislike and accept each other's viewpoints then it's fine. At the moment I
don't think we'll get anywhere without some feedback from some other people.
Comment 47 Nicu Buculei 2005-08-18 07:25:21 UTC
Jonathan Leighton on 2005-08-18 06:34  [reply] -------
>
> Nathan Eady == Jonadab, right??? Confuse me why don't you ; )

this is my chance to get the most offtopic bugzilla comment ever:
http://www.bright.net/~jonadab/personal/j/#saga
Yes, is the same person

> Would you be content removing the submit form from the front page if the other
> one was reworked a bit?

Don't know, let see the reworked version first.

IIRC, when we created the actual layout I asked what is the main target of the
site: end-users or contributors and we considered both as targets, but the
project was new and we needed contributors.
Now, one year later it may be or may be not the time to change the focus.
According to this it may be or may be not useful to have a submit form on the
front page.

> It is true that there is high flamewar potential, but if we just ignore the
> issues that won't make them go away.

I said I trust people working on buttons to be able to create good ones. This is
art, we can end with two buttons both equally good but completely different.
Comment 48 Jonathan Leighton 2005-08-18 12:56:44 UTC
(In reply to comment #47)
> > Would you be content removing the submit form from the front page if the other
> > one was reworked a bit?
> 
> Don't know, let see the reworked version first.

I'll create a new bug.

> > It is true that there is high flamewar potential, but if we just ignore the
> > issues that won't make them go away.
> 
> I said I trust people working on buttons to be able to create good ones. This is
> art, we can end with two buttons both equally good but completely different.

Okay, but somehow or other we need to come to a decision. Let me try to break it
down:

 * We seem to have agreed on the font -- both variants use Arial Black
 * We seem to have agreed that an arrow is appropriate for the download button
 * We seem to have agreed that the buttons need a black outline

List of things we haven't agreed on (accompanied by my opinions):

 * The actual arrow used. Personally I prefer mine -- the colour is another
thing to be discussed but I prefer the shape of mine.
 * Background colour -- I think the focus should be the contents of the button,
not its background. That's why I chose to use blue.
 * Text colour, although I think this is rather dependant on the background colour
 * Browse icon -- all things considered, I quite like the use of the OCAL icon
for this. It seems most appropriate, especially given how difficult it is to
convey with an icon!

I think the most important ones in this list is the background colour and the
browse icon.
Comment 49 Jon Phillips 2005-08-18 16:28:02 UTC
This is like a list within a list ;)

How about when things look good, post to the list the mockup, plan, etc. It is
hard to keep track of everything on here and at that point will bring more ppl.
into the fold. What do you all think?
Comment 50 Jonadab the Unsightly One 2005-08-18 18:26:26 UTC
> I tried to stay out of this talk (about the look of buttons) because I
> know we have plenty of people each of them perfectly able to draw good
> buttons and each of them with his own vision (resulting a high flamewar
> potential)

My instincts tell me that these buttons are not going to be a flamewar.  A
bikeshed, maybe, but not a flamewar.  So far most of what we've said about them
we've agreed on, and what we're looking at in the most recent mockups is a
combination of more than one person's work.  But we need another artist's eye.

> the simple submit form on the front page is the *only* one I use for
> uploading images, I don't like the other one (probably because I find
> it unintuitive, with the most important field, "Browse", at the bottom
> instead at the top)

If the other form is unintuitive, then it needs to be fixed.  I think I already
knew that, vaguely, in the back of my head, but this confirms it.  (That, *in
itself*, is not an argument for getting rid of the one on the front page, but
either way, an unintuitive form is one we should revise.  We can spin that off
to the other bug, though, for now.)

> Nathan Eady == Jonadab, right??? Confuse me why don't you ; )

Sorry, yes, at work I use my real-world name; whereas, from home I use the
username I picked up in college.  (Long story short, there were too many people
named Nathan (roughly, three per hall in the guys' dorms), so it was either go
by my last name all the time or get a monicker; I got one, and it stuck.)

> this is my chance to get the most offtopic bugzilla comment ever

Around the time of the 1.0 release, b.m.o. had some *extremely* off-topic
bugzilla comments, notably in certain "bugs" that were off-topic in the first
place or just plain in-jokes, and then the comments went off-topic even for the
bug's topic.  All of which is neither here nor there...

> > Would you be content removing the submit form from the front page if
> > the other one was reworked a bit?
> Don't know, let see the reworked version first.

Hmmm...  Actually, yeah, being just one page, that can probably be reworked
before we are ready to move on this holistic redesign anyway.

> IIRC, when we created the actual layout I asked what is the main target 
> of the site: end-users or contributors and we considered both as targets, 
> but the project was new and we needed contributors.  Now, one year later 
> it may be or may be not the time to change the focus.

I'm pretty sure we still want both users and contributors, but the question is
more about finding a balance that works as well as possible for as many people
as possible, balancing how it works for users against how it works for the
contributors and developers.

> How about when things look good, post to the list the mockup, plan, etc. 
> It is hard to keep track of everything on here and at that point will bring
> more ppl. into the fold. What do you all think?

We're approaching that point, I think.  The list software doesn't like
attachments (probably for good reasons), but I can always throw mockups up on
the web someplace and put URIs in a list message.  Yeah, I'll do that, when I
think we've gotten as far as we can without it, which will probably be pretty
soon now.  We've made quite good progress already.  There really are just a few
points left to go over and clear up...

Going back to Bryce's four things that the site needs to answer...
>   * Understand what the project is about and just how much clipart there is  
>   * Search/browse for clip art 
>   * Upload their own clip art 
>   * Feel welcome to get more deeply involved 

Number one is the main blurb.  Currently, it mostly covers what the project is
about, and does not tell how much clipart there is.  However, we could easily
enough add wording to it to cover that point.  On the other hand, the release
announcment, just below, can be expected to cover this point.  Is that enough,
or should this information be more prominent?

Number two appears in three places in the current mockup:  at the top of the
sidebar, in the main "what the project is about" blurb, and with the buttons
(although there's not a search button, so search is only covered twice; still, I
think that's enough).

Numbers three and four both have links in the sidebar, and also in the main
"what the project is about blurb".  We're still determining if that's enough.

Oh, and have we heard back from Benji what he thinks about the yellow text?
Comment 51 Jonadab the Unsightly One 2005-08-18 18:51:02 UTC
Upon closer inspection, Arial Black is *not* the font in the logo.  You can see
the difference quite noticeably in an uppercase C.  Most of the letterforms are
quite similar, but it is very clearly not identical on the uppercase C.
Comment 52 Jon Phillips 2005-08-18 22:10:30 UTC
The font is: Myriad Pro Black Cond

I said that in one of my posts I thought...


Check the example: http://www.font.com/free/myriad-pro-black-cond.php

I pulled the font out the original logo file. It is an adobe font from their new
font pack of opentype fonts that is standard in all adobe apps like the newest
illustrator, photoshop, etc.

It is a font I received with a previous purchase of adobe illustrator, but you
know, I'm not sure on the legality of the use of that font on our site...hence
why we need open fonts!!!

Comment 53 Jonadab the Unsightly One 2005-08-19 06:34:24 UTC
> The font is: Myriad Pro Black Cond
> I said that in one of my posts I thought...

Ah, yes, I'd missed that somehow; I see it now.

> It is an adobe font from their new font pack of opentype fonts that
> is standard in all adobe apps like the newest illustrator,
> photoshop, etc.

Ah.  I don't have any Adobe products except for the Reader, so that
explains why I don't have it on any of my systems.

> but you know, I'm not sure on the legality of the use of that font
> on our site...

IANAL, but from what I have been given to understand:
 * Distributing the font per se is something we can't do unless Adobe
   chooses to allow it, due to copyright law.  This probably includes
   embedding the font (although I'm not sure we use any formats that
   support embedded fonts anyway).
 * But distributing materials (e.g., graphics) that have been rendered
   using it is probably okay.  People think nothing of distributing
   paper documents that have text rendered with a non-redistributable
   font, and AFAIK there's nothing magic, legally, about paper in this
   regard.
   
However...

> hence why we need open fonts!!!

In some ways, it would be nice to use a freely-redistributable font
for most of the text-rendered-as-graphics on the site, because that
would allow anyone to create the graphics -- e.g., if we needed a new
button or a new sidebar section header, anyone could create it, not 
just someone who has invested money in Adobe products.

Of course, that only matters for the logo if we want its font to match other
things on the site.  Whether that's necessary is something we haven't spent much
discussion on yet.  We could leave the logo as it stands and use a different
font (perhaps a seriffed font, for a nice obvious contrast) for the other
things.  I was just going to use the same font as the logo uses because Jonathan
suggested it, and I didn't have any real objection -- not because I thought it
was strictly necessary.

So perhaps here's the question:  is it better to keep the extant logo/banner
with the font it has (which, incidentally, I quite like for that), or is it
better to pick a freely-redistributable font so that it's easier to make other
things (such as buttons and sidebar section headers) match it?
Comment 54 Jonathan Leighton 2005-08-19 07:58:25 UTC
I'll comment on the rest later cause I'm supposed to be working, but I have
access to that font here at work, so I can use it if we need. As I said in a
previous comment, one of my colleagues told me that once you convert a font to a
path, it becomes a drawing and is no longer subject to the copyright of the
font. So I think we're ok using it.
Comment 55 Jonathan Leighton 2005-08-19 12:16:26 UTC
(In reply to comment #54)
> I'll comment on the rest later cause I'm supposed to be working, but I have
> access to that font here at work, so I can use it if we need. As I said in a
> previous comment, one of my colleagues told me that once you convert a font to a
> path, it becomes a drawing and is no longer subject to the copyright of the
> font. So I think we're ok using it.

Meh, stoopid -- I just realised rejon said he has the font! Anyhow, two is
better than one.

I don't really have much else to say about any of thes really, I'm just gently
nodding (*nod*). On Monday I will (hopefully) change my latest mockup to use the
correct font and upload it again. Benji may/may not wish to change his too (??)
but then I'd fully support making a post to the list asking for feedback.
Comment 56 Jonadab the Unsightly One 2005-08-29 19:18:08 UTC
I have taken the mockup to the next level:
http://www.openclipart.org/index-simple.php

This is in CVS, so we can all fiddle with it until we're either happy with it or
tired of fiddling ;-)

Note that all changes are designed to not interfere with the existing site,
until we are ready to switch over to the new one, which we aren't yet.  This is
especially important when editing the CSS.

I also created a News page, which the new sidebar links to.  However, some of
the other links in the new sidebar currently don't go anywhere, e.g., the
affiliates link.

Oh, and I didn't know how to set up a rotating thing in PHP, so unless we want
the front page to be written in Perl, somebody else needs to do that part.  My
PHP foo is definitely not up to that.  So currently the mockup just points to
Inkscape all the time.  It's the only one we've done an affiliate button for
anyway.  That's another task that has to be done before we can go live with this.

Oh, about the buttons, those are in CVS too, both the SVG source and also the
PNG versions that the site actually uses.  For some of the affiliates, the
buttons might need to be done in PNG directly, due to the relevant branding
elements' not being available in vector form.
Comment 57 Jonathan Leighton 2005-08-30 07:23:23 UTC
(In reply to comment #56)
> I have taken the mockup to the next level:
> http://www.openclipart.org/index-simple.php
> 
> This is in CVS, so we can all fiddle with it until we're either happy with it or
> tired of fiddling ;-)

Good

> Oh, and I didn't know how to set up a rotating thing in PHP, so unless we want
> the front page to be written in Perl, somebody else needs to do that part.  My
> PHP foo is definitely not up to that.  So currently the mockup just points to
> Inkscape all the time.  It's the only one we've done an affiliate button for
> anyway.  That's another task that has to be done before we can go live with this.

I'll do it.

Comments:

 * Can we make the buttons bigger?
 * I'm not a fan of the markup in certain places -- particularly the sidebar --
I'll make changes myself and let people know.

Other than that, I think it's loooking quite good.
Comment 58 Jonadab the Unsightly One 2005-08-30 16:21:21 UTC
> Can we make the buttons bigger?

Yes.  They are SVG.  (Well, on the page they're PNG, but they were designed as
SVG and exported to PNG, so we can export them again, easily.)

I tried them at 128px wide, and they didn't look big enough, so I tried them at
150px wide, and that was better, but we can try larger sizes and see how they look.

> I'm not a fan of the markup in certain places -- particularly the sidebar --
> I'll make changes myself and let people know.

Sure thing.  I will fiddle with the button sizes, you fiddle with the sidebar.
Comment 59 Jonadab the Unsightly One 2005-08-31 08:34:00 UTC
How is the size of the buttons now?
Comment 60 Jonathan Leighton 2005-08-31 13:39:39 UTC
(In reply to comment #59)
> How is the size of the buttons now?

Much better :)
Comment 61 Jonathan Leighton 2005-09-11 10:23:14 UTC
Markup for the sidebar is now drastically improved. PHP affiliates rotation
coming up...
Comment 62 Jonathan Leighton 2005-09-11 14:17:30 UTC
The affiliates link can now be randomly generated. However, currently only an
Inkscape button exists so only an Inkscape button appears. For more buttons to
appear, they will need to be added to the $affiliates array on line 262 of
includes/functions.php.
Comment 63 ryanlerch 2006-09-06 17:22:35 UTC
resolved by the introduction of cchost