A little idea for funny iPhone 4 wallpapers

June 9th, 2010 by Hugo

Are you designing wallpapers for the new iPhone’s gorgeous display?, what about to make funny little things with the folder’s slide effect?

Here’s an example, you get the idea?

Mockup of possible wallpaper for iPhone 4

Original photo by Reasonably Clever Chris.

Reconstructing the iPadMadCamp, part 2

May 31st, 2010 by Joni

This is the second half of my reconstruction of Saturday’s iPadMadCamp. See also part 1.

Fran from Got Feeling?: Cosas nuevas en iPad

Interesting new features in iPhone OS 3.2, the iPad operating system: reusable gesture recognition with UIGestureRecognizer, possibility to copy files to and from an application, file type associations. How to maintain compatibility with iPhone.

A solid, technology-heavy talk. There were many code examples, does someone know where to find them?

Jesús Gorriti: Diseño para iPad

User experience design for iPad: use hand movements instead of taps, do prototype testing, and don’t forget there’s a difference between navigating in content and performing a process. A interesting analogy with an amusement park: if it’s well designed you find things easily and enjoy both the attractions and strolling in the park.

Hugo from bilambee (hey, that’s us!): Fun with the iPad accelerometers

Introduction to the accelerometer and orientation APIs. Do on-device testing because the simulator doesn’t give you the face up, face down, and “unknown” orientations.

Source code from the demo is available.

Keko: Editar un libro con la que está cayendo

Keko is starting a digital publisher called Ediciones del desastre dedicated to turn-of-the-century mystery stories from Latin America. Apparently there are some very good ones and they are not well known at all. He needs help with the technical part.

This talk spurred a discussion on e-books:

  • Are e-books worth the trouble?
    • For the reader: e-books are not easier to read than paperbacks
    • … but the publisher and writers operate with higher margins because printing is expensive.
    • Notes you make in e-books could be shared with others, if someone would write the software
  • For writers: Apple book store or a small digital publisher?
    • Small publishers can dominate niche markets
    • … but for maximum visibility a writer will want to be in the big store.
    • On the other hand, trying to appear in the list of “most popular” is an exercise in futility
    • … but people who read more than one book per year will know to look beyond Dan Brown.

All in all, it was a really stimulating event. ¡Muchas gracias a los organizadores y los participantes!

Reconstructing the iPadMadCamp, part 1

May 30th, 2010 by Joni

Yesterday’s iPadMadCamp was an inspiring experience, with interesting talks and stimulating conversations. In case you missed it, this is what we talked about.
If you can fill in some details, like where to find the presentation notes, drop us a line!

Manuel from (where?): Señoras que intentan hacer apps para iPad (y que mueren en el intento)

Creating seems complicated when you go into iPhone development from a design background. A lot of rapid prototyping can be done without code: setting background images, splash screens, app icons, custom buttons, custom tab bar icons. Amazingly these things are not explained in Apple’s introductory tutorials.

Javier from Vostok: Principios de diseño para iPad

This is what we have learned of user interface design for multitouch tablet devices. An awesome talk with great insights, such as:

  • If web = lego, then iPad = duplo. Omit needless elements. Forget complicated information architectures.
  • The iPad is heavy and the curved back makes it unstable on a table. One hand has to hold it still, so place controls near the bezel. Both hands on screen is uncommon.
  • Place navbars on top to prevent “tummy taps.”
  • Don’t assume knowledge of PC metaphors.
  • Use navigation idioms: Vertical transition shows more elements of the same collection. Horizontal transition switches to a different collection.

Professionally delivered talk and well designed slides. I look forward to seeing more of your work, Javier!

iPadMadCamp notes by @sebadog
Edit On the right, @sebadog‘s more visual notes from this and the following talk are a must-see :)

The talk provoked a long conversation. Some of the highlights were:

  • Digital magazines now are designed like the first cars: take a horse-cart, remove the horse, add an engine. The future evolution will be interesting.
  • Interesting idea: Comic books have developed a form of expression that is rich in graphics and easy to follow. The best iPad apps are like comic books in that respect. What we know about comics is directly applicable to app design.
  • Content apps: Load content on-demand from a cloud service, or save everything in local storage? The iPad is not likely to get significantly bigger hard drives because Apple is like that. Apparently in a few years fast mobile Internet will be available everywhere, even on planes, so this will be a no-issue. But we’re not there yet.

Mark from Vostok: Uso de movimiento en iPad

Simulated inertia and friction feel more natural than constant speed in animated transitions. So does animating along a curved path versus along a straight line. Animation is best used sparingly, e.g. to provide continuity when the content of the whole screen changes.

This reminded me of the story behind the Switcher for the 512K Mac:

“I think it might be confusing to switch from one application to another without any feedback,” he told me. “What if someone switches accidentally? Maybe you could use animation to make a smoother transition.”

Part 2 is out now.

Fun with the iPad accelerometers

May 29th, 2010 by Hugo

Here are the source files used during bilambee’s lightning talk at iPadMadCamp.

iPadAccelAppDelegate.m
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
  2.    
  3.     // Override point for customization after application launch.
  4.  
  5.     // Add the view controller's view to the window and display.
  6.     [window addSubview:viewController.view];
  7.     [window makeKeyAndVisible];
  8.  
  9.  
  10.  [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
  11.  
  12.  [[NSNotificationCenter defaultCenter] addObserver:viewController
  13.             selector:@selector(orientationChange)
  14.              name:@"UIDeviceOrientationDidChangeNotification" object:nil];
  15.  
  16.     return YES;
  17. }
iPadAccelViewController.h
  1. @interface iPadAccelViewController : UIViewController {
  2.  
  3. }
  4.  
  5. -(void)orientationChange;
  6.  
  7. @end
iPadAccelViewController.m
  1. -(void)orientationChange {
  2.  UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
  3.  
  4.  switch (orientation) {
  5.   case UIDeviceOrientationFaceUp:
  6.    NSLog(@"* FaceUp");
  7.    break;
  8.   case UIDeviceOrientationFaceDown:
  9.    NSLog(@"* FaceDown");
  10.    break;
  11.   case UIDeviceOrientationLandscapeLeft:
  12.    NSLog(@"* Left");
  13.    break;
  14.   case UIDeviceOrientationLandscapeRight:
  15.    NSLog(@"* Right");
  16.    break;
  17.   case UIDeviceOrientationPortrait:
  18.    NSLog(@"* Port");
  19.    break;
  20.   case UIDeviceOrientationPortraitUpsideDown:
  21.    NSLog(@"* PortDown");
  22.    break;
  23.   case UIDeviceOrientationUnknown:
  24.    NSLog(@"* Unknown");
  25.    break;  
  26.   default:
  27.    break;
  28.  }
  29.  
  30. }

Any questions?

8 ways to have fun in the office with an iPad

April 28th, 2010 by Joni

Or: How to Get the Most out of FlipRate

Love your iPad and want to use it in every possible occasion? Here’s how you can use FlipRate at the office.

  • Rate my lunch

    In small places your lunch options are pretty much eating out or bringing lunch from home. Bob had prime rib delivered to work from a nearby restaurant, what grade does he get?

  • The funniest YouTube video

    Ah, YouTube, the great time waster. Why not make it more social and rate the videos with FlipRate? Does the Trololo guy beat the Trololo cat, or did they both get old overnight?

  • Office party pictures

    What, Janice brought a camera to the party? And actually took pictures? And has got embarrassing photos of everyone? Gather around and rate the funniest low moments.

  • Clothes

    Somebody’s wearing an awesome tee-shirt today? A goofy hat? Support showing a little color and personality with a good grade.

  • Pastries and cakes

    The time got short in the morning and you didn’t have time to have breakfast? And then Jake brought doughnuts and other pastries to the office to celebrate a birthday? Full points to Jake, plus you can use your iPad to show everyone what you think of each cake while you eat.

  • Gadgets

    Your colleague just got a Nokia N-whatever or a Google something with something-droid and is showing it to everyone? Show them what score you think that contraption deserves.

  • Pranks

    I’m sure everyone has an idea of a prank waiting to be pulled. For example where I work there’s this guy who doesn’t use sugar in his coffee, says it’s too sweet. Instead he uses artificial sweetener from a small dispenser instead. More than once it has occurred to me to trick the dispenser so that the pills just keep flowing when it’s used. Have your iPad ready to rate the reactions :)

  • Office games

    The paper bin basket ball is a classic example. Do you get TPS reports that your boss keeps saying you are supposed to fill but you always have something more important to do? Those YouTube videos don’t rate themselves… Anyway, what do you do about that stack of long-overdue forms? Instead of just putting them in the bin you can make them into balls and throw from a distance. Grade the good throws!

The Wood Age

April 21st, 2010 by Hugo

You know, the Stone Age, the Copper Age, the Bronze Age, the Iron Age… and now, the Wood Age. I bet if you turn on your iPhone (or iPad if you are a lucky one) you will find traces of wood in many of your favourite Apps.

YouTube icon

YouTube icon on iPhone

Well, it is a small detail, but you have wood in the TV case.

iBooks

Main library in iBooks

Wood everywhere, like a real piece of furniture.

Classics

Classics screen

Awesome Note

Awesome Note screen

NewsRack

NewsRack screen

Articles

Articles for iPad screen

Tipulator

Tipulator screen

Flashcard touch

Flashcard touch screen

Rhema

Rhema screen

Dunnit!

Dunnit! screen

FlipRate

Main screen of FlipRate

Yeah, our last (and first) creation, pretty wood table for all the iPad screen glory.

I.D. Wood

I.D. Wood screen

Even a complete wood guide app!

Maybe this Wood Age will be only a temporary craze, and becomes old fashioned soon (like rounded corners and gradients) but I think it makes lot of sense because, in the deep of our heart, we desire to get back to this…

Image of the first Apple computer, the Apple I

Introducing FlipRate, for iPad

April 3rd, 2010 by Hugo

Well, after some weeks of work we’re pleased to announce our very first application, FlipRate.

Sneak peek of our first app for iPad

Go to iTunes App Store

How to get a photo of your app in an iPad without having one

March 23rd, 2010 by Hugo

Maybe you’ve wondered how it’s possible that some people (like Panelfly or even us) have photos of iPads with their apps in them weeks before the devices arrive to the market.

Well, the trick is to take the official photos by Apple and replace the screen content. It’s not difficult but a little tedious, especially getting the perspective transforms right. To save time and effort you can use this Photoshop template that does all the work you. Replace the placeholder images with your screenshots and you’re done!

Your app in an iPad without having one

First step

Download (15 MB)

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.

Second step

Open the template in Photoshop. Double click the layers named “Double click!” (pretty simple, huh?) or right click on the layer and choose “Edit Contents”. The placeholder image should open in a new window.

Photoshop layers you must change in order to get a populated iPad

Now paste a screenshot of your app on top of the placeholder called “Your app”, save the document and close it. The iPad must have now your app inside. Repeat for the second screen.

Photoshop layers you must change in order to get a populated iPad

Third step

Tweet it! :)

Sneak peek of our first app

March 23rd, 2010 by Hugo

Sneak peek of our first app for iPad

We’re very excited about this, our very first app for iPad, stay tuned!

iPad wireframe templates

March 14th, 2010 by Hugo

The iPad is coming and the device dimensions are now final! We like to sketch our initial user interface design the old-school way with pen and paper, so we use these blank printed life-size mock-iPads. End to the fear of a blank canvas! A4 and Letter sizes included, of course.

iPad wireframe templates, ideal for sketching

Download

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.