Posts tagged freebies
Freebie: Free Vector Web Icons (91 Icons)
Today’s freebie may be the last one for this year, but that doesn’t mean it will be the last of our freebies on Smashing Magazine — no siree! Before this year does come to an end, we are happy to present to you a fresh new Web UI set includig 91 icons created by August Interactive for the holiday season. The set is a collection of widely used UI elements, including volume, zoom, player, view, and download controls.
Designed by Tomas Gajar, the set was developed using Adobe Fireworks and has been exported as a fully editable layered Photoshop file as well. The set is clean, pixel perfect, and meant to full your everyday needs for UI design.
Download the Set for Free!
This freebie offers vectors, all scalable, Adobe Photoshop PSDs as well as Fireworks PNGs. The icon set is completely free to use for commercial or personal applications without any restrictions. Please link to this article if you want to spread the word.
- large preview
- download the free icon set (.zip, 3,4 Mb)
Behind the Design
As always, here are some insights from the designers:
“For us, the end of the year usually brings some precious time to reflect on our work and how our love for design remains relevant to the user interface design community. Our revelation this year is that clean, pixel perfect vector icons have become immensely important to our work. This means we typically spend the extra time to develop the icons that fit the specific need of the job at hand. As you can imagine, this ‘extra’ time takes considerable effort — effort that is often not a part of a clients’ original scope of work.
These holidays, we decided that the best gift we could offer our friends and colleagues is free access to some of our favorite custom UI icons. They are available in Adobe Photoshop PSDs, and for our really special friends, Fireworks PNGs. All vector, all scalable, all free to use for commercial or personal applications. Stay tuned for more in 2012!”
Thank you, Tomas Gajar and August Interactive. We appreciate your work and your good intentions!
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2011.
Freebie: New Twitter Profile Page GUI PSD
Today we are glad to release a yet another freebie: a Twitter GUI PSD for the recently released Twitter UI update, designed by Jon Darke of Every Interaction and released exclusively for Smashing Magazine and its readers. The PSD provides the full mockup with all layers in vectors, allowing you to scale up the design elements without loss of quality. The set includes two versions: one for personal accounts and also the new Twitter Enhanced profile page with 835×90 header image for brands and advertisers. The set is compatible with Adobe Photoshop CS4+.
Download the Set for free!
You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.
- large preview – personal profile (.png, 0.3 Mb)
- large preview – enhanced profile (.png 0.3 Mb)
- download the .zip-package (.zip, 2 Mb)
- download mirror (.zip, 2 Mb)
- release post on the designer’s website
Features
- 100% pixel-accurate
- 2 versions: personal and enhanced profile pages
- All assets redrawn in vector, hence scalable
- All layers labeled and grouped
- Adobe Photoshop CS4+ compatible
Behind the Design
“As designers, we often produce various assets for our clients, be it their online presence on their Web pages or in social media. Hence, often we need to skin pages such as the Twitter profile pages for brands that we are working on. When those sites update their UI, we also need to update our resources in order to be able to display an accurate representation of what a client’s Twitter page would look like. So we thought that we could share the PSD file we created with the rest of the design community. Hopefully, it will help you save some time to focus on the creative work!”
Thanks Jon, we sincerely appreciate your time and your intentions!
(vf)
© Smashing Editorial for Smashing Magazine, 2011.
Freebie: Festive Christmas Icon Pack (20 .EPS Icons)
The year is slowly coming to an end and we’re glad to present to you a festive icon set to inspire you in your designs. In this post we present a minimalist collection of 20 free festive vector (.EPS) icons created by offset media. The pack includes color and grayscale versions. The pack includes mostly Christmas related icons, such us the gingerbread man, nutcracker, snowman and the very well-known fir tree.
Feel free to also have a look at some of our previous Smashing Christimas icon sets: Free Smashing Christmas Icon Set by Icon Eden (2009) and Free Smashing Christmas Icon Set by SoftFacade (2008).
Download the Icon Set for Free!
The pack is completely free to use in personal and commercial projects without any restrictions. Please link to this article if you want to spread the word.
- large preview
- download the free icon set (.zip, 665 Kb)
Behind the Design
As always, here are some insights from the designer:
“Like any design studio, here at offset media, we prefer to create our own festive greeting cards to give to clients. This year I had a very clear vision of the overall look I wanted, a single white festive character on a solid red background.
Knowing the look, but unsure of what character to use, I ended up creating a bunch of icons to choose from. Once we were happy with the card design (choosing the snowman), we had all these unused icons lying about, and being someone who does not likes things going to waste, I decided to share them with others who could possible make use of them!”
— George Neocleous (aka GeoNeo) is a full-time designer and illustrator, who works at London-based design studio offset media and blogs (sporadically) at Geoneo’s Blog.
Thank you, George. We appreciate your work and your good intentions!
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2011.
Free Icon Set For Web Designers: Aroma (250+ PNG Icons)
Today we are delighted to release another freebie for our design community. There are many free icon sets out there, and there are quite many commercial ones as well. Yet a good, consistently designed icon set is always a welcome addition to any designer’s toolbox. Oliver Twardowski had released the Ultimate Free Web Designer’s Icon Set (750 icons, including PSD sources) in the past, and this time he has prepared a fresh, new icon set which contains over 250 original high quality PNGs. Please notice that some icons may be similar to the ones released in the previous set.
Download the Collection for Free!
The elements contained in this collection are free for personal and commercial use. Please link to this article if you want to spread the word or give it a tweet or share it on Facebook! You may modify the file as you wish but please do not redistribute them elsewhere without written permission from Smashing Magazine and Oliver Twardowski.
- high resolution preview
- download the icon set for free (.zip, 1.7 Mb)
Behind the Design
As always, here are some insights from the designer:
“This set was started out in January 2011, so the whole design process took me nearly a year to finish. Including all the tiny, little, shy transparent PNGs and keys, the set is build out of 145.728 pixels. All icons were made with love in Cologne, Germany.
If you think that some icons are missing in this set, feel free to share your thoughts and ideas in the comments section below, contact me at aroma[at]addictedtocoffee[dot]de or find me via twitter at @mywayhome. Oh and did I mention: I’m always available for exciting freelance projects :)
Stay tuned! You never know — there might be a second part of the set coming out quite soon!”
Thank you, Oliver Twardowski. We appreciate your work and your good intentions!
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2011.
Freebie: Organic Vector Elements in EPS (80 Vector Files)
Today we are delighted to release another freebie for our design community. This set contains over 80 original high quality vector files designed by the team at Vecteezy. These masterfully created, hand drawn organic elements are saved as Illustrator 10 EPS files and are perfect to add a touch of nature to any design project. The set includes items like swirly vines and weeds, Hawaiian flowers, Japanese cherry blossoms, butterflies, and much more!
Download the Collection for Free!
The elements contained in this collection are free for personal and commercial use. Please link to this article if you want to spread the word or give it a tweet or share it on Facebook! You may modify the file as you wish but please do not redistribute them elsewhere without written permission from Smashing Magazine and Vecteezy.



- A High Resolution Preview
- Download The Set For Free (.zip, 8.8 Mb)
Behind the Design
As always, here are some insights from the designer:
“By nature, Web design is a decidedly “indoorsy” activity. Maybe that’s why we love opportunities to work with the organic! This vector set allows you to design with nature’s paintbrush. Inspired by some of our favorite parts of the great outdoors, these elements will add a natural feel to your projects.
We don’t always have the privilege of walking through a sunny meadow or feeling fallen leaves crunch under our feet. But hopefully these organic vectors will bring a bit of that serenity indoors and allow you to add a touch of nature to your next design project. Enjoy!”
Thank you, guys. We appreciate your work and your good intentions!
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2011.
Free E-Commerce WordPress Theme: Balita
In this post we release yet another freebie: the Balita WordPress theme, a theme dedicated to shops that sell products for children. The theme was designed by Tokokoo and released exclusively for Smashing Magazine and its readers. As usual, the theme is absolutely free to use for both private and commerical projects.
Not many theme providers have produced e-commerce themes for baby and toddler products. For you who have been working in this particular market niche for some time or are about to start, this Balita e-commerce theme is a great opportunity for you. Using such bright and cheerful pantone colors that suit this clothes department (baby/toddler products), this Balita e-commerce theme will surely attract more and more customers to your online store.
Download the Theme for Free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.
- Live Demo
- Large Preview (.jpg, 0,17 Mb)
- Download the .zip-package (zip, 16 Mb, including instructions)
Balita Theme: Features
- WordPress E-Commerce Plugin:
It will help you generate your e-commerce store on a WordPress platform. The Balita WordPress theme uses a powerful plugin to encourage the functionality of WordPress used. - jQuery Slider:
It helps potential customers to generate general information about your online store and its products at a quick glance. - Custom Shopping Cart:
The custom shopping cart notifies customers about the total amount of items and pricing within their shopping carts. - Product List With Grid View:
Customers can easily compare the general overview and price of the products. - HTML5 + CSS3 Optimized:
Latest tech weapons for the prime look of your online store. - Ads Banner:
Show off, promote, sell ads… anything! Each inch on your website is worth the attention. - Product Slider:
Our aim is to make e-Commerce as interesting and as profitable for you as possible. If you wish to have a vivid description for your product showcases, product slider will be a good match. - Zoomable Product Images:
Allow your customers to get a closer look at your product. Your customers want to see high-detailed pictures of your product when making purchase decisions. - Search Products:
It helps shoppers to find and buy products on your site without having to browse each and every page. You can place an input text form on the sidebar that allows shoppers to quickly and easily find your site. - Blog Integration:
This is a powerful tool on the Web to help build trust and provide updates for people who could be your potential clients. The theme already provides you with this feature — all you have to so is prepare the contents. - Related Products:
The idea of cross-selling basically means offering alternatives and additions to the current product which are considered. The most common way of doing this is by presenting within the site’s product details page, which is usually manually assigned. This may be known as the “Related Products” or “Similar Products” page, but might also be a manually assigned “Accessories” page or even more generic recommendations using the titles “May We Suggest” or “You May Also Like”. - Multiple Product Images:
Do you happen to have a lot images for particular products which you sell on your online store? No problem. This theme and its functions will help and let you upload multiple images at once for the products you sell. - Multiple Widget Areas:
You can place widgets on any suggested area. Otherwise, all of our themes support widget allocation almost anywhere, but not limited to the sidebar. - Facebook Page Integration:
This feature enables you to market your products through one of the biggest social networks around the world. Reach the highest sales potential with this Facebook integration feature.

Capture Left Side (Large Preview)

Right Nav Cart (Large Preview)

Single Add to Cart (Large Preview)

Single Preview (Large Preview)

Single Sidebar (Large Preview)
Behind the Design
As always, here are some insights from the designers:
“We designed the brand logo section as well as the navigation below to be very clear so that this theme looks neat and attractive. We made the single product page to look clean so users would concentrate more on products and thus is free of distractions. Contents are on the left side, while the add-to-cart button are on the right side, beside the contents.
Don’t miss the opportunity to get this free Balita Theme because there are not many ways you can get a free premium theme everyday. Last but not least, once again, thank you Smashing Magazine for the opportunity.”
Thank you, Tokokoo. We appreciate your work and your good intentions!
© Smashing Editorial for Smashing Magazine, 2011.
Freebie: Twitter GUI PSD
Updating your Twitter profile can give you really unnecessary headaches. In today’s post, we proudly present to you a Twitter UI GUI template, designed by Shelby White which has exclusively been released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.
Download the Template for Free!
The template is released as freeware. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the template as you wish.
- Large Preview (.png)
- Download the .zip-package (zip, 0,4 Mb)
- release post on designer’s website
- download from the designer’s site
Behind the Design
As always, here are some insights from the designer:
“Time after time I dealt with the headache of updating my Twitter profiles. After searching thoroughly for an alternative to editing live, it was clear that there weren’t any great solutions or intentions by anyone to create a pixel-perfect template for anyone to use. Not to mention, a template that would remain up-to-date as the website evolved.
This PSD includes grouped elements by name respective of their location in the HTML of Twitter.com. The profile images utilize smart objects to ease the pain of changing images. Update the image once and it will proportionally scale the images across the whole PSD. Hope this template makes mocking up your profile a lot easier. Enjoy!”
Thank you, Shelby White. We appreciate your work and your good intentions.
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2011.
Freebie: Facebook Fan Page GUI PSD
Today we are glad to release a yet another freebie: a Facebook Fan Page GUI PSD, designed by Hike and released for Smashing Magazine and its readers. The PSD will speed up the process of creating previews, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. All layers are vectorized, allowing you to scale up the GUI without loss of quality. The mock-up is 100% pixel-accurate, it has 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab), all layers labeled and grouped. Smart guides are included. The PSD is compatible with Adobe Photoshop CS3+.
With every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. The main idea behind this PSD was to provide all designers and agencies with a useful tool that will improvs their daily workflow when it comes to preparing Facebook-related previews for their clients or internal presentations. As usual, the goodie is absolutely free to use in private and commercial projects.
Download the PSD for free!
You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.
- large preview (.png, 0,09 Mb)
- download the .zip-package (.zip, 2.1 Mb)
- official download from the designer’s site (.zip, 2.1 Mb, will be regularly updated)
- release post on designer’s website
Features
- 100% pixel-accurate
- 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab)
- Fully vectorized
- Limitless scaling
- All layers labeled
- Smartly grouped
- Completely editable
- Includes smart guides
- CS3+ compatible
- Always up to date
Previews

Wall wireframe (large preview)
Behind the Design
As always, here are some insights from the designer:
“From our own experience we knew how time consuming it could be to have to recreate or prepare a decent Facebook template that allows you to implement custom tab graphics, profile banners etc. It’s a real pain and waste of time and it only takes away your focus from the actual artwork. At Hike we once decided to invest multiple days into creating a complete Photoshop template that would allow us to create design previews on the fly.
What sets this PSD apart from similar files is the fact that with every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. As listed under Features above, we actually reproduced each and every pixel of Facebook’s fan page UI. The PSD includes 4 viewing modes for the most common design tasks and it’s fully vectorized. Thanks to smart grouping and clever labeling, everybody will easily get along in our PSD. If you have suggestions for improving the file or feel like something is still missing, feel free to post it on our Fan Page wall and we will respond. Follow @HikeSocialApps for updates!”
Thank you, guys! We appreciate your work and your good intentions.
© Smashing Editorial for Smashing Magazine, 2011.
To Five Smashing Years… And A Free Anniversary eBook Treat!
When we started Smashing Magazine, we didn’t expect anything. We didn’t have a grand master plan for a successful online magazine for designers and developers. We created something that we found useful and that we thought others would find useful, too. We did not lose focus, we relied on instinct more than once, we stayed patient, and we pulled the occasional night shift. That was 2006.
And then you came along.
You have passed the word along, left comments, dropped us emails. You let us know that we matter. You let us know that we are doing something meaningful. And you let us know that our humble work deserved your attention. And we listened — carefully.
Five years have passed, and the magazine has changed. That small, obscure blog of list posts and round-ups has evolved into a professional publication with a publishing policy, editorial structures and a house style guide. The Smashing family no longer has only two members, but rather a dedicated team of experienced authors, research assistants, expert advisors, editors and proofreaders.
We all do our best to bring you the trusted advice, techniques, tutorials, resources and opinions that Smashing Magazine is known for nowadays and that the Web design community around the world has come to rely on.
Smashing Magazine is a quality-obsessed, passionate team, but it is also you: you and every single reader who has been reading Smashing Magazine for all these years. Thank you for being with us; thank you for your support, criticism and encouragement over all these years. We could not exist without you.
A Smashing Magazine Anniversary Treat
Today, Smashing Magazine turns five. It’s hard to believe that the years have passed so quickly. Many things have changed, but when we look back, we realize how wonderful and sometimes even intoxicating the journey has been so far. And you — who made us what we are today — deserve a special thank-you.
To honor the occasion, we have a humble gift for you: the free “Best of Smashing Magazine” Anniversary eBook.
The eBook is available in PDF, ePUB and Mobipocket formats. This eBook is our gift to you for your support, criticism and encouragement over all these years. We’d like it to be your very own memory box of your last five years with Smashing Magazine — something perhaps to bring back memories a couple of years from now. We’d like you to have a part of Smashing Magazine with you when you are on the go.
What’s in the eBook?
The eBook contains the best articles that have been published on Smashing Magazine in the last five years — and by “best,” we mean the most useful, most interesting or most inspiring. The articles have been carefully edited, proofread and updated for your convenience and reading pleasure on your eBook reader.
It discusses usability issues and the principles of effective Web design. It covers the guidelines for beautiful and effective typography, and it spotlights methods of responsive Web design. In addition, you’ll learn how to master professional Photoshop techniques, explore storytelling in your designs, and focus on three key areas to polish your content strategy. Never thought that harmony between designers and developers was possible? Dig in to see how the two camps can collaborate productively and learn from each other.
Table of Contents
- “Thirty Usability Issues to Be Aware Of” — Vitaly Friedman
- “Ten Principles of Effective Web Design” — Vitaly Friedman
- “Clever JPEG Optimization Techniques” — Sergey Chikuyonok
- “Typographic Design Patterns and Best Practices” — Smashing Editorial team
- “Ten Useful Usability Findings and Guidelines” — Dmitry Fadeyev
- “Setting Up Photoshop for Web and iPhone Development” — Marc Edwards
- “The Ails of Typographic Anti-Aliasing” — Tom Giannattasio
- “Mastering Photoshop: Noise, Textures and Gradients” — Marc Edwards
- “Better User Experience With Storytelling” — Francisco Inchauste
- “The Beauty of Typography, Writing Systems and Calligraphy” — Jessica Bordeau
- “Web Designers, Don’t Do It Alone” — Paul Boag
- “Making Your Mark on the Web Is Easier Than You Think” — Christian Heilmann
- “Responsive Web Design: What It Is and How to Use It” — Kayla Knight
- “I Want to Be a Web Designer When I Grow Up” — Michael Aleo
- “Persuasion Triggers in Web Design” — David Travis
- “What Font Should I Use?” — Dan Mayer
- “The Design Matrix: A Powerful Tool for Guiding Client Input” — Bridget Fahrland
- “Why User Experience Cannot Be Designed” — Helge Fredheim
- “Dear Web Design Community, Where Have You Gone?” — Vitaly Friedman
- “Make Your Content Make a Difference” — Colleen Jones
- “Two Cats in a Sack: Designer-Developer Discord” — Cassie McDaniel
- “Print Loves Web” — Mark Cossey
Previews of the Smashing Anniversary eBook
Take a look at the following preview to get a taste of the eBook’s contents.
Use the practical and inspiring articles in the Smashing Anniversary eBook to refuel, and get those brilliant ideas rolling again!
Download It Now For Free
Again, you can download the eBook in for free in PDF, ePUB and Mobipocket formats.
- Download your free copy from Apple’s iTunes Store
- Download your free copy from Smashing Magazine’s server (.zip, 55 Mb).
Please note that due to differing publishing policies around the world, downloading via iTunes is currently available only to customers with an iTunes account in the US, Canada, Australia, Great Britain, France and Germany. We are working hard to make future Smashing Magazine publications available to all of our readers around the world.
Cheers, dear friends. And here is to the next five years!
(al) (vf) (il)
© Smashing Editorial for Smashing Magazine, 2011.
Freebie: Responsive jQuery Slider Plugin Flexslider
When it comes to responsive design, it’s not just about fluid images or adaptive layouts. It’s also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.
In this post, we are glad to release a responsive jQuery slider plugin Flexslider which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In three simple steps, you can have a fully responsive slider for your responsive design.
Download the Plugin for Free!
The plugin is released under the MIT license. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the plugin as you wish.
- Live Demo
- Large Preview (.jpg, 0,17 Mb)
- Download the .zip-package (zip, 0.6 Mb)
- Release on the Developer’s Site
Features
- Simple, semantic markup.
- Supported in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+.
- iOS and Android devices are supported as well.
- Slide and Fade animations.
- Highly customizable slider options.
- Directional, keyboard, and touch swipe navigation.
- Lightweight (5 Kb minified).
- You can use all HTML elements in the slides.
- Free to use under the MIT license.

You can find the installation guide and documentation on the developer’s release site.
Behind the Design
As always, here are some insights from the designer:
“My motivation behind creating this plugin was the difficulty I had building my first responsive slider. There were no resources to pull from and I spent hours banging my head against the wall working through the logic. My goal was to make it easier for others doing the same thing. I wanted to build a plugin that served the newest of beginners, while providing seasoned developers a tool they could use with confidence.
FlexSlider serves beginners by being virtually plug and play, needing only the FlexSlider files and some images to get started. To seasoned developers, FlexSlider should be seen as a tool that gets them rolling quickly. It doesn’t add unnecessary markup and gives complete freedom to use any HTML element within each slide.
The most exciting thing about FlexSlider at this point, in my mind, is the slide animation. It was a challenge to construct, but the resulting responsive behavior is very cool. When you mix the slide animation with touch gestures, it creates a great experience across iOS and Android devices.
Problems I encountered when building the plugin was ensuring that the plugin would work across all different types of responsive builds, browsers, and devices. To accomplish that, I made sure the plugin did exactly what it needed too, and nothing more. For example, many sliders use fixed dimensions and absolute positioning to create animation effects, but this is not possible with fully fluid responsive design. Avoiding this practice, I limited my use of the
$(window).resize()function and let the slider dimensions remain organic to the content within. The downside to this is that the fade animations can’t overlap, which is indeed a nice effect.The most important lessons I’ve learned are that overusing
(window).resize()function to control element sizing will make you cringe, which is why you won’t find much at all in FlexSlider. Keep your responsive design as light as you can. Remember the audiences you are extending to reach are on far less capable devices, especially with JavaScript.If you are having a problem installing FlexSlider, post a comment in the Community section and I will respond. Follow @mbmufffin for FlexSlider updates!”
Thank you, Tyler. We sincerely appreciate your work and your good intentions.
© Smashing Editorial for Smashing Magazine, 2011.






























