My Essential Design Resources


By

Great tools make a huge difference in how quickly you can complete a task. I’d like to share a few tools and essential design resources I use when designing web applications to help me work faster and more efficiently. This isn’t a massive list of every design resource I could find on the web. Instead, I included just the ones that I and a few of my friends use to create great designs.

Nathan Barry is the author of Designing Web Applications, a complete guide to designing beautiful, easy-to-use web software. He also writes about design and business at NathanBarry.com.

Patterns & Textures

When it comes to patterns and textures Subtle Patterns

When it comes to patterns and textures, there are two sites that have all my needs covered. Subtle Patterns is my favorite, but I’ve also picked up a lot of great resources from Tileables. When using their resources remember that you can modify them in Photoshop to create a look that better matches your design. Besides, who wants to use the defaults?

Tileables

Icons

I have three go-to sources for icons: The Noun Project, Glyphish, and Fugue. Each fills a slightly different need in my design portfolio.

The Noun Project
Often it can be hard to decide what visual metaphor best represents a word. This could be for logos, icons, or just the overall style for your design. So I like to plug a few words into The Noun Project to see the metaphors they used. Sometimes one of their icons fits perfectly.

The Noun Project, what visual metaphor best represents a word

Glyphish
Glyphish is an icon set originally created for tab bars in iOS applications, but I love using them all throughout my designs. The simple style works well on solid colors, doesn’t draw too much attention, and can easily be styled with a highlight (for the selected navigation item). The free set includes 200 great icons, but for $25 you can get the Pro set (which I use) that includes 400 icons at multiple sizes.

Glyphish is an icon set originally created for tab bars in iOS applications

Fugue
Fugue is a massive set of small, 16 pixel square, color icons. These days I prefer to use flat, monochromatic icons, but when a project calls for small icons with detail, Fugue is my set of choice.

Fugue is a massive set of small 16 pixel square color icons

Inspiration

There are tons of sites available for finding inspiration, but only two that I keep coming back to: Dribbble and PatternTap.

PatternTap
When designing web applications, I often want to know how other applications tackled a really specific problems. Rather than looking for a specific style, I want to see how they solved the user-experience problems. This is where PatternTap really shines. Want to see popovers in use throughout designs? There is a tag for that.

Want to see popovers in use throughout designs? try PatternTap

Dribbble
Dribbble is where I turn when I want style inspiration. The screenshots are too small and focused to get an idea for the user experience, but the designers produce some great stylistic work. I’ve followed my favorite designers, so there is always something good in my feed.

Dribbble is where I turn when I want style inspiration

Design Elements

Premium Pixels
For little design elements, Premium Pixels is the best place to go. These are small PSDs that are always wonderfully polished. I’ve used their browser chrome, maps, and several more. It is well worth your time to browse the site.

For little design elements Premium Pixels is the best place to go

The Bricks
The Bricks is a massive template of design elements that look really nice. While I don’t use them myself, several friends do and they absolutely love it! It’s a paid set, but looks to be well worth the money.

The Bricks is a massive template of design elements that look really nice

Mockups

InVision
I sketch all my mockups on paper first, then design in Photoshop. When sharing with a team I like to use InVision to turn my flat design images into a interactive web application. You can define clickable areas and share with the rest of the team for feedback. Comment threads can be started on any design element, so it keeps any discussions focused and in context. You can use it for one project for free; multiple projects start at $15 a month.

When sharing with a team I like to use InVision to turn my flat design images into a interactive web application

Responsive Sketchsheets
Zurb’s Responsive Sketchsheets are great for designing how your application will look at different device sizes. Print them out for free and start sketching!

Zurb's Responsive Sketchsheets are great for designing how your application will look at different device sizes

Mockingbird
If you like to use software to create your mockups, then you should check out Mockingbird. One friend just loves using them. Mockingbird is browser based, so your mockups are available anywhere and easy to share. They also have a “one project free” plan. Paid plans start at $9 a month.

If you like to use software to create your mockups then you should check out Mockingbird

Code

Bootstrap
The fastest way to have clean buttons, forms, and menus in your web application is to use Bootstrap. Created by two former Twitter designers, Bootstrap is an HTML and CSS library for quickly styling your application. Even if you don’t use the entire thing, some of their JavaScript code for popovers and modals are really helpful.

The fastest way to have clean buttons, forms, and menus in your web application is to use Bootstrap

{wrap} bootstrap
The only downside to Bootstrap is that if everyone uses it, all the sites will start to look the same. So you need to customize Bootstrap to get the most value out of it. {wrap} bootstrap sells themes for Bootstrap so you can get a more unique style, while still using all of Bootstrap’s great features. The themes are around $20 each. You can also get free themes from Bootswatch.

wrap bootstrap sells themes for Bootstrap

LESS & SASS
I’m sure I’m not the first person to tell you this, but LESS and SASS are amazing. For those who don’t know, LESS and SASS are CSS preprocessors that add a bunch of extra features. If you’ve ever wished you could seamlessly reuse bits of code or define variables in your CSS, then you want to check out these preprocessors. If you are trying to decide which one to use, check out Chris Coyier’s article on the subject.

ESS and SASS are CSS preprocessors that add a bunch of extra features

jQuery Joyride
When a user first signs up for your application, you should give them a brief introduction to the interface. Instead of a series of screenshots or a wizard process, you want to point out features directly in the interface. The jQuery Joyride plugin from Zurb makes this really easy.

Instead of a series of screenshots or a wizard process you want to point out features directly in the interface with the jQuery Joyride plugin

Start Using Them

That concludes the list of my favorites. Go download the free ones and definitely consider any of the paid options as well. The resources listed above are key to my workflow and to the design process for many other designers as well.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.