Tuesday 31 May 2011

Change concept iPad App

First idea: Costume doll in the centre - wardrobe open on the right-hand side: 

Problem: A lot of empty space on the left-hand side. 

Solution: Costume doll and wardrobe are more in the centre of the screen: 

Problem: Without an animation, which moves the costume doll and the wardrobe to the right position, it would look like the doll jumps form the first position to the next position. The problem with animations in Objective-C is that an animation is based on a serial number of pictures such as in a movie. For a small movement, which is one second long, it is necessary to produce around 23 pictures. This could make the file very big and the performance very slow. Maybe, there is also another solution based on moving the x and y coordinates of a picture, but the examples I found for this case are incorrect. 

The next image shows a tutorial I did to produce an animation based on a serial number of pictures: 

Picture material for the tutorial (Vandenheste, 2011): 


Compromise: I accept that the doll jumps in the prototype and when I have time at the end I will try to integrate a movement of doll and wardrobe. 

Tutorial and picture material from Vandenheste, A. 2011: Welcome to SDK tutorials. Available at: http://web.me.com/vandenf/SDKTutorials/Welcome.html [Accessed 31 May 2011]. 

Picture material for the App from Cos. Available at:  http://www.cosstores.com  [ Accessed 7 June 2011].

Monday 23 May 2011

High quality aesthetic and beauty

One learning goal of my learning agreement is to produce an interface with a high quality aesthetic.  Because of this, I tried to understand the meaning of beauty, which is a part of aesthetic or a synonym of aesthetic.

Platon, a Greek philosopher and student of Sokrates, described in his symposium the feeling that anything that is beautiful is related to a high concept of beauty. This concept is developed during a learning phase in the younger ages. A young person learns that a special form is beautiful. Then the person tries to find this beautiful form the first form in other forms. In this process the person develops its high concept of beauty.
According to Platon, the high concept of beauty is on the top of a hierarchy. Below in the hierarchy are all material things. In the middle of the hierarchy are the invisible things such as the beauty from inside. On an equal level to the higher concept of beauty are perfect things like mathematical formal, law and institutions (Platon, in Jowett, 2011).
The last two examples law and institutions are irritating for me, because I do not see beauty in them. The reason for this might be that Platon lived in the past and he thought that in the future law and institutions could be perfect. However I know, as a person from the modern time, that law and institutions can never could be perfect. Based on this fact, I cannot identify beauty in law and institutions.
Related to the idea of the high concept of beauty and transferred to the area of interaction design, a higher concept of beauty is also excising for interaction solutions. This concept is also developed based on experiences. Therefore it is possible to differentiate between two interaction solutions and to decide which solution is more beautiful. It is the solution with is closer to the high concept of beauty in the area of interaction design.

Jowett, B., 2011: Platon Symposium. Available at: http://classics.mit.edu/Plato/symposium.html [Accessed 23 May].

Wednesday 18 May 2011

Screenshots & Code - final iPhone high fidelity prototype

Home:


Costume doll: 



Wardrobe:




Costume doll change:




The code:

//
//  iPhoneCDoll3ViewController.h
//  iPhoneCDoll3
//
//  Created by Monika Denk on 26.04.11.
//  Copyright __MyCompanyName__ 2011. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface iPhoneCDoll3ViewController : UIViewController <UIScrollViewDelegate> {
IBOutlet UIView *home
IBOutlet UIView *costumedoll1;
IBOutlet UIView *costumedoll2;
IBOutlet UIView *costumedoll3;
IBOutlet UIView *wardrobe1;
IBOutlet UIView *wardrobe1a;
IBOutlet UIView *wardrobe2;
IBOutlet UIView *detail1;
IBOutlet UIView *detail1a;
IBOutlet UIView *detail2;
IBOutlet UIView *detail2a;
IBOutlet UIView *detail3;
IBOutlet UIView *detail3a;
UIPageControl *pageControl;
UIScrollView *scroller;
UIScrollView *scroller2
UIPageControl *pageControl2
UIScrollView *scroller3
UIPageControl *pageControl3
IBOutlet UIScrollView *scrollerW1;
IBOutlet UIScrollView *scrollerW1a
IBOutlet UIScrollView *scrollerW2
}

-(IBAction) showcostumedoll1;
-(IBAction) showcostumdoll2;
-(IBAction) showcostumdoll3;
-(IBAction) showwardrobe1;
-(IBAction) showwardrobe2;
-(IBAction) gohome; 
-(IBAction) gocostumedoll1;
-(IBAction) closeshowDetail1;
-(IBAction) closeshowDetail1a;
-(IBAction) closeshowDetail3;
-(IBAction) wardrobewechel1; 

@property (nonatomic, retain) IBOutlet UIPageControl *pageControl;
@property (nonatomic, retain) IBOutlet UIScrollView *scroller; 
@property (nonatomic, retain) IBOutlet UIPageControl *pageControl2;
@property (nonatomic, retain) IBOutlet UIScrollView *scroller2; 
@property (nonatomic, retain) IBOutlet UIPageControl *pageControl3;
@property (nonatomic, retain) IBOutlet UIScrollView *scroller3; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1a; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW2; 


@end

//
//  iPhoneCDoll3ViewController.m
//  iPhoneCDoll3
//
//  Created by Monika Denk on 26.04.11.
//  Copyright __MyCompanyName__ 2011. All rights reserved.
//

#import "iPhoneCDoll3ViewController.h"

@implementation iPhoneCDoll3ViewController

@synthesize pageControl, scroller;
@synthesize pageControl2, scroller2;
@synthesize pageControl3, scroller3; 
@synthesize scrollerW1;
@synthesize scrollerW1a;
@synthesize scrollerW2;

-(void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
int page = scrollView.contentOffset.x / scrollView.frame.size.width
pageControl.currentPage = page;
pageControl2.currentPage = page;
pageControl3.currentPage = page;
}


-(IBAction) showcostumedoll1 {
[home addSubview:costumedoll1];
}

-(IBAction) showwardrobe1 {
[costumedoll1 addSubview:wardrobe1];
}

-(IBAction) showwardrobe2 {
[costumedoll2 addSubview:wardrobe2];
}

-(IBAction) showcostumdoll2 {
[wardrobe1 addSubview:costumedoll2];
}

-(IBAction) showcostumdoll3 {
[wardrobe2 addSubview:costumedoll3];

}
-(IBAction) wardrobewechel1 {
[wardrobe1 addSubview:wardrobe1a];
}

-(IBAction) gohome {
[costumedoll1 removeFromSuperview];
}

-(IBAction) gocostumedoll1 {
[wardrobe1 removeFromSuperview];

}

-(IBAction) closeshowDetail1
 {
[detail1 removeFromSuperview];
detail2.hidden=NO;
}

-(IBAction) closeshowDetail1a;

{
[detail1a removeFromSuperview];
detail2a.hidden=NO;
}

-(IBAction) closeshowDetail3;

{
[detail3 removeFromSuperview];
detail3a.hidden=NO;
}

//- (void) anzeigen: (id) sender; {


//}



/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
    }
    return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/



// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
for (int i = 2; i < 4; i++) {
UIImageView *imagen = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]];  
UIImageView *imagen2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]]; 
UIImageView *imagen3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]]; 
imagen.frame = CGRectMake((i-1)* 319, 0, 319, 420);
imagen2.frame = CGRectMake((i-1)* 319, 0, 319, 420);
imagen3.frame = CGRectMake((i-1)* 319, 0, 319, 420);
[scroller addSubview: imagen]; 
[scroller2 addSubview: imagen2]; 
[scroller3 addSubview: imagen3]; 
[imagen release]; 
}
scroller.delegate= self;
scroller.contentSize = CGSizeMake(321*3, 422);
scroller2.delegate= self;
scroller2.contentSize = CGSizeMake(321*3, 422);
scroller3.delegate= self;
scroller3.contentSize = CGSizeMake(321*3, 422);
scrollerW1.contentSize = CGSizeMake(1630, 320);
scrollerW1.showsHorizontalScrollIndicator = NO
scrollerW1a.contentSize = CGSizeMake(1630, 320);
scrollerW1a.showsHorizontalScrollIndicator = NO
scrollerW2.contentSize = CGSizeMake(1610, 320);
scrollerW2.showsHorizontalScrollIndicator = NO
scroller.pagingEnabled = YES;
scroller.showsHorizontalScrollIndicator = NO;
pageControl.numberOfPages=3;
pageControl.currentPage=0
scroller2.pagingEnabled = YES;
scroller2.showsHorizontalScrollIndicator = NO;
pageControl2.numberOfPages=3;
pageControl2.currentPage=0
scroller3.pagingEnabled = YES;
scroller3.showsHorizontalScrollIndicator = NO;
pageControl3.numberOfPages=3;
pageControl3.currentPage=0
}
- (BOOL)touchesShouldCancelInContentView:detail1 {
return NO;
}

/*
 // Override to allow orientations other than the default portrait orientation.
 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
 // Return YES for supported orientations
 return (interfaceOrientation == UIInterfaceOrientationPortrait);
 }
 */

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}


- (void)dealloc {
    [super dealloc];
[scrollerW1 release];
[scrollerW1a release];
[scrollerW1a release];
}

@end

Picture material for the App from Cos. Available at:  http://www.cosstores.com  [ Accessed 18 May 2011].