(Web) design is hard. For us programmers, it's a pain in the ass, and
when it comes to create UI elements for a (web) app, we are stuck with two
choices:
1. create something very basic, or
2. spend countless hours searching the web for Photoshop tutorials on how to create a bubble or depth
effect, then spend even-more-countless hours fighting with Photoshop to implement it, and finally,
maybe adapt the image with some external tools to make it be a CSS sprite or whatever)
Yes, 1. is not necessary a bad thing (HN is a good example :-)), but we all
know that for most softwares, some attractive eye-candies are useful. Even
GMail uses more than a simple <input type="button"> to display
their buttons.
So here comes Da Button Factory. It aims at making it easier to create
pretty buttons, which are one of the key elements of an user interface
(especially on the web), in an quick and human-friendly way (not tons of
options/menus/concepts like in an image processing program).
And because using plain image files on the web often sucks, it (will)
provide solutions that makes good use of CSS.
Currently it's just a beta. There is only a very simple CSS solution
implemented. It may looks ugly in some browsers. Things are not polished.
But I would be very glad to hear any comments of yours on this "draft". Do you
find it interesting? Do you have any critics/ideas about it? Did you notice
any bugs or problems?
Oh, and I am french, so please excuse me for any grammar/spelling mistake in
this post, and don't hesitate to correct me, of course :-)
Good idea and seems to work well too. I'm not sure I'll be giving up Photoshop anytime soon, but this can definitely be useful for quick webapps and prototypes.
It would be great if there was a "randomize" button so that one could quickly try out different styles with the same text.
Two minor nitpicks:
- Hovering over "Da Button Factory" makes the text yellow but isn't clickable
- Your menu buttons at the top could use some adjusting so that the text is more vertically centered (in Mac FF).
The images are queried by Ajax to the server, where a Fast-CGI Perl script generates, caches, and sends the images.
Javascript is used, obviously for the Ajax job, for some small visual effects, and to generate the CSS code.
You should port this project to canvas. It may be tricky to get it working in all browsers but the response time would be much faster and the server load would be reduced. I'd be willing to help with the implementation- sounds like a really cool project.
Slide the old button image vertically and put the new one in its place. I'd like to be able to compare the before and after. Also, while it's sliding, I'm distracted from waiting for the new one, but don't make me wait for the slide to finish if the new image is ready to display.
If you're looking to improve the design of the site, you might be interested to know that the Chinese character for big is 大, pronounced "da4" (fourth or falling tone).
The character is simple enough it should be easy to work into any site logo, and the meaning works well with your URL ("Big Button Factory"). Mandarin is also cool.
It's definitely cool and nearly the first thing I noticed as well, but it'll confuse exactly everyone besides those with experience in both english and chinese.
True. Although I hope someday Mandarin will become second nature to lots of Americans, in the same way that Spanish "grande," "hola," etc., can be mixed with English to effect a certain attitude.
Let's start with 厉害. Easy to pronounce and sounds like its meaning (at least to me).
Pretty neat site, along with looking up characters by typing or cutting and pasting you can draw them and it tries to guess what character you're looking for.
I'm looking at it thinking "Dai Button Factory? Did you typo your own domain name?"
(Its not like single Chinese characters in isolation say "Note to English speakers who read Asian languages: this is Chinese, not Japanese or Korean. Please don't break our pun by trying to read it in one of those other languages. Thanks!")
Edited to add: If you wanted a Japanese name for the site it would probably be ビッグボタンファクトリー, pronounced Biggu Botan Fakutorii. It means... well, OK, guess you can probably figure that out.
I'd like to see some more font options. The stock web fonts tend to look a little stale because we see them in so many places.
It would also make things slightly easier if there was a download button next to the web address--this might be tricky to implement but it would save users several seconds.
Yes, I should definitely add more fonts, it's useful.
But does anyone know if embedding open sources fonts is fully legal? And what about commercial fonts, i.e: Arial, Comic sans MS, etc.? It is quite difficult to understand the licences for my usage.
For the download button: yes, I know it would be nice, I thought about it, but decided to delay its implementation, because as you say, it will certainly be tricky to make :-D It will come!
I would think that as long as you're not distributing the font file you should be fine. If you want to be safe, go for fonts that are distributed free, and provide credit somewhere on the site.
If you stick to free or standard fonts, I think the worst that happens is that you have to take them down, especially since you're not charging for use.
1. More fonts. Lacuna is a first one that comes to my mind as a perfect free font for this kind of things.
2. Highlight curve should be more like sine wave, It looks really boring when it is like a bottom of ellipse -- a part of a sine curve would be a better approximation of real-world shinies.
Very nice. A colour picker would be a very good idea. Perhaps display two buttons, one for the ordinary button, as you are doing now, and one for a selected version.
If you are feeling brave maybe animated buttons which cycle several lines of text.
Not sure about the css version though. Do you really want all these people hitting your server?
Looks very nice. Note that the preview produced in "CSS Background" mode doesn't seem to work in Opera. (9.6) Niche browser, I'll admit, but good browser support is not asking too much from a service like this.
There is always a third option: pay somebody to handle this for you. I like automated solutions as much as the next guy, but if you want quality and don't want to become a graphics design professional yourself...
Nice! I am a web designer and even though I'll stick to using Fireworks (I'd rather create the entire layout than use a collection of dedicated tools) I can still appreciate that this attempts to solve a pain-in-the-ass issue for programmers.
One small bit of advice - I'd pick a default welcome button that wasn't quite as jarring as the orange one. Something with a bit more of a muted color scheme that goes with the rest of the blue layout you have going on, like:
Very nice start, I had to do buttons for my last web app and ended up using less nicer tool.
I suggest to add next two features which can be essential for some scenarios:
1) Add way to choose background color (i.e. page color) for the formats that don't support transparency (gif and jpeg). PNG gradient transparency is not supported in IE6 and quite often there is a need to render button edges with background color preset because of that.
2) Pre-render images for other button states: hoovered and pressed.
And afterthought: consider supporting iPhone-style buttons (i.e. like big red "delete contact" button and small blue buttons), I'm sure a lot of people are looking for them.
Nice! Creating image buttons really isn't that difficult, but the gradients are very pretty. I can see how this could be massively convenient for some people.
Sorry, I didn't try with IE7 :-/ I could just put my hands on an old IE6 version to test the render. I'll definitely install a virtual machine or smthg :-) Thanks for the report.
Check out browsershots - http://browsershots.org/ . I think you can submit a job to check how a page renders on a specific OS-browser combination. Otherwise you can download and check it out - it's open source.
Yes, it's a pain b/c you have to run a VM, but it's the most reliable way of testing IE. Other "shortcuts" won't perfectly emulate IE7 in an IE6 environ, or vice versa.
Great job. The buttons look great for such minimal effort. Suggestions for next steps:
1. Add an easy way to get hover and pushed states for buttons. Basically, provide some clever defaults that allow the user to get all 3 at once with minimal work.
2. Put in a paypal or tip jar link (it can't hurt, right?)
3. Add a pretty attribution link, "Buttons by Da Button Factory" or something.
I don't know if he meant this too but I'd be great to add to the Examples section, a PayPal "Donate" button.
I don't like the standard one, but I'd want users to know it's Paypal. But I don't know if using their logo is be infringement, but you could still use a PayPal-like logo.
I don't like the word "donate", but I'm not sure how that change would effect users actions; that's been the standard for a while. But I like "contribute" and "support".
@brk: the method is pretty simple: the images are queried via Ajax to
the server, which runs a Fast-CGI script, written in Perl, to generate
the buttons. Javascript does the rest (visual effects, Ajax, CSS code generation...)
@zepolen: thanks for reporting the problem in Opera, I'll investigate ASAP!
@DXL: yes, color pickers and more powerful controllers in general (for
picking the orientation maybe, for example) are in the roadmap :-)
@exalo: you are not the first one to tell me about a "randomize"
feature. I'll think of it seriously. Thanks.
For the vertical
alignment: normally it should be centered, but the result of
"vertical-align: middle;" vary between browsers. I'll make it better
ASAP :-)
For the non-clickable title: actually it's currently just
a <h1> tag, but this will obviously change, you're right.
This is great, works very simply and the results look fantastic! I've just created a few to buttons to use on my latest project and they're perfect for my needs - all in less time than it would take to open up PS and create just one button! An awesome app and I wish you every success with it, I second the call for a PayPal link/contribute link, I think many a time-starved designer would happily drop a few $ your way in gratitude.
Looks great. Found a bug though. You've reversed the horizontal and vertical padding around the text. Adding vertical padding puts it to the left/right, when it should put it on the top/bottom.
I like this! Great job. I'd include a small gallery of many great examples on the front page, and as soon as you click an example, it prepop's the settings. You've already got this feature, but it starts from another page. You could keep prepopulating this gallery with buttons that others are creating. :) Again, this is awesome and useful! And the button quality looks pretty good.
couple other things -- the layout looks a little weird on firefox on mac, and you definitely need color pickers (as I'm sure others have mentioned as well). ;)
One thing I just noticed is that these fonts do not support Japanese. In earlier threads there was mention of adding more fonts so I'm sure you'll add them eventually.
OK, I admit, I was expecting it to be super crummy, but you won me over.
The Examples section should be more prominent. I just assumed you could only do glossy web 2.0 buttons at first glance. But your examples are impressive.
I think, in general, you need to a) add a color picker (as everyone else has said), and b) offer a clickable "playlist" of button settings. Take your examples, make them into recipes, and put them on the front page. I want to click the Apple-style button and have the button I'm working on turn into that style.
Make sense?
BTW - do you know that song for kids about the button factory? "Hi, my name is Joe, and I work all day at the button factory. One day, my boss came up to me and said 'Hey Joe, are you busy?' I said 'no.' He said, 'So push this button with your right foot.'" etc.
Nice! I'd suggest adding a file input or url field to supply an icon image for the buttons. Better still, grab the FamFamFam icon set and let people use those.
This is really nicely done. I like it a lot. Branding is important; make a "Buttons by DaButtonFactory.com" button that people can use.
Others have already mentioned a colorwheel. Adding that would help usability. Unless I've been doing colors recently, I don't know #f00 from #0f0.
Even a simple popup-grid of colors, something like what makebutton.com has for color selection would help here.
Minor bugs I came across:
Undo does not work for swapping the two background colors.
If I hammer the 'Size +' (or any other) button, I get rate limited. I didn't look at the code, is there a query for every button press when I go from 200 -> 250 for the width?
The error message for non-integers could be better:
Value "11.2" invalid for option text-size (number between 0 and 2000 expected).
Actually, the error messages could be better all around, but it isn't a huge deal.
West/East only shadows don't work:
Value "nonew" invalid for option shadow-orient (possible values: "n", "s", "e", "w", "ne", "no", "so", "se").
The top-left text for "Da Button Factory" should be an actual link. (Or just clear the button settings back to the default, or it could even be the 'randomize' link that others have asked for.)
It's surprisingly hard to make buttons that look bad with this. I had to work hard to pervert it to make a 1997-style monstrosity. Good work on making pleasant design the default.
Let me compare you to http://www.mycoolbutton.com/ which is what I used a few weeks ago when I needed a pretty image button.
What I like better there:
* Their button has a really sharp glossy look. Yours are nice, but not as nice (that I noticed, at least).
* They have more fonts than you do.
What I like better about yours:
* Lots more control over most of the details. Notably, the custom color gradients.
* The showcase of editable examples. Very nice.
* Less clutter on the page. Though I certainly would not blame you if you put up ads or a tip-me button.
Although I think your extensive options are good, it's sort of a power-user interface. You might consider a simpler interface for visitors who want something very quick and easy. Or, you could expand your gallery of examples, perhaps even add a sidebar of examples to the front page.
All in all, very well done. Congratulations and thank you.
My opinion is that despite the extra options and control, the OP's site is much easier to use than mycoolbutton.com. Most of the options there are hidden by default, making piecing together their functionality pretty difficult. This is in addition to the clutter -- with my 'ad blinders' on, I can easily confuse some legitimate UI elements with ads.
One small criticism -- the 'Create' button is not immediately obvious, especially since it's up in the navigation section. Maybe make clicking the button do the same action and place the Create button more prominently by the options.
I really like this. I love programming but I hate photoshopping, and I'll probably use this all the time. It would be nice if I could upload my own font. Response time was quick and I like the history saving.
93 comments
[ 2.8 ms ] story [ 169 ms ] thread1. create something very basic, or
2. spend countless hours searching the web for Photoshop tutorials on how to create a bubble or depth effect, then spend even-more-countless hours fighting with Photoshop to implement it, and finally, maybe adapt the image with some external tools to make it be a CSS sprite or whatever)
Yes, 1. is not necessary a bad thing (HN is a good example :-)), but we all know that for most softwares, some attractive eye-candies are useful. Even GMail uses more than a simple <input type="button"> to display their buttons.
So here comes Da Button Factory. It aims at making it easier to create pretty buttons, which are one of the key elements of an user interface (especially on the web), in an quick and human-friendly way (not tons of options/menus/concepts like in an image processing program). And because using plain image files on the web often sucks, it (will) provide solutions that makes good use of CSS.
Currently it's just a beta. There is only a very simple CSS solution implemented. It may looks ugly in some browsers. Things are not polished.
But I would be very glad to hear any comments of yours on this "draft". Do you find it interesting? Do you have any critics/ideas about it? Did you notice any bugs or problems?
Oh, and I am french, so please excuse me for any grammar/spelling mistake in this post, and don't hesitate to correct me, of course :-)
It would be great if there was a "randomize" button so that one could quickly try out different styles with the same text.
Two minor nitpicks:
- Hovering over "Da Button Factory" makes the text yellow but isn't clickable
- Your menu buttons at the top could use some adjusting so that the text is more vertically centered (in Mac FF).
Great work!
I don't think I'll implement that in the near future, but I keep it in the back of my head for later, and I'll contact you when the time has come :-)
Thanks for the idea.
The character is simple enough it should be easy to work into any site logo, and the meaning works well with your URL ("Big Button Factory"). Mandarin is also cool.
It'd be even cooler if you skipped adding it to the site, and just tattooed it on your lower back.
Let's start with 厉害. Easy to pronounce and sounds like its meaning (at least to me).
Pretty neat site, along with looking up characters by typing or cutting and pasting you can draw them and it tries to guess what character you're looking for.
What prompted you to start with 厉害?
(Its not like single Chinese characters in isolation say "Note to English speakers who read Asian languages: this is Chinese, not Japanese or Korean. Please don't break our pun by trying to read it in one of those other languages. Thanks!")
Edited to add: If you wanted a Japanese name for the site it would probably be ビッグボタンファクトリー, pronounced Biggu Botan Fakutorii. It means... well, OK, guess you can probably figure that out.
I'd like to see some more font options. The stock web fonts tend to look a little stale because we see them in so many places.
It would also make things slightly easier if there was a download button next to the web address--this might be tricky to implement but it would save users several seconds.
Yes, I should definitely add more fonts, it's useful. But does anyone know if embedding open sources fonts is fully legal? And what about commercial fonts, i.e: Arial, Comic sans MS, etc.? It is quite difficult to understand the licences for my usage.
For the download button: yes, I know it would be nice, I thought about it, but decided to delay its implementation, because as you say, it will certainly be tricky to make :-D It will come!
If you stick to free or standard fonts, I think the worst that happens is that you have to take them down, especially since you're not charging for use.
And whatever you do, don't use comic sans (http://bancomicsans.com/home.html).
2. Highlight curve should be more like sine wave, It looks really boring when it is like a bottom of ellipse -- a part of a sine curve would be a better approximation of real-world shinies.
1. More Fonts 2. A color picker
If you are feeling brave maybe animated buttons which cycle several lines of text.
Not sure about the css version though. Do you really want all these people hitting your server?
I'll look ASAP at browser issues, but unfortunately I've currently no easy access to several OS/browsers :-/
There is always a third option: pay somebody to handle this for you. I like automated solutions as much as the next guy, but if you want quality and don't want to become a graphics design professional yourself...
One small bit of advice - I'd pick a default welcome button that wasn't quite as jarring as the orange one. Something with a bit more of a muted color scheme that goes with the rest of the blue layout you have going on, like:
http://tr.im/examplebluebutton
Otherwise, very well done.
Nice to know a web designer appreciates it!
I suggest to add next two features which can be essential for some scenarios: 1) Add way to choose background color (i.e. page color) for the formats that don't support transparency (gif and jpeg). PNG gradient transparency is not supported in IE6 and quite often there is a need to render button edges with background color preset because of that. 2) Pre-render images for other button states: hoovered and pressed.
And afterthought: consider supporting iPhone-style buttons (i.e. like big red "delete contact" button and small blue buttons), I'm sure a lot of people are looking for them.
Curious to know what method you're using to generate the actual buttons?
P.S. I added your site to SU: http://www.stumbleupon.com/url/www.dabuttonfactory.com/
Otherwise, it's nice and simple.
I'm a huge fan of Joe Krause's advice to beta test a business model while you beta test your product: How you make your money is equally relevant in how people perceive your product. http://www.brendonwilson.com/blog/2006/04/30/joe-kraus-confe...
Thanks a lot for that tip - that's going to come in really handy.
Yes, it's a pain b/c you have to run a VM, but it's the most reliable way of testing IE. Other "shortcuts" won't perfectly emulate IE7 in an IE6 environ, or vice versa.
1. Add an easy way to get hover and pushed states for buttons. Basically, provide some clever defaults that allow the user to get all 3 at once with minimal work.
2. Put in a paypal or tip jar link (it can't hurt, right?)
3. Add a pretty attribution link, "Buttons by Da Button Factory" or something.
1. yes, it's in my mind, it will be the big step towards the "version 2"
2. and 3. it may come ;-)
I don't like the standard one, but I'd want users to know it's Paypal. But I don't know if using their logo is be infringement, but you could still use a PayPal-like logo.
I don't like the word "donate", but I'm not sure how that change would effect users actions; that's been the standard for a while. But I like "contribute" and "support".
@brk: the method is pretty simple: the images are queried via Ajax to the server, which runs a Fast-CGI script, written in Perl, to generate the buttons. Javascript does the rest (visual effects, Ajax, CSS code generation...)
@zepolen: thanks for reporting the problem in Opera, I'll investigate ASAP!
@DXL: yes, color pickers and more powerful controllers in general (for picking the orientation maybe, for example) are in the roadmap :-)
@exalo: you are not the first one to tell me about a "randomize" feature. I'll think of it seriously. Thanks. For the vertical alignment: normally it should be centered, but the result of "vertical-align: middle;" vary between browsers. I'll make it better ASAP :-) For the non-clickable title: actually it's currently just a <h1> tag, but this will obviously change, you're right.
The Examples section should be more prominent. I just assumed you could only do glossy web 2.0 buttons at first glance. But your examples are impressive.
I think, in general, you need to a) add a color picker (as everyone else has said), and b) offer a clickable "playlist" of button settings. Take your examples, make them into recipes, and put them on the front page. I want to click the Apple-style button and have the button I'm working on turn into that style.
Make sense?
BTW - do you know that song for kids about the button factory? "Hi, my name is Joe, and I work all day at the button factory. One day, my boss came up to me and said 'Hey Joe, are you busy?' I said 'no.' He said, 'So push this button with your right foot.'" etc.
(and add a color picker)
Others have already mentioned a colorwheel. Adding that would help usability. Unless I've been doing colors recently, I don't know #f00 from #0f0.
Even a simple popup-grid of colors, something like what makebutton.com has for color selection would help here.
Minor bugs I came across:
Undo does not work for swapping the two background colors.
If I hammer the 'Size +' (or any other) button, I get rate limited. I didn't look at the code, is there a query for every button press when I go from 200 -> 250 for the width?
The error message for non-integers could be better: Value "11.2" invalid for option text-size (number between 0 and 2000 expected). Actually, the error messages could be better all around, but it isn't a huge deal.
West/East only shadows don't work: Value "nonew" invalid for option shadow-orient (possible values: "n", "s", "e", "w", "ne", "no", "so", "se").
The top-left text for "Da Button Factory" should be an actual link. (Or just clear the button settings back to the default, or it could even be the 'randomize' link that others have asked for.)
- the undo is now ok with the "swap" buttotn
- you can "hammer" the increment/decrement buttons
- the error messages are a bit better ('integer expected' and not 'number expected'). What do you mean by "better all around", what do you think of?
- west/east only shadows are possible
- the title is now a link
Thanks!
What I like better there:
* Their button has a really sharp glossy look. Yours are nice, but not as nice (that I noticed, at least).
* They have more fonts than you do.
What I like better about yours:
* Lots more control over most of the details. Notably, the custom color gradients.
* The showcase of editable examples. Very nice.
* Less clutter on the page. Though I certainly would not blame you if you put up ads or a tip-me button.
Although I think your extensive options are good, it's sort of a power-user interface. You might consider a simpler interface for visitors who want something very quick and easy. Or, you could expand your gallery of examples, perhaps even add a sidebar of examples to the front page.
All in all, very well done. Congratulations and thank you.
also, maybe more visual aids for the options - like images to show the result for a particular selection. this might speed up the use of the system.