Smashing Magazine we smash you with the information that will make your life easier. really.
Design Patterns: Download Buttons
November 3rd, 2006 in Graphics | 10 Comments
In the era of Web 2.0 download-buttons are becoming more and more important. Grey and simple few years ago, now they’ve become bigger, more colourful and come in dozens of variations. As the name says, download buttons are supposed to motivate visitors to use, or at least try the product which is offered on the site. Consequently, also visual appearance of download buttons has changed.
Usually a simple text entry is sufficient for a navigation bar. However, designer often combine plain text with small “download”-related icons - an example from redhat.de can be found below.
Most arrows have the direction to the bottom or to the right (digitalvisit.de).
The same here (formac.nl).
A more complex solution is presented on camfrog.com, however, the visual presentation is definitely more usable and attractive and - more importantly - the button is easier to find on the page.
This online-shop uses for every offered product a group of accompanying Icons (vso-software.fr)
The support of both Windows, Mac and Linux is usually emphasized by integrating logotypes in the download buttons (pando.com)
Similar visual solution, but different approach - both multilingual release and stable release can be downloaded immediately, without need to view any further web-pages (caminobrowser.org)
Since download buttons are gaining more weight, they are usually placed in the middle of the page and surrounded by a plenty of white space. Trying to achieve the attention of potential customuers, designers use new techniques and colourful solutions. Especially big buttons are trendy. They can be found everywhere.
Decorated with nice illistruation and arrow in button-look (webkit.opendarwin.org/).
The same concept here (gdisk.sourceforge.net)
and here… (webaroo.com).
A more simple solution (deepnetexplorer.com).
A decorative button in the style of 90s. Not usual, but still worth mentioning. (lookoutsoft.com).
Attractive dowlnload buttons should’t be overlooked and therefore have to be eye-catching. Could you overlook that one? (last.fm).
Huge Buttons. Again. (browster.com).
And again. (turboajax.com/turbodbadmin).
Sometimes even with a slanted styling (sceneo.tv).
Summing up, the current trends in web-design present download-elements in a particularly impressive way. Buttons have to catch visitors’ attention and therefore are sometimes not only obtrusive, but even aggressive. The product isn’t hidden, which makes sanes if it is the main aspect a developer is concerned about. Consequently, the place for download-buttons is chosen properly - of couse, in the middle of the page.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
krishnamoorthy manickam (November 30th, 2006, 2:22 pm)
Good designs….
jalansutera (January 9th, 2007, 7:00 pm)
in my opinion, a download button should have an arrow which show down direction.
Güneş (April 13th, 2007, 11:23 pm)
Download Buttons If I can’t figure out that I have to click it to download it