Especially for websites that center around user downloads, an attractive, easy-to-find â€˜Downloadâ€™ button is an essential design element. Here weâ€™ll look at what others are doing, what makes a good button, and what you can do to spice up any download buttons on your site.
Whether youâ€™re offering software, Photoshop brushes, free icons, or something else, a download button is an important part of your UI design. Here are 20 buttons to learn from- they come from a variety of sites in a variety of styles, but they all have something to teach us.
JQuery has done an excellent job of matching the download button to the design of the site without letting it blend in. They’ve also included a pleasant, subtle hover effect. Notice how the large bright areas on top of the button and inside the arrow are used to draw the eye toward that part of the page.
I just couldn’t leave WordPress out! Although their download button isn’t characterized by stunning graphics, they’ve done a great job of using a darker, saturated color to make the button stand out from the muted background tones.
3. Kohana PHP
Kohana has uniquely situated it’s download button by placing it in the header, where it’s very hard to miss. Also, instead of a simple css hover effect, they’ve used jquery to give the button a lovely slow fade on hover.
Notice Skype’s excellent use of whitespace to emphasize the button, as well as their use of the Skype logo and the attention-grabbing text, “Download Skype now”.
5. Dry Icons
I like Dry Icon’s description of what you’re getting- how many icons and in what format. A dark color emphasizes the button, and the “Wet Floor” effect helps it fit in with surrounding elements.
6. Code Igniter
Code Igniter’s download button fits in nicely with the other options in the list, and it’s placement on the page is well-planned. I believe this is also a great example of proper icon usage.
7. Team Viewer
“Download Now It’s Free,” says Team Viewer’s download button. The curled corner and glossy texture make it stand out from the page, and the button’s angle serves to attract the eye.
The hand-drawn icon is a very nice touch on Silver Stripe’s download area. Notice how the download area is darker than the two widgets beside it.
Firefox uses a nice non-obnoxious button shape and the beautiful, ever-recognizable FF logo to create a great looking button. I also like their convenient but unobtrusive placement of information (OS, filesize,version number & language).
This one has a very unique use of perspectiveâ€” it’s slightly “off”, just enough to keep it from blending in. The red stands out from the tan and leads the eye straight from the software box graphic to the download button. Nice and cheerful!
You figured Coda would be on this list, didn’t you? Great typography, excellent icon use, and an informative tooltip makes Coda’s download button a terrific example of how to do it right!
12. CNET Downloads
It might not be stunning, but CNET has done a nice job with their download link. Their “Tested spyware free” notice is a good way to make users feel safe, and their green arrow icon is creative yet still recognizable.
13. Icon Eden
Icon Eden’s download button might be the simplest button on this list. Simplicity is a good thing, and Icon Eden does a great job maintaining simplicity without sacrificing function, since the icons are shown and described above.
SilverBack is easy to download, and the SilverBack site makes it easy to find out how! A subtle gradient gives the button a 3d look, and white borders, arrow and text make it stand it out from the background.
Two bright green buttons let you download CKEditor in either zip or tar.gz formats. The buttons fit the overall design of the site- clean & airy.
Blendfu offers each set of brushes in GIMP, Photoshop and PS7 format, and their download box uses icons to present each one in an attractive format, along with program names and filesizes.
17. Modx CMS
Big green arrow, Web2.0 gloss, release date, version number – Modx’s download button looks sharp.
18. Nucleus CMS
“Free Download” is the first thing you see on this button. That’s always good, right? And although the button doesn’t jump at you, the Nucleus software box directs the eye to it.
19. Source Forge
That green really shows up! Source forge gives you a file name and description (helpful information), and the exlamation point after “Download Now” adds some enthusiasm to the button.
This button definitely says, “Click Me!” Gradients and shadows are well-used to present an attractive button.
Features to Watch For
So we’ve looked at quite a few well designed examples. Some were stronger in one area, some in another, but they all were good examples of how to use a download button. Here’s some good ideas from today’s examples that you can take with you and add to your buttons:
Extra Info: In fear of viruses, people are often suspicious of downloading things. You can help dispel their fear by giving them some extra information about what theyâ€™re downloading. You may have noticed several examples of these types of information in the screenshots above:
- Version number- especially for software, itâ€™s very helpful to know what version youâ€™re downloading.
- File size- no, the file size doesnâ€™t really matter that much but it is a convenient piece of information that many people will appreciate.
- Simple description- name of the download item, a â€œLatest Versionâ€ tag, or a description of what it does/is will help people stay unconfused.
Visibility: Do your best to employ design principles of whitespace, contrast, and emphasis to make your button stand out and be easy to find. And for goodness sake, donâ€™t leave a homely text link waiting for a game of hide-and-seek with your users. Also, incorporate green when you can. Many of the buttons above either were green or had green on them. Although it’s most always subconscious, the association of green with ‘go’ helps urge users to click that button!
Clickability: Download buttons should look like, well, buttons. You donâ€™t have to be Web2.0ish about it, but users tend to expect that clickable elements should have a rounded /3d appearance. Another effective technique is to use a hover effect. You canâ€™t see it in the screenshots, but many of the sites in the screenshots above use a hover effect to make their button more responsive and clickable.
Icons: Of course, it depends on the style of the site, but a well chosen icon can really increase the visibility and aesthetic appeal of a download link. Itâ€™s a good idea to try something other than a plain down arrow, just donâ€™t be so creative that it wouldnâ€™t be easily recognizable as a download icon.
Persuasion: Did you notice how many of those buttons said, â€œDownload Nowâ€? The word â€œnowâ€ has a feeling of urgency and excitement, and believe it or not, more people will click on a button that says, â€œDownload Now!â€ rather than just, â€œDownloadâ€. Another trick is to use the word, â€œfreeâ€. Once again, people are more likely to click on something â€œfreeâ€, even if youâ€™ve told them that it’s free elsewhere.
Download buttons donâ€™t get much attention, but I think they warrant a closer look. I hope youâ€™ve been inspired by these examples to take a new look at download buttons. I’m excited to see what the design community can come up with next, it only gets better from here!