This design course is for anyone with beginner-level knowledge of Photoshop. From this class you will learn the comprehensive process of iPhone app design, including prototyping, user experience design, interaction design and visual design where you will learn to make your app look great and sell in the App Store.
Give your iPhone app a fighting chance at app store success
9 out of 10 iPhone apps fail to make a profit. And in many cases, the app design is to blame. This course will teach you everything you need to do to design an app that makes your customers so happy they’re telling all of their frends about it.
Is this training right for you?
Maybe, maybe not! Ask yourself the three following questions:
Do you have Beginner-Level knowledge of Photoshop?
To get the most out of DesignBoost courses, you must have beginner level knowledge of Photoshop. Yes? Move to number 2.
Do you need to improve your product design?
Do you have an iPhone, iPad app or landing page design that needs a design boost?
Do you have 7 days to learn something new?
All courses are self-paced and accessible to you any time after purchase. However if you have 7 days to spend, you can complete the courses in as few as 7 days.
Create your iPhone App Design in 7 Days
Day 1: Learn how to make your app design stand out. On Day 1 we’ll dive into Lessons 1 – 4. These lessons teach what makes a user interface stand out – visual metaphors. We look at examples of what works, what doesn’t and why. You’ll create a visual metaphor concepting sheet where you define possible metaphors for your own app design. From there we get into app prototyping, reviewing tools and methods for defining the flow of your app.
Day 2: Learn about the sizing and specifications of iPhone app design elements. In lessons 5 – 10, you will learn about interaction design, the importance of it, and how to plan to captivate your users with cool interaction design. From there we’ll talk about how to prepare for starting the visual design process by setting up your Photoshop file properly. We’ll then look at creating icons using shape layers. From there we’ll talk about how to select a color palette that fits the audience you’re targeting and the use of the app. You’ll also learn how to use the provided iPhone app templates, and we’ll tour the example app used in the course Roookies.
Day 3: Learn to create user interface elements. In lessons 11 – 14, I’ll teach you how to create a variety of user interface elements, including backgrounds, nav bars and menus. I’ll also talk about the purpose and importance of defining a grid for your layout.
Day 4: Learn to design for dynamic content. In lessons 15 – 18, we’ll jump into how to not confuse users with your navigation labeling, tricks for laying out crisp text, how to design for dynamic text, and how to customize iOS’ standard nav bar colors.
Day 5: Learn to design custom list views and tab bars. In lessons 19 – 22, you will learn to design cool looking list views, tab bars, button states, plus find out how to test your app design early to catch sizing mistakes!
Day 6: Slicing Images In Lessons 23 – 27, you will learn how to prepare your final .png images that your developer will use in the final app.
Day 7: Preparing files for your developer. In Lessons 28 – 30 + bonus lessons, I’ll have some additional tips on prepping files for your developer plus instruction on how to create a layered interface. Also included on Day 7 are two bonus lessons that show how two cool apps created their design.
Get iPhone templates and lessons on how to use them
The step-by-step video training includes a variety of downloadable iPhone Photoshop templates and teaches the fundamentals of app design.
- 31 high-def training videos covering everything you need to know about iPhone app design
- Template files included to follow along (in PSD and Pixelmator formats)
- Screen specifications and element sizing for iPhone (PNG format)
Who is this Course for?
This course is for developers, designers and entrepreneurs who want to learn how to design a successful app. This course is also about “how to make it pretty” but at the end of the day, apps are “products” and the design plays a huge role in the success of that product.
It’s super important to me that you understand the requirements for this class. In order to get the most out of this class, you need to have a copy of Photoshop CS3 or higher and have beginner-level knowledge of the program. Without this basic knowledge the training will probably move to fast for you. If you want to find some basic Photoshop classes, try www.lynda.com.
Who is this Course NOT for?
If you don’t have a copy of Photoshop and have no desire to learn anything Photoshop related, this course is not for you. If you have an app idea you want to make it a reality, but don’t have a true desire to do the design work yourself, check out Crowdspring or 99designs to round up freelance design help.
- Visual Metaphors (Jen goes over why we use visual metaphors and how user interface is a HUGE selling point)
- Color, Typography, Layout and Tap-able Targets (Picking a color scheme, size and spacing of buttons, layouts based on tactile finger movements)
- Working With Templates (Why you should start small and size up)
- Previewing Your Design (Previewing design on your device and why it’s CRITICAL)
- Preparing The Artwork For Your Developer (How to systematically organize and distribute your final design)
Here we will look at some examples that illustrate the importance of using visual metaphors in your app’s design.
This lesson will show you exactly how to define visual metaphors for your app that will give more visual and conceptual impact with users.
In this lesson I’ll introduce the example app, Roookies, that we will use to illustrate various concepts in the course.
Before you jump into Photoshop, it’s critical to design based on tested prototypes. In this lesson I’ll talk about different methods and tools you can prototype your app.
In this lesson I’ll teach you how to think about the flow, movement and animation in app design. Mobile design that rocks has a sense of flow and purpose in its animation. It is part of the visual designer’s job to define this movement.
It’s easy to get confused about the sizing, dpi etc of mobile app design files. In this lesson I’ll clarify exactly what size and dpi you need to use for both retina and non-retina screens.
The proliferation of screen sizes have made the use of shape layers a very important aspect of designing your app. In this lesson I’ll teach you about how to create shape layers and why they’re so important.
Selecting a color palette for mobile apps is a unique proposition because of the variety of environments we use our mobile devices. In this lesson I’ll teach you how to select a color palette that works with your brand and the mobile environment.
Starting with a template is the quickest way to get started in the visual design process, whether you’re creating a completely custom layout or not. The grid and tap-able targets are defined and ready for skinning. In this lesson I’ll give you a tour of the file and how to use it.
Understanding how your app moves a user down a path plays huge part in visual design. In this lesson I’ll explain how Roookies functionality affects its form.
Custom backgrounds can make a huge impact on the look of your app. In this lesson I’ll teach you a variety of ways to design a background that doesn’t overwhelm the balance of your design.
Establishing a grid for your mobile app’s layout is the foundation of a solid design. In this lesson I’ll teach you how to set up the grid for and iPhone interface design.
Contextual menus are a great way to keep users focused on one piece of content, without moving them around to other screens. In this lesson I’ll teach you how to think about contextual menus by showing you how the Roookies contextual menus are designed.
There are small details that separate “good” and “great” design. Crisp text is one of those things. In this lesson I’ll show you some tricks for how to get your text to look super crisp and polished.
Many applications display text (or data and images) that change based on time, location etc. For this reason it is VERY important to incorporate into your layouts a plan for how different lengths of text will be handled on various screens. In this lesson you will learn how to design layouts that don’t break when the content changes.
Customizing the tab bar of your application is a great way to add a custom look to an otherwise standard iOS interface. Learn in this lesson how to design a great looking, custom tab bar.
List views are probably one of the most important and under-emphasized elements in mobile app interface design. Learn in this lesson why they’re so important and how to drive users down a path to execute the task they’re after.
One of the most shocking things I learned early in mobile app design is how different an interface design can look in Photoshop versus the device. In this lesson I’ll teach you a variety of ways to test the sizing and spacing of on screen elements during the design process.
For those familiar with web design, the concept of active, hover, and inactive button and link states is nothing new. But how do button and link states work in a mobile environment where there technically cannot be a “hover” state? In this lesson I’ll talk through that question and show you exactly how to create super delicious button states.
If you’ve ever sat next to a developer and watched them work in Interface Builder you can see how easy it is for us designers to make their lives a total pain in the ass. In this lesson I’m going to teach you the best way to size and slice images to make your dev’s life a whole lot easier!
iOS requires all interface design elements to be in transparent .png format. In this lesson I’ll teach you how to get your images exported using Photoshop.
Exporting graphics for development can be a huge time suck. In this lesson I’ll show you how to streamline the process to save valuable time!
In this lesson I’ll discuss the checklist of assets you will need to have ready for your developer.
Icons are easy to goof, either from a sizing/resolution or graphics specs standpoint. In this lesson I’ll describe exactly what you need to provide to your developer for your icons to work properly on both 1st Gen/retina iPhone screens and in the iTunes store.
Have you ever seen an app that looks like it’s popping off the screen? Like each element has dimension and depth?
It is well documented that .png is the preferred image format required for iOS apps, but why?
Slicing your graphics properly from the get-go will save you tons of time redoing everything when you see the prototype and it doesn’t look the way you intended. This lesson will give you some helpful tips!
Are you working on an app that does not require a completely custom interface, but some branded elements? In this example I’ll talk about how AllRecipes Pro skins their app without breaking out of using standard iOS interface elements.
It’s fun to look at other apps and dissect “how they did it”. In this example I’ll look at the Jamie Oliver’s recipe application, which is an incredible example of custom graphics and elegant interface design.