User Interface Element Mockup Resources

User Interface Element Mockup Resources

Share these actual insights

Do you regularly work on creating user interface mockups? Have you passed the sketching and lo-fi mockup stages and in dire need of some high fidelity resources for user interface elements? I know how you feel.

I’ll be up front with you, I am not a visual designer. I can find my way around Photoshop and other tools, but don’t ask me to create something from scratch. To each his/her own specialty. So where do I go for inspiration and resources? I’ll tell you.

UI Inspiration

There are really only two places on the internet where I go for inspiration. Dribbble and Behance, with the first website being my preferred one… it is just less cluttered. So, I’ll just quickly focus on it before I move on to resources.

Dribbble is the center stage for some really talented UI designers. I see it as a coffee shop in some fancy creative neighbourhood where designers come together to talk shop and share their work feedback, critique or maybe that pat on the back.

Dribbble Examples

I follow a few people at Dribbble, just because of their continuous high quality work. It is an amazing place if you are looking for inspiration, even if you are still focussing only on sketching and lo-fi mockups. Here are just two examples of what you can find there:

Getbelongings ipad app by zee7 * Fitbit Dashboard Design by Kerem Suer

Credits: zee7 *Kerem Suer (view more examples at Dribbble: ipad / graphs)

On a side note, with a PRO account at Dribbble you can ‘recruit’ the designers, contact them for any freelance work you might have.

GraphicRiver… the UI DIY resource center

If I compare my skills to those of the fine designers in the Dribbble community, my work looks more like that of a first grade kid. I’m serious. Anything beyond lo-fi and I stick out like a sore thumb at a designers convention. So, where do I start?

Yes, there are plenty of free resources around on the web. Great free resources for icons like those by French graphic designer Jeremy Sallee’s and his MiniGlyph collection. Still, if you want high quality stuff… make sure you go visit GraphicRiver. Since little over a week, GraphicRiver finally has its own dedicated section for UI category (they’ve had the kits for much longer, but never dedicated area on the website). It contains a good and growing collection of work for you to purchase and use.

Recommended UI Sets

Here are four of my personal favorites. I have used most of these in presentations to spice things up a bit. You and I can really see through sketch and lo-fi models, but the stakeholders (I like to call them wallet-holders) usually cannot. Through the use of these awesome looking UI elements, they can more easily ‘see’ what they’re going to get.

“Don’t you have visual designers to do this?”

Hmm, well I usually do, but sometimes time is… well not plentiful, and in those moments I turn to GraphicRiver… and because it is cheap ;)

1. Cobo UI Kit

Cobo UI Kit

The Cobo UI Kit is delivered as a PSD file and includes elements such as buttons, notifications, pagination, navigation menu, social icons, form elements and more. At just $6, this kit is a real steal!

Learn more about the Cobo UI Kit at GraphicRiver

2. Storepad Touch Element – User Interface

Storepad Touch Elements - User Interface

This high-res user interface, which is delivered as a PSD file too, is completely customizable with very organized layers. It can be used for tablet/smartphone/website apps or websites. What are you waiting for… it only costs $5!

Learn more about Storepad Touch Elements at GraphicRiver

3. Professional Comprehensive UI Pack

Professional Comprehensive UI Pack

Alright, I agree, the title of this UI kit leaves a lot to be desired. You have a good chance at winning Marketing Bullshit Bingo with it ;)

The UI Kit is downloaded as a PSD file and contains a range of interface elements including buttons, tabs, toggle switches, pagination, tooltips, check boxes, badges and more.

What I like about this kit is, is that it includes idle/hover/pressed states. Not bad for only $5.

Learn more about Professional Comprehensive UI Pack at GraphicRiver

4. Luminous UI Kit

Luminous UI Kit

The Luminous UI Kit is the most complete pack of the four. It includes download managers, tags, buttons, form elements, knobs (dials), progress bar, sliders & bars, navigation menu, pagination, ratings, media player, social media buttons, drop down and image header.

Cost only $7, this UI Kit is sold as a PSD file which can be further edited, with regards to colors, to meet your needs.

Learn more about Luminous UI Kit at GraphicRiver

Do you know of any more resources? Let me know via the comments. Thanks!

Receive FREE updates

Get FREE updates and UX product discounts directly in your inbox by simply signing up for my newsletter. You can unsubscribe at any time.

Your information will never be shared, period!
About Matthew Niederberger

Matthew works as Conversion Optimisation Manager at Ziggo BV. In his free time he enjoys family life as well as digging into online user research material whilst frequently generating some of his own, which he freely shares here on actualinsights.com.

Leave a Reply

Share these actual insights

Get over 150+ Top Udemy Courses for only $10 each!