

Ask HN: Please review my webapp: Da Button Factory - create shiny buttons - palsecam
http://dabuttonfactory.com

======
palsecam
(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 :-)

~~~
trevelyan
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.

~~~
tel
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.

~~~
sqs
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).

~~~
pwk
我的汉语不太好, I needed to look up 厉害:
[http://www.nciku.com/search/zh/detail/%E5%8E%89%E5%AE%B3/130...](http://www.nciku.com/search/zh/detail/%E5%8E%89%E5%AE%B3/1309342)

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 厉害?

------
mattchew
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.

~~~
whughes
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.

------
sh1mmer
You should export as a alpha-transparency PNG-8 not PNG-24. The reason for
this is that IE6 won't render any PNG-24 transparency it just makes it all
opaque. However with PNG-8 IE6 will make all alpha transparency transparent.

This means IE6 users get a slightly chunky rounded corner and users with
better browsers (IE7, FF, Safari, etc) get a smooth alpha transparency.

My good friend, Nicole Sullivan, has a great presentation on this topic
([http://www.slideshare.net/stubbornella/designing-fast-
websit...](http://www.slideshare.net/stubbornella/designing-fast-websites-
presentation)) see slide 55 for PNG optimization.

Nicole also worked on a tool with another friend, Stoyan Stephanof,
<http://smush.it> . Smush.it reduces the filesize of your images without
losing quality by removing unnecessary bit data, and I think, metadata. For
some of your buttons it was carving 14% off the filesize. It might be worth
integrating that in for your users.

------
palsecam
Thanks everyone for all of your comments!

@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.

------
fragmede
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.)

~~~
palsecam
Thanks for reporting all these things!

\- 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!

------
sanj
I would love to be able to trivially make buttons that ape other UIs,
especially in platforms that have a existing look and feel.

Examples:

Buttons that look "native in Facebook" for fb apps

Buttons that looks "right" in a Google Gadget.

Elements for Apple Dashboard widgets.

------
imp
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.

------
sh1mmer
I like the site, so it's kind of a shame for me that you called it "Da Button
Factory". It just feels childish and cheesy.

Was there a reason for "Da" instead of "The"? Programming isn't "gangsta" rap,
after all.

~~~
anuraggoel
Cut him some slack; he's French :-)

------
sketerpot
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.

------
nate
Yeah, looks pretty useful. Any thoughts about charging anything for it?

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...](http://www.brendonwilson.com/blog/2006/04/30/joe-kraus-confessions-
of-a-startup-addict/)

~~~
palsecam
Thanks a lot, especially for the link! I don't think much of any serious
"business-ization", but hey, we'll see ;-)...

------
yef
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.

~~~
palsecam
Thanks for your advice.

1\. yes, it's in my mind, it will be the big step towards the "version 2"

2\. and 3. it may come ;-)

~~~
jackchristopher
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".

------
savrajsingh
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.

~~~
savrajsingh
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).
;)

------
wooby
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.

------
indiejade
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.

P.S. I added your site to SU:
<http://www.stumbleupon.com/url/www.dabuttonfactory.com/>

------
brk
This is really kind of cool.

Curious to know what method you're using to generate the actual buttons?

------
PanMan
Checked it yesterday, I like it. But I want to use it today, and it's down :(
[http://www.downforeveryoneorjustme.com/www.dabuttonfacory.co...](http://www.downforeveryoneorjustme.com/www.dabuttonfacory.com)

~~~
palsecam
it is up again. Sorry for the downtime, but I didn't expect such traffic!

------
palsecam
Hello everyone out there following the button factory!

First of all, thanks everyone for the big amount of -so- useful comments! It's
really interesting and motivating!

Some have noticed, the server has been down, overloaded. I put some rules to
guarantee its disponibility, but it may still be problems (it's a very small
server and I just made dirty hacks to prevent it to die miserably, I hope).

I pushed a little update which corrects some of the bugs suggested:

* the 'swap' button is now usable with the history

* the vertical and horizontal padding are in the right order :-P

* "hammering" the increment/decrement buttons is now possible

* the shadow orientation now allows only east or west

* the site was totally broken in IE 6/7, now it should be usable (but terribly ugly!)

* the title "Da Button Factory" is now a link

* links have been added to download the button or bookmark the page

For the color pickers: I'm currently working on it. But it's a big job, and I
want to make it well, so it will take a little time.

For browsers issues: thanks for the reports, It's very important, and I'll
investigate, but not immediately (I've no easy access to the Internet in the
week, even less access to Windows).

I'll certainly open a blog soon, so that interested people could follow the
updates via RSS.

Once again, a big thanks to everyone for the help!

------
dbul
Absolutely Genius! I've never wanted to pay for something more in my life. Why
not use the ycombinator startup tipjoy? (<http://tipjoy.com>)

~~~
dbul
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.

------
dpurp
Not bad.

1\. On a first glance the interface is a little overwhelming, and I am not
sure where to go/what to change first. Have a single column of options that
can be expanded/condensed accordion style (think the Mac MS Word formatting
sidebar).

2\. Buttons produced are only a single image. It would be nice if multiple
images/sprites were created (that is, a single image file, with multiple
images). The additional images would enable hover and on click capabilities,
providing a user with visual feedback that the image is indeed a button, and
that it is working. That being said, you may also need to include the relevant
CSS necessary for a user to select the correct sprite in each situation.

3\. Having the Undo/Redo on the top right seems a bit unnatural. (I didn't
even notice these options at first; moving them to the top left may be
better?) You might also consider using the standard arrow icons for these
options with a text description on the bottom or on the right

4\. Other people have already mentioned this, but additional fonts and a color
picker would be very useful.

5\. The site's layout requires a fairly wide screen. When I don't have my
browser window maximized, the layout gets kinda messed up (input boxes flow to
the next line abandoning their label).

------
sci
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.

~~~
palsecam
Thanks a lot, it's so nice and grateful to see people enthusiast about it! The
pleasure to serve :-)

------
nav
Concept is good. I'd prefer to see a swiss army knife approach with the
design. Keep it simple/stupid. Just because your application has various
features and services, you don't have to overwhelm a new user by carpet
bombing them (humor me;) with them. I'm sure there is plenty of feed back in
this thread that will also help with the next revision. Best of luck to the
team.

------
jrnkntl
It doesnt work in IE7 (stuck on this browser at the University Library, so no
alternative). The progress indicator keeps going.

~~~
palsecam
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.

~~~
rams
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.

~~~
sho
Wow, where has that been all my life?

Thanks a lot for that tip - that's going to come in _really_ handy.

------
zepolen
Your background css option produces code that doesn't work in Opera.

Otherwise, it's nice and simple.

------
whughes
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.

------
jasonkester
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.

(and add a color picker)

------
tjr
Very nice. I don't presently have any suggestions that haven't already been
made, but this is one of the most impressive developer tools I've seen
recently. Thank you for your service.

------
Hates_
Nice and simple to use. I can certainly see myself using this a lot.

------
hotpockets
1\. Your logo is pretty plain. Maybe make your logo be one of your buttons.

2\. It would be cool to be able to replicate popular button styles of other
companies, or at least similar to them.

3\. I didn't see the undo/redo links until I was done. Maybe move them
somewhere else, like under the center button?

4\. Def need to make it easier to find colors you want. Plus more fonts like
others suggested.

5\. Can you automatically have it generate a "button pressed down" version?

------
brianculler
[http://dabuttonfactory.com/edit?t=This%20is%20a%20startup%3F...](http://dabuttonfactory.com/edit?t=This%20is%20a%20startup%3F&fb=on&fi=on&ts=24&tc=white&tsh=on&tshs=3&tshc=45%2C35%2C25&c=10&bgc=%23fa0&ebgc=%23f30&be=on&bs=1&bc=red&sh=on&shs=1&shc=darkgray&w=200&h=40&hp=15&vp=12&f=serif&ot=image&it=png&s=round&bgt=pyramid&sho=s&sho-
we=e&st=variable)

------
palsecam
For the people who would like to follow the progress of Da Button Factory:
there is now a development blog <http://dabuttonfactory.blogspot.com>. You can
suscribe to its Atom feed to stay in touch, or whatever.

BTW, Da Button factory now have: color pickers, a few more fonts, a public
API, a better handling of the Opera browser (but, sorry, still bad with IE),
and a lot of minor improvements :-)

------
tortilla
This is really well done. I like the fact you put in examples and allow users
to edit those examples. I will definitely use and recommend to others.

------
arnorhs
I love this thing. I'm a designer and I always use Photoshop for these kinds
of things, but this is so much quicker and nicer to use...

------
jungolaya
Very nice indeed! I agree with yef that you need a simple method to create a
hover and click versions for each of the buttons.

------
PanMan
Checked it yesterday, I like it. But I want to use it today, and it's down :(
[http://www.downforeveryoneorjustme.com/www.dabuttonfacory.co...](http://www.downforeveryoneorjustme.com/www.dabuttonfacory.com)

------
vikram
I would like to pick the color rather than enter the RGB numbers or the name.

~~~
cottsak
+1 for a colour picker

------
helveticaman
I've been waiting for this for so long...thank you so much.

------
ralph
Remember my last settings when I return to the site. Provide a `reset to
defaults' button if I want sanity to return.

------
ralph
Either wrap long text to fit in fixed-width buttons, or let me specify \n and
\\\ to break the lines manually.

------
phillian
On the usability side, clarifying how to change the color of the button could
be more intuitive.

------
thingsilearned
I've used it and found it easy and super helpful! Thanks for this!

------
rishi
I love it

------
DXL
Really nice, but I'd suggest adding a color picker to the color fields. Not
everybody can calculate hex values from the top of their head.

------
ahoyhere
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.

------
arjungmenon
I actually happened to use a website Cooltext (<http://cooltext.com/Buttons>)
recently, and it also created buttons for you. Comparatively, your website's
interface is definitely much better (more dynamic - buttons reflect changes
immediately), but in terms of features/options it would be a good idea to take
a look at Cooltext and try to add in some of the features that they offer.
(Like a wider set of fonts to choose from, button special effects, etc.)

