HTML/CSS

• Awwwards
• Best Web Gallery
• CSS Based
• CSS Drive
• CSS Elite
• CSS Heaven
• CSS Line
• CSS Mania
• CSS Remix
• Design Fridge *
• Make Better Websites
• Unmatched Style
• Screenfluent
• siteInspire
• The Best Designs
• TheFWA

Web Mobile

• TheFWA Mobile
• Mobile Awesomeness
• CSS iPhone
• jQuery Mobile Gallery

iPhone, iPad & iOS

• iOSpirations
• Mobile UI Patterns
• Pttrns
• TapFancy
• TappGala

* If it’s starred then that means an editor favorite. Please feel free to comment if you feel one is missing. Granted there are also a lot out there so we may not post all galleries.

Clear is a minimal to-do list app that stands apart from the competitors with it’s simple interface and gesture based navigation. As interaction designers, we’re always looking for fun and intuitive ways to allow the user to navigate through content, while always having usability at the forefront. Clear does an exceptional job at introducing gesture based navigation for every task through the app, while making it easy and fun at the same time.

Check out a video of the app in use, or spend the buck and play with it yourself.

Rarepad wireframe templates

We designed these 11×17 templates to quickly sketch down ideas during the wireframe process. Download them, print a bunch, and start sketching.

Download them here.

iOS5 GUI PSD

Teehan & Lax have been putting out these hi-res templates for iOS for a couple years now, and we use them all the time if we need to drop in some standard iOS controls without having to recreate the element ourselves.

Download them here.

Liveview

Designing for the retina screen can be a little bit deceiving when you’re looking at it on your monitor due to the difference in pixel density. To ensure the design is looking how it should, we utilize an app called liveview which displays what you’re working on directly on the device. Handy.

Download it here.

Bjango Photoshop actions

I design all of my apps at retina resolution, then when it’s time to export assets for standard resolution, I can just use one of these actions and it will scale everything appropriately. The only thing to note is that you should constantly be aware that you need to have all attributes (drop shadow values, sizes, ect.) in multiples of 2 so that they are scaled down in the cleanest way possible.

Download them here.

App icon template

This icon template is amazing for quickly creating and exporting icons at all required sizes you need for your app store submission, as well as a couple other cool features.

Download it here

You drop blocks of different shapes to create full lines (like Tetris), but instead of the lines disappearing, they turn into letters instead. You then spell out the longest word you can (with a minimum of three letters) using only adjacent and diagonal blocks, keeping in mind you still have to play Tetris at the same time to survive.The app itself is universal on iOS devices, and they’ve really optimized the iPhone version for the smaller screen size. Since the blocks are much smaller than on the iPad version, when you start spelling out letters, you’ll see a zoomed in version of where your finger is which really helps with accuracy. It’s a really effective tweak (and one of the only) on the iPhone version that really helps when you’re racking your brain to try to find words as quickly as you can.

If you’re a fan of puzzle and word games, you have to give this a shot. It’s such an addictive app and it has a simple refreshing UI, hilarious copy, and one of the best iOS soundtracks I’ve heard. My girlfriend and I even discovered the iPad version is a decent 2 player game if one person controls the Tetris aspect, while the other frantically tries to find words (although I can’t guarantee you won’t start yelling at each other).

They weren’t kidding when they say it’s the game that will punch your brain in the face.

Download it here

To put the tip in context, lets create a simple page icon. We’ll put this on our lovely blue background.

To create our border, I’m going to make make a white rectangle.

Now to actually make it look like a border, I’m going to draw another square over our white square with the “subtract from selection” option turned on in the pathing options. You can also use a keyboard shortcut to do the same thing by holding down option (alt on pc) while you’re drawing the rectangle.

Note that it’s consolidated the new path into our previous layer.

Now lets start adding simple simple lines to fill it out. Select the square shape tool and In your pathing options, make sure it’s set to “Add to shape area (+)”. The keyboard shortcut is to hold down shift while you’re drawing the next shape.

One of my favorite things about using this technique is that it’s super easy to duplicate existing paths. To do so, enable the Path Selection Tool or press “a” for the keyboard shortcut, and select our newly created line.

To duplicate the selected path, hold down option (alt on PC) (notice a little + sign will appear beside the cursor) and drag the shape up a few pixels.

Do the same thing a couple more times to fill out the icon. Notice that all of shapes are still nicely consolidated inside one layer.

Since everything is inside one layer, you can also easily add layer styles which will carry across the entire icon.

Also keep in mind that if you want to consolidate a path from one layer to another, you can always select one of the paths in the layer with the move tool (v) and copy & paste it into the path section of another layer.

My favorite part about this process is that all the shapes are independently editable within the one layer once they are selected with the direct selection tool. Magic!

In order to change the theme you will be able to go to:

Photoshop  /  Interface…  /  Color Theme (Swatches)

And for the rest of the preview, here’s the video: