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

June 14 2013

17:10

Useful Helper: Freebbble Curates Dribbble’s Best Download Freebies


  
freebbble-dribbble-w550

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

14:14

Instant Inspiration: Niice.co, a Brand-new Search Engine for Designers Sparks Your Creativity


  
Niice.co: 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 Niice.co. This new search engine is here to serve you inspiration in packages tailored to your needs.

July 30 2012

07:00

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

07:00

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

12:41

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

21:00

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

Waiting-superman-incredible-artworks-dribbble-make-wow

2. Tiramisu by Kingyo xie

Tiramisu-incredible-artworks-dribbble-make-wow

3. Mobile App Design by Dave Smay

Mobile-app-design-incredible-artworks-dribbble-make-wow

4. Keep Up by Kingyo xie

Keep-up-incredible-artworks-dribbble-make-wow

5. Water. by Cameron Moll

Water-incredible-artworks-dribbble-make-wow

6. Pattern by Simon Oxley

Pattern-incredible-artworks-dribbble-make-wow

7. MTV by Benn Mendelsohn

Mtv-incredible-artworks-dribbble-make-wow

8. Navigation 2 by Asher

Navigation-incredible-artworks-dribbble-make-wow

9. Drawering by Graham Hicks

Drawering-incredible-artworks-dribbble-make-wow

10. Clean UI by Chris Sharp

Clean-ui-incredible-artworks-dribbble-make-wow

11. Call Me by Carlos Prioglio

Call-incredible-artworks-dribbble-make-wow

12. Bar Graph by Tyler Gaw

Bar-graph-incredible-artworks-dribbble-make-wow

13. Butterfly by Jeff Armstrong

Butterfly-incredible-artworks-dribbble-make-wow

14. Infographic for GOOD Magazine by Bryan Connor

Infographic-good-magazine-incredible-artworks-dribbble-make-wow

15. Untitled 6 by Arinbjørn Kuld

Untitled-incredible-artworks-dribbble-make-wow

16. Launch by Jason Schuller

Launch-incredible-artworks-dribbble-make-wow

17. Radiant by Asher

Radiant-incredible-artworks-dribbble-make-wow

18. Eleanor Rebound by Vaclav Bedrich

Eleaonor-rebound-incredible-artworks-dribbble-make-wow

19. Joy by David Carey

Joy-incredible-artworks-dribbble-make-wow

20. Give Life to Your Ideas by Jean Delbrel

Give-life-ideas-incredible-artworks-dribbble-make-wow

21. Marketing Site by Geoff Teehan

Marketing-site-incredible-artworks-dribbble-make-wow

22. Client Icon by Pedja Rusic

Client-icon-incredible-artworks-dribbble-make-wow

23. Swatch Logo by Ryan Putnam

Swatch-logo-incredible-artworks-dribbble-make-wow

24. Contact Form by Heiko Klingele

Contact-form-incredible-artworks-dribbble-make-wow

25. Creative Palace by Diego Caiazza

Creative-palace-artworks-dribbble-make-wow

26. Sprowty 2 by Jonden Jackson

Sprowty-incredible-artworks-dribbble-make-wow

27. Brannlys by Simon Gustavsson

Brannlys-incredible-artworks-dribbble-make-wow

28. Logotype Mebelin by Alex Bavdey

Logotype-mebelin-incredible-artworks-dribbble-make-wow

29. Travel Agency Origami Logo by Patrick Palombo

Travel-agency-origami-logo-incredible-artworks-dribbble-make-wow

30. The Redemption by Ashley Yousling

Redemption-incredible-artworks-dribbble-make-wow

31. Whiskey On White by Roman Khramov

Whiskey-white-incredible-artworks-dribbble-make-wow

32. Pow! by CreatureBox

Pow-incredible-artworks-dribbble-make-wow

33. Personal Elements Print by Tim Davies

Personal-elements-print-incredible-artworks-dribbble-make-wow

34. Hard Graphic for Site by andrewz

Hard-graphic-site-incredible-artworks-dribbble-make-wow

35. Sweet Pixels by Kamil Khadeyev

Sweet-pixels-incredible-artworks-dribbble-make-wow

36. Ladybug iPhone 4 Icon by Jeff Broderick

Ladybug-iphone-iconl-incredible-artworks-dribbble-make-wow

37. Model Blog Page by Henry Moran

Model-blog-page-incredible-artworks-dribbble-make-wow

38. Cities by Simon Collison

Cities-incredible-artworks-dribbble-make-wow

39. Panda by Anton Zykin

Panda-incredible-artworks-dribbble-make-wow

40. What Does by Dave Shea

What-does-incredible-artworks-dribbble-make-wow

41. Symbiotiq Business Card by David Pache

Symbiotiq-business-card-incredible-artworks-dribbble-make-wow

42. Forge Homepage by Ryan Clark

Forge-homepage-incredible-artworks-dribbble-make-wow

43. Revisiting the Social Birds by Dave Mott

Revisiting-social-birds-incredible-artworks-dribbble-make-wow

44. Geography #2 by Martin LeBlanc

Geography-incredible-artworks-dribbble-make-wow

45. Skyscrapers Golf by Stanislav Yudin

Skyscrapers-golf-incredible-artworks-dribbble-make-wow

46. Chapter I by Kuldar Kalvik

Chapter-incredible-artworks-dribbble-make-wow

47. Mechanical Pomodoro by Bruno Afonso

Mechanical-pomodoro-incredible-artworks-dribbble-make-wow

48. Foodgang by Robert Hellmundt

Foodgang-incredible-artworks-dribbble-make-wow

49. Light Effect by Sebastiano Guerriero

Light-effect-incredible-artworks-dribbble-make-wow

50. Flip Clock PSD by Max Di Capua

Flip-clock-psd-incredible-artworks-dribbble-make-wow

51. Texture Overload by Ryan Putnam

Texture-overload-incredible-artworks-dribbble-make-wow

52. Filled Again by Rogie

Filled-again-incredible-artworks-dribbble-make-wow

53. Notepad by Wil Nichols

Notepad-incredible-artworks-dribbble-make-wow

54. Homepage for a Church Design by Josh Starr

Homepage-church-design-incredible-artworks-dribbble-make-wow

55. West Coast Infographic by Josh Hemsley

West-coast-infographic-incredible-artworks-dribbble-make-wow

September 20 2010

04:05

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

handson
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”

infofree
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

mistrustauthority

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

boguscriteria

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”

beautytruth

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”

computerscanimprovelife

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.

Conclusion

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

16:38

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

13:16

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.

Don't be the product, buy the product!

Schweinderl