A UX Designer’s Guide to Using Dribbble
We designers spend a lot of time dissing Dribbble, so I’m gonna give it some undue love by detailing how I use it during UI design.
I got my Master’s degree in HCI (Human-Computer Interaction) before the first iPhone came out, or as my junior designers call it, “The Dark Ages.” A time when people (probably just me) were designing Windows XP-based software. They were simpler times of unlocked doors, crunchy hair gel, and a time when interaction designers also didn’t really need to worry about visual design — just do some wireframes in Visio, annotate them in InDesign, write up a 300-page spec and call it a day. Windows would [largely] take it from there.
But then the Internet and the iPhone happened.
Well…the Internet matured from the tables, rows, and Java I learned in undergrad to the omg-not-another-javascript-framework world we live in today. I swear CSS can brew coffee and I think Disney now animates all of their movies using CSS3 keyframes. In a way, Flash is back, but tweens are now just transitions.
The result is that interaction/UX/product designers (sorry, what are we called this week?) have to step up their game on the visual side. Plenty of fantastic design languages are emerging, but even these require a certain amount of grace and a steady hand to use them well.
So what’s a designer to do?!
Well, use Dribbble (like the title suggests, duh). The way I use Dribbble changes based on which phase I’m in:
- When I’m between projects
- When I’m starting a project
- During final polish
- When I’m defending one of my crazy design decisions
Using Dribbble When I’m Between Projects
Note: This phase doesn’t actually exist since I have a backlog of side projects projecting out until I’m 162 years old.
BUT! There are brief moments in my day where I come up for air and take a look around the design world, usually by opening a new tab to do real work, then promptly getting distracted by the bright colors I see in the Panda Extension. What follows is a Dribbble click-hole for the next hour.
I once took a class where a professor had us collect examples of objects and patterns we liked — either from photographs or clippings from these ancient artifacts called magazines (from the latin for “advertisement picture books”). At the end of the semester, we turned them in and she’d write a magically accurate description of our style preferences.
This act of continuous collecting is a great way to use Dribbble for UX designers seeking to learn visual design on the fly. Always keep an eye out, whether it’s an illustration, a logo, or other UI compositions you like (but can’t immediately articulate why). Eventually, you’ll look back on these and either see how your tastes have matured, or find inspiration.
Quick Tips for using Dribbble between projects:
- Periodically take deep dives into Dribbble’s homepage via Muzli (Muzli) or Panda (Panda) to get a sense for active trends.
- Be calculated in who you follow so that your own Dribbble homepage starts to align with your personal taste.
- Like or Bucket random things you are fond of to reference later, even if they’re not immediately relevant to your current project.
Using Dribbble at the Beginning of the Project
To be clear, “the beginning” is the point at which you have already done real customer/user/market research, and completed some whiteboarding or sketching sessions. So call off your UX Process Police Force when I use the word “research” rather loosely throughout this section.
Once you sit down to start laying some serious pixels, you’ll inevitably have mocked up some new interaction you have no idea how to design (that’s okay!). So then you start silently praying, hoping that someone on Dribbble has done this before.
Truthfully, Dribbble isn’t really the best at this part because it isn’t conducive to showing off UX patterns. There are a bunch of decent pattern sites out there (which I also use), but this post is all about how great Dribbble is, so we’re gonna make it work.
For example, let’s say you are an old-timer and still use the word “wizard.” So you do a quick Dribbble search and come up with a mix of UI wizards and actual wizards:
Add “UI” after it and your results get a little bit better:
From there you can find something that starts to look like what you’re after. Now, click on the buckets it’s been added to to see who else has bucketed it. We’ve determined our search term was pretty terrible, so we’ll just hope someone else is better:
And look at that…my man Ron! A whole bucket called “Wizard.” You have a great starting place now. No excuses.
Quick Tips for using Dribbble at the beginning of a project:
- Try a few search terms with varying levels of specificity to give you more diverse results.
- Create a bucket and be sure to save anything that’s close.
- Don’t save anything super old. Gross, nobody likes inner shadows any more. (please ignore this if this trend happens come back in style when you read this).
- Do a Reverse Bucket Search on items you really like to find users who have already done the work for you.
Using Dribbble During Final Polish
Once you’ve churned out a few screens and established a visual direction, you’ll always second-guess things. For me, it’s shadows. Every time I try to do them myself, something is off.
I have no shame going back to Dribbble, copying an image into Sketch, and then adjusting my shadow until it matches. Sometimes I’ll even adjust the transparency of the screenshot, lock it, and design underneath it so I can match my design. Clearly I have no shame. Or ethics. Or talent. I’m not really sure where I stand, but I am sure that this method has helped me turn my visual design skills from non-existent to fairly decent.
Quick Tips for using Dribbble during final polish:
- Drag Dribbble shots into your Sketch canvas to give you a guide.
- Pay attention to how depth (like shadows), typography, colors, and padding are used. Sometimes it might just be using the wrong design pattern in your designs, not that you’re doing it wrong.
Dribbble is the worst.
There, do you feel better now? I said it.
In all seriousness, Dribbble was not around when I was in grad school, and I think it is a fabulous tool for students and people trying to up their visual design skills on the job.
It by no means excuses you from reading books on communication and graphic design to give you a better foundation. And while I advocate copying visual techniques, I do not advocate design plagiarism.
Use these techniques to establish your own aesthetic, improve your taste, and learn how to create competent interfaces. And hopefully one day, develop your own visual design style. The design and Dribbble community can always use more contributions.
When I’m not goofing off on Medium, I’m working on Sketch tools at UX Power Tools to make you a better, more efficient designer. Follow us on Twitter@uxpowertools. Follow me too if the spirit moves you!
