Before you start working in Photoshop, save yourself time and effort by finalizing your wireframes. It's a lot easier to quickly change your hand-drawn wireframe sketches than modify a Photoshop file!
Once you have your wireframes where you want them, here are links to some design templates for Adobe Photoshop to help you create the pre-visualizations: Teehan + Lax iPhone 6 Template Updated Photoshop template for iOS 8 and iPhone 6 from Digital Experience agency Teehan + Lax. Teehan + Lax Android Template Photoshop template for Android devices (also from Teehan + Lax). This one is a little outdated, but still useful.
If you like these templates, give a shout out to @teehanlax on Twitter. They'll appreciate it. - - - If these templates don't work for you (or if you are averse to sweater vests), here are a few other sources to try: 9 Highly Recommended Free Android UI Kit PSDs Choose one that works for you. From TwelveSkip, the blog of Web designer Pauline Cabrera.
Smashing Magazine iPhone PSD Vector Kit Photoshop template with many of the iPhone 4 UI graphics. This is a little out of date. From the awesome web publication Smashing Magazine. If none of these work for you, try searching Google for "iPhone PSD template" or "Android PSD template". - - -
Mini Getaway Stockholm A promotion for the launch of the Mini Countryman in Stockholm, Sweden in 2010. Over 11,000 Swedes downloaded the app and participated in a massive multiplayer augmented reality game that involved "catching" a virtual Mini only visible through the app. Created by creative agency Jung von Matt in Sweden.
Chok! Chok! Chok! A fantastic campaign developed by McCann Hong Kong for Coca-Cola.
Mobile Medic App - Australian Defense Force A recruitment campaign for the Australian Defense Force involving an augmented reality-driven medical diagnosis app. Prospective recruits use the app to try and "diagnose" a patient's billboard. The ad functions as a kind of entrance exam. This campaign won several Cannes Lion awards in 2012 for GPY&R and VML.
Heineken Star Player An engaging iPhone app for interacting and competing with UEFA Champion League football fans during games. More info on game and results here. Created by AKQA.
Band Aid Magic Vision Award-winning augmented reality application produced by LA digital agency 9K9 and global agency JWT.
Diesel Jeans QR Codes combined with Facebook integration make it easy for shoppers to "like" Diesel Jeans.
Once you have an idea of what type of mobile app your group will be designing and what some of the features will be, the next step will be to start sketching out exactly how this app will work. This is done with a technique called wireframing - a rough approximation of what will appear on each screen of your app and how users will interact with it.
Wireframes can be done in many different ways using many different tools - from simple hand drawn sketches to detailed annotated illustrations using robust software tools. For this project you will not need anything more complex than some simple hand-drawn sketches.
The goal of a wireframe is to quickly communicate how the app will look and how it will function for a user. Wireframing involves multiple screens/pages that connect to one another through buttons or other interface elements. Here is one helpful tool that you can print out multiple copies of for quick sketching that still has a "clean" look: a set of printable iPhone 4 wireframe templates:
If you do a little Googling, there are tons of wireframing tools, templates, and toolkits available out there (including this gorgeous toolkit for Adobe Illustrator). Most are overkill for this project. My advice is to stick with sketches and stay focused on the concise communication of your app's layout and functionality.
