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:

We’ve decided to keep the site fairly minimal, and let the content speak for itself. Instead of using a custom CMS like we have in the past, we’ve decided to utilize wordpress throughout the whole site to keep things nice and simple.

One of the main things we’re going to be focusing on is the use of our blog (and twitter) to add as much awesome content to the site as possible. We’ve had some huge success with a select group of blog articles in 2011 that really surprised us in terms of new visitors, and we plan on carrying that trend forward by posting lots of tips and resources to help others in our field.

The next thing we want to draw attention to us how our portfolio content is going to be changing slightly from the previous years. In 2011, 80% of our time was actually spent on 2 iPhone apps – Blue Nile, as well as a high end department store based out of Seattle. We love designing software for Mac devices, and are going to be continuing to focus on it as much as possible in 2012. Websites are still on the menu, but we are going to be a little more selective in what we take on because of our revised direction.

We had a great 2011 thanks to our new clients, staff and partners, and can’t wait to get rolling into 2012.

While there are a ton of iOS templates floating around the internet, we found that they all were lacking certain features that we find necessary during our wireframe process.

Inside our templates you’ll find fields for the project name and date to keep things organized as well as individual screen names to keep track of where you are in the project. A big part of iOS design is indicating transitions between screens, so we’ve left some space in between each wireframe to let you indicate what that transition is. Under each frame we’ve also includes a couple lines for you to jot down some quick notes if necessary.

If you look carefully inside each frame, you’ll notice that we’ve created a subtle grid to help you line everything up. There are also darker notches that indicate where the typical status bar, nav bar and tab bar lie on each device, as well as where the keyboard is when it’s popped open.

Try them out for yourself and let us know what you think in the comments below. If there is enough interest, we’ll work on an 8.5×11″ version that’s easier to print off if you have a smaller printer.