ساخت رابط گرافیکی برای اپلیکیشن های iPhone
بیش از 50 درصد تاثیرگذاری یک اپلیکیشن روی کاربر مربوط به رابط گرافیکی آن می باشد.
در این آموزش تصویری شما با نحوه ساخت رابط گرافیکی برای اپلیکیشن های iPhone آشنا می شوید.
این دوره آموزشی محصول شرکت Udemy می باشد.
سرفصل های دوره آموزشي :
- اهمیت Visual Metaphors در App Design
- آشنایی با Roookies
- ایجاد Wireframes / نمونه های اولیه برای برنامه شما
- تنظیم کردن فایل فتوشاپ شما
- ایجاد Shape Layers
- انتخاب یک پالت رنگ
- نحوه استفاده از iPhone Photoshop Template
- ایجاد یک Grid Layout
- طراحی متنی منوها
- طرح بندی Crisp Text
- Nav Bar Colors سفارشی
- سفارشی کردن Tab Bars
- طراحی فهرست View ها
- ایجاد Button States
- برش تصاویر
- برش Button ها یا Iconها
- فایل های نهایی برای ارائه به Developer
- مشخصات برنامه iPhone
- ایجاد یک Layered Interface
- طراحی Template های iPhone
ليست سرفصل هاي دوره آموزشي:
Introduction to iPhone App Visual Design Training Course 02:39
2 The Importance of Visual Metaphors in App Design 06:26 **NOTE** This lesson ends kind of abruptly. Sorry for that. Just move onto Lesson 2. :)
What makes some apps pop over others? Visual metaphors – things that help us connect with what the app does, what the app will do for us. In this lesson I’ll discuss the importance of thinking about what metaphors tie in with your apps functionality.
3 How to Define Visual Metaphors for your App 06:34 Ok so you now know the importance of including visual metaphors, but how do you go about creating them for your app? This lesson will show you how.
4 Course Example App: Roookies 01:36 In this lesson I'll introduce the example app, Roookies, we'll use to illustrate various concepts in the course.
5 Creating the Wireframes/Prototypes for your App 02:48 Before you jump into Photoshop, it's critical that you first have tested prototypes to work from. In this lesson I'll talk about different methods and tools you can prototype your app.
6 iPhone App Interaction Design 06:17 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 and in this lesson I'll teach you how to think about movement and animation in app design.
7 Setting up Your Photoshop File 07:35 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.
8 Creating Shape Layers 09:04 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.
9 Selecting a Color Palette 07:40 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.
10 How to use the iPhone Photoshop Template 07:49 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.
11 Roookies Functionality Overview 02:42 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.
12 How To Design Custom Backgrounds 06:25 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.
13 How to Design a Navigation Bar 18:00 Navigation bars with logos, texture and custom buttons are becoming more prevalent. In this lesson I'll use the Roookies example to teach you the proper techniques for creating a cool, custom Navigation Bar.
14 Establishing your Grid Layout 02:46 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.
15 Designing Contextual Menus 03:46 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.
16 Labeling Your Navigation 03:10 Mobile app screen sizes are not conducive to verbose navigation labels. Plus people just don't expect a lot of words. Learn how to design navigational elements that are intuitive, and simple for users to understand without using descriptive words.
17 Layout out Crisp Text 01:39 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.
18 Laying out Dynamic Text 02:37 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.
19 Customizing Nav Bar Colors 04:08 What if you just want to change the color of your nav bar. Do you have to create a custom graphic? This lesson goes into the simplest way to get a custom color on your navigation bar.
20 Customizing Tab Bars 06:36 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.
21 Designing List Views 06:06 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.
22 Testing Your App Design 04:28 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.
23 Creating Button States 07:15 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.
24 Slicing Images 09:00 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!
25 Slicing Buttons or Icons 07:32 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.
26 Slicing Retina Buttons & Icons 03:06 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!
27 Final Files to Deliver to your Developer 01:25 In this lesson I'll discuss the "checklist" of assets you will need to have ready for your developer. When the project is ready for handoff from design to development having your shizzle in order eliminates a lot of frustrating back and forth asking for assets.
28 iPhone App Icon Specifications 03:28 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.
29 Creating a Layered Interface 08:36 Have you ever seen an app that looks like it's popping off the screen? Like each element has dimension and depth? In this lesson I'm going to teach you how designers achieve that "layered interface" look PLUS I'll talk about how a layered interface relates to animations and movement of UI elements.
30 Why Do you Export Graphics as Transparent .PNGs? 08:23 It is well documented that .png is the preferred image format required for iOS apps, but why?
Jeff Lamarche has written an awesome article explaining why you always want to use Transparent PNG’s for native iOS apps. You can read the full article here, the last paragraph is a great summary.
31 Slicing Animated UI Elements 07:24 Having a background in designing Flash applications has helped me greatly in understanding how to think about animation and the slicing of graphics in mobile apps. It can be tricky because you have to slice the graphics in a way that promotes fluid movement: sliding, bouncing and snapping motions.
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!
32 Bonus - How did they do that? Jamie Oliver App 05:36 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.
33 Bonus - How did they do that? AllRecipes Pro 05:17 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.
SECTION 1: Templates 34 iPhone Design Templates 39.47 MB iPhone 1st Gen Design Template iPhone 4 Retina Design Template Screen specifications document (iPhone & iPhone 4) All templates include hundreds of iOS user interface elements that can be easily customized using Photoshop CS3 or higher (or Pixelmator).
حجم فايل: 621MB