Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 14 2013


Useful Helper: Freebbble Curates Dribbble’s Best Download Freebies


Dribbble is great, but that filled with contributions, you simply cannot stay on top of things. Many members make their designs and other resources available for free downloading, while most members don't. Dribble in itself does not offer simple access to the many download resources the platform contains. So, if you are one of the seekers looking for ready-made designs or UI components, you will need to rely on third parties. Fortunately there are a few. Making use of the Dribbble API, Freebbble is one of these little helpers.

April 13 2013


Instant Inspiration:, a Brand-new Search Engine for Designers Sparks Your Creativity The Homepage

Did your muses sneak out the back-door without even leaving a message on the bathroom mirror? Didn't you just have this wonderful idea for this next web project? No? I thought so. When the only thing running properly is your nose and the only sparks flying burn your skin, it is high time you visited This new search engine is here to serve you inspiration in packages tailored to your needs.

Sponsored post

July 30 2012


30 Free Icon Packs from the Dribbble Community

Dribbble is not only a great website to find insights into what fellow designers are working on, it’s also home to an array of freebies available for download from generous Dribbble users. This post rounds up 30 high quality icon sets that can be downloaded and used in your own projects for free.

Credit Card Icon Pack by Louis Harboe

View the icon pack

iOS Icon Pack by Michael Shanks

View the icon pack

8-bit Social Icon Pack by Patrick Jones

View the icon pack

Social Media Icon Pack by Alden Haley

View the icon pack

PixelPhilia 32px Icon Set by Ömer Çetin

View the icon pack

Social Icons with States by Handsome

View the icon pack

Premium Pixels Icon Set by Matt Gentile

View the icon pack

Free Icons Download by Hüseyin Yilmaz

View the icon pack

140 Icons Freebie by Thom

View the icon pack

30 Toolbar Icons for Free by Matthew Skiles

View the icon pack

350 Free Vector Web Icons by Brankic

View the icon pack

Picons Social by Morphix Studio

View the icon pack

Freecns UI Icons by Yanlu

View the icon pack

Free Vector Icons by Hugo

View the icon pack

12px Glyphs Free PSD by Facundo Gonzalez

View the icon pack

48 Free 16px Pictograms by Miro Keller

View the icon pack

Tinycons Free Preview Pack by Vic Bell

View the icon pack

Mini Clouds Set PSD by Jackie Tran

View the icon pack

Icecreamcons Vector Icons by Yunmie Kim

View the icon pack

Toolbar Icons by David Keegan

View the icon pack

User Avatar Icons by iconshock

View the icon pack

Free Tiny Icons by Andree

View the icon pack

Icons by Paulius Uza

View the icon pack

Random Icons by Ryan Quintal

View the icon pack

Glyphs by David Silva

View the icon pack

Socialico Icons Pack by Fontfabric

View the icon pack

Delight Icons by Jeremy Sallée

View the icon pack

Social Icons PSD by Umar Irshad

View the icon pack

Free Icon Set by Joe Prince

View the icon pack

Free Icons by Diego Margini

View the icon pack

April 16 2012


Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.

Simple portfolio website design

The portfolio design we’ll be creating is a single page design and features the very basics of a design portfolio website: A logo, an intro, the showcase of work, an about me paragraph and a contact form.

Create a new document in Adobe Photoshop. I like to give myself a large canvas to work with that resembles a large monitor resolution. 1680x2000px will provide enough space to visually build our design as it will appear on screen.

Fill the background with a warm grey tone such as #f1f0ed. Using subtle tones as opposed to black on white will help avoid any contrast clashes.

Use the Noise filter (Filter > Noise > Add Noise) to add a subtle texture to the background to give the site a warmer, more tactile feel.

Draw an 820px selection in the centre of the document and use guides to highlight the centre and edges of this main content area.

Fill a circular marquee selection with a dark grey and add your initials in a font of your choice to create a simple logo.

Right click and select Rasterize Type on the initials layer then CMD+Click the thumbnail of the background circle layer to load its selection. Inverse the selection and hit delete to remove any overlap beyond the edges of the logo.

Dab a spot of a soft black brush, then hit CMD+T to transform the shape. Squash it down so it can be used as a shadow under the logo. Move it into place and reduce the opacity to suit.

Begin writing out a short introduction to your portfolio website. In the coded version we can use Google Web Fonts to make use of the @font-face CSS3 property, which will allow us to use a cool font for the body text. Here I’m using a downloaded version of Droid Serif to mock up the text in Photoshop to gain a feel for the text sizes.

Change the colour of text that will appear as a link and add the underline effect to simulate a clickable element. Planning these features now will make it easy to just copy and paste the hex colour values into the CSS stylesheet.

This portfolio will be self-updating using your shots from Dribbble, so begin copying and pasting the design thumbnails from your profile and align them accordingly in the Photoshop document. Hold Shift while pressing the cursor keys to nudge the element by 10px increments.

Add a Drop Shadow effect to the portfolio designs to lift them from the page. Effects like this that were once only achievable in Photoshop can now be replicated with the CSS3 box-shadow property.

Make a copy of the intro text and adjust the wording to create a brief About Me section under the portfolio elements. Maintain the same font hierarchy and link styling.

Finish off the design with a Contact section at the bottom. Use copies of the existing text to mock up the wording and form labels, then draw a rectangular selection as a base for the input fields.

Open up the Layer Styles window and add a subtle Inner Shadow to give the illusion that the field is inset, then add an off-white Color Overlay to reduce the contrast between the field and the background slightly. Then finally add a #dedede 1px stroke to define the border of the input field.

Duplicate the form field and move it into place as the second input and a textarea element. The great thing about layer styles is they can be scaled to any size without being distorted.

Add a darker grey rectangle the represent the send button. Give this element a quick noise filter to match the texture of the background.

Use the same font styling to add the Send label, except change the colour fill to white, then finish off the button with a subtle drop shadow to help the element stand out.

Simple portfolio website design

This leaves our basic portfolio concept complete ready for part two, where we’ll export the few images we need from the Photoshop document then replicate this design with HTML and CSS before adding the simple code to pull in our Dribbble shots.

September 15 2011


Dribbble Job Board

Dribbble has introduced Backboards, a new job listing section. They kick things off with quite the opportunity with listing from companies such as Big Cartel, Yelp!, GitHub, Path, and more. What are you waiting for? Go get hired!

October 27 2010


55 Incredible Artworks from Dribbble That Will Make You Wow

Preview-incredible-artworks-dribbble-make-wowIf you didn’t know by now, Dribbble is a site where you can share sneak peeks of what you’re working on with designers, developers and other creatives. The hook is that the image must be 400×300 pixels or less.

Dribbble is a great place to find inspiration and discover some talanted artists as well. In this article, you’re gonna find 55 awesome pieces of art that will show you what Dribbble is about.

1. Waiting for Superman by Dan


2. Tiramisu by Kingyo xie


3. Mobile App Design by Dave Smay


4. Keep Up by Kingyo xie


5. Water. by Cameron Moll


6. Pattern by Simon Oxley


7. MTV by Benn Mendelsohn


8. Navigation 2 by Asher


9. Drawering by Graham Hicks


10. Clean UI by Chris Sharp


11. Call Me by Carlos Prioglio


12. Bar Graph by Tyler Gaw


13. Butterfly by Jeff Armstrong


14. Infographic for GOOD Magazine by Bryan Connor


15. Untitled 6 by Arinbjørn Kuld


16. Launch by Jason Schuller


17. Radiant by Asher


18. Eleanor Rebound by Vaclav Bedrich


19. Joy by David Carey


20. Give Life to Your Ideas by Jean Delbrel


21. Marketing Site by Geoff Teehan


22. Client Icon by Pedja Rusic


23. Swatch Logo by Ryan Putnam


24. Contact Form by Heiko Klingele


25. Creative Palace by Diego Caiazza


26. Sprowty 2 by Jonden Jackson


27. Brannlys by Simon Gustavsson


28. Logotype Mebelin by Alex Bavdey


29. Travel Agency Origami Logo by Patrick Palombo


30. The Redemption by Ashley Yousling


31. Whiskey On White by Roman Khramov


32. Pow! by CreatureBox


33. Personal Elements Print by Tim Davies


34. Hard Graphic for Site by andrewz


35. Sweet Pixels by Kamil Khadeyev


36. Ladybug iPhone 4 Icon by Jeff Broderick


37. Model Blog Page by Henry Moran


38. Cities by Simon Collison


39. Panda by Anton Zykin


40. What Does by Dave Shea


41. Symbiotiq Business Card by David Pache


42. Forge Homepage by Ryan Clark


43. Revisiting the Social Birds by Dave Mott


44. Geography #2 by Martin LeBlanc


45. Skyscrapers Golf by Stanislav Yudin


46. Chapter I by Kuldar Kalvik


47. Mechanical Pomodoro by Bruno Afonso


48. Foodgang by Robert Hellmundt


49. Light Effect by Sebastiano Guerriero


50. Flip Clock PSD by Max Di Capua


51. Texture Overload by Ryan Putnam


52. Filled Again by Rogie


53. Notepad by Wil Nichols


54. Homepage for a Church Design by Josh Starr


55. West Coast Infographic by Josh Hemsley


September 20 2010


What Designers Can Learn From Hackers

Foreword: I first became fascinated with the ways white hat hackers took things apart to solve problems after joining an awesome local hackerspace called Collexion. I have them to thank for seeing the inspiring overlap of design and hacking (and for helping me to write this article).

The (virtuous) Hacker Ethic

What is the Hacker Ethic? In 1984, Stephen Levy wrote a book which describes six general tenets of a shared philosophy observed by (ethical) hackers. Each tenet applies in illuminating ways to the design process.

1. Hands-on imperative

When computing power was scarce (read: behind locked doors), hackers would go to any lengths (e.g. picking locks) to get hands-on time with the latest in technology. They risked everything to gain hands-on time in order to make things and experiment. How does this apply to design? Today our scarcity isn’t tools, it’s time. If paying work hinders your learning new technologies and methods, then do personal projects. Ultimately design is not a spectator sport, it’s hands-on!

2. “Information wants to be free”

Your experiences and talents are uniquely yours, but ultimately worthless without execution. Yet chasing every idea can get nothing done. Get into the habit of getting all of your ideas down. This habit both helps you to remember moments of brilliance and to generate new ideas. The best ideas will nag you (for months, even years) until you grant their freedom.

3. Mistrust authority


You should not blindly follow (nor reject) prevailing conventions, rules, or trends. Hackers value facts over fancy, and can explain their reason for solving a problem in a particular way. In design, you may have encountered the boss that wants the buttons to be red because it’s the hotness. When the authority demands more cowbell, should you yield? It is easy to say “no” on principal but why not take the hackerly approach and test the assertion. If testing is not practical, be armed with facts and information to defeat the request. Learn to mistrust authority, even your own.

4. No bogus criteria


True hackers judge one another on their hacking, not bogus criteria like degrees, race, age, sex, or position.

We all know the designer who cites a design degree, a lucrative job, or an advanced experience level as the reason they are more of an authority than you are. Often the same designers produce little and/or terrible work. But what’s important? To a hacker, not these criteria—the important thing is the work you do. All else is bogus.

5. “You can create truth and beauty on a computer”


A computer alone does not make a great designer just as a powerful calculator doesn’t make a great mathematician. Ultimately, it’s about idea and execution. But do not be numb to or biased against new technologies as they represent fresh canvases and stages for your ideas.

6. “Computers can change your life for the better”


Computers clearly have impacted the way we design with new tools and expanded marketplaces. However, a frequently underexploited channel for designers to thrive is through social media. Designer-focused social media (e.g. Dribbble, Behance, Forrst etc.) are drastically changing the business of design.


We have looked at some of the ways the methods and ethics of hacking can inform your design. But (in the hackerly advice of Levar Burton), “don’t take my word for it”—get hands-on by checking out your local hackerspace!

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

What Designers Can Learn From Hackers

August 04 2010


The launch of rebbbound: tracking for dribbble’s api

Last night Dave Rupert and I literally had an idea, designed it, coded it, Twitterized it and made it live… all within less than 24 hours. We are happy to release rebbbounds: Tracking the Dribbble API and allowing others to submit their own projects using the API.

Follow along on Twitter or subscribe to the RSS feed if you like. We are also excepting submissions for great ideas, sites, and work utilizing Dribbble’s API. Now go make amazing things happen! :)

August 03 2010


Thoughts on design processes

I recently posted a new shot on Dribbble consisting of some “process” work, or as Matthew Smith personally labeled DesignLite™ in a recent post. It created quite the discussion on Dribbble concerning usage of terms and thoughts on design processes. Have a read through the varied comments.

“[...] as it uses prototyping for layout, greyscaling for lights and darks and visual importance of elements, typographic hierarchy, typeface selection, balance, structure, flow….etc. Even some of the interactive elements are planned for. I think if there was a “correct” term it would be called “process.”

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...